Hoe u een volledig merkgebonden kaart opmaakt (donkere modus, kleuren, geen watermerken)

Elke kaart die u 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 uw 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 uw 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. U heeft geen GIS-ervaring nodig. U moet comfortabel zijn met JSON en JavaScript.

Als u nog geen basiskaart heeft ingesteld, begin dan met Hoe u interactieve kaarten aan uw 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 uw product. Uw 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 u onderdrukken wat u niet nodig heeft, benadrukken wat u wel nodig heeft en zorgen ervoor dat de kaart als onderdeel van uw 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://tiles.mapatlas.eu/fonts/{fontstack}/{range}.pbf?key=YOUR_API_KEY",
  "sprite": "https://tiles.mapatlas.eu/sprites/basic?key=YOUR_API_KEY",
  "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 u 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://tiles.mapatlas.eu/v1/tiles/{z}/{x}/{y}.mvt?key=YOUR_API_KEY"],
      "minzoom": 0,
      "maxzoom": 14
    }
  },
  "glyphs": "https://tiles.mapatlas.eu/fonts/{fontstack}/{range}.pbf?key=YOUR_API_KEY",
  "sprite": "https://tiles.mapatlas.eu/sprites/basic?key=YOUR_API_KEY",
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": { "background-color": "#f5f0eb" }
    }
  ]
}

Dit geeft een leeg canvas weer in de door u gekozen achtergrondkleur. Van hieruit voegt u 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 past u 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 u 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 u op deze lagen voor merkkleurtoepassing:

Wegen als merkelementen. Als uw 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 uw eigen door een aangepast sprite-vel te hosten en de sprite-URL bij te werken. Verwijs vervolgens naar uw 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 uw merk Inter, Roboto of een aangepast lettertype gebruikt, kunt u 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 uw lettertype met een tool zoals fontnik.
2. Host de glyphbestanden op een CDN of uw eigen server.
3. Werk het glyphs-veld bij in uw 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 uw 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. U kunt het MapAtlas-logo volledig van de kaart verwijderen.

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

const map = new mapmetricsgl.Map({
  container: 'map',
  style: 'https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY',
  center: [4.9041, 52.3676],
  zoom: 12,
  attributionControl: false,  // Remove the default attribution control
});

Als u attributie wilt behouden maar het wilt stylen om bij uw UI te passen, verberg dan het standaard besturingselement en voeg uw 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 terwijl het bij uw UI past. Anders dan Google Maps, dat vereist dat zijn logo te allen tijde zichtbaar blijft ongeacht uw plan, geeft MapAtlas u volledige controle.

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 uw 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://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY',
  dark:  'https://tiles.mapatlas.eu/styles/dark/style.json?key=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 u uw stijl-JSON als een statisch bestand op uw CDN of S3-bucket. Hiermee kunt u:

• Uw stijl versiebeheren naast uw 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 uw 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 uw fundament. Download het door https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY op te halen.
2. Bewerk de JSON in uw editor en let op welke laag welk visueel element beïnvloedt.
3. Herlaad de kaart met uw gewijzigde stijl-JSON om het resultaat te zien.
4. Zodra stabiel, commit de stijl-JSON naar uw repository en host het op uw CDN.

Voor diepere aanpassing raadpleegt u de documentatie voor Kaartvisualisatie en stijlen voor de volledige lagenreferentie, verftypen en expressiesyntaxis.

Als u van Mapbox komt en zich afvraagt wat er veranderd is, bekijk dan Mapbox versus MapAtlas: welke Maps API is geschikt voor uw 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 uw 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 u 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 uw merkkaart. Meld u aan voor een gratis MapAtlas API-sleutel en laad de basisstijl-JSON als uw startpunt. De eerste aangepaste stijl duurt ongeveer 30 minuten om goed te krijgen, volgende iteraties duren minuten.