3 files changed, 115 insertions, 0 deletions
diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..79584dd
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,3 @@
+#map {
+  height: 100%;
+}
diff --git a/static/js/map.js b/static/js/map.js
new file mode 100644
index 0000000..a197fdb
--- /dev/null
+++ b/static/js/map.js
@@ -0,0 +1,79 @@
+var map;
+InitializeMap({
+    city: "Buffalo",
+    latitude: 42.8864,
+    longitude: -78.8784
+});
+
+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;
+    });
+}
+\ No newline at end of file
diff --git a/static/js/search.js b/static/js/search.js
new file mode 100644
index 0000000..4b9f3a2
--- /dev/null
+++ b/static/js/search.js
@@ -0,0 +1,33 @@
+const citySearch = document.getElementById('citySearch');
+citySearch.addEventListener('keyup', (e) => {
+    const fuse = new Fuse(cities, {
+        keys: ['city'],
+        threshold: 0.3,
+    });
+    const results = fuse.search(e.target.value);
+    if (results.length > 0) {
+        const resultContainer = document.getElementById('result_container');
+        resultContainer.classList.remove('hidden');
+        document.getElementById('results').innerHTML = "";
+        for (var result of results) {
+            const listElement = document.createElement('li');
+            listElement.classList.add('flex', 'items-center', 'space-x-2', 'py-2', 'px-4', 'relative', 'w-full', 'hover:bg-blue-600', 'hover:text-white', 'cursor-pointer');
+            listElement.setAttribute('latitude', result.item.latitude);
+            listElement.setAttribute('longitude', result.item.longitude);
+            listElement.innerHTML = `<span class="text-sm font-semibold">${result.item.city}</span>`;
+            listElement.addEventListener('click', (e) => {
+                citySearch.value = e.target.innerText;
+                resultContainer.classList.add('hidden');
+                city = {
+                    city: e.target.innerText,
+                    latitude: e.target.getAttribute('latitude'),
+                    longitude: e.target.getAttribute('longitude')
+                };
+                reRenderMap(city);
+            });
+            document.getElementById('results').appendChild(listElement);
+        }
+    } else {
+        document.getElementById('result_container').classList.add('hidden');
+    }
+});
+\ No newline at end of file