setup ts

build.js

@@ -6,7 +6,7 @@ const isDev = process.argv.includes("--dev");
 const config = {
   entryPoints: ["frontend/static/frontend/ts/main.ts"], // il tuo entry point
   bundle: true,
-  outdir: "frontend/static/frontend/dist",
+  outdir: "frontend/static/frontend/dist/js",
   format: "iife", // o 'iife' se serve per un tag <script> classico
   target: "es2020",
   sourcemap: isDev,

bun.lock

@@ -5,6 +5,7 @@
       "dependencies": {
         "@types/maplibre-gl": "^1.14.0",
         "esbuild": "^0.27.3",
+        "maplibre-gl": "^5.18.0",
       },
     },
   },

frontend/static/frontend/ts/main.ts

@@ -1,3 +1,21 @@
 import add from "./lib/add";
 
+import { Map } from "maplibre-gl";
+
 console.log(add(1, 2));
+
+const map = new Map({
+  style:
+    "https://api.maptiler.com/maps/019be805-c88e-7c8b-9850-bc704d72e604/style.json?key=8nmgHEIZQiIgqQj3RZNa",
+  container: "map",
+  zoom: 15,
+});
+
+map.on("load", () => {
+  navigator.geolocation.getCurrentPosition((position) => {
+    map.panTo({
+      lat: position.coords.latitude,
+      lng: position.coords.longitude,
+    });
+  });
+});

frontend/templates/frontend/home.html

@@ -9,5 +9,5 @@
 {% endblock %}
 
 {% block js_bottom %}
-    <script src="{% static 'frontend/dist/main.js' %}"></script>
+    <script src="{% static 'frontend/dist/js/main.js' %}"></script>
 {% endblock %}

package.json

@@ -1,7 +1,8 @@
 {
   "dependencies": {
     "@types/maplibre-gl": "^1.14.0",
-    "esbuild": "^0.27.3"
+    "esbuild": "^0.27.3",
+    "maplibre-gl": "^5.18.0"
   },
   "scripts": {
     "dev": "bun run build.js --dev",

tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "types": ["maplibre-gl"],
+    "lib": ["ES2020", "DOM"],
+    "noEmit": true
+  },
+  "include": ["frontend/static/frontend/ts/**/*.ts"]
+}