Skip to content

Instantly share code, notes, and snippets.

@veltman
Last active July 3, 2016 04:27
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 veltman/e71f13cd32169f319625 to your computer and use it in GitHub Desktop.
Save veltman/e71f13cd32169f319625 to your computer and use it in GitHub Desktop.
Wherewolf.js demo - burger access for random points
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!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 &copy; <a href="http://stamen.com">Stamen Design</a> (<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>). Data &copy; <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