Depuis Mapbox

MapLibre GL JS est un fork de Mapbox GL JS. La carte que vous avez (repères, infobulles, sources, couches, map.on) continue de fonctionner. Ce qui change, c'est le jeton, l'URL de style, et les hôtes de géocodage et d'itinéraires.

C'est le plus court des quatre guides. Restez sur Mapbox s'il vous faut une couverture hors du Canada, Mapbox Search Box, l'API Matrix, ou un style Studio que vous n'êtes pas prêt à quitter. unmap a ses propres styles et un créateur de thèmes ; il ne charge pas un document mapbox://styles/....

npm i @unmap/sdk

pnpm add @unmap/sdk

yarn add @unmap/sdk

bun add @unmap/sdk

Vous arrivez d'une balise <script> ? unmap se charge de la même façon, sans étape de compilation : voyez le Démarrage rapide.

Une carte Mapbox, c'est un jeton plus une URL de style. Une carte unmap, c'est une clé plus un nom de style. Le constructeur se ressemble parce que c'est le même constructeur, un fork plus tard.

mapboxgl.accessToken = "pk.eyJ...";
const map = new mapboxgl.Map({
  container: "map",
  center: [-114.0719, 51.0447],
  zoom: 11,
});

import { Unmap } from "@unmap/sdk";
 
const unmap = new Unmap({
  key: "um_live_...",
  container: "map",
  center: [-114.0719, 51.0447],
  zoom: 11,
});

import { Unmap } from "@unmap/sdk";

const unmap = new Unmap({
  key: "um_live_...",
  container: "map",
  center: [-114.0719, 51.0447],
  zoom: 11,
});

Les coordonnées restent [lng, lat]. Vous ne les inversez pas. unmap.map est la carte MapLibre GL, donc flyTo, addSource, addLayer et on("click") sont inchangés.

streets devient style: "base". outdoors devient outdoor. light / dark sont un mode, pas un style : style: "base", mode: "dark". Il n'y a pas de style Standard ni de repères 3D. Les douze styles sont sur l'API de cartes.

Si vous importez déjà maplibre-gl et ne vouliez que les tuiles Mapbox, sautez le SDK et passez l'URL de style au constructeur MapLibre que vous avez. Appeler l'API directement montre cette page.

Les constructeurs Marker et Popup de Mapbox sont ceux de MapLibre. Changez l'import et gardez la chaîne.

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

import { maplibregl } from "@unmap/sdk";
 
new maplibregl.Marker()
  .setLngLat([-114.0719, 51.0447])
  .setPopup(new maplibregl.Popup().setHTML("<p>Calgary Tower</p>"))
  .addTo(unmap.map!);

import { Unmap, maplibregl } from "@unmap/sdk";

const unmap = new Unmap({
  key: "um_live_...",
  container: "map",
  center: [-114.0719, 51.0447],
  zoom: 11,
});

const [place] = await unmap.geocoder.search("Calgary Tower");

new maplibregl.Marker({ color: "#FF3E9A" })
  .setLngLat([place.lng, place.lat])
  .setPopup(new maplibregl.Popup().setText(place.name))
  .addTo(unmap.map!);

mapboxgl.NavigationControl est déjà sur la carte (controls: false l'enlève). GeolocateControl et ScaleControl viennent du même export maplibregl. Le regroupement reste une source GeoJSON avec cluster: true ; c'est MapLibre, pas une fonctionnalité Mapbox que vous laissez derrière.

L'API de géocodage Mapbox v6 (et le greffon mapbox-gl-geocoder) deviennent unmap.geocoder. Direct, inverse et saisie semi-automatique sont quatre points de terminaison avec une seule forme de résultat. Il n'y a pas d'interface Search Box à déposer : vous affichez la liste.

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 [lng, lat] = data.features[0].geometry.coordinates;
map.setCenter([lng, lat]);

const results = await unmap.geocoder.search("Calgary Tower");
const [first] = results;
if (first) unmap.map!.setCenter([first.lng, first.lat]);

const hints = await unmap.geocoder.autocomplete("calgary tow", { limit: 5 });
const here = await unmap.geocoder.reverse(-114.07, 51.05);

import { Unmap } from "@unmap/sdk";

const unmap = new Unmap({ key: "um_live_..." });

const results = await unmap.geocoder.search("Calgary Tower", { limit: 3 });

Mapbox renvoie une FeatureCollection GeoJSON. unmap renvoie un tableau JSON de { id, name, layer, lng, lat }. Il n'y a pas de mapbox_id, pas de suggest Search Box, et pas de données de lieu persistantes. La recherche par catégorie est geocoder.nearby("pharmacy", { near: [-114.07, 51.05] }), pas un filtre de catégorie Mapbox sur le géocodage direct. L'API de géocodage est le contrat.

Les géocodes permanents et les conditions Mapbox sur le stockage des coordonnées ne s'appliquent pas. Mettez en cache ce que vous voulez ; la page Forfaits est la limite qui compte.

Mapbox Directions v5 devient router.route. La géométrie est déjà une LineString GeoJSON, donc la couche que vous dessiniez pour Mapbox continue de fonctionner.

const origin = [-114.0719, 51.0447];
const dest = [-113.9871, 51.0899];
const url = new URL(`https://api.mapbox.com/directions/v5/mapbox/driving/${origin.join(",")};${dest.join(",")}`);
url.searchParams.set("geometries", "geojson");
url.searchParams.set("access_token", mapboxgl.accessToken);
const data = await (await fetch(url)).json();
const line = data.routes[0].geometry;

const route = await unmap.router.route([-114.0719, 51.0447], [-113.9871, 51.0899], {
  mode: "auto",
});
const line = route.geometry;

import { Unmap } from "@unmap/sdk";

const unmap = new Unmap({
  key: "um_live_...",
  container: "map",
  center: [-114.03, 51.07],
  zoom: 11,
});

const route = await unmap.router.route([-114.0719, 51.0447], [-113.9871, 51.0899], { mode: "auto" });

unmap.map!.on("load", () => {
  unmap.map!.addSource("route", {
    type: "geojson",
    data: { type: "Feature", properties: {}, geometry: route.geometry },
  });
  unmap.map!.addLayer({
    id: "route-line",
    type: "line",
    source: "route",
    layout: { "line-cap": "round", "line-join": "round" },
    paint: { "line-color": "#FF3E9A", "line-width": 3 },
  });
});

mapbox/driving est auto. mapbox/walking est pedestrian. mapbox/cycling est bicycle. Il n'y a pas de profil driving-traffic ni d'annotations de congestion. Il n'y a pas de points de passage. L'isochrone est de premier plan :

const bands = await unmap.router.isochrone([-114.07, 51.05], { minutes: [10, 20] });

Les API Isochrone, Matrix et Optimization de Mapbox n'ont pas de jumeau unmap, sauf l'isochrone. Une matrice many-to-many, c'est des appels route répétés, et vous sentirez le compteur. L'API d'itinéraires documente le reste, y compris le camion.

Ce qui n'a pas d'équivalent

• Couverture hors du Canada. Un style se charge encore ; les tuiles sont vides au-delà de la frontière. Un itinéraire qui quitte le pays est un 400.
• Styles Mapbox Studio. Passez un code de thème depuis /create, ou choisissez l'un des douze styles. Vous ne pouvez pas pointer MapLibre vers un style mapbox:// et une clé unmap en même temps.
• Search Box, Matrix, Optimization, Map Matching.
• Mapbox Standard, repères 3D et cartes intérieures.
• Les greffons Mapbox GL draw, geocoder et directions. Utilisez MapLibre Draw, votre propre interface de recherche, et unmap.router.

Liste de vérification

• pk.eyJ... remplacé par um_live_... / um_test_...
• URL de style remplacée par un nom de style (base, outdoor, …) ou une URL https://api.unmap.dev/styles/...
• Import mapbox-gl échangé contre @unmap/sdk (ou maplibre-gl plus l'URL de style)
• Hôte de géocodage déplacé vers unmap.geocoder ; le traitement de FeatureCollection réécrit en tableau
• Hôte d'itinéraires déplacé vers unmap.router
• Couches réservées à Studio, Search Box et Matrix abandonnés ou laissés chez Mapbox
• Origine configurée pour le trafic de production (Forfaits et limites)

Le Guide de démarrage est la même carte construite de zéro. Si le moteur de rendu était déjà MapLibre, Appeler l'API directement est le chemin le plus court.