Skip to content

Instantly share code, notes, and snippets.

@maptastik
Last active August 29, 2015 14:13
Show Gist options
  • Save maptastik/a89c715ef78c15889fc5 to your computer and use it in GitHub Desktop.
Save maptastik/a89c715ef78c15889fc5 to your computer and use it in GitHub Desktop.
Leaflet Squirrel - Step 4
  1. Add (bind) the pop up to the icon (72-74)
  2. Format text (72)
  3. Style with CSS (if you want!) (13-41, 43)
<html>
<head>
<title>Leaflet Squirrel - Step 4</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<style>
.custom-popup .leaflet-popup-content-wrapper {
background: rgba(70, 145, 158, 0.7);
color: #fff;
font-size: 12px;
font-family: 'Comic Sans MS', monospace;
line-height: 18px;
}
.custom-popup .leaflet-popup-content-wrapper a {
color: rgba(255, 255, 255, 0.1);
}
.custom-popup .leaflet-popup-tip-container {
margin: 0 auto;
width: 40px;
height: 20px;
position: relative;
overflow: hidden;
}
.custom-popup .leaflet-popup-tip {
width: 15px;
height: 15px;
padding: 1px;
margin: -8px auto 0;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background: rgba(70, 145, 158, 0.7);
}
</style>
<div class="custom-popup" id="map"></div>
<script>
// initialize the map centered on the geographic center of the lower 48
var map = L.map('map').setView([39.833, -98.35], 4);
// load tile layer from mapstack we copied earlier and use the required attribution
L.tileLayer(
'http://{s}.sm.mapstack.stamen.com/((naip,$fff[difference],$fff[@60],$fff[hsl-saturation@90])[multiply],(mapbox-water,$fff[difference],$000[@60],$090d11[hsl-color]))/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href=”http://stamen.com”>Stamen Design</a>, under <a href=”http://creativecommons.org/licenses/by/3.0”>CC BY 3.0</a>. Data by <a href=”http://openstreetmap.org”>OpenStreetMap</a>, under <a href=”http://creativecommons.org/licenses/by-sa/3.0”>CC BY SA</a>',
// we want to limit the scrollability
maxZoom: 19,
minZoom: 4
}).addTo(map);
// load the geojson file you saved in this directory
$.getJSON("ssa-capitals.geojson",function(data){
// use this to reference the icon in our repo
var squirrelIcon = L.icon({
iconUrl: 'http://i1185.photobucket.com/albums/z344/buspainter2005/squirrel-king-icon_zps670e8595.png',
iconSize: [48, 48]
});
// add it to the map
L.geoJson(data,{
pointToLayer: function(feature,latlng){
var marker = L.marker(latlng,{
icon: squirrelIcon
});
marker.bindPopup('<b>Name: </b>' + feature.properties.FeatureNa + '<br/>' + '<b>Elevation: </b>' + feature.properties.elev);
return marker;
}
}).addTo(map);
});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment