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
|
var map;
InitializeMap({
city: "Buffalo",
latitude: 42.8864,
longitude: -78.8784
});
for (var i in cities) {
var select = document.getElementById("city_list");
var option = document.createElement("option");
option.text = cities[i].city;
option.value = i;
select.add(option);
}
document.getElementById("city_list").addEventListener('change', function () {
city = cities[this.value]
reRenderMap(city);
});
function InitializeMap(city) {
map = L.map('map').setView([city.latitude, city.longitude], 12);
displayMap(map, city);
}
function reRenderMap(city) {
map.remove();
map = L.map('map').setView([city.latitude, city.longitude], 12);
displayMap(map, city);
}
function displayMap(map, city) {
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
accessToken: 'pk.eyJ1IjoibHVjaWZlcmNyIiwiYSI6ImNrNGx0amIzejJkaHIzZm8yODB2dGx2cXYifQ.sopB-tKzpX_qXc30bv_puQ'
}).addTo(map);
getBoundaries(city.city).then(function (bd) {
var lines = [];
for (var element of bd) {
const extractedBoundary = {
type: 'Feature',
properties: {
name: city.city
},
geometry: {
type: element.gs_type,
coordinates: element.boundaries.coordinates
}
}
lines.push(extractedBoundary);
}
var geoJSON = {
type: 'FeatureCollection',
features: lines
};
var gs = L.geoJSON(geoJSON).addTo(map);
try {
map.fitBounds(gs.getBounds());
} catch (e) {
L.marker([city.latitude, city.longitude]).addTo(map)
.bindPopup(city.city)
.openPopup();
}
})
}
function getBoundaries(city) {
geojson = [];
return fetch(`https://nominatim.openstreetmap.org/search.php?q=${city}&polygon_geojson=1&format=jsonv2`).then(function (response) {
return response.json();
}).then(function (data) {
counter = 0;
for (var el of data) {
if (el.type === "administrative") {
geojson.push({ boundaries: el.geojson, name: el.display_name, gs_type: el.geojson.type });
counter += 1;
}
if (counter === 1 && !el.display_name.includes("Rural")) {
break;
} else if (counter === 2 && el.display_name.includes("Rural")) {
break;
}
}
return geojson;
}).catch(function () {
return false;
});
}
|
