Mapbox

en kommerciel kilde til kortfliser og stile

Hvad det er

Mapbox er en virksomhed og den udviklerplatform, den sælger, som leverer delene af et interaktivt kort som tjenester: grunddata, stilen, koden der tegner kortet, og API’erne rundt om det. I kode dukker det ofte op som Mapbox GL, efter tegnebiblioteket. Virksomhedens kom-i-gang-vejledning kalder det en lokationsplatform, der giver udviklere byggeklodser til kort, navigation og søgning.

Kortdata ligger i flisesæt, som regel skåret op i vektorfliser, så en klient kun henter det område og det zoomniveau, der er på skærmen. Mapbox vedligeholder globale grunddatasæt, og et teams egne data kommer ind i et flisesæt via Mapbox Tiling Service (MTS) eller Uploads API. En stilart bestemmer udseendet. Den er et JSON-dokument skrevet efter Mapbox Style Specification, som navngiver sine kilder og opregner lag, der hver især plukker objekter ud af én kilde og siger, hvordan de skal tegnes. Stilarter adresseres med en URL, for eksempel mapbox://styles/mapbox/streets-v12, og laves i kontoens konsol med Mapbox Studio, designværktøjet.

Mapbox GL JS tegner resultatet i en browser, og Maps SDK’erne til iOS og Android gør det i mobilapps. GL JS-vejledningen, i version 3.33.0 i skrivende stund, siger, at biblioteket gengiver kort i 2D og 3D med OpenGL ved at kombinere vektorfliser med stilregler i browseren frem for på en server, og det er derfor, et kort kan skifte stilart eller data, mens nogen bruger det. Static Images API returnerer et billede af et kort, og Static Tiles API leverer rasterfliser lavet ud fra Studio-stilarter til biblioteker som Leaflet. Hvert kort oprettes med et adgangstoken, og tokenet knytter det til en Mapbox-konto.

Selve fliseformatet, Mapbox Vector Tile-specifikationen, er offentliggjort åbent på GitHub og koder hver flise som en Protocol Buffers-besked.

Hvorfor det betyder noget

Et webkort skal bruge kode, der tegner det, og data at tegne, fra én leverandør eller fra flere. Mapbox er svaret med én leverandør, med data, stil, gengivelse og hosting under én konto og én regning, så valget af det er et valg om, hvor meget af kortstakken man vil leje.

Gevinsterne er reelle. Grunddata er en andens opgave at holde ajour. Kortets udseende bor i et stildokument med sit eget designværktøj, adskilt fra applikationskoden. Fordi tegningen sker i browseren, kan ét flisesæt vises i flere stilarter, et lag kan filtreres eller farves om ved et klik, og det samme kort kan vise terræn i 3D. For et produkt, hvis hovedskærm er kortet, er det en stor mængde arbejde, der overlades til leverandøren.

Omkostningerne følger med den samme konto. GL JS faktureres efter kortindlæsninger, og prisvejledningen tæller én, hver gang et Map-objekt initialiseres på en side. Panorering, zoom, til- og frakobling af lag og skift af stilart inde i det kort lægger intet til, og én kortindlæsning varer højst 12 timer. Det token, kortet afregnes på, ligger i hver besøgendes browser. Og siden version 2.0.0, udgivet i december 2020, har selve gengiveren været underlagt kommercielle vilkår: changelog-filen for den udgivelse siger, at GL JS ikke længere er under 3-Clause BSD-licensen, og at en opgradering betyder at acceptere Mapbox’ servicevilkår.

Portabilitet er derfor et spørgsmål til starten. Fliseformatet er åbent. MapLibre GL JS begyndte som en open source-fork af mapbox-gl-js, taget før licensskiftet. Dens 1.x-linje var tænkt som en direkte erstatning for open source-udgaven af Mapbox 1.x, og dens README siger, at den har udviklet sig meget siden. Det er muligt at forlade Mapbox, men det er en migrering, og det er billigere at overveje den, før et produkt bygges op om én leverandørs stilarter og flisesæt.

Sådan ser det ud i praksis

Tre sider på dette websted viser, hvad Mapbox gjorde i arbejdet.

Som Teamlead for GIS‑softwareudvikling fra 2022 til 2024 var rollen at lede full-stack-udviklingen af et GIS-kort, der var vokset op i stumper: spatiale data i PostgreSQL, ReactJS forrest, NodeJS bagved og Mapbox til at tegne kortet. Siden opsummerer Mapbox-delen i én linje: Mapbox stod for tegningen, og opgaven var at fodre den med de rigtige data på de rigtige zoomniveauer i stedet for det hele på én gang. Resultatet var én integreret kortapplikation, der blev en central del af platformen og tog imod nye lag uden at knække sammen.

Under samme titel, fra 2015 til 2022, lå rollen i designprocessen for projekternes brugerflader, med React-, Angular- og Vue‑frontends oven på Mapbox- og Leaflet‑kort. Sidens pointe er, at kortet er den nemme del: folk farer vild i kontrollerne, filtreringen og flowet rundt om det, i detaljer som at skifte mellem etager på et indendørskort.

Som Dataingeniør fra 2022 til 2024 var opgaven at løse over 1.000 problemer i geografiske data og tidsseriedata med GDAL, QGIS, ArcGIS, PostGIS og Bash. De rensede data blev derefter integreret i interaktive visualiseringer med Mapbox. Siden tilskriver arbejdet som helhed en 35 % reduktion i køretider for spatiale forespørgsler.

Hvor det går galt

De fleste problemer med Mapbox begynder, når et kort møder rigtig trafik, rigtige data eller en større opgradering.

Regningen vokser med sidevisninger frem for med brugen af kortet. En kortindlæsning tælles ved initialiseringen, så prisen følger, hvor ofte en side opretter et kort. En single-page-app, der genopretter Map ved hvert ruteskift, betaler hver gang, og det samme gør et kort langt nede på en lang side, som de fleste besøgende aldrig når til. Mapbox’ vejledning om at styre omkostningerne ved webkort foreslår at oprette kortet først, når dets container ruller ind i synsfeltet, at lægge det bag en Load Map-knap og at bruge Static Images API, hvor ingen behøver at panorere eller zoome. Én kortinstans, der holdes i live på tværs af ruter, dækker single-page-tilfældet.

Et token kopieret ud af siden bliver brugt andre steder. Tokenvejledningen fastslår, at ethvert token på en offentlig webside eller i kildekode er synligt for alle, der leder efter det. Tokens med hemmelige scopes, sk-typen, hører hjemme på en server. Et offentligt pk-token på en side bør være lavet til netop den applikation, med URL-begrænsninger, frem for kontoens standardtoken, som ikke kan begrænses. Vejledningen kalder URL-begrænsninger en best-effort-foranstaltning, der hviler på den referer-header, browseren sender. Efter et læk skal tokenet roteres: opret et nyt token, skift det ud i koden, deploy, og slet så det gamle.

Kortet bliver langsommere, efterhånden som datasættet vokser. Klienten laver en GeoJSON-kilde om til vektorfliser undervejs, så en stor fil betyder, at hver besøgendes browser står for flisningen. Vejledningen om store GeoJSON-kilder opregner midlerne: indlæs filen fra en URL frem for et JavaScript-objekt, sænk kildens maxzoom under standardværdien 18 (12 passer til de fleste punktdata), hæv lagets minzoom over 0, klyng tætte punkter, og fjern ubrugte egenskaber og decimaler ud over den sjette. Det sidste trin skrumper vejledningens eksempelfil fra 19,3 MB til 3,3 MB. Over 500.000 punkter foreslår den at dele kilden op eller at lave fliserne på serveren med MTS eller Uploads API.

map.addSource("sites", {
    type: "geojson",
    data: "/data/sites.geojson", // a URL, not an object in memory
    maxzoom: 12, // the default is 18
    cluster: true, // group dense points at low zoom
});
map.addLayer({
    id: "sites",
    type: "circle",
    source: "sites",
    minzoom: 6, // hidden below zoom 6
});

En større opgradering ændrer licensen og regningen. Skiftet af GL JS fra 1.x til 2.0.0 flyttede biblioteket fra BSD-licensen til Mapbox’ servicevilkår og ændrede afregningsreglen. Under 1.x krævede en kortindlæsning en initialisering plus en anmodning om en flise hostet af Mapbox; fra 2.0.0 tæller initialiseringen alene, så et kort, der kun tegnede selvhostede fliser, begynder at generere kortindlæsninger. Changelog-filen beder om et kig på prisdokumentationen før opgraderingen, og MapLibre GL JS er vejen for et projekt, der vil blive på open source-vilkår.

Læs mere

Ordliste