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!
Last active
August 29, 2015 13:57
-
-
Save mpmckenna8/9648696 to your computer and use it in GitHub Desktop.
Maptimes w/ a Custom Icon
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #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