-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (139 loc) · 5.91 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home values per square foot in Los Angeles County</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="description" content="An interactive map of residential properties in Los Angeles County that shows value per square foot by color gradient.">
<!-- itemprop tags for Google -->
<meta itemprop="name" content="Home values per square foot in Los Angeles County">
<meta itemprop="description" content="An interactive map of residential properties in Los Angeles Countythat shows value per square foot by color gradient.">
<meta itemprop="image" content="https://lukeknipe.com/la_property_values/og.png">
<!-- og tags for Facebook -->
<meta property="og:title" content="Home values per square foot in Los Angeles County" />
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="https://lukeknipe.com/la_property_values/">
<meta property="og:type" content="website">
<meta property="og:description" content="An interactive map of residential properties in Los Angeles County that shows value per square foot by color gradient.">
<meta property="og:image" content="https://lukeknipe.com/la_property_values/og.png">
<meta property="og:image:alt" content="Home values per square foot in Los Angeles County">
<!-- Twitter tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Home values per square foot in Los Angeles County">
<meta name="twitter:description" content="An interactive map of residential properties in Los Angeles County that shows value per square foot by color gradient.">
<meta name="twitter:image" content="https://lukeknipe.com/la_property_values/og.png">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
<link rel="canonical" href="https://lukeknipe.com/la_property_values/" />
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="map"></div>
<div class="map-overlay" id="legend"><b>Home value per sqft</b><br><br></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibHVrZWtuaXBlIiwiYSI6ImNsNW13ajU1azAwZmszZXBxeWV0ZWtlaTgifQ.llc0hOFsg4QzV7tiR1jLdg';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/lukeknipe/clqva5hd200cg01pz0gvzgxdp', // style URL
center: [-118.3, 34.0], // starting position [lng, lat]
zoom: 9 // starting zoom
});
map.on('load', function () {
map.addSource('value_per', {
type: 'vector',
url: 'mapbox://lukeknipe.0tak15ew' // Tileset URL
});
map.addLayer({
'id': 'value_per',
'type': 'circle',
'source': 'value_per',
'source-layer': 'LA_value_per_newer',
paint: {
'circle-opacity': 0 // Setting opacity to zero because this feature is only here to supply data to the popup
}
})
map.on('click', 'value_per', function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var ain = e.features[0].properties.AIN;
var address = e.features[0].properties.SitusFullA;
var value = e.features[0].properties.VALUE;
var sqft = e.features[0].properties.SQFT;
// var value_per = e.features[0].properties.VALUE_PER;
var vp = value/sqft;
let value_per = vp.toFixed(2);
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML("AIN: <a href='https://portal.assessor.lacounty.gov/parceldetail/" + ain + "' target='_blank'>" + ain + "</a><br>" + address + "<br>2021 Value: " + value + "<br>Square Footage: " + sqft + "<br>Value/sqft: <b>$" + value_per + "</b>")
.addTo(map);
});
map.on('mouseenter', 'value_per', function () {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'value_per', function () {
map.getCanvas().style.cursor = '';
});
// define layer names
const layers = [
'0 - 71',
'71 - 123',
'123 - 159',
'159 - 189',
'189 - 220',
'220 - 255',
'255 - 294',
'294 - 338',
'338 - 389',
'389 - 459',
'459 - 584',
'584 +',
];
const colors = [
'#2b83ba',
'#59a4b2',
'#88c5aa',
'#b3e0a7',
'#d2edb0',
'#f0f9ba',
'#fff1ae',
'#fed38c',
'#feb669',
'#f3854e',
'#e54f35',
'#d7191c'
];
// create legend
const legend = document.getElementById('legend');
layers.forEach((layer, i) => {
const color = colors[i];
const item = document.createElement('div');
const key = document.createElement('span');
key.className = 'legend-key';
key.style.backgroundColor = color;
const value = document.createElement('span');
value.innerHTML = `${layer}`;
item.appendChild(key);
item.appendChild(value);
legend.appendChild(item);
});
});
function Hide(HideID)
{
HideID.style.display = "none";
};
</script>
<div class="header">
<span class="lk"><a href="https://lukeknipe.com">LK</a></span><span class="path"> > <a href="https://lukeknipe.com/maps">Maps</a></span>
</div>
<div class="ShowHide" id="Bar">
<div id="right">
<a href="#" onclick="Hide(Bar);">X</a>
</div>
<div id="left">
<b>About this map:</b><br><br>Values and square footages are based on data published by the Los Angeles County Assessor for Tax Year 2021. Click on any dot for a pop-up with information about the underlying property. For even more information, click on the AIN in the pop-up to view the property's page on the L.A. County Assessor Portal.
</div>
</div>
</body>
</html>