Skip to content

Instantly share code, notes, and snippets.

@maptastik

maptastik/index.html

Last active August 29, 2015 14:15
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 maptastik/48385b3c0ced3125447b to your computer and use it in GitHub Desktop.
Save maptastik/48385b3c0ced3125447b to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet Squirrel - Part 4 (sans data)
Raw
readme.md
  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)
Raw
index.html
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment