Skip to content

Instantly share code, notes, and snippets.

@jmduke

jmduke/index.html

Last active January 1, 2016 15:39
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jmduke/8165668 to your computer and use it in GitHub Desktop.
Save jmduke/8165668 to your computer and use it in GitHub Desktop.
Download ZIP
Visualizing Seattle's 911 calls.
Raw
index.html
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js" type='text/javascript'></script>
<script src="http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/js/jquery.js"></script>
<style>
#map {
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
}
</style>
</head>
<body>
<div id="map" style="width: 960px; height: 500px"></div>
<script>
var actualMap = L.map('map').setView([47.5951, -122.3326], 12);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data (c) <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}).addTo(actualMap);
var map = new L.markerClusterGroup();
var THOUSANDS = 3;
var API_ENDPOINT = "http://data.seattle.gov/resource/3k2p-39jp.json?";
for (var i = 0; i < THOUSANDS; i++) {
offset = i * 1000;
jQuery.get(API_ENDPOINT + "$offset=" + offset, function(data) {
for (var index = 0; index < data.length; index++) {
incident = data[index];
loc = incident["incident_location"];
marker = L.marker([loc["latitude"], loc["longitude"]]);
marker.bindPopup(incident["event_clearance_description"]);
map.addLayer(marker);
}
});
}
actualMap.addLayer(map);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment