add js types

frontend/static/frontend/js/home.js

@@ -0,0 +1,16 @@
+/** @type {import('maplibre-gl')} */
+const maplibregl = window.maplibregl;
+
+var map = new maplibregl.Map({
+  container: "map",
+  style:
+    "https://api.maptiler.com/maps/019be805-c88e-7c8b-9850-bc704d72e604/style.json?key=8nmgHEIZQiIgqQj3RZNa",
+  center: [-74.5, 40],
+  zoom: 9,
+});
+
+map.on("load", () => {
+  navigator.geolocation.getCurrentPosition((position) => {
+    // map.panTo(...)
+  });
+});

frontend/templates/frontend/home.html

@@ -1,5 +1,7 @@
 {% extends 'frontend/base.html' %}
 
+{% load static %}
+
 {% block title %}Home{% endblock %}
 
 {% block content %}
@@ -7,12 +9,5 @@
 {% endblock %}
 
 {% block js_bottom %}
-    <script>
-        var map = new maplibregl.Map({
-            container: "map",
-            style: "https://api.maptiler.com/maps/019be805-c88e-7c8b-9850-bc704d72e604/style.json?key=8nmgHEIZQiIgqQj3RZNa",
-            center: [-74.5, 40],
-            zoom: 9,
-        });
-    </script>
+    <script src="{% static 'frontend/js/home.js' %}"></script>
 {% endblock %}