Skip to content

Instantly share code, notes, and snippets.

@mikelotis

mikelotis/.block

Last active December 17, 2018 22:45
Show Gist options
  • Save mikelotis/89c21dab47a069fba6763145194b66f3 to your computer and use it in GitHub Desktop.
Save mikelotis/89c21dab47a069fba6763145194b66f3 to your computer and use it in GitHub Desktop.
Download ZIP
Edmonton Wards, Neighbourhoods, & Zoning Bylaw
Raw
.block
border: yes
height: 870
Raw
README.md

Information for map here

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no initial-scale=1.2">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Edmonton Municipality</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css"/>
<style>
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}
#map {
height: 100%;
width: 100%;
}
.leaflet-overlay-pane svg path { pointer-events: auto; }
.leaflet-overlay-pane svg path:hover {
fill: transparent;
stroke: black;
}
</style>
</head>
<body>
<div id="spinner"></div>
<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-queue/1.2.3/queue.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var print = console.log;
var dir = console.dir;
//Set up loading spinner
var opts = {
lines: 13,
length: 22,
width: 9,
radius: 30,
corners: 1,
rotate: 2,
direction: 1,
speed: 1,
trail: 60,
shadow: false,
hwaccel: false,
className: 'spinner',
zIndex: 2e9,
top:'50%',
left: '50%'
};
var target = document.getElementById("spinner");
var spinner = new Spinner(opts).spin(target);
//------------map------------
var map = L.map("map", {
zoomSnap: 0.01,
zoom: zoomSelector(window.innerWidth),
touchZoom: false,
minZoom: 10.06
});
var positron = L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
subdomains: 'abcd',
maxZoom: 19
});
map.setView( [53.55589, -113.506643] );
map.attributionControl.setPosition('topright');
map.zoomControl.setPosition('bottomright');
L.control.scale().setPosition('topleft').addTo(map);
positron.addTo(map);
//making the map responsive
map.on("resize", function() {
map.setZoom(zoomSelector(window.innerWidth));
map.getBounds().getCenter();
});
//to set the zoom based on window width
function zoomSelector(size) {
//http://leafletjs.com/examples/choropleth/
//cleaner format than three one line if statements
return size < 768 ? 10.06:
size >= 768 && size != 1024 && size <= 1366 ? 10.71:
11.21;
}
//------------map------------
//------------Data Loading and Processing------------
//loading the data
queue()
.defer(d3.json, "https://raw.githubusercontent.com/Edmonton-Open-Data/Edmonton-Municipality-II/master/data/wards-topo.json") //wards
.defer(d3.json, "https://raw.githubusercontent.com/Edmonton-Open-Data/Edmonton-Municipality-II/master/data/neighbourhood-topo.json") //neighbourhoods
.defer(d3.json, "https://raw.githubusercontent.com/Edmonton-Open-Data/Edmonton-Municipality-II/master/data/zoning-topo.json") //zoning
.await(dataProcessor);
function dataProcessor(error, wards, neighbourhoods, zones) {
if(error) throw error;
var dataObjects =
[
{
file: wards,
colors: ['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061'],
lineColor: "#bdc1bd"
}
,{
file: neighbourhoods,
colors: ['#a50026','#d73027','#f46d43','#fdae61','#fee090','#ffffbf','#abd9e9','#74add1','#4575b4','#313695'],
lineColor: "#7b7f7b"
},
{
file: zones,
colors: ['#d53e4f','#f46d43','#fdae61','#fee08b','#ffffbf','#e6f598','#abdda4','#66c2a5','#3288bd'],
lineColor: "#6e6a6a",
name: "zoning"
}
];
var overlays = [];
var overlayObject = new Object();
// adding name attribute for identification
dataObjects.forEach(function(d, i){
d.name = Object.keys(d.file.objects)[0];
});
//~-~-~-~-~-~-~-~overlay~-~-~-~-~-~-~-~
dataObjects.forEach(function(d, i){
var features = topojson.feature(d.file, d.file["objects"][d.name]).features;
var dataLength = features.length;
var colorScale = d3.scale.quantize().domain([0, dataLength -1]).range(d.colors);
//http://leafletjs.com/examples/choropleth/
var geojsonLayer = L.geoJSON(features, {
style: function style(feature, index) {
return {
color: d.lineColor,
weight: 1,
opacity: 0.45,
fillColor: colorScale(getRandomIntInclusive(0, dataLength)),
fillOpacity:0.45
};
},
onEachFeature: function onEachFeature(feature, layer) {
var property = feature.properties;
switch (d.name) {
case "zoning":
return layer.bindPopup(property["zoning"] + "<br/>" + " " + property["descript"]);
break;
default:
return layer.bindPopup(property["name"] + "<br/>" + " " + parseFloat(property["area_km2"]).toFixed(3)+" "+"km&#94;"+"2");
break;
}
}
});
//adding layer to map
geojsonLayer.addTo(map);
//push layer and name to overlays to build layercontrol later
overlays.push([d.name, geojsonLayer]);
});
//~-~-~-~-~-~-~-~overlay~-~-~-~-~-~-~-~
//~-~-~-~-~-~-~-~Layer Control~-~-~-~-~-~-~-~
//turning the overlays array[] to an associative array{}(object)
overlays.forEach(function(d){
overlayObject[d[0]] = d[1];
});
//using the object to make layer control
L.control.layers({"Tilelayer": positron}, overlayObject).setPosition('bottomleft').addTo(map);
d3.select("#spinner").remove();//close after all files and layers are loaded
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
}
};//dataProcessor
//------------Data Loading and Processing------------
})//document.addEventListener
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment