Skip to content

Instantly share code, notes, and snippets.

@maptastik maptastik/index.html
Last active Aug 29, 2015

Embed
What would you like to do?
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>
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel Mountain Valley Census Designated Place", "ID": 2408800, "Class": "Census", "County": "Kern", "State": "CA", "Latitude": 35.372200, "field_7": -118.242700, "elev": "3875", "map": "Wawona", "BGNDate": null, "EntryDate": "19-JAN-1981" }, "geometry": { "type": "Point", "coordinates": [ -118.2427, 35.3722 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel Camp", "ID": 1161764, "Class": "Locale", "County": "Klamath", "State": "OR", "Latitude": 43.215400, "field_7": -121.371400, "elev": "2877", "map": "Lake Isabella South", "BGNDate": null, "EntryDate": "11-MAR-2008" }, "geometry": { "type": "Point", "coordinates": [ -121.3714, 43.2154 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel Camp (historical)", "ID": 1150307, "Class": "Locale", "County": "Curry", "State": "OR", "Latitude": 42.345500, "field_7": -123.534200, "elev": "5758", "map": "Velasquez Butte", "BGNDate": null, "EntryDate": "08-FEB-1980" }, "geometry": { "type": "Point", "coordinates": [ -123.5342, 42.3455 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel Campground", "ID": 1622930, "Class": "Locale", "County": "Gogebic", "State": "MI", "Latitude": 46.133300, "field_7": -89.171800, "elev": "2254", "map": "Robbinsville", "BGNDate": null, "EntryDate": "17-JUN-1980" }, "geometry": { "type": "Point", "coordinates": [ -89.1718, 46.1333 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel Creek Campground", "ID": 1410108, "Class": "Locale", "County": "Valdez-Cordova (CA)", "State": "AK", "Latitude": 61.395900, "field_7": -145.101800, "elev": "3", "map": "The Basin", "BGNDate": null, "EntryDate": "04-SEP-1980" }, "geometry": { "type": "Point", "coordinates": [ -145.1018, 61.3959 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel Meadows Forest Service Station", "ID": 1604906, "Class": "Locale", "County": "Teton", "State": "WY", "Latitude": 44.034600, "field_7": -111.011900, "elev": "1070", "map": "Clermont", "BGNDate": null, "EntryDate": "25-SEP-1979" }, "geometry": { "type": "Point", "coordinates": [ -111.0119, 44.0346 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel Meadows Guard Station", "ID": 1594957, "Class": "Locale", "County": "Teton", "State": "WY", "Latitude": 44.034800, "field_7": -111.011900, "elev": "935", "map": "New Home", "BGNDate": null, "EntryDate": "25-SEP-1979" }, "geometry": { "type": "Point", "coordinates": [ -111.0119, 44.0348 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel Point Light Station", "ID": 1907879, "Class": "Locale", "County": "Sagadahoc", "State": "ME", "Latitude": 43.475900, "field_7": -69.480500, "elev": "627", "map": "Big Creek", "BGNDate": null, "EntryDate": "27-JUN-1980" }, "geometry": { "type": "Point", "coordinates": [ -69.4805, 43.4759 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel Run Country Club", "ID": 1977083, "Class": "Locale", "County": "Plymouth", "State": "MA", "Latitude": 41.553900, "field_7": -70.431700, "elev": "1447", "map": "Baker", "BGNDate": null, "EntryDate": "27-JUN-1980" }, "geometry": { "type": "Point", "coordinates": [ -70.4317, 41.5539 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel Run Golf Club", "ID": 2601376, "Class": "Locale", "County": "Iberia", "State": "LA", "Latitude": 30.021100, "field_7": -91.495900, "elev": "3461", "map": "Decker", "BGNDate": null, "EntryDate": "04-APR-1980" }, "geometry": { "type": "Point", "coordinates": [ -91.4959, 30.0211 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Black Squirrel Mobile Home Park", "ID": 2694050, "Class": "Populated Place", "County": "Marshall", "State": "KS", "Latitude": 39.500800, "field_7": -96.382100, "elev": "991", "map": "Ugh Lake", "BGNDate": null, "EntryDate": "30-SEP-1980" }, "geometry": { "type": "Point", "coordinates": [ -96.3821, 39.5008 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel", "ID": 398176, "Class": "Populated Place", "County": "Fremont", "State": "ID", "Latitude": 44.013800, "field_7": -111.175700, "elev": "0", "map": "Sugarloaf Key", "BGNDate": null, "EntryDate": "19-OCT-1979" }, "geometry": { "type": "Point", "coordinates": [ -111.1757, 44.0138 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel Creek", "ID": 1686809, "Class": "Populated Place", "County": "Hall", "State": "GA", "Latitude": 34.224800, "field_7": -83.522200, "elev": "1745", "map": "McKeever", "BGNDate": null, "EntryDate": "23-JAN-1980" }, "geometry": { "type": "Point", "coordinates": [ -83.5222, 34.2248 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel Creek (historical)", "ID": 1701413, "Class": "Populated Place", "County": "Plumas", "State": "CA", "Latitude": 39.474100, "field_7": -120.430400, "elev": "2992", "map": "Case Mountain", "BGNDate": "01-JAN-1928", "EntryDate": "19-JAN-1981" }, "geometry": { "type": "Point", "coordinates": [ -120.4304, 39.4741 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel Flat", "ID": 1314329, "Class": "Populated Place", "County": "Fentress", "State": "TN", "Latitude": 36.292600, "field_7": -84.581000, "elev": "2605", "map": "Sargent Ponds", "BGNDate": null, "EntryDate": "23-JAN-1980" }, "geometry": { "type": "Point", "coordinates": [ -84.581, 36.2926 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel Hill", "ID": 1188371, "Class": "Populated Place", "County": "Allegheny", "State": "PA", "Latitude": 40.261700, "field_7": -79.550900, "elev": "443", "map": "Hustburg", "BGNDate": null, "EntryDate": "19-MAY-1980" }, "geometry": { "type": "Point", "coordinates": [ -79.5509, 40.2617 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel Hill", "ID": 1204716, "Class": "Populated Place", "County": "Clarion", "State": "PA", "Latitude": 41.021900, "field_7": -79.244200, "elev": "958", "map": "D'Hanis", "BGNDate": null, "EntryDate": "01-AUG-1994" }, "geometry": { "type": "Point", "coordinates": [ -79.2442, 41.0219 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel Hill", "ID": 686129, "Class": "Populated Place", "County": "Madison", "State": "MS", "Latitude": 32.244100, "field_7": -90.074700, "elev": "3031", "map": "Carvers Gap", "BGNDate": null, "EntryDate": "17-JUN-1980" }, "geometry": { "type": "Point", "coordinates": [ -90.0747, 32.2441 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel Mountain Valley", "ID": 1661499, "Class": "Populated Place", "County": "Kern", "State": "CA", "Latitude": 35.372400, "field_7": -118.243500, "elev": "804", "map": "Rough And Ready", "BGNDate": null, "EntryDate": "19-JAN-1981" }, "geometry": { "type": "Point", "coordinates": [ -118.2435, 35.3724 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrel Town", "ID": 1058042, "Class": "Populated Place", "County": "Adams", "State": "OH", "Latitude": 38.415000, "field_7": -83.224600, "elev": "833", "map": "Ryan", "BGNDate": null, "EntryDate": "18-DEC-1979" }, "geometry": { "type": "Point", "coordinates": [ -83.2246, 38.415 ] } },
{ "type": "Feature", "properties": { "FeatureNa": "Squirrels Corners", "ID": 966185, "Class": "Populated Place", "County": "Sullivan", "State": "NY", "Latitude": 41.355800, "field_7": -74.445900, "elev": "3996", "map": "Bailey Creek", "BGNDate": null, "EntryDate": "01-DEC-1988" }, "geometry": { "type": "Point", "coordinates": [ -74.4459, 41.3558 ] } }
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.