Carte des arrêts de Bus en Saône-et-loire avec opendata71.fr

On va ici mixer 3 sources de données :

On souhaite afficher tous les arrêts de bus sur une carte, et permettre, pour chaque arrêt, d’en voir le nom ainsi que sa photo (quand elle est disponible).

Pour cela on va utiliser le plugin de cartographie de SPIP GIS.
Après avoir installé ce plugin, il nous faut créer un squelette qui va générer la liste de tous les points à afficher.

On créé donc un fichier json/gis_od_arrets.html dans le dossier squelettes/ de SPIP, et on y insère nos boucles pour aller chercher les données depuis les 2 sources.

Cependant, cette fois nous n’allons pas afficher les données au format HTML, mais les mettre en forme dans un tableau JSON. On a deux boucles imbriquées : la première va chercher tous les arrêts de bus, et à l’intérieur de celle-ci on va chercher la photo de l’arrêt - si elle est disponible - en utilisant une requête avec un filtre, comme le permet l’API de OpenData71 :

  1. <BOUCLE_flux(DATA)
  2. {source simplexml,http://opendata71.cloudapp.net/v1/dataviz/CG71DTIPointsArret/,namespace}
  3. {datapath root/children/entry}
  4. {0, #ENV{limit,50}}{","}>[
  5. /* Memoriser le numero de l'arret */
  6. (#SET{arret,[(#VALEUR{children/content/0/children/m:properties/0/children/d:cod_arret/0/text})]})][
  7. /* Construire l'URL de la requete pour recuperer la photo */
  8. (#SET{url,[http://opendata71.cloudapp.net/v1/data/INDEXDTI/?$filter=point_arret%20eq%20%27(#GET{arret})%27]})
  9. ]<BOUCLE_photo(DATA)
  10. {source simplexml,#GET{url},namespace}{datapath root/children/entry/0/children/content/0/children}
  11. {0,1}>[
  12. /* Memoriser la photo, on la reduit a 200px maxi au passage */
  13. (#SET{photo,[(#VALEUR{0/children/d:chemin/0/text}|image_reduire{200})]})
  14. ]</BOUCLE_photo>[(#REM)
  15. /* Tableau JSON pour cet arret */]
  16. {
  17. "type": "Feature",
  18. "geometry": {"type": "Point", "coordinates": [[(#VALEUR{children/content/0/children/m:properties/0/children/d:longitude/0/text})], [(#VALEUR{children/content/0/children/m:properties/0/children/d:latitude/0/text})]]},
  19. "id":"#GET{arret}",
  20. "properties": {
  21. "title":[(#VALEUR{children/content/0/children/m:properties/0/children/d:nom/0/text}json_encode)],
  22. "description":[(#GET{photo}|wrap{'<div style="width:200px;">'}|sinon{''}|json_encode)]
  23. }
  24. }</BOUCLE_flux>

Télécharger

Il ne reste plus ensuite qu’à insérer le modèle de la carte, en lui indiquant en arguments :

  • les données à prendre objets=od_arrets ;
  • le nombre de points que l’on veut afficher limit=250 ;
  • de permettre de voir la carte en plein écran fullscreen=oui
  • de regrouper les épinglettes trop proches les unes des autres cluster=oui

Le code

  1. <h3>Les arrêts de bus en Saône-et-Loire</h3>
  2. #MODELE{carte_gis,objets=od_arrets,limit=250,fullscreen=oui,cluster=oui}

Télécharger

Le résultat

Les arrêts de bus en Saône-et-Loire