Develop Reference

Generate Random Popups from Marker Clusters on zoom out using Leaflet.js

I have been working on developing a web app using Leaflet.js and Jquery. I am a beginner with javascript too.
I have built a map with custom markers and used marker clustering feature of leaflet.js to cluster all my data points in circles.
I have used the bindPopup() method to add text popups for my markers. Here's the code which does the marker clustering and popup binding on mouseover. I am using lat-long coordinates from a GeoJson file which I had brought in using Jquery getJSON function.
Having got the data, I did this
var abc = L.geoJson(data,{
pointToLayer: function(feature,latlng){
var marker = L.marker(latlng,{icon: Icon});
marker.bindPopup(feature.properties.City + '<br/>' + feature.properties.Text);
marker.on('mouseover', function(e){
marker.openPopup();
});
return marker;
}
}).addTo(map);
var clusters = L.markerClusterGroup();
clusters.addLayer(abc);
map.addLayer(clusters);
});
What I am trying to achieve is to randomly generate some popups from within each cluster when I zoom out! How do I achieve that? Do I need to add a zoom out event handler inside the L.geoJson method?

Google Maps API v3, Remove Marker icon or changing to "null"?

I'm writing a Python Flask application in which I'm using Google Maps. I want to be able to add labels to a polyline that I've drawn which symbolizes a ship route.
The route is drawn using a set of coordinates and the polyline feature of the Maps API. I want to add time labels to the polyline and the easiest way seems to be to use Map Markers. However I don't want the large standard pins to show up, but would prefer a small icon/marker together with my text or even none at all. As far as I have gathered you can create "Circles" (which are modifiable) or "Markers" (which you only can change the icon of). I would prefer to go with "Circles", but those you apparently can't add text to..
How can I add text to my map and avoid the Google Maps Pins showing up?
Currently I have an list of objects that contains latitude, longitude and date + time. I'm iterating through it adding markers, but as I do I would like to keep out the marker icon or instead draw the circles if someone knows how to draw circles with added text?
for(i = 0; i < markerList.length; i++){
var position = new google.maps.LatLng(markerList[i].lat, markerList[i].lng);
var date = markerList[i].date;
var marker = new google.maps.Marker({
position: position,
label: date,
map: map,
icon: "None" //Produces error: 404 (NOT FOUND)
});
}
Being able to change the label size also is a very much appreciated function, but I have been unable to find any information about whether that is available. Being able to change the color of the text would also be nice.

As no answers have been given yet and I've sort of found a solution to my problem I guess I will share for others out there with the same problem. At least until someone comes up with a better solution:
I ended up using a predefined symbol and scaling it down to 0 in size as follows:
for(i = 0; i < markerList.length; i++){
var position = new google.maps.LatLng(markerList[i].lat, markerList[i].lng);
var date = markerList[i].date;
var marker = new google.maps.Marker({
position: position,
label: date,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 0
}
});
}
Sadly I haven't found a way to mess with the label yet.

try markerWithlabel and you can change the icon of the marker whit a svg or png plus the label too
like this jsfiddel
.

#Zeliax You can add visible: false to not have marker icon show on your google map. icon prop looks for a path that you want specify for your marker to look as. It is basically a url for your display image.

how to change the label from leaflet-control-layers-toggle?

I am using mapbox and leaflet on my website, and I need to change label "Satellite" from leaflet-control-layers-toggle to "SAT".
How can I change it using leaflet?

Welcome to SO.
Please have you checked Leaflet API for Layers Control?
var baseLayers = {
"Mapbox": mapbox,
"OpenStreetMap": osm
};
L.control.layers(baseLayers).addTo(map);
with "Mapbox" and "OpenStreetMap" being the names that will be displayed in the Layers Control.

Google Maps API V3 - KML Layer vs. JS created Polygons

I'm back with more work on the Google Map that I've been working on. Here is the situation:
I have a map of Virginia. It will have markers in it, but I need the markers to be added/removed/editable by several people. As a result, I created a Google map in "My Places" and I'm importing the resulting KML file into a map I'm loading into the API.
I'm also trying to "white out" neighboring states by drawing a polygon over them and adding a white layer over them with 75% opacity, in order to make the state of Virginia stand out more.
However, I've run into a problem where if a marker from the KML layer "overlaps" onto the polygon covering a bordering state, the opaque polygon covers the layer AND the marker becomes unclickable. If one zooms in enough, one can click the marker, but I want people to be able to click the marker from the original zoom.
I've tried making the markers first, then adding the KML, and doing the KML first then drawing the polygons, but it doesn't seem to matter. I even tried a variation of the solution here: Handle when drawing of polygons is complete in google maps api v3 where I put the trigger to add the KML layer inside of the listener event, but still no dice.
My searching on Google also hasn't led me to anything that looks useful. I don't know if this is still a problem with the order the layers are being ordered, or if polygons somehow "override" a KML layer, regardless of the order, or if there is some way to explicitly tell the KML markers to stay on top of the polygons.
First off, here is the main code I'm using to draw the layers right now:
function initialize() {
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(38, -79.5),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
borderingStates(map);
var participantsLayer = new google.maps.KmlLayer('https://maps.google.com/maps/ms?msa=0&msid=204048902337864904598.0004cc332e8034251c1db&ie=UTF8&ll=37.668046,-80.289717&spn=1.959603,5.642338&output=kml',{preserveViewport:true});
google.maps.event.addListener(map,'idle', function() {
participantsLayer.setMap(map);
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=abc.def&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
Next, here is an example of the code I'm using to draw the polygons. This happens when I call the borderingStates function above:
//Delaware
DEpoints = [
new google.maps.LatLng(39.7188, -75.7919),
new google.maps.LatLng(39.5210, -75.7837),
...
new google.maps.LatLng(39.8296, -75.6477),
new google.maps.LatLng(39.7199, -75.7906)
];
// Construct the polygon
var Delaware = new google.maps.Polygon({
paths: DEpoints,
fillColor: invisColor,
strokeOpacity: 0,
fillOpacity: .75
});
Delaware.setMap(map);
And then I repeat that for each state I draw a polygon for - I think there are 6 or 7.
I can't tell that there is anything in particular about the code that wouldn't cause it to work other than perhaps how Google Maps inherently treats polygons and KML Layers.

I would suggest making your polygons with KmlLayer (or FusionTablesLayer) as well.
You can control the ordering of layers by the order that you add them to the map (first one is on the bottom). I believe native Google Maps API v3 Polygons will always appear above layers. Your other option would be to make the Polygons "unclickable" (clickable: false) [not sure if this will work or not].

This is my first submission and at the risk of being labelled a cowboy, this was my solution to this problem:
Remove the Polygon on the first click event
Set a timer to reinstate the Polygon (after 1 1/2 seconds)
Capture the click event on the KML element during the 1 1/2 second window of opportunity
google.maps.event.addListener(polygon, 'click', function () {
polygon.setMap(null); // hide polygon for a 1 1/2 seconds
window.setTimeout(function () {
polygon.setMap(map_canvas);
}, 1500);
// process polygon click now
});
This method does mean that you'll process both the Polygon and KML element click events but in our case that was fine.

with openlayers , how do i make sure a list of points are all displayed?

I have an OpenLayers map object, and I have added markers to a layer, and added it to the map.
But how do I make sure all the markers are in the display area?
Thanks,
Gil

In order to display all markers on the map
Firstly,make sure you have all markers in one layer.
Secondly,you need to zoom to bound where all markers in marker layer are extended.
To do that,simply
var bounds = markerLayer.getDataExtent();
map.zoomToExtent(bounds);
//has a second parameter that decides to find closest zoom level
//default is false
Please check OpenLayers Document for Marker Layer
Best Regards
Myra