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 - Part 6
  1. Create style object with the various style preferences for each state (60-65)
  2. Toss that style into call for ssa-states.geojson (67-71)
<html>
<head>
<title>Leaflet Squirrel - Part 6</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);
var statesStyle = {
"color":"#000000",
"weight": 2,
"fillColor": "#ffffff",
"fillOpacity":0
};
$.getJSON("ssa-states.geojson", function(stateData){
L.geoJson(stateData, {
style: statesStyle
}).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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
You can’t perform that action at this time.