-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
183 lines (153 loc) · 6.95 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Buncombe County Airbnbs (2020)</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.0/dist/leaflet.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
<style>
html, body, #map { width: 100%; height: 100%; margin: 0; background: #fff; }
.legend {
line-height: 40px;
font-size: 16px;
width: 190px;
color: #333333;
padding: 6px 8px;
background: white;
background: rgba(255,255,255,0.5);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
font-family: 'Titillium Web', sans-serif;
}
.legend i {
width: 20px;
height: 20px;
float: left;
margin-right: 8px;
opacity: 0.9;
}
.legend img {
width: 16px;
height: 16px;
margin-right: 3px;
float: left;
}
.legend p {
font-size: 14px;
line-height: 20px;
margin: 0;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<script src="https://unpkg.com/leaflet@1.7.0/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
// 1. Create a map object.
var mymap = L.map('map', {
center: [35.5946,-82.5540], //note that we've centered the map to downtown AVL
zoom: 13, //this line adjusts the starting zoom level of the map
maxZoom: 18,//this line sets the maximum zoom level
minZoom: 11,//this line sets the minimum zoom level
detectRetina: true // detect whether the screen is high resolution or not.
});
// 2. Add a base map.
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png').addTo(mymap);
// 3. Add Airbnb GeoJSON Data
// Null variable that will hold Airbnb data
var airbnb_listings = null;
// add several extra spaces here.
//steps 4, 5, etc. will be inserted in this line location.
// 4. build up a set of colors from colorbrewer's dark2 category
var colors = chroma.scale('Dark2').mode('lch').colors(3);
// 5. dynamically append style classes to this page. The style classes will be used to shade the markers.
// We can use a for loop to do this.
for (i = 0; i < 3; i++) {
$('head').append($("<style> .marker-color-" + (i + 1).toString() + " { color: " + colors[i] + "; font-size: 15px; text-shadow: 0 0 3px #ffffff;} </style>"));
}
// Get GeoJSON and put it on the map when it loads
// Make sure you have the correct directory path below
// You can see we're also adding attribution information for our data sources
airbnb_listings = L.geoJson.ajax("airbnb_listings.geojson",{
// assign a function to the onEachFeature parameter of the airbnb_listings object.
// Then each (point) feature will have a popup window.
// The content of the popup window is the value of `property_t` from the attribute table
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.property_t);
},
pointToLayer: function(feature, latlng) {
var id = 0;
if (feature.properties.property_t == "Entire house") { id = 0; }
else if (feature.properties.property_t == "Private room in house") { id = 1; }
else { id = 2;} // All other property types from attribute table
return L.marker(latlng, {icon: L.divIcon({className: 'fab fa-airbnb marker-color-' + (id + 1).toString() })});
},
attribution: 'Airbnb Listings © Inside Airbnb | Asheville Zoning Districts © City of Asheville Open Data | Base Map © CartoDB | Map Author: Abe Krell'
}).addTo(mymap);
// 6. Set function for color ramp
colors = chroma.scale('Purples').colors(5); //we'll use 5 classes of purples
// this function manually defines your choropleth classification system
//so you'll need to figure out which break points you'd like to use
//based on the data distribution
//this equal interval classification with 5 classes, takes the range of the
//data (133) and divides it by 5, to show there are intervals of 27 per class
//so...
function setColor(density) {
var id = 0;
if (density > 106) { id = 4; } //133-27=106:highest fifth class
else if (density > 79 && density <= 106) { id = 3; } //106-27=79:4thclass
else if (density > 52 && density <= 79) { id = 2; } //79-27=52:3rdclass
else if (density > 25 && density <= 52) { id = 1; } //52-27=25:2ndclass
else { id = 0; }
return colors[id];
}
// 7. Set style function that sets fill color property equal to total Airbnbs
function style(feature) {
return {
fillColor: setColor(feature.properties.total_bnbs),
fillOpacity: 0.4,
weight: 2.5,
opacity: 1,
color: '#C70039',
dashArray: '4'
};
}
L.geoJson.ajax("zoning_districts.geojson", {
style: style
}).addTo(mymap);
// 9. Create Leaflet Control Object for Legend
var legend = L.control({position: 'topright'});
// 10. Function that runs when legend is added to map
legend.onAdd = function () {
// Create Div Element and Populate it with HTML
var div = L.DomUtil.create('div', 'legend');
//this line creates a title for the choropleth part of the legend
div.innerHTML += '<b>Airbnbs per District</b><br />';
//notice the class breaks entered at the end of the next 5 lines
//the colors specify the shade of purple that we used to do the polygon shading
div.innerHTML += '<i style="background: ' + colors[4] + '; opacity: 0.5"></i><p>107+</p>';
div.innerHTML += '<i style="background: ' + colors[3] + '; opacity: 0.5"></i><p>80-106</p>';
div.innerHTML += '<i style="background: ' + colors[2] + '; opacity: 0.5"></i><p>53-79</p>';
div.innerHTML += '<i style="background: ' + colors[1] + '; opacity: 0.5"></i><p>26-52</p>';
div.innerHTML += '<i style="background: ' + colors[0] + '; opacity: 0.5"></i><p> 0-25</p>';
//this line provides the legend title for the airbnb colored symbols
div.innerHTML += '<hr><b>Property Type<b><br />';
//the next 3 lines call the airbnb icon along with its proper color
//notice the names of the Airbnb property types listed within the <p> tags at the end of the lines
div.innerHTML += '<i class="fab fa-airbnb marker-color-1"></i><p>Entire house</p>';
div.innerHTML += '<i class="fab fa-airbnb marker-color-2"></i><p>Private room in house</p>';
div.innerHTML += '<i class="fab fa-airbnb marker-color-3"></i><p>Other</p>';
// Return the Legend div containing the HTML content
return div;
};
// 11. Add a legend to map
legend.addTo(mymap);
// 12. Add a scale bar to map
L.control.scale({position: 'bottomleft'}).addTo(mymap);
</script>
</body>
</html>