Skip to content

Instantly share code, notes, and snippets.

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

What would you like to do?
Leaflet Squirrel - Part 6 (sans data)
  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)
<title>Leaflet Squirrel - Part 6</title>
<link rel="stylesheet" href=""/>
<script src=""></script>
<script src=""></script>
#map{ height: 100% }
.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);
<div class="custom-popup" id="map"></div>
// initialize the map centered on the geographic center of the lower 48
var map ='map').setView([39.833, -98.35], 4);
// load tile layer from mapstack we copied earlier and use the required attribution
'http://{s},$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=””>Stamen Design</a>, under <a href=””>CC BY 3.0</a>. Data by <a href=””>OpenStreetMap</a>, under <a href=””>CC BY SA</a>',
// we want to limit the scrollability
maxZoom: 19,
minZoom: 4
var statesStyle = {
"weight": 2,
"fillColor": "#ffffff",
$.getJSON("ssa-states.geojson", function(stateData){
L.geoJson(stateData, {
style: statesStyle
// 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: '',
iconSize: [48, 48]
// add it to the map
pointToLayer: function(feature,latlng){
var marker = L.marker(latlng,{
icon: squirrelIcon
marker.bindPopup('<b>Name: </b>' + + '<br/>' + '<b>Elevation: </b>' +;
return marker;
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.