I hacked an example into the maptimes leaflet map to have multiple popups open concurrently. 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: Maptime on Github
<!DOCTYPE html>
<html>
<head>
<title>Multiple concurrent popups w/ leaflet</title>
<script type="text/javascript" src="./maptimes4leaflet.json" ></script>
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="//leaflet.cloudmade.com/dist/leaflet.ie.css" /><![endif]-->
<script type="text/javascript" src="//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>
var maptimes = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "MaptimeSF"
},
"geometry": {
"type": "Point",
"coordinates": [
-122.41942584514618,
37.76493060428678
]
}
},
{
"type": "Feature",
"properties": {
"name": "Maptime St. Johns",
"city" : "Portland",
"twitter" : "@MapTimeStJohns",
"meetup" : "http://www.meetup.com/MapTime_StJohns/events/167180662/"
},
"geometry": {
"type": "Point",
"coordinates": [
-122.75469, 45.5900587
]
}
},
{
"type": "Feature",
"properties": {
"name": "MaptimePDX",
"city" : "Portland",
"twitter" : "@MapTimeStJohns",
"meetup" : "http://www.meetup.com/MapTime_StJohns/"
},
"geometry": {
"type": "Point",
"coordinates": [
-122.61291503906249,
45.56190059616734
]
}
},
{
"type": "Feature",
"properties": {
"name": "OpenGeoCle",
"city" : "Cleveland",
"twitter" : "@OpenGeoCle"
},
"geometry": {
"type": "Point",
"coordinates": [
-81.65931701660156,
41.48337664564808
]
}
},
{
"type": "Feature",
"properties": {
"name": "MaptimeNYC",
"city" : "New York",
"meetup" : "http://www.meetup.com/Maptime-NYC/"
},
"geometry": {
"type": "Point",
"coordinates": [
-73.90846252441406,
40.826280356677124
]
}
}
]
}#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;
}