SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 58 visiteurs en ce moment

Accueil > Géo, carto, météo > GIS > Tutoriel : Afficher sur une carte GIS des points dont on n’a que (...)

Tutoriel : Afficher sur une carte GIS des points dont on n’a que l’adresse

15 avril 2018 – par jeanmarie

5 votes

Le besoin

Afficher sur une carte des points dont on n’a que l’adresse.

Le cas concret

Afficher des points de ventes sur une carte à partir d’un document tableur (LibreOffice Calc, Microsoft Excel...) avec possibilité de géolocaliser le visiteur.

Le principe

Il faut géocoder les adresses, c’est à dire trouver leurs coordonnées GPS, dans un document CSV pour pouvoir les lire avec une boucle DATA et générer un fichier JSON que GIS pourra lire.

Oui, rien que ça :)

Le géocodage

Via le site adresse.data.gouv.fr/csv, on peut géocoder des adresses en fournissant un fichier CSV de ce type :

EnseigneAdresseCode postalVille
Magasin 1 Adresse 1 CP 1 Ville 1
Magasin 2 Adresse 2 CP 2 Ville 2

Il en ressort un fichier CSV avec différentes infos supplémentaires dont la latitude et la longitude de chaque enseigne.

Lire le fichier CSV et générer le JSON

Pour que le rédacteur ait la main sur la carte, on passe le CSV comme document joint de l’article dans lequel on va afficher la carte.

On récupère donc l’URL de ce document avec une boucle DOCUMENTS pour la passer dans une variable source via un #SET

-  Dans json/gis_pointsdevente.html

  1. <BOUCLE_source(DOCUMENTS){id_article}{extension=csv}{!par date}{0,1}> #SET{source,#URL_DOCUMENT}</BOUCLE_source>

Les critères :
{extension=csv} pour ne sélectionner que les documents .csv
{!par date} pour toujours prendre le dernier documents envoyé
{0,1} pour ne prendre qu’un document

Ensuite, avec une boucle DATA, on extrait les infos souhaitées du CSV pour construire le JSON.

La petite subtilité ici est que, si une entrée n’a pas de coordonnées (parce que le géocodage n’a pas fonctionné pour une adresse par exemple), le JSON sera inutilisable.

Pour palier à ça, on teste la présence de la longitude pour chaque entrée avant de faire le JSON. Pour ce faire, vu le mélange de syntaxe SPIP/JSON, on passe par un inclure pour que ça fonctionne.

Si vous êtes sûr de votre CSV parce que vous l’avez vérifié et corrigé, vous pouvez supprimer le test et éviter ainsi l’inclure.

  1. <BOUCLE_csv(DATA){source csv, #GET{source}}{","}{cle>0}>[(#VALEUR{4}|!={''}|oui)
  2.         <INCLURE{fond=inclure/json_pointsdevente,
  3.                 id=#COMPTEUR_BOUCLE,
  4.                 lon=#VALEUR{5},
  5.                 lat=#VALEUR{4},
  6.                 enseigne=#VALEUR{0},
  7.                 adresse=#VALEUR{1},
  8.                 cp=#VALEUR{2},
  9.                 ville= #VALEUR{3}} />
  10. ]</BOUCLE_csv>

Télécharger

Les critères :
{cle>0} pour ne pas prendre en compte la 1re ligne qui correspond à l’entête du tableau avec les noms des colonnes.
{","} pour respecter la syntaxe JSON entre chaque propriétée

Note
#VALEUR{0} correspond à la valeur de la 1re colonne, #VALEUR{1}, celle de le deuxième, etc...

-  Dans inclure/json_pointsdevente.html

  1. {
  2.         "type": "Feature",
  3.         "geometry": {"type": "Point", "coordinates": [[(#ENV{lon})], [(#ENV{lat})]]},
  4.         "id":"#ENV{id}",
  5.         "properties": {[
  6.                 (#SET{titre,<h3>#ENV{enseigne}</h3>})]
  7.                 "title":[(#GET{titre}|json_encode)],[
  8.                 (#SET{description,#ENV{adresse}<br />#ENV{cp} #ENV{ville} })]
  9.                 "description":[(#GET{description}|json_encode)][
  10.                 (#CHEMIN_IMAGE{#ENV*{icone,0}}|sinon{#CHEMIN{#ENV*{icone,0}}}|gis_icon_properties)]
  11.         }
  12. }

Télécharger

Afficher la carte

-  Dans inclure/pointsdevente.html

On affiche un lien pour que le visiteur puisse se géolocaliser avec une url type www.domaine.net/ma_page.html?geoloc=oui

  1. <a href="[(#SELF|parametre_url{geoloc,oui})]" class="ajax">me géolocaliser</a>

Et, en fonction de la présence, ou non, du paramètre ?geoloc=oui dans l’URL, on affiche la carte avec ou sans géolocalisation du visiteur.

  1. [(#ENV{geoloc}|=={oui}|?{
  2.                 [(#INCLURE{fond=modeles/carte_gis,
  3.                                                 objets=pointsdevente,
  4.                                                 id_article=#ENV{id_article},
  5.                                                 localiser_visiteur=oui})]
  6.         ,
  7.                 [(#INCLURE{fond=modeles/carte_gis,
  8.                                                 objets=pointsdevente,
  9.                                                 id_article=#ENV{id_article},
  10.                                                 centrer_auto=oui})]
  11. })]

Télécharger

Note
Pour simplifier le code, je n’ai gardé que les paramètres indispensables à GIS dans notre cas, mais il est possible changer le zoom si le visiteur demande la géolocalisation pour afficher les points proches de lui de façon plus lisible.

-  Dans le squelette de votre article

  1. <INCLURE{fond=inclure/pointsdevente,env,ajax,geoloc=#ENV{geoloc}} />

Et hop, le tour est joué.

Merci à b_b pour la piste et les outils.

P.-S.

Les ressources

La base adresse nationale
Un référentiel national ouvert : de l’adresse à la coordonnée géographique
https://adresse.data.gouv.fr

La documentation du plugin GIS4
GIS 4

Tester votre JSON
Utiliser l’extension JSON Lite pour votre navigateur
https://github.com/lauriro/json-lite

Dernière modification de cette page le 23 mai 2018

Retour en haut de la page

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Passer un site SPIP sous https://

    23 février 2017 – 38 commentaires

    Comment migrer simplement votre site SPIP de http:// vers https:// Le protocole https:// devient de plus en plus courant : C’est mieux pour la vie privée de tous La plupart des grands sites l’a déjà adopté Certains navigateurs commencent à afficher (...)

  • cipr : plugin « Prévisualisation étendue »

    22 septembre 2010 – 40 commentaires

    Ce plugin "cipr : Prévisualisation étendue" permet de naviguer sur le site en prévisualisation, entre articles et rubriques, sur la page d’accueil, etc. Ce plugin de prévisualisation étendue permet de : naviguer en prévisualisation entre articles et (...)

  • À propos des plugins actifs

    13 novembre 2010 – 25 commentaires

    À propos des plugins actifs affiche dans la partie publique de votre site la version de SPIP utilisée et la liste des Plugins activés avec affichage de l’icône, le nom, la version, l’état et une introduction de sa fonction. Si le Plugin n’a pas (...)

  • ScolaSPIP 4

    19 janvier 2016 – 362 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • Convertir un site SPIP 3 en utf-8 avec le plugin Grenier

    8 janvier 2014 – 23 commentaires

    SPIP 3 fonctionne nativement avec l’encodage universel unicode utf-8. Sur certains sites (par exemple sur une mise à jour), on peut avoir un site qui est resté en iso-latin ce qui n’est pas conseillé (source de bugs, d’incompatibilité, ...) . (...)