Базовая карта

wheretogo/templates/maps/map.html

@@ -0,0 +1,36 @@
+{% extends "common/base.html" %}
+
+{% block head_title %}WhereToGo{% endblock %}
+
+{% block content %}
+
+<div id="map"></div>
+<script>
+    const copy = "© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors";
+    const url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+    const osm = L.tileLayer(url, { attribution: copy });
+    const map = L.map("map", { layers: [osm], minZoom: 5 });
+    map.
+        locate()
+        .on("locationfound", (e) => map.setView(e.latlng, 8))
+        .on("locationerror", () => map.setView([0, 0], 5));
+    
+    async function load_facilities() {
+        const facilities_url = `/api/facilities/?in_bbox=${map.getBounds().toBBoxString()}`
+        const response = await fetch(facilities_url)
+        const geojson = await response.json()
+        return geojson
+    }
+    
+    async function render_facilities() {
+        const facilities = await load_facilities();
+        L.geoJSON(facilities)
+        .bindPopup((layer) => layer.feature.properties.name)
+        .addTo(map);
+    }
+    
+    map.on("moveend", render_facilities);
+    
+</script>
+
+{% endblock %}