Aller au contenu

Librairies carto MapLibre

La carte / les couches#

Pour créer une carte basée sur MapLibre :

  • centrée sur Paris : longitude 2.35, latitude 48.85
  • utilisant un élément HTML avec id="map"

Un élément HTML + chargement des librairies (CSS + JS)

<div id="map"></div>

<!-- MapLibre -->
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.1.0/dist/maplibre-gl.css">
<script src="https://unpkg.com/maplibre-gl@4.1.0/dist/maplibre-gl.js"></script>

En CSS, une hauteur à la carte

#map {
    height: 500px;
}

Initialisation d’une carte MapLibre

let map = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [2.35, 48.85],
    zoom: 4
});

Dans cet exemple, une couche de tuiles vectorielles est déjà chargée, et stylisée. Cela se fait via l’attribut style, et le standard MapLibre Style Specification qui définit :

  • une ou plusieurs sources de données (source)
    • cette source précise notamment l’adresse des tuiles (tiles)
  • un rendu graphique pour chacune des couches (layers)

Il est bien entendu possible de passer directement un objet style, définissant ses propres sources/couches :

Carte MapLibre avec fond OSM

let map = new maplibregl.Map({
    container: 'map',
    style: {
        version: 8,
        sources: {
            osm: {
                type: 'raster',
                tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
                tileSize: 256,
                attribution: '&copy; OpenStreetMap Contributors',
                maxzoom: 19
            },
        },
        layers: [
            {
                id: 'osm',
                type: 'raster',
                source: 'osm',
            },
        ],
    },
    zoom: 10,
    center: [2.35, 48.85],
});

Mais également d’ajouter une nouvelle source, ou une nouvelle couche, à posteriori :

Ajout d’une source de type GeoJSON et d’une couche

map.addSource('nom-de-la-source', {
    type: 'geojson',
    data: geojson
});

map.addLayer({
    id: 'nom-de-la-couche',
    source: 'nom-de-la-source',
    type: 'circle',
    paint: {
        'circle-color': 'deeppink',
        'circle-radius': 10,
    },
});

Les styles#

Les styles sont détaillés dans la spécification MapLibre Style Specification, grâce à l’attribut paint. De plus, le rendu étant effectué en WebGL, les styles peuvent être créés sous forme d’expressions, afin d’êtres transformés en shaders. Les expressions permettent de calculer des valeurs, basées sur des opérateurs de type mathématiques, logiques, ou géométriques par exemple.

Style WebGL basé sur les expressions

{
    paint: {
        'circle-color': [
            'case',
            ['boolean', ['feature-state', 'hover'], false],
            'mediumblue',
            'deeppink',
        ],
        'circle-radius': [
            "interpolate",
            ["exponential", 2],
            ["zoom"],
            5,
            2,
            15,
            6
        ],
    },
}

Les interactions#

Les interactions se gèrent directement au niveau de la carte, de manière globale, mais avec filtrage possible par couche.

Ajout d’un événement click sur une couche

map.on('click', 'nom-de-la-couche', (e) => {
    let feature = e.features[0];
});