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.)
Il arrive souvent qu'en sauvant la page yeswiki indique une erreur
Query failed: INSERT INTO yeswiki__pages SET tag ....... (Data too long for column 'body' at row 1)

2 solutions pour remedier à ce problème :
- soit modifier le type de champ body dans phpmyadmin pour longtext
- soit transférer votre fichier geojson par ftp dans votre dossier files par exemple et adapter le paramètre URL du layer en remplacant par le nompage/raw par l'adresse complete du fichier https://yeswiki.net/files/departement.geojson
layers="Dpt|GeoJson|color:'#17B0CF'|https://infopublic71.xyz/files/departement.geojson"


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 id="1" 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).

Votre layer est bien présent mais il faut l'activer en cliquant sur le bouton multicouche de votre carte.
Voici un template custom qui permet d'ajouter un paramètre visiblebydefault et d'activer le layer directement
layers="Dpt|GeoJson|color:'#17B0CF';visiblebydefault|https://infopublic71.xyz/files/departement.geojson"


documentation