leafletmarkerspopup
I'm using Leaflet to show some info for points:
var m1 = L.marker([20, 90], {icon: picture}).addTo(mymap);
m1.bindPopup('<h1 class="center">Caption</h1> <br><b>Info: </b>bla').openPopup();
How can you avoid that one popup is always opened when opening the HTML document?
1) Marker Popups: Content in popups are pure HTML. You can add multiple rows with data. Here is a code snippet to add a marker and popup multi-row text on mouse click. You can add rows, create table or change fonts/ colors - whatever is allowed in HTML/CSS.
enter code here
//Add Marker with Popup Text
var mymarker = new L.Marker(map.getCenter());
mymarker.addTo(map).bindPopup(map.getCenter() +"<br>" +
"Min Zoom" + map.getMinZoom() +"<br>" +
"Max Zoom" + map.getMaxZoom());
The result would appear as in the figure below
2) Custom Markers: You can look at Custom Icons which has detailed steps with examples
3) Popup on MouseOver: I would recommend against Mouseover in maps unless you have an absolute need. Think of today's tablets and mobile devices. They don't support MouseOver. If the number of markers per bounding box goes up - it could get problematic with usability and performance. Should you absolutely need one you could try extending the event object.
Cheers,
Ramesh
One option would be to use leaflet point in poly (leaflet.pip) which is available through Mapbox: https://www.mapbox.com/mapbox.js/example/v1.0.0/point-in-polygon/ Or as a leaflet plugin: https://github.com/mapbox/leaflet-pip
The fiddle here: http://jsfiddle.net/TnX96/136/ will show exactly how this would work. Or see the code below....
HTML be sure to include the PIP library:
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-pip/v0.0.2/leaflet-pip.js'></script>
Javascript:
var map = new L.Map('map', {center: new L.LatLng(51, -100), zoom: 4});
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var ggl = new L.Google();
var ggl2 = new L.Google('TERRAIN');
map.addLayer(osm);
map.addControl(new L.Control.Layers( {'Street Maps':osm, 'Satellite':ggl, 'Terrain':ggl2}, {}));
function handleClick(e) {
var html = '';
var match = leafletPip.pointInLayer(
// the clicked point
e.latlng,
// this layer
streets,
// whether to stop at first match
false);
if (match.length) {
for (var i = 0; i < match.length; i++) {
html += "<br>"+"_____"+
"<br><b>" + match[i].feature.properties.title + ", " + match[i].feature.properties.subtitle + ":</b>" +
"<br>Scale: " + match[i].feature.properties.Scale +
"<br>Year Published: " + match[i].feature.properties.year +
"<br><br><b>URL for map:</b> <a>" + match[i].feature.properties.location2 + "</a>"+
"<br><b>URL for cropped, georeferenced map:</b> <a>"+ match[i].feature.properties.location1 + "</a>"+
"<br><b>URL for KML:</b> <a>" + match[i].feature.properties.location3 +"</a>"
}
}
if (html) {
map.openPopup(html, e.latlng);
}
}
var streets = new L.geoJson(histMap)
.on('click', handleClick)
.addTo(map);
Best Answer
Simply remove the call of
.openPopup()on your marker: