Custom branded kaart: dark mode, merkkleuren en geen watermerken

Elke kaart die je ooit op de app van een concurrent hebt gezien, gebruikt dezelfde standaardstijl. De generieke beige wegen, het middelste groenblauw van het water, de rommelige POI-iconen die om aandacht strijden met je eigen UI - dit zijn de universele standaardinstellingen, ontworpen om niemand te beledigen en niemand te verrassen. Ze communiceren één ding duidelijk: dit product maakt gebruik van een kaartbibliotheek, het bezit zijn kaartervaring niet.

Aangepaste kaartstijlen veranderen dat. Een donkere modus-kaart op een logistiek dashboard, een merkgroen wegennet op een vastgoed-app, een strakke minimalistische stijl met je logo op de plek waar het attributiewatermerk was - dit zijn details die een tool naar een product tillen.

Deze tutorial doorloopt de Mapbox Style Specification zoals geïmplementeerd door MapAtlas, van de structuur van de stijl-JSON tot een complete licht/donker-schakelaar in React. Je hebt geen GIS-ervaring nodig. Je moet comfortabel zijn met JSON en JavaScript.

Als je nog geen basiskaart hebt ingesteld, begin dan met Hoe je interactieve kaarten aan je website toevoegt en kom daarna hier terug voor stijlen.

Waarom standaardkaartstijlen er generiek uitzien

De standaardstijl van een tegelleverancier is ontworpen om universeel leesbaar te zijn voor het breedst mogelijke publiek, in de breedst mogelijke context. Hij geeft prioriteit aan informatiedichtheid boven esthetische mening. Wegen moeten zichtbaar zijn. Labels moeten contrasteren. POI-iconen moeten herkenbaar zijn.

Geen van die doelen sluit aan bij de doelen van je product. Je app geeft waarschijnlijk om een kleine subset van wat er op de kaart staat, bezorgroutes, woninglocaties, gezondheidszorgfaciliteiten, en al het andere is visuele ruis.

Aangepaste stijlen laten je onderdrukken wat je niet nodig hebt, benadrukken wat je wel nodig hebt en zorgen ervoor dat de kaart als onderdeel van je product wordt gelezen in plaats van een ingedropte widget van derden.

De stijlspecificatie begrijpen

Een MapAtlas-stijl is een JSON-document met vijf hoofdsecties:

{
  "version": 8,
  "name": "My Brand Style",
  "sources": { ... },
  "glyphs": "https://cdn.mapmetrics-atlas.net/basemaps-assets/fonts/{fontstack}/{range}.pbf",
  "sprite": "https://cdn.mapmetrics-atlas.net/basemaps-assets/sprites/v4/light",
  "layers": [ ... ]
}

• sources: waar de kaartdata vandaan komt (MapAtlas vectortegelendpoints)
• glyphs: waar lettertypebestanden voor labelrendering worden geladen
• sprite: waar icoonafbeeldingen voor POI-markers worden geladen
• layers: de geordende lijst van visuele lagen, elk met verf- en lay-out-eigenschappen

De layers-array is waar je het meeste tijd doorbrengt. Elke laag specificeert een datatype (fill, line, symbol, circle, fill-extrusion), welke bronfeatures er getekend moeten worden en hoe ze geschilderd worden.

Hier is een minimale maar complete stijl die een vectortegelbasis weergeeft:

{
  "version": 8,
  "name": "Brand Base",
  "sources": {
    "mapatlas": {
      "type": "vector",
      "tiles": ["https://gateway.mapmetrics-atlas.net/planet20251013/{z}/{x}/{y}.mvt?token=YOUR_API_KEY"],
      "minzoom": 0,
      "maxzoom": 14
    }
  },
  "glyphs": "https://cdn.mapmetrics-atlas.net/basemaps-assets/fonts/{fontstack}/{range}.pbf",
  "sprite": "https://cdn.mapmetrics-atlas.net/basemaps-assets/sprites/v4/light",
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": { "background-color": "#f5f0eb" }
    }
  ]
}

Dit geeft een leeg canvas weer in de door jou gekozen achtergrondkleur. Van hieruit voeg je lagen toe voor water, landgebruik, wegen, gebouwen en labels.

Donkere modus: de kernkleuren wijzigen

Een donkere modus-kaart is niet simpelweg een omgekeerde rasterafbeelding. Het is een compleet andere set verfegenschappen toegepast op dezelfde vectorgeometrie. Dit is een van de kernredenen waarom vectortegels bestaan: één tegel, oneindige visuele interpretaties.

De belangrijkste kleuren om bij te werken voor een donker thema:

Zo pas je dit toe in een stijllaag:

{
  "id": "water",
  "type": "fill",
  "source": "mapatlas",
  "source-layer": "water",
  "paint": {
    "fill-color": "#0d3b66",
    "fill-opacity": 1
  }
}

{
  "id": "road-major",
  "type": "line",
  "source": "mapatlas",
  "source-layer": "transportation",
  "filter": ["==", "class", "primary"],
  "layout": {
    "line-join": "round",
    "line-cap": "round"
  },
  "paint": {
    "line-color": "#3a3a5c",
    "line-width": ["interpolate", ["linear"], ["zoom"], 10, 1, 16, 4]
  }
}

De interpolate-expressie in line-width schaalt de wegbreedte op basis van het zoomniveau, smal bij laag zoom, breder naarmate je inzoomt. Dit is datagestuurde stijl zonder aanvullende netwerkverzoeken.

Merkkleuren toepassen

De meeste ontwerpsystemen definiëren een primaire kleur (zeg #97C70A), een secundaire kleur en een neutraal palet. De kaart moet dezelfde waarden gebruiken, niet ze benaderen.

Richt je op deze lagen voor merkkleurtoepassing:

Wegen als merkelementen. Als je merkkleur levendig genoeg is, gebruik hem dan voor hoofdwegen of gemarkeerde routes:

{
  "id": "road-highlighted",
  "type": "line",
  "source": "mapatlas",
  "source-layer": "transportation",
  "filter": ["==", "class", "primary"],
  "paint": {
    "line-color": "#97C70A",
    "line-width": 3,
    "line-opacity": 0.8
  }
}

Aangepaste POI-markers. Vervang de standaard sprite-iconen door je eigen door een aangepast sprite-vel te hosten en de sprite-URL bij te werken. Verwijs vervolgens naar je iconen in symboollagen:

{
  "id": "brand-poi",
  "type": "symbol",
  "source": "mapatlas",
  "source-layer": "poi",
  "layout": {
    "icon-image": "brand-pin",
    "icon-size": 1.2,
    "text-field": ["get", "name"],
    "text-font": ["Inter Bold", "Noto Sans Regular"],
    "text-size": 12,
    "text-offset": [0, 1.5],
    "text-anchor": "top"
  },
  "paint": {
    "text-color": "#97C70A",
    "text-halo-color": "#1a1a2e",
    "text-halo-width": 1
  }
}

Aangepaste lettertypes voor kaartlabels

De standaard kaartlabellettertypes zijn generiek. Als je merk Inter, Roboto of een aangepast lettertype gebruikt, kun je het ook voor kaartlabels gebruiken.

MapAtlas levert glyphs van zijn eigen glyph-endpoint, dat het standaard Mapbox-glyphformaat ondersteunt. Om een aangepast lettertype te gebruiken:

1. Genereer .pbf-glyphbestanden van je lettertype met een tool zoals fontnik.
2. Host de glyphbestanden op een CDN of je eigen server.
3. Werk het glyphs-veld bij in je stijl-JSON:

{
  "glyphs": "https://your-cdn.com/fonts/{fontstack}/{range}.pbf"
}

4. Verwijs naar het lettertype in de text-font-eigenschap van een symboollaag:

"text-font": ["Inter Bold", "Noto Sans Regular"]

Geef altijd een reservelettertype op (Noto Sans dekt Unicode-tekens die je primaire lettertype mogelijk niet bevat). De renderer gebruikt het eerste lettertype in de array dat een glyph bevat voor elk teken.

Watermerken en attributie verwijderen

MapAtlas staat volledige white-label implementatie toe. Je kunt het MapAtlas-logo volledig van de kaart verwijderen, terwijl de OpenStreetMap-bronvermelding die de datalicentie vereist blijft staan.

In de SDK wordt attributie afgehandeld door een besturingselement dat je kunt uitschakelen:

const map = new mapmetricsgl.Map({
  container: 'map',
  style: 'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_STYLE_ID/style.json&token=YOUR_API_KEY',
  center: [4.9041, 52.3676],
  zoom: 12,
  attributionControl: false,  // Remove the default attribution control
});

Als je attributie wilt behouden maar het wilt stylen om bij je UI te passen, verberg dan het standaard besturingselement en voeg je eigen toe:

map.addControl(
  new mapmetricsgl.AttributionControl({
    customAttribution: 'Map data © OpenStreetMap contributors',
    compact: true,
  }),
  'bottom-left'
);

Dit vervangt de huisstijl door een minimale, juridisch conforme attributie die de licentie van OpenStreetMap respecteert en bij je UI past, zodat je volledige controle houdt over hoe de kaart je merk toont.

Licht/donker-thema-schakelaar in React

Hier is een compleet React-component dat een kaart beheert met een licht/donker-schakelaar, met CSS-aangepaste eigenschappen om het thema gesynchroniseerd te houden met de rest van je UI:

import { useEffect, useRef, useState } from 'react';
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const STYLES = {
  light: 'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_STYLE_ID/style.json&token=YOUR_API_KEY',
  dark:  'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_DARK_STYLE_ID/style.json&token=YOUR_API_KEY',
};

export function BrandedMap({ center = [4.9041, 52.3676], zoom = 12 }) {
  const containerRef = useRef(null);
  const mapRef       = useRef(null);
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    const map = new mapmetricsgl.Map({
      container:        containerRef.current,
      style:            STYLES.light,
      center,
      zoom,
      attributionControl: false,
    });

    map.addControl(
      new mapmetricsgl.AttributionControl({ compact: true }),
      'bottom-left'
    );

    mapRef.current = map;
    return () => map.remove();
  }, []);

  useEffect(() => {
    if (mapRef.current) {
      mapRef.current.setStyle(STYLES[theme]);
    }
  }, [theme]);

  return (
    <div style={{ position: 'relative' }}>
      <div ref={containerRef} style={{ width: '100%', height: '500px' }} />
      <button
        onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}
        style={{
          position: 'absolute',
          top: 12,
          right: 12,
          padding: '8px 16px',
          background: theme === 'dark' ? '#ffffff' : '#1a1a2e',
          color:      theme === 'dark' ? '#1a1a2e' : '#ffffff',
          border: 'none',
          borderRadius: 6,
          cursor: 'pointer',
          zIndex: 1,
        }}
      >
        {theme === 'light' ? 'Dark mode' : 'Light mode'}
      </button>
    </div>
  );
}

De setStyle-aanroep geeft de kaart opnieuw weer met het nieuwe kleurenschema. Tiledata die al in de cache staat wordt niet opnieuw opgehaald, alleen de visuele interpretatie verandert.

Een aangepaste stijl-JSON hosten

Voor volledige controle host je je stijl-JSON als een statisch bestand op je CDN of S3-bucket. Hiermee kun je:

• Je stijl versiebeheren naast je applicatiecode.
• Het visuele ontwerp bijwerken zonder de applicatie opnieuw te implementeren (update gewoon de gehoste JSON).
• Verschillende stijlen gebruiken voor verschillende omgevingen (preview versus productie).

Laad een gehoste stijl tijdens runtime:

const map = new mapmetricsgl.Map({
  container: 'map',
  style: 'https://your-cdn.com/styles/brand-dark.json',
  center: [4.9041, 52.3676],
  zoom: 12,
});

De enige beperking is CORS: de stijl-JSON moet worden geserveerd met Access-Control-Allow-Origin: * (of je specifieke domein) zodat de browser het cross-origin kan ophalen.

Stijlontwikkelingsworkflow

De snelste manier om een aangepaste stijl te bouwen is iteratief - zie wijzigingen in realtime zonder code te herschrijven.

1. Begin met een MapAtlas-basisstijl-JSON als je fundament. Maak een stijl aan in het MapMetrics-portal onder Styles, kopieer de Style URL en haal die URL op om de JSON te downloaden.
2. Bewerk de JSON in je editor en let op welke laag welk visueel element beïnvloedt.
3. Herlaad de kaart met je gewijzigde stijl-JSON om het resultaat te zien.
4. Zodra stabiel, commit de stijl-JSON naar je repository en host het op je CDN.

Voor diepere aanpassing raadpleeg je de documentatie voor Kaartvisualisatie en stijlen voor de volledige lagenreferentie, verftypen en expressiesyntaxis.

Als je van Mapbox komt en je afvraagt wat er veranderd is, bekijk dan Mapbox versus MapAtlas: welke Maps API is geschikt voor je EU-project? voor een zij-aan-zij vergelijking van functies en prijzen.

En voor de architecturale onderbouwing van waarom vectortegels dit allemaal mogelijk maken, legt Vectortegels versus rastertegels de renderingpipeline in detail uit.

Samenvatting

Aangepaste kaartstijlen zijn geen luxe, het is het verschil tussen een kaart die als een widget van derden aanvoelt en een die speciaal voor je product is gebouwd. Met MapAtlas:

• De stijlspecificatie is standaard JSON die compatibel is met Mapbox GL JS-tooling.
• Donkere modus is een stijl-JSON-swap, geen nieuwe tegelset of serverconfiguratie.
• Merkkleuren worden via verfegenschappen toegepast op wegen, labels en POI-iconen.
• Aangepaste lettertypes worden geladen van elk glyph-endpoint dat je beheert.
• Watermerken en attributie zijn volledig configureerbaar, white-label wordt ondersteund op alle betaalde plannen.
• De volledige stijl kan tijdens runtime worden geschakeld zonder pagina te herladen.

Begin vandaag met het bouwen van je merkkaart. Meld je aan voor een gratis MapAtlas API-sleutel en laad de basisstijl-JSON als je startpunt. De eerste aangepaste stijl duurt ongeveer 30 minuten om goed te krijgen, volgende iteraties duren minuten.