Last active
July 3, 2016 04:27
-
-
Save veltman/e71f13cd32169f319625 to your computer and use it in GitHub Desktop.
Wherewolf.js demo - burger access for random points
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
<style> | |
#map { | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
left: 0; | |
right: 0; | |
top: 0; | |
bottom: 0; | |
} | |
.legend { | |
line-height: 18px; | |
color: #555; | |
} | |
.legend i { | |
width: 18px; | |
height: 18px; | |
float: left; | |
margin-right: 8px; | |
opacity: 0.7; | |
} | |
</style> | |
<body> | |
<div id="map"></div> | |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | |
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
<script src="http://d3js.org/topojson.v1.min.js"></script> | |
<script src="http://veltman.github.io/wherewolf/wherewolf.js"></script> | |
<script> | |
//Initialize the map | |
var map = L.map("map"); | |
//Add tiles | |
L.tileLayer('http://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png', { | |
attribution: 'Map tiles © <a href="http://stamen.com">Stamen Design</a> (<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>). Data © <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors (<a href="http://opendatacommons.org/licenses/odbl/">ODbL</a>).', | |
subdomains: 'abcd' | |
}).addTo(map); | |
//Fit to the continental US | |
map.fitBounds([ | |
[16.97,-126], | |
[50.29, -64.86] | |
]); | |
//Summon a wherewolf | |
var ww = Wherewolf(); | |
//Some random points | |
//LONGITUDE FIRST | |
var points = [[-105.89245116179809,32.66968821287155],[-118.40044993394986,34.85802121758461],[-81.80253364238888,31.282342028617858],[-105.10136343110352,44.61306293010712],[-91.95875134915113,47.314496570825575],[-97.78551514381543,29.72521533370018],[-106.49897644985467,39.5555215716362],[-93.88655431056395,31.766690903902052],[-83.10371991256252,29.7997485101223],[-97.85495031084865,34.78963323831558],[-113.63085945080965,36.08796715736389],[-115.18087026104331,42.66135771870613],[-88.04447065982967,34.39069209098816],[-90.83795804316178,34.7407722234726],[-111.93559739449992,46.43833055496216],[-84.726562499,38.75408327579141],[-78.31054687499,40.713955826286046],[-78.134765625,37.92686760148135],[-96.6796875,34.95799531086792],[-69.609374999,45.1510532655634],[-75.146484375,42.74701217318067], [-66.001624,18.439126]]; | |
//add legend | |
var legend = L.control({position: 'bottomright'}); | |
legend.onAdd = function (map) { | |
var div = L.DomUtil.create('div', 'info legend'), | |
chains = ["Carl's Jr.", "Hardee's", "Both", "Neither"], | |
colors = ["red", "yellow", "orange", "blue"]; | |
// loop through our density intervals and generate a label with a colored square for each interval | |
for (var i = 0; i < chains.length; i++) { | |
div.innerHTML += | |
'<i style="background:' + colors[i] + '"></i> ' + chains[i] +'<br>'; | |
} | |
return div; | |
}; | |
legend.addTo(map); | |
//Find out whether a point is in | |
//a state with Carl's Jr, Hardee's, or both | |
$.getJSON("carlsjr_hardees.json",function(data){ | |
//Add a layer named "burgerChains" to wherewolf | |
ww.add("burgerChains",data); | |
points.forEach(function(point){ | |
//Use wherewolf to find the matching feature and | |
//return its properties | |
var result = ww.find(point), | |
color = "blue"; | |
//If the feature has either burger chain | |
if (result.burgerChains) { | |
if (result.burgerChains.carlsJr) { | |
if (result.burgerChains.hardees) { | |
//Both Hardee's and Carl's Jr | |
color = "orange"; | |
} else { | |
//Just Carl's Jr. | |
color = "red"; | |
} | |
} else if (result.burgerChains.hardees) { | |
//Just Hardee's | |
color = "yellow"; | |
} | |
} | |
//Add a color-coded circle | |
L.circleMarker({lat: point[1], lng: point[0]},{ | |
"radius": 8, | |
"stroke": false, | |
"color": color, | |
"opacity": 0.6, | |
"fillOpacity": 0.6 | |
}).addTo(map); | |
}); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment