login page

src/constants.ts

@@ -1,3 +1 @@
-export const MAP_STYLE = "019be805-c88e-7c8b-9850-bc704d72e604";
-export const API_KEY = "8nmgHEIZQiIgqQj3RZNa";
 export const INITIAL_ZOOM = 17;

src/login.ts

@@ -0,0 +1,14 @@
+// STYLES
+// import "modern-normalize/modern-normalize.css";
+// import "@fontsource-variable/jetbrains-mono";
+import "@/main.css";
+// import "@maptiler/sdk/dist/maptiler-sdk.css";
+
+// LIBRARIES
+// import $ from "jquery";
+// import { FilterSpecification, Map, config } from "@maptiler/sdk";
+// import { createIcons, Locate, LocateFixed } from "lucide";
+// import area from "@turf/area";
+// import { polygon } from "@turf/helpers";
+
+console.log("login");

src/main.ts

@@ -8,12 +8,17 @@ import "@maptiler/sdk/dist/maptiler-sdk.css";
 import $ from "jquery";
 import { FilterSpecification, Map, config } from "@maptiler/sdk";
 import { createIcons, Locate, LocateFixed } from "lucide";
+import area from "@turf/area";
+import { polygon } from "@turf/helpers";
 
 // PROJECT
 import { LAYERS } from "@/layers";
-import { API_KEY, MAP_STYLE } from "@/constants";
 import { panToCurrentLocation } from "@/utilities/geo";
 
+// ENV
+const API_KEY = import.meta.env.VITE_MAPTILER_API_KEY || "";
+const MAP_STYLE = import.meta.env.VITE_MAPTILER_STYLE;
+
 createIcons({
   icons: {
     Locate,
@@ -21,13 +26,29 @@ createIcons({
   },
 });
 
+// TODO
+// WEBSOCKET TBD!!
+// const ws = new WebSocket(`ws://${import.meta.env.VITE_SERVER_URL}/ws`);
+// ws.onopen = () => {
+//   console.log("opened");
+// };
+// ws.onmessage = (ev) => {
+//   console.log("il server dice");
+//   console.log(ev.data);
+// };
+
 config.apiKey = API_KEY;
 
+interface SelectedFeature {
+  id: number;
+  area: number;
+}
+
 const $info = $("#layer");
 const $lnglat = $("#lnglat");
 const $selected = $("#selected");
 
-let selected: Array<string | number | undefined> = [];
+let selected: Array<SelectedFeature> = [];
 
 const map = new Map({
   container: "map",
@@ -54,10 +75,7 @@ map.on("load", () => {
   map.addLayer(LAYERS.BUILDING_SELECT);
   map.addLayer(LAYERS.ROAD_HIGHLIGHT);
 
-  // console.log(map.getLayer("road_network")?.source);
-  // console.log(map.getLayer("road_network")?.sourceLayer);
-  // console.log(map.getLayer("road_network")?.paint);
-
+  // Handle map hover.
   map.on("mousemove", (e) => {
     // Prende le features solo di questi livelli
     const features = map.queryRenderedFeatures(e.point, {
@@ -65,7 +83,7 @@ map.on("load", () => {
     });
 
     // Aggiorna latitudine e longitudine nel container al mouse over.
-    $lnglat.html(`${e.lngLat.lng} ${e.lngLat.lat}`);
+    $lnglat.html(`${e.lngLat.lng}<br>${e.lngLat.lat}`);
 
     if (features && features.length > 0) {
       // Prendo l'ID della top level feature in hover
@@ -87,6 +105,7 @@ map.on("load", () => {
     }
   });
 
+  // Handle map click.
   map.on("click", (e) => {
     const features = map.queryRenderedFeatures(e.point, {
       layers: ["building_matteo"],
@@ -94,17 +113,45 @@ map.on("load", () => {
 
     if (features && features.length > 0) {
       const clicked = features[0];
-      const clickedId = clicked.id;
+      const clickedId: number =
+        typeof clicked.id == "string" ? parseInt(clicked.id) : clicked.id || 0;
+      let clickedArea: number = 0.0;
 
-      if (!selected.includes(clickedId)) {
-        selected.push(clickedId);
-      } else {
-        selected.splice(selected.indexOf(clickedId), 1);
+      // TODO
+      // WEBSOCKET TBD!
+      // ws.send(
+      //   JSON.stringify({
+      //     clicked: clickedId,
+      //   }),
+      // );
+
+      // Calculate the area of the selected.
+      if (
+        clicked.geometry.type == "Polygon" &&
+        clicked.geometry.coordinates.length > 0
+      ) {
+        let clickedCoords = clicked.geometry.coordinates[0];
+        let clickedPolygon = polygon([clickedCoords]);
+        clickedArea = Math.trunc(area(clickedPolygon));
       }
 
+      // Handle "selected list" with deletion.
+      const i = selected.findIndex((u) => u.id == clickedId);
+      if (i !== -1) {
+        selected.splice(i, 1);
+      } else {
+        selected.push({
+          id: clickedId,
+          area: clickedArea,
+        });
+      }
+
+      // Update the "selected" list.
       const selectedList = $("<ul>");
-      selected.forEach((id) => {
-        selectedList.append(`<li>${id}</li>`);
+      selected.forEach((feature) => {
+        selectedList.append(
+          `<li>${feature.id} (${feature.area} m<sup>2</sup>)</li>`,
+        );
       });
       $selected.empty().append(selectedList);
 
@@ -112,9 +159,17 @@ map.on("load", () => {
         $selected.append("<div>None</div>");
       }
 
+      // Sets the selected layer.
       if (clickedId) {
         map.setFilter(LAYERS.BUILDING_HIGHLIGHT.id, layerFilterEq());
-        map.setFilter(LAYERS.BUILDING_SELECT.id, layerFilterIn(selected));
+        map.setFilter(
+          LAYERS.BUILDING_SELECT.id,
+          layerFilterIn(
+            selected.map((s) => {
+              return s.id;
+            }),
+          ),
+        );
         map.getCanvas().style.cursor = "pointer";
       }
     } else {