Реструкторизованы статические файлы

wheretogo/templates/maps/map.html

@@ -1,36 +1,23 @@
 {% extends "common/base.html" %}
 
+{% load static %}
+
 {% block head_title %}WhereToGo{% endblock %}
 
+{% block extra_head %}
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
+integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
+crossorigin=""/>
+<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
+integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
+crossorigin=""></script>
+<link rel="stylesheet" type="text/css" href="{% static 'maps/css/map.css' %}" />
+{% 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 %}
 
+{% block scripts %}
+<script src="{% static 'maps/js/map.js' %}"></script>
 {% endblock %}