-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
89 lines (69 loc) · 2.85 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
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
<script src="leaflet.ajax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>
<script src='javascripts/map.js'></script>
<script src='javascripts/chart.js'></script>
</head>
<body>
<div id = "mapid" style = "height:100%; width:100%"></div>
<script>
var mymap = L.map('mapid').setView([43.7, -79.4], 11);
var json = uploadJson('dogscatstorontofsa.geojson');
console.log(json.features);
for (i=0; i < json.features.length; i++)
{
console.log(json.features[i].properties["DOG"])
json.features[i].properties["DOG"] = json.features[i].properties["DOG"].replace(",","");
console.log(json.features[i].properties["DOG"])
}
var dogMap = L.geoJson(json, {style: styleDog, onEachFeature: onEachFeature}).addTo(mymap);
var catMap = L.geoJson(json, {style: styleCat, onEachFeature: onEachFeature});
L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFja2VuemllbiIsImEiOiJjaW1pbTZmMWwwMGU1dTFrcW0wenNiNGZ0In0.ys8ti05bu3iKf06cK9r82Q', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
minZoom: 7,
id: 'mapbox.light',
accessToken: 'pk.eyJ1IjoibWFja2VuemllbiIsImEiOiJjaW1pbTZmMWwwMGU1dTFrcW0wenNiNGZ0In0.ys8ti05bu3iKf06cK9r82Q'
}).addTo(mymap);
var legend = L.control({position: 'topright'});
legend.onAdd = function(mymap)
{
var div = L.DomUtil.create('div', 'info legend');
div.innerHTML += 'Less<br><i style=" background-color:' + getColor(0) + '"></i>' +
'<br><br><i style="height:50px ;width:50px;border-color: black; border-width: 1px;border-style: solid; background-color:' + getColor(2000) + '"></i><br>More';
return div;
}
legend.addTo(mymap);
var csd =
{
"Dogs" : dogMap,
"Cats" : catMap
}
L.control.layers(csd).addTo(mymap);
</script>
<style>
.legend {
line-height: 18px;
color: #555;
background-color: white;
padding: 15px;
border-color: black;
border-width: 1px;
border-style: solid;
}
.legend i {
float: left;
margin-right: 8px;
opacity: 0.7;
height:50px ;
width:50px;
border-color: black;
border-width: 1px;
border-style: solid;
}
</style>
</body>
</html>