This is an example of a simple leaflet map with svg markers taken thanfully from the noun project. The license for the icon can be seen at license.txt
Thanks Atelier Iceberg for making cool icons!
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Multiple concurrent popups w/ leaflet</title> | |
<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); | |
var mapIco = L.icon({ | |
iconUrl:'mTico.svg', | |
iconSize: [32,37], | |
iconAnchor: [15,18.5], | |
popupAnchor: [0, -9] | |
}) | |
L.geoJson(maptimes, { | |
pointToLayer:function (feature, latlng) { | |
return L.marker(latlng, { | |
icon:mapIco | |
}); | |
}, | |
onEachFeature:popmaps | |
}).addTo(map); | |
} | |
</script> | |
</body> | |
</html> |
Thank you for using The Noun Project. This icon is licensed under Creative | |
Commons Attribution and must be attributed as: | |
Map by Atelier Iceberg from The Noun Project | |
If you have a Premium Account or have purchased a license for this icon, you | |
don't need to worry about attribution! We will share the profits from your | |
purchase with this icon's designer. |
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" : "@MapTimePDX", | |
}, | |
"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 | |
] | |
} | |
} | |
, | |
{ | |
type: "Feature", | |
properties: { | |
name: "MaptimeME" | |
}, | |
geometry: { | |
type: "Point", | |
coordinates: [ | |
-70.25997161865234, | |
43.656198305413184 | |
] | |
} | |
} | |
] | |
} |
#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; | |
} | |