-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
85 lines (77 loc) · 2.63 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet Geo Homework</title>
<link rel="stylesheet" href="leaflet.css" /> <!-- leaflet css file -->
<script type="text/javascript" src="leaflet.js"></script>
<style type="text/css">
#mymap {
height: 700px;
}
.legend {
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Number of Firms with 500+ Employees (2016)</h1>
<!-- div container for map -->
<div id="mymap"></div>
<!-- data -->
<script type="text/javascript" src="firm_cnts_by_st.js"></script>
<script type="text/javascript">
//map setup including longitude/latitude start and zoom level
var themap = L.map('mymap').setView([37.8,-96],4);
/*add map from mapbox (url, object)*/
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: "© <a href='https://www.mapbox.com/map-feedback/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>",
id: 'dandawg.pm8hmang',
maxZoom: 18,
accessToken: 'pk.eyJ1IjoiZGFuZGF3ZyIsImEiOiJjaW16MzlnbHUwNGF1d2tsdWRtZjYyNTViIn0.NunHcJRmj30LkVz0J1N16g',
}).addTo(themap);
function getColor(d) {
return d > 5000 ? '#001433' :
d > 4000 ? '#003380' :
d > 3000 ? '#0052cc' :
d > 2000 ? '#1a75ff' :
d > 1000 ? '#66a3ff' :
'#b3d1ff';
}
function style(feature) {
return {
fillColor: getColor(feature.properties.firm_cnt),
weight: 2,
opacity: 1,
color: 'white',
fillOpacity: 1
};
}
L.geoJson(statesData, {style: style}).addTo(themap);
var legend = L.control({position: 'topright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0,1000,2000,3000,4000,5000],
labels = [];
// loop through our density intervals and generate a label with a colored square for each interval
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;
};
legend.addTo(themap);
</script>
<!-- data source -->
<a href="http://www.census.gov/econ/susb/">Data from US Census Bureau: Statistics of U.S. Businesses</a>
</body>
</html>