Une carte, votre infrastructure.

Carte vectorielle et géocodage pour la Belgique, la France métropolitaine, les Pays-Bas européens, l’Allemagne et le Luxembourg.

Points d’accès

Carte MapLibre

Installez les dépendances dans le projet du site et compilez-les avec son outil de build. Hébergez les modules et le worker MapLibre dans les assets du site.

npm install maplibre-gl@6.10.0 pmtiles@4.5.0

import * as maplibregl from 'maplibre-gl';
import { Protocol } from 'pmtiles';
import 'maplibre-gl/dist/maplibre-gl.css';

const protocol = new Protocol();
maplibregl.addProtocol('pmtiles', protocol.tile);

const map = new maplibregl.Map({
  container: 'map', // cet élément doit avoir une hauteur CSS
  style: 'https://maps.agifly.cloud/styles/fr.json',
  center: [4.352515, 50.846714], // longitude, latitude
  zoom: 8,
  minZoom: 0,
  maxZoom: 24
});

map.addControl(new maplibregl.NavigationControl());

new maplibregl.Marker()
  .setLngLat([4.352515, 50.846714])
  .addTo(map);

Rechercher une adresse et centrer la carte

const query = new URLSearchParams({
  q: 'Grand-Place, Bruxelles',
  language: 'fr'
});
const response = await fetch(
  `https://maps.agifly.cloud/api/search?${query}`
);
if (!response.ok) throw new Error(`Géocodage : ${response.status}`);
const places = await response.json();
if (places.length) {
  const center = [Number(places[0].lon), Number(places[0].lat)];
  map.flyTo({ center, zoom: 16 });
  new maplibregl.Marker().setLngLat(center).addTo(map);
}

Galerie et aperçus des styles

Le sélecteur propose 15 fonds utilisables : Agifly, les cinq styles Protomaps, Americana, Dark Matter, MapTiler Basic, Toner, OSM Bright, OSM Liberty, Positron, VersaTiles Colorful et un fond vide. Chaque fond affiche un aperçu rendu à Bruxelles avec les mêmes tuiles que la carte.

Les styles issus de la galerie Maputnik utilisent leur schéma de tuiles d’origine : OpenMapTiles ou Shortbread. Ces archives sont également hébergées sur le serveur maps et leur actualisation est vérifiée les 1er et 15 du mois. Le détail natif dépend de la source (actuellement 14 pour la galerie, 15 pour Protomaps), avec un zoom d’affichage jusqu’à 24. La date OSM de la source sélectionnée apparaît sous les outils ; une nouvelle vérification n’implique pas qu’un fournisseur ait publié des données plus récentes.

Les polices sont harmonisées avec les Noto Sans locales. Les couches de relief externes d’Americana et Liberty sont omises. Americana utilise ses icônes statiques et des références routières textuelles. Les attributions des styles sont conservées ; consultez les sources et licences.

Localiser le visiteur

Le module demande la position au chargement ou au clic. Le navigateur exige HTTPS et l’autorisation du visiteur ; un refus doit laisser la recherche manuelle disponible. Si la position précise est indisponible ou expire, le module tente une fois la précision standard. Activer les services de localisation ne garantit pas que le navigateur, notamment un navigateur intégré, puisse obtenir une position. Utilisez la page HTTPS dans Safari ou Chrome pour tester ; le fichier HTML local n’est pas le site déployé.

import { createUserLocation } from 'https://maps.agifly.cloud/geolocation.js';
const locator = createUserLocation({
  onStatus: ({ message }) => { statusElement.textContent = message; }
});
async function locate(automatic = false) {
  const position = await locator.locate({ automatic });
  if (!position) return;
  map.flyTo({ center: [position.longitude, position.latitude], zoom: 15 });
  // /api/reverse permet ensuite de retrouver l’adresse avec Nominatim.
}
locationButton.addEventListener('click', () => locate());
locate(true);
// Lors d’une sélection manuelle, annulez le résultat automatique en attente :
// locator.cancel();

Pour une estimation sans autorisation de localisation :

const response = await fetch('https://maps.agifly.cloud/api/location/ip');
if (!response.ok) throw new Error(`Localisation IP : ${response.status}`);
const position = await response.json();
map.flyTo({ center: [position.longitude, position.latitude], zoom: 10 });

La base DB-IP City Lite est hébergée localement et actualisée chaque mois. Une IP indique une zone approximative du réseau, pas une adresse précise ; un VPN ou réseau mobile peut la déplacer. L’API utilise uniquement l’IP de connexion du visiteur. Un appel depuis votre backend localiserait votre serveur.

Sur toute page utilisant ces résultats, conservez l’attribution IP Geolocation by DB-IP (CC BY 4.0).

Domaines autorisés

Les ressources cartographiques et API acceptent uniquement les origines HTTPS exactes : maps.agifly.cloud, agifly.be, www.agifly.be, eggo.be, www.eggo.be et wp.eggo.agifly.cloud. Les autres origines reçoivent HTTP 403. Sans Origin, un Referer provenant d’un de ces sites est requis. Les iframes du démonstrateur sont bloquées sur les autres sites.

La page de test reste publique. Ce contrôle bloque les intégrations de navigateurs non autorisées ; il ne constitue pas une authentification privée, car un client serveur peut falsifier ces en-têtes. Pour une intégration autorisée, ne supprimez pas le Referer ; utilisez strict-origin-when-cross-origin. Les ressources publiques consultables peuvent être copiées.

Comportement du service

• Actualisation des tuiles les 1er et 15 de chaque mois, à partir de 03:15, heure de Bruxelles.
• Tous les niveaux natifs de la source sont conservés : actuellement 0–15. Le zoom d’affichage peut aller jusqu’à 24 par agrandissement vectoriel.
• Le style utilise une archive versionnée. Rechargez le style au démarrage de la page pour recevoir les mises à jour.
• Le géocodage utilise exclusivement votre Nominatim. La recherche est limitée aux cinq pays, avec cinq résultats maximum.
• Effectuez les recherches sur validation du formulaire. Géocodage limité à 2 requêtes/seconde par IP, avec une capacité globale de 10/seconde ; gérez la réponse 429.
• Nginx vérifie l’origine avant de servir les tuiles, styles, modules, polices et API. L’administrateur gère la liste des domaines autorisés.
• Conservez l’attribution OpenStreetMap et Protomaps affichée par le style.

Le site eggo.be peut maintenant utiliser ces ressources. Son code WordPress doit être adapté pour remplacer les appels Google Maps et conserver ses marqueurs de showrooms.