Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8
Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mpmckenna8/9648696 to your computer and use it in GitHub Desktop.
Save mpmckenna8/9648696 to your computer and use it in GitHub Desktop.
Maptimes w/ a Custom Icon

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.
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.
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