Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8
Last active November 11, 2020 08:47
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mpmckenna8/9395643 to your computer and use it in GitHub Desktop.
Save mpmckenna8/9395643 to your computer and use it in GitHub Desktop.
Multiple Pop-ups using leaflet.js
<!DOCTYPE html>
<html>
<head>
<title>Multiple concurrent popups w/ leaflet</title>
<script type="text/javascript" src="./maptimes4leaflet.json" ></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.ie.css" /><![endif]-->
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.3"></script>
<link type="text/css" rel="stylesheet" href="mtLeaf.css"/>
</head>
<body onload="initialize()">
<div id="map" ></div>
<p>
Here is a map of some Maptimes. Go to one of em and learn how to make this map better or make your own!
See: <a href="https://github.com/maptime/maptime.github.io">Maptime on Github</a>
</p>
<script type="text/javascript">
function initialize() {
//var layers = ["terrain", "watercolor","toner"];
var watercolor = new L.StamenTileLayer("watercolor");
var terrain = new L.StamenTileLayer("terrain");
var toner= new L.StamenTileLayer("toner");
var bases = {
"Watercolor":watercolor,
"Terrain":terrain,
"Toner":toner
}
L.Map = L.Map.extend({
openPopup: function(popup) {
// this.closePopup(); // just comment this
this._popup = popup;
return this.addLayer(popup).fire('popupopen', {
popup: this._popup
});
}
}); /*** end of hack ***/
var map = new L.Map('map', {
center: [39,-98],
zoom:4,
layers:watercolor
})
var popmaps = function(feature,layer){
var popUp = feature.properties.name
layer.bindPopup(String(popUp));
}
L.control.layers(bases).addTo(map);
L.geoJson(maptimes, {
pointToLayer:function (feature, latlng) {
return L.marker(latlng, {
fillColor: "#000000",
color: "green",
opacity: 1,
});
},
onEachFeature:popmaps
}).addTo(map);
}
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
#map {
width: 80%;
height: 500px;
margin: 20px auto auto auto;
}
.header {
margin: auto auto auto auto;
width: 100%;
text-align:center;
}
p{
margin:30px 20px auto 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment