Comment styliser une carte personnalisee avec votre marque (mode sombre, couleurs, sans filigranes)

Chaque carte que vous avez vue sur l'application d'un concurrent utilise le même style par défaut. Les routes beige génériques, l'eau bleu-vert moyen, les icônes POI encombrées qui se disputent l'attention avec votre propre interface : ce sont les défauts universels, conçus pour n'offenser personne et ne ravir personne. Ils communiquent une chose clairement : ce produit utilise une bibliothèque de cartes, il ne maîtrise pas son expérience cartographique.

Le style de carte personnalisé change cela. Une carte en mode sombre sur un tableau de bord logistique, un réseau routier couleur marque sur une application immobilière, un style minimaliste épuré avec votre logo là où se trouvait le filigrane d'attribution : ces détails font passer un outil à un produit.

Ce tutoriel parcourt la Mapbox Style Specification telle qu'implémentée par MapAtlas, de la structure du style JSON jusqu'à un basculement complet clair/sombre en React. Vous n'avez pas besoin d'expérience en SIG. Vous devez être à l'aise avec JSON et JavaScript.

Si vous n'avez pas encore configuré une carte de base, commencez par Comment ajouter des cartes interactives à votre site web, puis revenez ici pour le style.

Pourquoi les styles de cartes par défaut semblent génériques

Le style par défaut d'un fournisseur de tuiles est conçu pour être universellement lisible par le public le plus large possible, dans le contexte le plus large possible. Il privilégie la densité d'information sur l'opinion esthétique. Les routes doivent être visibles. Les étiquettes doivent contraster. Les icônes POI doivent être reconnaissables.

Aucun de ces objectifs ne correspond aux objectifs de votre produit. Votre application se soucie probablement d'un petit sous-ensemble de ce qui se trouve sur la carte : itinéraires de livraison, emplacements de propriétés, établissements de santé, et tout le reste est du bruit visuel.

Le style personnalisé vous permet de supprimer ce dont vous n'avez pas besoin, d'accentuer ce que vous avez, et de garantir que la carte s'intègre dans votre produit plutôt que d'apparaître comme un widget tiers ajouté.

Comprendre la spécification de style

Un style MapAtlas est un document JSON avec cinq sections clés :

{
  "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 : d'où proviennent les données de la carte (endpoints de tuiles vectorielles MapAtlas)
• glyphs : où charger les fichiers de polices pour le rendu des étiquettes
• sprite : où charger les images d'icônes pour les marqueurs POI
• layers : la liste ordonnée des couches visuelles, chacune avec des propriétés de peinture et de mise en page

Le tableau layers est là où vous passez la plupart de votre temps. Chaque couche spécifie un type de données (fill, line, symbol, circle, fill-extrusion), quelles features sources dessiner, et comment les peindre.

Voici un style minimal mais complet qui rend une base de tuiles vectorielles :

{
  "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" }
    }
  ]
}

Cela rend un canvas vierge dans la couleur d'arrière-plan de votre choix. De là, vous ajoutez des couches pour l'eau, l'utilisation des terres, les routes, les bâtiments et les étiquettes.

Mode sombre : modifier les couleurs de base

Une carte en mode sombre n'est pas simplement une image raster inversée. C'est un ensemble complètement différent de propriétés de peinture appliquées à la même géométrie vectorielle. C'est l'une des raisons fondamentales pour lesquelles les tuiles vectorielles existent : une tuile, une infinité d'interprétations visuelles.

Les couleurs clés à mettre à jour pour un thème sombre :

Voici comment appliquer cela dans une couche de style :

{
  "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]
  }
}

L'expression interpolate dans line-width adapte la largeur de la route en fonction du niveau de zoom : étroite à faible zoom, plus large à mesure que vous zoomez. C'est un style piloté par les données sans requêtes réseau supplémentaires.

Appliquer les couleurs de marque

La plupart des systèmes de design définissent une couleur primaire (disons #97C70A), une couleur secondaire et une palette neutre. La carte devrait utiliser ces mêmes valeurs, sans les approximer.

Ciblez ces couches pour l'application des couleurs de marque :

Les routes comme éléments de marque. Si votre couleur de marque est suffisamment vive, utilisez-la pour les routes principales ou les itinéraires mis en avant :

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

Marqueurs POI personnalisés. Remplacez les icônes sprite par défaut par les vôtres en hébergeant une feuille sprite personnalisée et en mettant à jour l'URL sprite. Référencez ensuite vos icônes dans les couches symbol :

{
  "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
  }
}

Polices personnalisées pour les étiquettes de carte

Les polices d'étiquettes de carte par défaut sont génériques. Si votre marque utilise Inter, Roboto ou une police personnalisée, vous pouvez l'utiliser aussi pour les étiquettes de carte.

MapAtlas sert les glyphes depuis son propre endpoint de glyphes, qui prend en charge le format de glyphes Mapbox standard. Pour utiliser une police personnalisée :

1. Générez des fichiers de glyphes .pbf à partir de votre police en utilisant un outil comme fontnik.
2. Hébergez les fichiers de glyphes sur un CDN ou votre propre serveur.
3. Mettez à jour le champ glyphs dans votre style JSON :

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

4. Référencez la police dans la propriété text-font de n'importe quelle couche symbol :

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

Fournissez toujours une police de secours (Noto Sans couvre les caractères Unicode que votre police principale pourrait ne pas inclure). Le moteur de rendu utilise la première police du tableau qui contient un glyphe pour chaque caractère.

Supprimer les filigranes et l'attribution

MapAtlas permet le déploiement en marque blanche complète. Vous pouvez retirer entièrement le logo MapAtlas de la carte.

Dans le SDK, l'attribution est gérée par un contrôle que vous pouvez désactiver :

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
});

Si vous souhaitez conserver l'attribution mais la styliser pour correspondre à votre interface, masquez le contrôle par défaut et ajoutez le vôtre :

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

Cela remplace l'identité visuelle par une attribution minimale conforme à la loi qui respecte la licence OpenStreetMap tout en correspondant à votre interface. Contrairement à Google Maps, qui exige que son logo reste visible en permanence quel que soit votre plan, MapAtlas vous donne un contrôle total.

Basculement de thème clair/sombre en React

Voici un composant React complet qui gère une carte avec un basculement clair/sombre, en utilisant des propriétés personnalisées CSS pour synchroniser le thème avec le reste de votre interface :

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>
  );
}

L'appel setStyle re-rend la carte avec le nouveau schéma de couleurs. Les données de tuiles déjà en cache ne sont pas rechargées : seule l'interprétation visuelle change.

Héberger un style JSON personnalisé

Pour un contrôle total, hébergez votre style JSON en tant que fichier statique sur votre CDN ou un bucket S3. Cela vous permet de :

• Versionner votre style aux côtés du code de votre application.
• Mettre à jour le design visuel sans redéployer l'application (il suffit de mettre à jour le JSON hébergé).
• Utiliser différents styles pour différents environnements (aperçu ou production).

Chargez un style hébergé au moment de l'exécution :

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

La seule contrainte est CORS : le style JSON doit être servi avec Access-Control-Allow-Origin: * (ou votre domaine spécifique) pour que le navigateur puisse le récupérer en cross-origin.

Flux de travail de développement de style

La façon la plus rapide de créer un style personnalisé est itérative : voir les changements en temps réel sans réécrire le code.

1. Commencez avec un style JSON de base MapAtlas comme fondation. Téléchargez-le en récupérant https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY.
2. Modifiez le JSON dans votre éditeur, en observant quelle couche affecte quel élément visuel.
3. Rechargez la carte avec votre style JSON modifié pour voir le résultat.
4. Une fois stable, commitez le style JSON dans votre dépôt et hébergez-le sur votre CDN.

Pour une personnalisation plus approfondie, consultez la documentation Map Visualization & Styling pour la référence complète des couches, les types de propriétés de peinture et la syntaxe des expressions.

Si vous venez de Mapbox et vous demandez ce qui a changé, Mapbox vs. MapAtlas : quelle API de cartographie convient à votre projet EU ? propose une comparaison côte à côte des fonctionnalités et des prix.

Et pour les fondements architecturaux expliquant pourquoi les tuiles vectorielles rendent tout cela possible, Tuiles vectorielles vs tuiles raster explique le pipeline de rendu en détail.

Résumé

Le style de carte personnalisé n'est pas un luxe : c'est la différence entre une carte qui ressemble à un widget tiers et une qui donne l'impression d'avoir été conçue pour votre produit. Avec MapAtlas :

• La spécification de style est du JSON standard compatible avec les outils Mapbox GL JS.
• Le mode sombre est un échange de style JSON, pas un nouveau jeu de tuiles ou une configuration serveur.
• Les couleurs de marque s'appliquent aux routes, étiquettes et icônes POI via les propriétés de peinture.
• Les polices personnalisées se chargent depuis n'importe quel endpoint de glyphes que vous contrôlez.
• Les filigranes et l'attribution sont entièrement configurables : la marque blanche est prise en charge sur tous les plans payants.
• Le style entier peut être basculé au moment de l'exécution sans rechargement de page.

Commencez à créer votre carte personnalisée dès aujourd'hui. Créez un compte gratuit MapAtlas et chargez le style JSON de base comme point de départ. Le premier style personnalisé prend environ 30 minutes à peaufiner, les itérations suivantes prennent quelques minutes.