/
index.html
119 lines (97 loc) · 3.51 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<html>
<head>
<meta charset=utf-8 />
<title>C4K POC</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@2.2.3/dist/esri-leaflet.js"
integrity="sha512-YZ6b5bXRVwipfqul5krehD9qlbJzc6KOGXYsDjU9HHXW2gK57xmWl2gU6nAegiErAqFXhygKIsWPKbjLPXVb2g=="
crossorigin=""></script>
<style>
body { margin:0; padding:0; }
#map { position: absolute; top:0; bottom:0; right:0; left:0; }
.overlay {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
.modal {
margin: auto;
width: 360px;
height: 240px;
display: flex;
flex-direction: column;
justify-content: center;
background: white;
border-radius: 16px;
padding: 24px;
font-size: 16px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function onMouseHandler(event) {
document.getElementById('map').title = event.layer.feature.properties.CDNAME;
};
function closeOverlay(overlay) {
document.body.removeChild(overlay);
}
function onClickHandler(event) {
const { properties } = event.layer.feature;
const overlay = document.createElement('div');
overlay.className = 'overlay';
overlay.addEventListener('click', () => closeOverlay(overlay));
const modal = document.createElement('div');
modal.className = 'modal';
modal.addEventListener('click', (e) => { e.stopPropagation(); });
const title = document.createElement('h2');
title.innerHTML = 'DEMOGRAPHIC';
const region = document.createElement('p');
region.innerHTML = `${properties.CDNAME}, ${properties.PRNAME}`;
const population = document.createElement('p');
population.innerHTML = `${properties.Pop2016}`;
modal.appendChild(title);
modal.appendChild(region);
modal.appendChild(population);
overlay.appendChild(modal);
document.body.appendChild(overlay);
}
var maxPop = 1000000;
var map = L.map('map').setView([ 43.6532, -79.3832], 8);
L.esri.basemapLayer('Gray').addTo(map);
L.esri.basemapLayer('GrayLabels').addTo(map);
L.esri.featureLayer({
url: 'https://services.arcgis.com/zmLUiqh7X11gGV2d/arcgis/rest/services/CensusDivisions2016_proj/FeatureServer/0',
simplifyFactor: 2,
precision: 4, // digits of precision in meters. we want 4 to identify individual streets.
where: `PRNAME = 'Ontario'`,
style: function (feature) {
const { Pop2016, Area } = feature.properties;
// manual opacity filtering
var density = Pop2016/Area;
var opacity = Math.max(Math.min(1, Math.log(density)/5), 0.05);
// in the province of Ontario
return { weight: 1, opacity, fillOpacity: opacity, color: 'black', fillColor: 'green' };
}
})
.on('mouseover', onMouseHandler)
.on('click', onClickHandler)
.addTo(map);
</script>
</body>
</html>