FR
Skip to content
All guides

Code converter

Paste the map code you have today. The converter rewrites it for @unmap/sdk and lists every change it made, everything you still need to finish by hand, and anything unmap has no equivalent for. It runs in your browser, so your code is never sent anywhere.

unmap
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(",")}`);

Changed10

  • The package import is @unmap/sdk.mapbox-gl@unmap/sdk
  • The stylesheet is MapLibre's.mapbox-gl.cssmaplibre-gl.css
  • The access token is an unmap key.mapboxgl.accessTokenkey
  • Your NavigationControl stays, so unmap's own zoom buttons are turned off.
  • The style is an unmap style name.mapbox://styles/mapbox/streets-v12style: "base"
  • Not a constructor option in unmap: set on the map once it exists.pitch: 30map.setPitch(30)
  • The map is made by new Unmap, and the MapLibre map is unmap.map.new Unmap({ key })
  • The same class, from MapLibre. ×3mapboxgl.NavigationControlmaplibregl.NavigationControlmapboxgl.Markermaplibregl.Markermapboxgl.Popupmaplibregl.Popup

To review3

  • Search: replace this request with unmap.geocoder. Results are an array of { id, name, layer, lng, lat }, not a FeatureCollection.Mapbox Geocoding
    const results = await unmap.geocoder.search("Calgary Tower");
  • Directions: replace this request with unmap.router.route. route.geometry is a GeoJSON LineString.mapbox/drivingauto
    const route = await unmap.router.route(origin, dest, { mode: "auto" });
  • In TypeScript, write unmap.map! where the map is used: it is undefined only when no container is passed.

Runs in your browser. Your code is never sent anywhere.

Full Mapbox guide

What it rewrites

The rules are the mappings the Mapbox and Google Maps guides document, and those guides' own examples are its test cases.

  • The map. new mapboxgl.Map and new google.maps.Map become new Unmap({ key, … }), and your map variable becomes unmap.map, so the code after it keeps working. Options Unmap does not take, such as pitch or tilt, become setters on the map.
  • The key and the style. A Mapbox token or Google key becomes um_live_.... An environment variable keeps its place under a new name: NEXT_PUBLIC_MAPBOX_TOKEN becomes NEXT_PUBLIC_UNMAP_KEY. streets and roadmap become base, outdoors and terrain become outdoor, and light and dark become a mode.
  • Coordinates. Google's { lat, lng } and new google.maps.LatLng(lat, lng) are flipped to [lng, lat], and latLng.lat() reads lngLat.lat.
  • Markers, popups and events. Marker, Popup and the controls come from maplibregl. A Google InfoWindow opened on click becomes marker.setPopup(popup), and addListener becomes on with MapLibre's event names.

What it leaves to you

A request to a web service (geocoding, directions, nearby search) is several lines: a URL built up, fetched, then unpicked. Rewriting that safely takes more than rules, so the converter leaves it where it is and writes the unmap call above it as a comment, with your query and coordinates filled in. Swap it in and delete the request.

The result is a starting point, not a build. Read the list under the code: anything the converter did not recognise is reported there and left as it was, never dropped. The Mapbox and Google Maps guides explain each change in full.