-
Notifications
You must be signed in to change notification settings - Fork 0
/
Lab 3 Q4.html
138 lines (106 loc) · 3.21 KB
/
Lab 3 Q4.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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<html>
<head>
<title>My first map_Sadiul</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<script src="L3.js" type="text/javascript"></script>
<script src="Uni.js" type="text/javascript"></script>
<style>
#map{ width: 900px; height: 500px; }
</style>
<style>
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.legend {
text-align: left; line-height: 18px; color: #555;
}
.legend i {
width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// initialize the map
var map = L.map('map').setView([40, -89], 10);
//var poly = L.polygon(polygonPoints).addTo(map);
function getColor(NormBach) {
return NormBach > 35.19 ? '#BD0026' :
NormBach > 22.91 ? '#E31A1C' :
NormBach > 12.87 ? '#FC4E2A' :
NormBach > 0 ? '#FD8D3C' :
'#FFEDA0';
}
function style(feature) {
return {
fillColor: getColor(feature.properties.NormBach), //color by density attribute
weight: 0.5, //line weight
opacity: 1, //line opacity
color: 'black', //line color
fillOpacity: 0.7 //shape file
};
}
function highlightFeature(e) {
const layer = e.target;
layer.setStyle({
weight: 5,
color: 'white',
fillOpacity: 0.9
});
layer.bringToFront();
//info.update(layer.feature.properties); //we will use this in a bit.
}
function resetHighlight(e) {
geojson.resetStyle(e.target);
//info.update();
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
//click: zoomToFeature
});
}
const geo = L.geoJson(Illinois, {
style,
onEachFeature //This is the important new function connection
}).addTo(map);
//locates the legend in the bottom right of the map
var legend = L.control({position: 'bottomright'});
//adds the legend to the map in a <div>
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [10 , 20, 30];
// loop through our EdNorm intervals and generate a label and colored square
for (var i = 0; i < grades.length; i++) {
div.innerHTML +=
'<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
}
return div;
};
//adds the legend to the map
legend.addTo(map);
L.geoJson(UNI).addTo(map);
// load a tile layer
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
}).addTo(map);
</script>
</body>
</html>