Convertisseur de code

Collez le code cartographique que vous avez aujourd'hui. Le convertisseur le réécrit pour @unmap/sdk et liste chaque modification apportée, tout ce qu'il vous reste à terminer à la main et ce qui n'a pas d'équivalent chez unmap. Il s'exécute dans votre navigateur : votre code n'est jamais envoyé nulle part.

import { Unmap, maplibregl } from "@unmap/sdk";
import "maplibre-gl/dist/maplibre-gl.css";

const unmap = new Unmap({
  key: "um_live_...",
  container: "map",
  style: "base",
  center: [-114.0719, 51.0447],
  zoom: 11,
  controls: false,
});
const map = unmap.map;
map.setPitch(30);
map.addControl(new maplibregl.NavigationControl());

new maplibregl.Marker()
  .setLngLat([-114.0719, 51.0447])
  .setPopup(new maplibregl.Popup().setHTML("<p>Calgary Tower</p>"))
  .addTo(map);

// unmap: const results = await unmap.geocoder.search("Calgary Tower");
const url = new URL("https://api.mapbox.com/search/geocode/v6/forward");
url.searchParams.set("q", "Calgary Tower");
url.searchParams.set("access_token", mapboxgl.accessToken);
const data = await (await fetch(url)).json();

const origin = [-114.0719, 51.0447];
const dest = [-113.9871, 51.0899];
// unmap: const route = await unmap.router.route(origin, dest, { mode: "auto" });
const directions = new URL(`https://api.mapbox.com/directions/v5/mapbox/driving/${origin.join(",")};${dest.join(",")}`);

Ce qu'il réécrit

Les règles sont les correspondances documentées par les guides Mapbox et Google Maps, et les exemples de ces guides lui servent de tests.

• La carte. new mapboxgl.Map et new google.maps.Map deviennent new Unmap({ key, … }), et votre variable de carte devient unmap.map, donc le code qui suit continue de fonctionner. Les options qu'Unmap ne prend pas, comme pitch ou tilt, deviennent des setters sur la carte.
• La clé et le style. Un jeton Mapbox ou une clé Google devient um_live_.... Une variable d'environnement garde sa place sous un nouveau nom : NEXT_PUBLIC_MAPBOX_TOKEN devient NEXT_PUBLIC_UNMAP_KEY. streets et roadmap deviennent base, outdoors et terrain deviennent outdoor, et light et dark deviennent un mode.
• Les coordonnées. Les { lat, lng } de Google et new google.maps.LatLng(lat, lng) sont inversés en [lng, lat], et latLng.lat() devient lngLat.lat.
• Repères, infobulles et événements. Marker, Popup et les contrôles viennent de maplibregl. Une InfoWindow Google ouverte au clic devient marker.setPopup(popup), et addListener devient on avec les noms d'événements de MapLibre.

Ce qu'il vous laisse

Une requête à un service web (géocodage, itinéraire, recherche à proximité) tient sur plusieurs lignes : une URL construite, appelée, puis décortiquée. La réécrire sans risque demande plus que des règles, donc le convertisseur la laisse en place et écrit l'appel unmap au-dessus, en commentaire, avec votre requête et vos coordonnées. Mettez-le à la place et supprimez la requête.

Le résultat est un point de départ, pas une version prête à compiler. Lisez la liste sous le code : ce que le convertisseur n'a pas reconnu y est signalé et laissé tel quel, jamais supprimé. Les guides Mapbox et Google Maps expliquent chaque modification en détail.