Cours 12¶

Cartes¶

MapLibre permet d'afficher une carte géographique sur une page Web. Contairement à Leaflet, elle est plus lourde, mais elle permet d'afficher du 3D et des cartes en vectoriel ! Elle a également une tonne d'exemples concrets pour tous les cas de figure.

Installation¶

L'installation d'une librairie de carte ne se fait quasiment jamais sans internet. Il y aurait beaucoup trop de données à enregistrer localement. C'est pourquoi, il est recommandé d'utiliser un CDN pour cette partie.

index.html

<html>
  <head>

    <link
      rel="stylesheet"
      href="https://unpkg.com/maplibre-gl@5.13.0/dist/maplibre-gl.css"
    />
    <link rel="stylesheet" href="./src/css/styles.css">

    <script type="importmap">
      {
        "imports": {
          "maplibre-gl": "https://esm.sh/maplibre-gl@5.13.0"
        }
      }
    </script>
    <script type="module" src="./src/js/map.js"></script>

  </head>
  <body>

    <div id="carte"></div>

  </body>
</html>

styles.css

#carte {
  width: 90vw;
  height: 90vh;
}

map.js (L'exemple le plus simple)

import maplibregl from "maplibre-gl";

const carte = new maplibregl.Map({
  container: "carte", // id du div
  style: "https://tiles.openfreemap.org/styles/bright",
  center: [-73.8462195, 45.6125882], // Laval
  zoom: 9 // Plus c'est bas, plus c'est haut
});

Option `center`¶

La propriété center contient un tableau des coordonnées géographiques : [longitude, latitude].

import maplibregl from "maplibre-gl";

const carte = new maplibregl.Map({
  // ...
  center: [-73.8462195, 45.6125882], // Laval
});

Comment savoir ?

Pour trouver des coordonnées, le plus simple est de passer par une URL Google Maps.

⚠️ Attention, les coordonnées dans maplibre sont inversés.

Option `style`¶

La propriété style déterminer les couleurs utilisées sur la carte.

import maplibregl from "maplibre-gl";

const carte = new maplibregl.Map({
  // ...
  // style: "https://tiles.openfreemap.org/styles/bright",
  // style: "https://tiles.openfreemap.org/styles/positron",
  // style: "https://api.maptiler.com/maps/toner-v2/style.json?key=[VOTRE_CLÉ_D'API]",
  // style: "https://api.maptiler.com/maps/hybrid/style.json?key=[VOTRE_CLÉ_D'API]",
  style: "https://tiles.stadiamaps.com/styles/alidade_smooth_dark.json"
});

Sources

Vous contaterez dans l'exemple ci-dessus que les styles proviennent de différentes sources.

Maptiler nécessite la création d'un compte développeur. C'est gratuit pour un usage personnel. Une fois le compte créé, vous aurez accès à une clé d'API qui sera nécessaire à ajouter dans l'adresse URL du style.

openfreemap offre gratuitement 4 styles de carte.

StadiaMaps nécessite en principe une connexion, mais ils tolèrent pour le moment qu'on utilise leur style comme dans l'exemple ci-dessus.

Je ne serais pas surpris que le collège soit bloqué éventuellement ;)

Télécharger un carte en local. C'est possible ?

🧐 Admettons que tu télécharges la carte pour la planète au complet (si veut te promener sur le globe), on parle ici d'un fichier compessé d'environ 100 Go. Décompressé ça fait ≈2 To.

Donc oui, mais pas vraiment, non 🙃

Option `attributionControl`¶

import maplibregl from "maplibre-gl";

const carte = new maplibregl.Map({
  // ...
  attributionControl: false // 👈 Retrait des crédits
});

Ajout des contrôles¶

import maplibregl from "maplibre-gl";

const carte = new maplibregl.Map({ /* ... */ });

// 👇 Ajout des contrôles
carte.addControl(new maplibregl.NavigationControl());

Options de déplacement¶

`zoom`¶

Plus le zoom est petit, plus la caméra va vers l'espace.

Entre 0 et ~22

map.js (L'exemple le plus simple)

import maplibregl from "maplibre-gl";

const carte = new maplibregl.Map({
  // ...
  zoom: 9
});

`pitch`¶

Contrairement à la perspective "top down", le pitch donne un angle à la caméra.

Valeur permise : entre 0 et 60

map.js (L'exemple le plus simple)

import maplibregl from "maplibre-gl";

const carte = new maplibregl.Map({
  // ...
  pitch: 60
});

`bearing`¶

La propriété bearing sert à tourner autour du point de vue.

Valeur permise : entre -180 et 180

map.js (L'exemple le plus simple)

import maplibregl from "maplibre-gl";

const carte = new maplibregl.Map({
  // ...
  bearing: 120
});

Debug

Pour avoir des informations sur l'état du zoom, du pitch, du bearing et même du center, on peut ajouter ce code à notre script :

import maplibregl from "maplibre-gl";

const carte = new maplibregl.Map({ /* ... */ });

// 👇 Debug
carte.on("moveend", () => {
  const center = carte.getCenter();
  const zoom = carte.getZoom();
  const pitch = carte.getPitch();
  const bearing = carte.getBearing();
  console.log(`center: [${center.lng.toFixed(7)}, ${center.lat.toFixed(7)}],`);
  console.log(`zoom: ${zoom.toFixed(1)},`);
  console.log(`pitch: ${pitch.toFixed(0)},`);
  console.log(`bearing: ${bearing.toFixed(1)}`);
  console.log("---");
});

Option `interactive`¶

La propriété interactive permet à l'utilisateur de contrôler la carte.

import maplibregl from "maplibre-gl";

const carte = new maplibregl.Map({
  // ...
  interactive: false // 👈 Aucune interactivité possible
});

Afficher en globe¶

import maplibregl from "maplibre-gl";

const carte = new maplibregl.Map({ /* ... */ });

// 👇 Afficher en globe
carte.on('style.load', () => {
    carte.setProjection({ type: 'globe' });
});

Bâtiments en 3D¶

Flyto¶

import maplibregl from "maplibre-gl";

const carte = new maplibregl.Map({ /* ... */ });

// On active le flyto à un event, peu importe lequel
document.body.addEventListener("click", () => {

  carte.flyTo({
    center: [-115.8819462, 37.2513459],
    zoom: 15,      // Facultatif
    duration: 3000 // Facultatif
  });

});

Marker¶

import maplibregl from "maplibre-gl";

const carte = new maplibregl.Map({ /* ... */ });

new maplibregl.Marker().setLngLat([31.2356245, 30.0444168]).addTo(carte);

VFX-JS¶

VFX-JS permet d'appliquer des shaders aux éléments HTML d'une page.

Installation¶

Le package ne vient pas en esm, alors nous devrons fonctionner via un CDN.

index.html

<html>
  <head>
    <script type="importmap">
      {
        "imports": {
          "vfx-js": "https://esm.sh/@vfx-js/core"
        }
      }
    </script>
    <script type="module" src="./src/js/vfx.js"></script>
  </head>
  <body>
    <p class="trop-coooooool">glitch</p>
  </body>
</html>

Il y a une série de presets offert par la librairie, en voici quelques uns.

Glitch¶

vfx.js

import { VFX } from "vfx-js";

const vfx = new VFX();

const el = document.querySelector(".trop-coooooool");
vfx.add(el, {
  shader: "glitch",
  overflow: 30
});

rgbShift¶

vfx.js

import { VFX } from "vfx-js";

const vfx = new VFX();

const el = document.querySelector(".trop-coooooool");
vfx.add(el, {
  shader: "rgbShift",
  overflow: 30
});

sinewave¶

vfx.js

import { VFX } from "vfx-js";

const vfx = new VFX();

const el = document.querySelector(".trop-coooooool");
vfx.add(el, {
  shader: "sinewave",
  overflow: 30
});

pixelate¶

vfx.js

import { VFX } from "vfx-js";

const vfx = new VFX();

const el = document.querySelector(".trop-coooooool");
vfx.add(el, {
  shader: "pixelate"
});

Snippets du jour¶

Modèle 3D¶

Pour appliquer cet effet à votre projet :

Téléchargez le code source
Effectuez un npm install pour installer la librairie three (Pour afficher un modèle 3D)

Pour installer la librairie three, normalement on doit faire un npm i three
Exportez votre modèle 3d en .obj dans le dossier assets/models
Changez le chemin de la variable modelSource dans le fichier scripts.js

Exercice¶

Exercice - MapLibre
Casa

TP2¶

TP
HUD

Cours 12¶

Cartes¶

Installation¶

Option center¶

Option style¶

Option attributionControl¶

Ajout des contrôles¶

Options de déplacement¶

zoom¶

pitch¶

bearing¶

Option interactive¶

Afficher en globe¶

Bâtiments en 3D¶

Flyto¶

Marker¶

VFX-JS¶

Installation¶

Glitch¶

rgbShift¶

sinewave¶

pixelate¶

Snippets du jour¶

Modèle 3D¶

Exercice¶

TP2¶

Option `center`¶

Option `style`¶

Option `attributionControl`¶

`zoom`¶

`pitch`¶

`bearing`¶

Option `interactive`¶