AutoCompleteTextField + GoogleMap in Codename One - codenameone

I tried to put an AutoCompleteTextField (used for address completion) and a Google Map peer component (using the cn1lib) in the same container, but it doesn’t work fine on real device (it's ok only in the Simulator).
Using a BoxLayout.y, the completion list appears only on iPhone but not on Android.
Using a BorderLayout.totalBelow, with Google Map in the center and the AutoCompleteTextField on the north, after selecting an address from the autocompletion list, the AutoCompleteTextField disappears (tested on iPhone).
Could you please give me any hint to make the two components working correctly? The cn1lib I’m using is updated. Thank you
Container innerContent = new Container(BorderLayout.totalBelow());
// Start content
AutoCompleteTextField autoCompleteTextField = (AutoCompleteTextField) InputUtilities.getAutoCompleteAddress(true);
autoCompleteTextField.setUIID("BaseStructureForm-InnerBoxMap");
// Google Map
final MapContainer googleMap = new MapContainer() {
#Override
public Dimension calcPreferredSize() {
int width = contentBox.getWidth() - CN.convertToPixels(10, true);
int height = CN.convertToPixels(50, false);
return new Dimension(width, height);
}
};
innerContent.add(BorderLayout.NORTH, autoCompleteTextField);
innerContent.add(BorderLayout.CENTER, googleMap);
// End content
autoCompleteTextField.addListListener(e -> {
String selectedItem = (String) ((com.codename1.ui.List) e.getSource()).getSelectedItem();
String place_id = (String) autoCompleteTextField.getClientProperty("place_id");
//googleMap.setCameraPosition(new Coord(43.0511, 10.8892274));
GoogleMapUtilities.setMapPlace(place_id, (latitudine, longitude) -> {
googleMap.zoom(new Coord(latitudine, longitude), 3);
});
});

Related

React google maps API how to make the marker icon fixed size

I've a google map with some markers, but when I zoom in and out the marker icon size changes, is there any way to make that size fixed?
const [markers,setMarkers] = useState([])
function generaMarker(elementolo,index){
var mark = <Marker draggable={modify===true?true:false} onDragEnd={(e)=>modify===true?handleSpostamentoMarker(e,index):null} onClick={(e)=>eliminate===true?deleteMarker(e,index):handleClickEl(elementolo)} label={elementolo.Nome} title={elementolo.Nome} icon={{url:getIcon(elementolo),s : new window.google.maps.Size(50,50),labelOrigin: new window.google.maps.Point(25,60)
}} position={new window.google.maps.LatLng(elementolo.Posizione.Lat,elementolo.Posizione.Lng)}/>
var nonDarmele = markers;
nonDarmele.push(mark);
setMarkers(nonDarmele)
return mark;
}
I use this function to render the markers and memorize them in the arrsy
if I write setMarkers((prev)=>[...prev,mark]) it crashes for the re renders even if the markers array is not rendered
I've tried also using a listener to the map zoom changes for setting new Marker icon sizes but I get that setIcon() method doesen't exists
function handleMarkerSize(map){
var zoom = map.getZoom()
var markerWidth = (zoom/9)*20;
var markerHeight = (zoom/9)*34;
//scaledSize: new window.google.maps.Size(50,50)
markers.forEach((mark)=>{
console.log("ooo",mark)
mark.props.icon = {
url: mark.props.icon.url,
scaledSize: new window.google.maps.Size(markerWidth,markerHeight),
labelOrigin: new window.google.maps.Point(25,60)
}
})
}
I'm using #react-google-maps/api
The map and markers visualization works fine, after rendering all the Markers there is no re render (only if in the function generaMarker() I use setMarkers with prev, and that make it crash)
Thanks for your help

How to get the current swipe tabs selected index value in codename one?

I am using codename one swipe tabs dynamically to prepare some radio button but on swiping of tabs getSelectedIndex () method is giving the previous tabs value(previous in the sense suppose I move my tabs from 0 to 1 so it's giving me 0) so how to get the current tab value at which my tab is because on basis of this selectedIndexTab value I want my radio button to get selected.
Here is my code
TableLayout t1=new TableLayout(1, 5);
radioTypeContainer=new Container(t1);
for(i=0;i<5;i++){
t.addTab("Tab2"+i, new SpanLabel("Some text directly in the tab"));
firstTab = new RadioButton[i];
plain = new RadioButton("");
plain.setName("rdb"+i);
rbt =new RadioButton();
rbt.setName("rbt"+i);
radioTypeContainer.add(rbt);
finalRadioList.add(rbt.getName());
finalRadioList.add(t.getTabUIID());
}
borderLayoutContainer.add(BorderLayout.SOUTH,radioTypeContainer);
t.addSelectionListener((i1, i) -> {
Log.p("====***======="+t.getSelectedIndex());
});
Thanks in Advance
newSelected in selectionchanged method gives the current position of tab as shown in below code.
t.addSelectionListener(new SelectionListener() {
#Override
public void selectionChanged(int oldSelected, int newSelected) {
Log.p("====***======="+newSelected);
}
});

setHidden is not working codenameone

I used setHidden(true) and it doesnt work. The container and its components are visible if setHidden is used instead of setVisible. Moreover the problem I am getting while using setVisible is that the background of the container just pop up after the components inside the container animates from top. How can I make the background of the container move frm top along with its components.
questionAnswerContainer = new Container(new BoxLayout(BoxLayout.Y_AXIS));
titleDialog = new Label("Yuppie!");
titleDialog.setUIID("GameDialogLabelBold");
body1 = new Label("Let’s celebrate");
body2 = new Label("with another");
body3 = new Label("drink");
Button ok = new Button(theme.getImage("playIcon.png"));
dialogContainer = (BoxLayout.encloseY(titleDialog, body1, body2, body3, ok));
dialogContainer.getAllStyles().setBgImage(theme.getImage("yuppieDialog.png"));
dialogContainer.setPreferredW(screenWidth * 2 / 3);
dialogContainer.setPreferredH(screenWidth * 2 / 3);
add(BorderLayout.CENTER, LayeredLayout.encloseIn(questionAnswerContainer, FlowLayout.encloseCenterMiddle(dialogContainer)));
dialogContainer.getParent().setVisible(false);
// dialogContainer.setHidden(true); //it doesnot work, the container and its components are visible if setHidden is used instead of setVisible
f.revalidate();
public void checkIfCorrect(Button checkBtn, Form f) {
dialogContainer.getParent().setY(-Display.getInstance().getDisplayHeight());
dialogContainer.getParent().setVisible(true);
// dialogContainer.getParent().setHidden(false);
}
Give a try to f.invalidate(); as well.
For me, sometimes combination of both invalidate and revalidate works.

move the marker to selected location on MapContainer

In my application, user can select a location on map and save its latlong. I'm using Mapcontainer to display map. When user selects a location, a marker should be displayed and if another location is selected then the marker should be moved to that location. How can I achieve it?
You can achieve this using map addTapListener(), see below code:
final MapContainer map = new MapContainer();
map.addTapListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent evt) {
map.clearMapLayers();
map.addMarker(encImageMarkerIcon, new Coord(map.getCoordAtPosition(evt.getX(), evt.getY())), "", "", (evt1) -> {
//whatever you want the marker to do when touched
});
form.revalidate();
}
});

WPF FlowDocument Displays *Some* Images But Not Others

This is the code I'm using to create the Image that I'm inserting into a FlowDocument.
private static Image GetImage(string url)
{
if (url == null) throw new ArgumentNullException("url");
if (!(url.StartsWith("http://") || url.StartsWith("https://") || url.StartsWith("ftp://")))
return null;
var uri = new Uri(url, UriKind.Absolute);
var bmpImg = new BitmapImage(uri)
{
CacheOption = BitmapCacheOption.OnDemand,
};
if (bmpImg.CanFreeze) bmpImg.Freeze();
var img = new Image
{
Source = bmpImg,
Stretch = Stretch.Uniform,
Height = 120,
Width = 120,
};
return img;
}
When I create a document and insert an image from my server with
Designer.CaretPosition.Paragraph.Inlines.Add(image);
everything works fine - image displays as expected. Also, the main Google Logo image works fine, but the HackaDay Logo and others just display a blank image.
What could be the reason for this?
I think that some websites have hotlink protection. For example in my website I can link a photo in every page that it is in my domain and it works well, however if you try to link a photo in other domain, the photo doesn't load.

Resources