add demo route

src/main.ts

@@ -13,7 +13,7 @@ import { polygon } from "@turf/helpers";
 
 // PROJECT
 import { LAYERS } from "@/layers";
-import { panToCurrentLocation } from "@/utilities/geo";
+import { panToCurrentLocation, route } from "@/utilities/geo";
 
 // ENV
 const API_KEY = import.meta.env.VITE_MAPTILER_API_KEY || "";
@@ -95,13 +95,13 @@ map.on("load", () => {
 
       if (hoveredId) {
         map.setFilter(LAYERS.BUILDING_HIGHLIGHT.id, layerFilterEq(hoveredId));
-        map.setFilter(LAYERS.ROAD_HIGHLIGHT.id, layerFilterEq(hoveredId));
+        // map.setFilter(LAYERS.ROAD_HIGHLIGHT.id, layerFilterEq(hoveredId));
         map.getCanvas().style.cursor = "pointer";
       }
     } else {
       map.getCanvas().style.cursor = "default";
       map.setFilter(LAYERS.BUILDING_HIGHLIGHT.id, layerFilterEq());
-      map.setFilter(LAYERS.ROAD_HIGHLIGHT.id, layerFilterEq());
+      // map.setFilter(LAYERS.ROAD_HIGHLIGHT.id, layerFilterEq());
     }
   });
 
@@ -176,6 +176,37 @@ map.on("load", () => {
       map.getCanvas().style.cursor = "default";
     }
   });
+
+  // PROVA ROUTE
+  route(
+    "routed-foot",
+    "12.234413623809816,45.486327517344776",
+    "12.228652238845827,45.48756107353653",
+  ).then((res) => {
+    map.addSource("route", {
+      type: "geojson",
+      data: {
+        type: "Feature",
+        properties: {},
+        geometry: res.routes[0].geometry as GeoJSON.Geometry,
+      },
+    });
+
+    map.addLayer({
+      id: "prova",
+      type: "line",
+      source: "route",
+      layout: {
+        "line-join": "round",
+        "line-cap": "round",
+      },
+      paint: {
+        "line-color": "#FF0000", // Colore blu
+        "line-width": 5, // Spessore in pixel
+        "line-opacity": 0.8,
+      },
+    });
+  });
 });
 
 panToCurrentLocation(map);

src/types/types.ts

@@ -0,0 +1,62 @@
+export interface Route {
+  code: string;
+  routes: RouteElement[];
+  waypoints: Waypoint[];
+}
+
+export interface RouteElement {
+  legs: Leg[];
+  weight_name: string;
+  geometry: Geometry;
+  weight: number;
+  duration: number;
+  distance: number;
+}
+
+export interface Geometry {
+  coordinates: Array<number[]>;
+  type: string;
+}
+
+export interface Leg {
+  steps: Step[];
+  weight: number;
+  summary: string;
+  duration: number;
+  distance: number;
+}
+
+export interface Step {
+  intersections: Intersection[];
+  driving_side: string;
+  geometry: Geometry;
+  maneuver: Maneuver;
+  name: string;
+  mode: string;
+  weight: number;
+  duration: number;
+  distance: number;
+}
+
+export interface Intersection {
+  out?: number;
+  entry: boolean[];
+  bearings: number[];
+  location: number[];
+  in?: number;
+}
+
+export interface Maneuver {
+  bearing_after: number;
+  bearing_before: number;
+  location: number[];
+  type: string;
+  modifier?: string;
+}
+
+export interface Waypoint {
+  hint: string;
+  location: number[];
+  name: string;
+  distance: number;
+}

src/utilities/geo.ts

@@ -1,5 +1,8 @@
 import { Map } from "@maptiler/sdk";
 import { INITIAL_ZOOM } from "@/constants";
+import { Route } from "@/types/types";
+
+type Transport = "routed-foot" | "routed-bike" | "routed-car";
 
 export const panToCurrentLocation = (map: Map) => {
   navigator.geolocation.getCurrentPosition((position) => {
@@ -10,3 +13,19 @@ export const panToCurrentLocation = (map: Map) => {
     });
   });
 };
+
+export const route = async (
+  transport: Transport,
+  from: string,
+  to: string,
+): Promise<Route> => {
+  const BASE_URL = import.meta.env.VITE_ROUTE_SERVICE;
+  const url = `${BASE_URL}/${transport}/route/v1/driving/${from};${to}?overview=full&alternatives=false&steps=true&geometries=geojson`;
+  const response = await fetch(url);
+
+  if (response.ok) {
+    return response.json() as unknown as Route;
+  } else {
+    throw new Error(`Routing API returned an error: ${response.statusText}`);
+  }
+};