Develop Reference

Adding dynamic markers on mapbox does not work with SymbolLayer

I am currently developing android map using mapbox sdk, and I want to add multiple markers when user click on one button. and I type below in my onStyleLoaded but it's not showing anything
List<Feature> symbolLayerIconFeatureList = new ArrayList<>();
symbolLayerIconFeatureList.add(Feature.fromGeometry(
Point.fromLngLat(31.995560, 34.767070)));
symbolLayerIconFeatureList.add(Feature.fromGeometry(
Point.fromLngLat(31.995979, 34.744110)));
symbolLayerIconFeatureList.add(Feature.fromGeometry(
Point.fromLngLat(31.995010, 34.767380)));
style.addImage("charge-icon-id", BitmapFactory.decodeResource(
MapboxNavigationActivity.this.getResources(), R.drawable.map_marker_dark));
style.addSource(new GeoJsonSource("charge-source-id",
FeatureCollection.fromFeatures(symbolLayerIconFeatureList)));
SymbolLayer destinationSymbolLayer = new SymbolLayer("charge-layer-id", "charge-source-id");
destinationSymbolLayer.withProperties(iconImage("charge-icon-id"),
iconAllowOverlap(true),
iconIgnorePlacement(true)
);
style.addLayer(destinationSymbolLayer);
May I ask what are the problem?

It's a bit tough to say without some more context/information, but I'm guessing that the issue is related to the order in which you're adding the source, layer, and image. Take a look at this example: https://docs.mapbox.com/android/maps/examples/marker-symbol-layer/
You'll want to add the image, source, and layer before the style is loaded. You can then make additional adjustments/add data when the style is loaded using the onStyleLoaded listener.
Disclaimer: I work at Mapbox.

Use two osmdroid Map Views in one Activity

I want to use two Map Fragments, each with a different fragment, side-by-side in an activity. The left map is planned to show a overview over a specific area, the right one zooms in to a specific point.
The problem I'm having is, that only the first (left) map fragment is being correctly shown, the second (right) one shows a world map:
Zooming is not working on the right map.
Here is a part of the code I'm using:
private void initializeMap()
{
MapTileProviderBasic tileProviderOSM = new MapTileProviderBasic(getApplicationContext());
ITileSource tileSourceOSM = new XYTileSource("OpenFireMap", null, 1, 18, 256, ".png", new String[]{"http://openfiremap.org/hytiles/"});
tileProviderOSM.setTileSource(tileSourceOSM);
TilesOverlay tilesOverlayOSM = new TilesOverlay(tileProviderOSM, this.getBaseContext());
tilesOverlayOSM.setLoadingBackgroundColor(Color.TRANSPARENT);
OsmFragment frag = (OsmFragment) getFragmentManager().findFragmentById(R.id.osmMap);
osmMap = frag.getMap();
osmMap.setMultiTouchControls(true);
osmMap.getOverlays().add(tilesOverlayOSM);
MapTileProviderBasic tileProviderOSMDetail = new MapTileProviderBasic(getApplicationContext());
ITileSource tileSourceOSMDetail = new XYTileSource("OpenFireMap", null, 1, 18, 256, ".png", new String[]{"http://openfiremap.org/hytiles/"});
tileProviderOSMDetail.setTileSource(tileSourceOSMDetail);
TilesOverlay tilesOverlayOSMDetail = new TilesOverlay(tileProviderOSMDetail, this.getBaseContext());
tilesOverlayOSMDetail.setLoadingBackgroundColor(Color.TRANSPARENT);
OsmFragment fragDetail = (OsmFragment) getFragmentManager().findFragmentById(R.id.osmMapDetail);
osmMapDetail = fragDetail.getMap();
osmMapDetail.setMultiTouchControls(true);
osmMapDetail.getOverlays().add(tilesOverlayOSMDetail);
}
If I change either one of the fragments to a GoogleMaps fragment, the osmdroid map loads correctly.
Any ideas why this is happening and how I can fix it? I'm using the newest osmdroid version from gradle (v5.6.4)
Thanks in advance.
EDIT:
I changed the variable declation, but it still doesn't work.

You have to create separate TilesOverlays for different map views. Currently you are using the single overlay in two fragments, this can not work.

So I found the solution. The problem was, that the MapView is within a fragment and the fragment is a custom class which had the hardcoded ID's and layouts in it. The solution which worked for me was duplicating the custom fragment class and editing the ID and Layout. Then in MainActivity I had to change the varaible declaration and the cast from OsmFragment to OsmFragmentDetail
Now both maps are showing the wanted content.

If I don't want cluster marker on here map, what shoud I do ? Please

I'm trying show all my map makers on Here maps, but I don't want cluster them to a number, like image. I used Here maps app, markers not clustered Here Maps.
What should I do ?.

You can find information about it here.

You can use the ClusterLayer class.
ClusterLayer cl = new ClusterLayer();
If you want to customize the image use their ImageClusterStyle & ClusterTheme.
ImageClusterStyle imageCluster = new ImageClusterStyle(img);
ClusterTheme theme = new ClusterTheme();
theme.setStyleForDensityRange(2, 9, imageCluster);
cl.setTheme(theme);

Unable to close InfoWindow after switching to new Visual Refresh

I decided I'd give the new Visual Refresh that was announced at Google I/O 2013 a try, since all it takes to get the new basemaps/UI is a single property/query string.
JavaScript API
function initializeMap() {
var myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
google.maps.visualRefresh = true;
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
-- OR --
Static Maps API
https://maps.googleapis.com/maps/api/staticmap?center=1600%20Amphitheatre%20Parkway%20Mountain%20View,%20CA%2094043&size=400x400&sensor=false
And it worked great, my maps now use the new basemap tiles and UI.
However since the change, when I open an InfoWindow on a mobile device (using the Javascript API), the close button in the top right hand corner of it doesn't seem to respond any longer. Has any one else observed this? I'm trying to find out if it's a bug with my code or with Google's.
UPDATE:
Here's a basic Fiddle I'm using to test with. Works on Chrome, IE & Firefox but not on mobile devices (Only been able to try android so far)
http://jsfiddle.net/vG3WE/1

I noticed the same effect on some Apple devices. Consider this as a very dirty hack, but if you don't want to wait until this bug is fixed, you can implement the close event yourself so that it should also work on mobile devices:
First of all you need to define an ID for your info window content (you'll need that later on)
var contentString = '<div id="infowindowContent">You should be able to close me</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
Then you need to attach a listener for the domready-event of this infowindow. Cause if this event is fired, you know that the info window is attached to the DOM and you can start implementing the following hack:
google.maps.event.addListener(infowindow, 'domready', function() {
var infowindowCloseButton = $($($("#infowindowContent").parents()[2]).children()[0]);
infowindowCloseButton.click(function(){
infowindow.close();
});
});
What we do is pretty simple: We just navigate to the close button of the infowindow and attach a mouseclick event to close this infowindow.
I put together a small example:
http://chatmap.eu/playground/closeInfoWindows.html
As I said: It is very dirty but it worked for me.

Google Maps slow when markers on it

Im writing a small webapp based on the idea of openspot for training proposal.
When I open the map with my desktop pc everything is fine, but when I open it with my HTC Desire and add a marker the map hangs.
You can find a demo here (in german)
http://park-a-lot.de
Just go to "eintragen" and set a marker.
Then go hack and click on "parkplatze".
You'll see the issue.
Its ok that the toolbar at the top hides when you move the map, because of a jqtouch bug with Google maps.
Thank you in advance.

This solution may help. I know it works great in the ipod safari browser and Opera on an HTC Android phone.
http://nickjohnson.com/b/google-maps-v3-how-to-quickly-add-many-markers

Having lots of markers on the map does really slow it down on android. One thing you can try is to only show the relevant markers, i.e. those that are in the bounds of the map. In my case this made the map much less sluggish:
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
for (id in stations) {
var marker = stations[id].marker;
var isVisible = marker.getVisible();
var shouldBeVisible = bounds.contains(stations[id].latLng);
if (isVisible != shouldBeVisible) {
marker.setVisible(shouldBeVisible);
}
}
});