SPIP-Contrib

SPIP-Contrib

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

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

Accueil > Géo, carto, météo > GIS > GIS : légende par mots clés

GIS : légende par mots clés

12 septembre 2018 – par flouvel

3 votes

Ceci est une « contribution pédagogique », qui montre par l’exemple comment développer une nouvelle fonctionnalité pour SPIP.

Une carte s’interprète d’après une légende.
Sur une carte web, des éléments de cette légende peuvent permettre à l’utilisateur de choisir ceux qu’il veut voir afficher : gares, écoles, ...
Dans SPIP les objets peuvent être liés à des mots clés. Les mots clés peuvent être munis d’un logo.
Ce tutoriel propose d’utiliser ces logos de mots clés comme éléments de légende pour les objets « géotagués » (ayant un points gis) sur la carte. Un formulaire permettant de choisir les éléments à afficher.

Gis, légende par mots clés
Les mots « Jaune », « Bleu » et « Noir » ont été sélectionnés => seul les objets ayant ces mots clés sont présents sur la carte.

Supposons que vous ayez des rubriques ayant,
-  un mot clé appartenant au groupe 1 (ici nommé couleurs)
-  un (un seul dans cet exemple) point géolocalisé

Créons d’abord un formulaire avec les mots clés, le formulaire gismotslegende.html (mots clés, légende...) à enregistrer dans le dossier formulaires de vos squelettes :

  1. <div class="formulaire_spip formulaire_aform" id="formulaire_aform">
  2. <form method="post" action="#ENV{action}">
  3.   #ACTION_FORMULAIRE
  4.  <div class="editer-groupe">
  5.   <BOUCLE_motsgeo(MOTS){id_groupe=1}{"&nbsp; "}>
  6.   <div class="editer editer_checkbox">
  7.   <input type="checkbox" name="mots[]" id="mot#ID_MOT" value="#ID_MOT"[(#ENV{mots}|find{#ID_MOT}|oui) checked="checked"]  onchange="this.form.submit();" />
  8.   <label class="checkbox-inline" for="mot#ID_MOT">#LOGO_MOT #TITRE</label>
  9.   </div>
  10.   [(#SET{choixcouleur,[(#ENV{mots, #ARRAY{}}|push{#ID_MOT})]})]
  11.   </BOUCLE_motsgeo>
  12.  </div>
  13. </form>
  14. </div>

Télécharger

Le formulaire est à inclure dans la page qui va accueillir la carte gis, gis.html :

  1. <!DOCTYPE html PUBLIC (...)
  2. <body> (...)
  3. [(#FORMULAIRE_GISMOTSLEGENDE)]

Télécharger

Comme expliqué dans la documentation ce formulaire doit être accompagné d’un fichier php de traitement gismotslegende.php :

  1. <?php
  2. function formulaires_gismotslegende_charger_dist(){
  3.         $valeurs = array('mots'=>_request('mots'),);
  4.         return $valeurs;
  5. }
  6. function formulaires_gismotslegende_verifier_dist(){
  7.         $erreurs = array();
  8. }
  9. function formulaires_gismotslegende_traiter_dist(){
  10.         $res = array();
  11.         $mots[] = _request('mots[]');
  12.         return $res;
  13. }
  14. ?>

Télécharger

Bien. Maintenant nous voudrions que en sélectionnant un (ou des) mot(s) clé(s) de ce formulaire les rubriques ayant ce mot clé et un point géolocalisé soient affichées par le logo de ce mot clé sur la carte gis.

Comme expliqué dans la documentation de GIS 4 : « le paramètre objets permet de définir quel squelette sera utilisé pour générer les données JSON qui alimenteront la carte »
Il faut donc créer un nouvel objet, appelons le « motslegende », et le modèles appelant, gis_motslegende.html , à enregistrer dans le dossier json de vos squelettes :

  1. <BOUCLE_rub(RUBRIQUES){gis}{id_mot IN #ENV{mots}}{","}>
  2. <BOUCLE_gis(GIS){id_rubrique}>
  3.  {"type": "Feature",
  4.  "geometry": {"type": "Point", "coordinates": [#LON, #LAT]},
  5.  "id":"#ID_GIS",
  6.  "properties": {
  7.   "description": [(#DESCRIPTIF|sinon{#_rub:INTRODUCTION}|textebrut|concat{... <a href="#_rub:URL_RUBRIQUE">En savoir plus</a>}|replace{"'","\'"}|json_encode)][(#SET{logo_doc,''})]
  8. <BOUCLE_mot(MOTS){id_rubrique=#_rub:ID_RUBRIQUE}{id_groupe=2}{par hasard}{0,1}>[(#SET{logo_doc,#LOGO_MOT|image_passe_partout{32,32}})]</BOUCLE_mot>
  9. [(#GET{logo_doc}|oui)
  10. #SET{icon_w,#GET{logo_doc}|extraire_attribut{src}|largeur}
  11. #SET{icon_h,#GET{logo_doc}|extraire_attribut{src}|hauteur}
  12.  [,"icon": (#GET{logo_doc}|extraire_attribut{src}|url_absolue|json_encode)],
  13.  "icon_size": \[[(#GET{icon_w})],[(#GET{icon_h})]\],
  14.  "icon_anchor": \[[(#GET{icon_w}|div{2})],[(#GET{icon_h})]\],
  15.  "popup_anchor": \[1,[-(#GET{icon_h}|div{1.2})]\]]
  16. }}
  17. </BOUCLE_gis>
  18. </BOUCLE_rub>

Télécharger

Ce modèle inclus dans votre page gis.html ,

  1. <!DOCTYPE html PUBLIC (...)
  2. <body> (...)
  3. [(#FORMULAIRE_GISMOTSLEGENDE)]
  4. [(#MODELE{carte_gis,objets=motslegende,mots=#ENV{mots}})]
  5. (...)

Télécharger

permet alors via le formulaire mots clés (légende) et la variable #ENVmots, de choisir les rubriques que vous voulez afficher sur la carte GIS.
(Exemple : circuits escalade de bleau)


Remarque. Pour afficher plusieurs objets (rubriques + articles +...) sur une seule carte.
la table spip_gis_liens :

id_gis objet id_objet

la table spip_mots_liens :

id_mot id_objet objet

Pour généraliser le "json" à tout objet il faudrait (non testé) relier ces 2 tables par une jointure déclarée dans declarer_tables_interfaces et ainsi permettre :

  1. <BOUCLE_motsgis(spip_mots_liens spip_gis_liens){id_mot IN #ENV{mots}}{spip_mots_liens.objet=spip_gis_liens.objet}{spip_mots_liens.id_objet=spip_gis_liens.id_objet}{","}>
  2.   #ID_MOT ,  #ID_GIS , #ID_OBJET , #OBJET
  3. <BOUCLE_gis(GIS){id_gis}>
  4.         ... [#LON, #LAT] ... #LOGO_MOT ...

Télécharger

Dernière modification de cette page le 15 septembre 2018

Retour en haut de la page

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

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

  • PHANTOM (HTML5UP)

    18 juillet – 22 commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)

  • Fulltext

    14 mars 2009 – 217 commentaires

    Ce plugin permet d’une part d’exploiter le mode de recherche FULLTEXT de MySQL et d’améliorer ainsi énormément les recherches par rapport au fonctionnement natif de SPIP, et d’autre part d’indexer le contenu de certains (...)

  • Site multilingue facile

    3 mai 2012 – 102 commentaires

    Site multilingue facile permet de mettre en place facilement un site multilingue avec une langue par secteur. Introduction Même si le multilinguisme est nativement intégré dans spip, réaliser un site multilingue n’est pas toujours évident. Ce (...)

  • GIS 4

    11 août 2012 – 1494 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • Mailsubscribers

    16 janvier 2013 – 431 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes de (...)