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="//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);
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.
<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Your_Icon" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<metadata>
<sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/">
<slices/>
<sliceSourceBounds bottomLeftOrigin="true" width="74" height="58.899" y="371.037" x="602"/>
</sfw>
</metadata>
<g>
<path fill="#000000" d="M32.291,64.348c-0.091,0.025-0.182,0.037-0.271,0.037c-0.437,0-0.838-0.288-0.962-0.729 c-0.149-0.531,0.16-1.084,0.692-1.233c0.778-0.219,1.642-0.548,2.656-1.008C34.79,61.241,35.5,61,35.5,61V20.563l-23,8.419v50.48 l23-8.415v-8.012c0-0.036-0.161,0.151-0.27,0.2C34.124,63.737,33.167,64.102,32.291,64.348z M20.054,43.931 c-0.541,0.172-1.067,0.349-1.567,0.516c-0.449,0.151-0.879,0.295-1.282,0.424c-0.101,0.032-0.203,0.047-0.304,0.047 c-0.424,0-0.817-0.271-0.953-0.696c-0.167-0.525,0.123-1.089,0.649-1.257c0.394-0.125,0.814-0.267,1.255-0.414 c0.509-0.17,1.045-0.35,1.597-0.525c0.524-0.168,1.088,0.123,1.256,0.65C20.871,43.2,20.58,43.763,20.054,43.931z M23.625,41.969 c-0.044-0.551,0.367-1.033,0.917-1.077c1.221-0.098,2.378-0.006,3.346,0.292c0.528,0.163,0.824,0.723,0.662,1.25 c-0.133,0.431-0.528,0.706-0.956,0.706c-0.098,0-0.196-0.014-0.294-0.044c-0.724-0.223-1.636-0.288-2.598-0.21 C24.144,42.929,23.669,42.519,23.625,41.969z M28.012,63.516c-0.197,0.208-0.462,0.313-0.728,0.313 c-0.246,0-0.493-0.09-0.687-0.272c-0.766-0.723-1.311-1.781-1.619-3.146c-0.121-0.539,0.217-1.074,0.755-1.196 c0.537-0.122,1.073,0.217,1.196,0.755c0.219,0.97,0.569,1.688,1.041,2.132C28.372,62.48,28.391,63.113,28.012,63.516z M29.541,53.498l-0.235,0.347c-0.496,0.729-0.965,1.416-1.37,2.108c-0.186,0.318-0.521,0.496-0.864,0.496 c-0.171,0-0.345-0.044-0.503-0.137c-0.478-0.278-0.638-0.891-0.359-1.367c0.439-0.754,0.95-1.503,1.443-2.227l0.234-0.344 c0.311-0.456,0.933-0.577,1.389-0.266C29.732,52.42,29.852,53.041,29.541,53.498z M30.771,49.496 c-0.535-0.137-0.858-0.681-0.722-1.216c0.101-0.395,0.151-0.78,0.151-1.147c0-0.427-0.066-0.835-0.202-1.248 c-0.172-0.524,0.113-1.09,0.638-1.263c0.522-0.174,1.09,0.112,1.263,0.638c0.2,0.609,0.302,1.239,0.302,1.873 c0,0.534-0.072,1.087-0.214,1.642c-0.115,0.452-0.521,0.753-0.968,0.753C30.937,49.527,30.854,49.518,30.771,49.496z"/>
<path fill="#000000" d="M64.5,28.982v29.028c0,0.135,0.391,0.259,0.57,0.396c0.441,0.332,0.513,0.959,0.18,1.4 c-0.182,0.241-0.75,0.364-0.75,0.383v19.273l22-8.415V20.563L64.5,28.982z M71.883,64.356c-0.188,0.314-0.52,0.488-0.86,0.488 c-0.174,0-0.351-0.045-0.511-0.141c-0.778-0.464-1.62-1.019-2.574-1.695c-0.451-0.319-0.557-0.943-0.237-1.394 c0.318-0.451,0.945-0.559,1.394-0.237c0.911,0.646,1.709,1.172,2.441,1.607C72.01,63.269,72.165,63.882,71.883,64.356z M72.958,45.869c-0.173,0-0.349-0.045-0.509-0.14c-0.476-0.281-0.632-0.896-0.351-1.37l2.501-4.219l-5.239-2.233 c-0.508-0.217-0.744-0.804-0.527-1.312c0.217-0.508,0.804-0.744,1.312-0.527l5.482,2.337l2.405-4.058 c0.281-0.476,0.896-0.632,1.37-0.351c0.476,0.281,0.632,0.896,0.351,1.37l-2.27,3.829l3.948,1.684 c0.508,0.217,0.744,0.804,0.527,1.312c-0.162,0.38-0.531,0.607-0.92,0.607c-0.131,0-0.265-0.025-0.393-0.08l-4.192-1.787 l-2.636,4.447C73.633,45.694,73.3,45.869,72.958,45.869z M78.853,66.636c-0.606,0.172-1.219,0.283-1.907,0.258 c-0.486,0-0.997-0.05-1.519-0.148c-0.543-0.103-0.899-0.625-0.797-1.168s0.626-0.897,1.168-0.797 c0.402,0.076,0.766,0.101,1.161,0.113c0.47,0,0.923-0.062,1.349-0.182c0.526-0.152,1.083,0.157,1.234,0.689 C79.692,65.933,79.384,66.485,78.853,66.636z M79.349,48.563c-0.167,0.107-0.354,0.158-0.539,0.158 c-0.329,0-0.651-0.162-0.843-0.46c-0.531-0.828-1.093-1.642-1.669-2.42c-0.329-0.443-0.235-1.069,0.209-1.398 c0.443-0.329,1.069-0.236,1.398,0.209c0.602,0.812,1.189,1.664,1.745,2.529C79.948,47.646,79.813,48.265,79.349,48.563z M80.344,52.516c-0.234-0.5-0.021-1.096,0.479-1.331c0.5-0.234,1.095-0.021,1.331,0.479c0.467,0.994,0.859,1.968,1.167,2.895 c0.174,0.523-0.11,1.09-0.635,1.264c-0.104,0.034-0.21,0.051-0.314,0.051c-0.42,0-0.81-0.266-0.949-0.686 C81.141,54.337,80.777,53.438,80.344,52.516z M83.337,63.117c-0.175,0.351-0.528,0.554-0.896,0.554 c-0.149,0-0.302-0.033-0.445-0.105c-0.494-0.246-0.695-0.847-0.448-1.341c0.361-0.726,0.569-1.565,0.617-2.495 c0.029-0.552,0.498-0.969,1.051-0.947c0.552,0.029,0.976,0.499,0.947,1.051C84.101,61.039,83.822,62.145,83.337,63.117z"/>
<path fill="#000000" d="M61.131,56.853c0.126-0.179,0.369-0.287,0.369-0.353V28.982l-23-8.419v39.168 c0-0.236,0.641-0.447,0.875-0.577c0.588-0.327,1.388-0.662,1.982-0.998l0.939-0.472c0.482-0.271,1.143-0.1,1.413,0.382 s0.126,1.091-0.355,1.362l-0.822,0.47c-0.599,0.338-1.189,0.675-1.781,1.004c-0.154,0.086-0.317,0.126-0.481,0.126 c-0.352,0-1.102-0.186-1.284-0.514C38.943,60.438,38.5,60.081,38.5,60v11.048l23,8.415v-21.03c0-0.06-0.106-0.127-0.19-0.187 C60.858,57.929,60.813,57.305,61.131,56.853z M50.403,55.91c-0.796,0.304-1.666,0.689-2.66,1.179 c-0.142,0.069-0.292,0.103-0.44,0.103c-0.369,0-0.725-0.205-0.898-0.559c-0.243-0.495-0.04-1.095,0.456-1.339 c1.05-0.517,1.975-0.926,2.828-1.253c0.518-0.191,1.094,0.061,1.292,0.577C51.177,55.135,50.919,55.713,50.403,55.91z M58.697,55.282c-0.165,0.373-0.531,0.595-0.915,0.595c-0.135,0-0.272-0.027-0.404-0.086c-0.948-0.42-1.787-0.663-2.564-0.741 c-0.55-0.056-0.95-0.546-0.895-1.096c0.057-0.549,0.543-0.939,1.096-0.895c0.991,0.101,2.029,0.396,3.174,0.903 C58.693,54.187,58.921,54.777,58.697,55.282z"/>
<path fill="#000000" d="M36.516,61.604v1.432c0.295-0.285,0.4-0.729,0.222-1.123C36.683,61.792,36.605,61.69,36.516,61.604z"/>
<path fill="#000000" d="M38.5,60v-0.269C38.5,59.907,38.5,59.816,38.5,60z"/>
<path fill="#000000" d="M77.905,44.652c-0.329-0.445-0.955-0.538-1.398-0.209c-0.444,0.329-0.538,0.955-0.209,1.398 c0.576,0.778,1.138,1.592,1.669,2.42c0.191,0.298,0.514,0.46,0.843,0.46c0.185,0,0.372-0.051,0.539-0.158 c0.465-0.299,0.6-0.918,0.302-1.382C79.095,46.316,78.507,45.465,77.905,44.652z"/>
</g>
</svg>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;
}