Affichage cartographique multicouches


Où comment afficher potentiellement sur une carte :
  • un fond de carte Openstreetmap
  • + des données statiques Geojson
  • + des tuiles dynamiques
  • + bien sûr vos données issues de vos formulaires

Prenons l'exemple d'une association qui souhaite faire apparaitre :
  • un fond de carte Openstreetmap
  • les délimités des régions françaises (fichier GeoJson)
  • tous les itinéraires cyclables pour se rencontrer (depuis un serveur de tuiles)
  • et enfin la localisation des membres de son réseau (depuis un formulaire Bazar)

Etape 1 : fabriquer son formulaire


Etape 2 : trouver des données cartographiques

  • des serveurs de tuiles (de cartes) pour faire apparaitre des cartes dynamiques provenant d'une source distante (par exemple des serveurs de tuiles openstreetmap sur différents sujets)

  • des données au format Geojson : ce sont des données statiques que l'on peut obtenir de différentes façons : un tableur CSV avec des données lat/lon, un fichier opendata, une extraction de données openstreetmap, etc.
    • Une fois récupéré le fichier GeoJson, l'ouvrir avec un éditeur de texte.
    • Copier le code complet.
    • Coller les data GeoJson dans une page du Wiki dédiée (que vous appellerez ensuite avec le handler "/raw" comme dans l'exemple ci-après.)

Etape 3 : visualiser les résultats sur carte
  • Choisir la page ou créer une page où seront affichés les résultats.
  • Insérez l'action Bazar Carto ([ActionBazarcarto voir documentation]) en utilisant le code suivant. Exemple ici avec :
    • 1 layer tiles Waymarkedtrails un serveur qui montre les grandes voies cyclables en France
    • 1 layer geojson avec contours de certaines régions de France (issu de OSM boundaries) copié/collé dans la page BacASableGeoJson1

{{Bazarcarto layers="Waymarkedtrails|Tiles|https://tile.waymarkedtrails.org/cycling/{z}/{x}/{y}.png,Régions|GeoJson|wakka.php?wiki=BacASableGeoJson1/raw" }}




  • * "layers" : une liste de layers (couches).
Pour comprendre les termes du code :
  • * format pour chaque layer : NOM|TYPE|URL ou NOM|TYPE|OPTIONS|URL
  • * - OPTIONS: facultatif ex: "color:red; opacity:0.3"
  • * nota bene: le séparateur d'options est le ';' et pas la ',' qui est déjà utilisée pour séparer les LAYERS.
  • * - TYPE: Tiles ou GeoJson
  • * - URL: Attention au Blocage d?une requête multi-origines (Cross-Origin Request).