GIS : légende par mots clés

12 septembre 2018 – par flouvel – 8 commentaires

1
2
3
4
5
4 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 :

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

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

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

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

<?php
function formulaires_gismotslegende_charger_dist(){
	$valeurs = array('mots'=>_request('mots'),);
	return $valeurs;
}
function formulaires_gismotslegende_verifier_dist(){
	$erreurs = array();
}
function formulaires_gismotslegende_traiter_dist(){
	$res = array();
	$mots[] = _request('mots[]');
	return $res;
}
?>

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 pour générer ces objets composites “motslegende”, un nouveau squelette, gis_motslegende.html , à enregistrer dans le dossier json de vos squelettes :

<BOUCLE_rub(RUBRIQUES){gis}{id_mot IN #ENV{mots}}{","}>
<BOUCLE_gis(GIS){id_rubrique}>
 {"type": "Feature",
  "geometry": {"type": "Point", "coordinates": [#LON, #LAT]},
  "id":"#ID_GIS",
  "properties": {
   "description": [(#DESCRIPTIF|sinon{#_rub:INTRODUCTION}|textebrut|concat{... <a href="#_rub:URL_RUBRIQUE">En savoir plus</a>}|replace{"'","\'"}|json_encode)][(#SET{logo_doc,''})]
<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>
[(#GET{logo_doc}|oui)
 #SET{icon_w,#GET{logo_doc}|extraire_attribut{src}|largeur}
 #SET{icon_h,#GET{logo_doc}|extraire_attribut{src}|hauteur}
  [,"icon": (#GET{logo_doc}|extraire_attribut{src}|url_absolue|json_encode)],
  "icon_size": \[[(#GET{icon_w})],[(#GET{icon_h})]\],
  "icon_anchor": \[[(#GET{icon_w}|div{2})],[(#GET{icon_h})]\],
  "popup_anchor": \[1,[-(#GET{icon_h}|div{1.2})]\]]
}}
</BOUCLE_gis>
</BOUCLE_rub>

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

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

permet alors via le formulaire mots clés (légende) et la variable #ENV{mots}, 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 fait le lien entre les points et les objets :

id_gis objet id_objet

et la table spip_mots_liens fait le lien entre les mots et les obejts :

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 :

<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}{","}>
  #ID_MOT ,  #ID_GIS , #ID_OBJET , #OBJET 
<BOUCLE_gis(GIS){id_gis}>
	... [#LON, #LAT] ... #LOGO_MOT ...

Dernière modification de cette page le 5 janvier 2019

Discussion

5 ans 1 an 3 mois Sans limite
Par date
Filtrer

2 discussions

  • 6
    jeromeD

    Bonjour et merci...je cherchais cela depuis un moment.
    Je bloque juste sur ce passage :
    « 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 :»
    J’ai copié le code et créé le fichier gis_motslegende.html déposé dans le dossier json de mon squelette. Mais par contre, pouvez-vous me préciser les actions de création d’un objet motlegende... car là je sèche.
    Merci d’avance
    Jérôme
    PS : Bonne année

    • flouvel

      oui... la phrase est ambiguë (je devrais peut être plutôt écrire « Il faut donc créer un nouveau paramètre objet ... »)
      C’est gis_motslegende.html qui crée l’objet à partir du moment où celui ci existe. Cet objet c’est un point GIS d’une rubrique (ou autre objet en modifiant le code) ayant un mot clé ayant un logo.
      Vous n’avez donc qu’à créer les points GIS.

    • flouvel

      oui... la phrase est ambiguë (je devrais peut être plutôt écrire « Il faut donc créer un nouveau paramètre objet ... »)
      C’est gis_motslegende.html qui crée l’objet à partir du moment où celui ci existe. Cet objet c’est un point GIS d’une rubrique (ou autre objet en modifiant le code) ayant un mot clé ayant un logo.
      Vous n’avez donc qu’à créer les points GIS.

      (Quand vous aurez fini si vous pouvez mettre un lien qu’on ait un autre exemple)

    • jeromeD

      Bonjour, Volontiers pour le lien pour un deuxième exemple lorsque j’y serai arrivé ;-)
      Voilà où j’en suis :
      J’ai des articles ayant des point GIS. Ces points GIS sont associés à un mot clé (du groupe 7) et chaque mot clé à un logo (marqueur).

      J’ai créé le formulaire, déposé dans le dossier /formulaires de mon squelette

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

      J’ai créé le fichier gismotslegende.php que j’ai déposé dans le même dossier squelettes/formulaires

      <?php
function formulaires_gismotslegende_charger_dist(){
	$valeurs = array('mots'=>_request('mots'),);
	return $valeurs;
}
function formulaires_gismotslegende_verifier_dist(){
	$erreurs = array();
}
function formulaires_gismotslegende_traiter_dist(){
	$res = array();
	$mots[] = _request('mots[]');
	return $res;
}
?>

      Enfin j’ai créé et adapté à une boucle article le fichier gis_motslegende.html dans /squelettes/json

      <BOUCLE_art(ARTICLES){gis}{id_mot IN #ENV{mots}}{","}>
<BOUCLE_gis(GIS){id_article}>
 {"type": "Feature",
  "geometry": {"type": "Point", "coordinates": [#LON, #LAT]},
  "id":"#ID_GIS",
  "properties": {
   "description": [(#DESCRIPTIF|sinon{#_art:INTRODUCTION}|textebrut|concat{... <a href="#_art:URL_ARTICLE">En savoir plus</a>}|replace{"'","\'"}|json_encode)][(#SET{logo_doc,''})]
<BOUCLE_mot(MOTS){id_article=#_art:ID_ARTICLE}{id_groupe=7}{par hasard}{0,1}>[(#SET{logo_doc,#LOGO_MOT|image_passe_partout{32,32}})]</BOUCLE_mot>
[(#GET{logo_doc}|oui)
 #SET{icon_w,#GET{logo_doc}|extraire_attribut{src}|largeur}
 #SET{icon_h,#GET{logo_doc}|extraire_attribut{src}|hauteur}
  [,"icon": (#GET{logo_doc}|extraire_attribut{src}|url_absolue|json_encode)],
  "icon_size": \[[(#GET{icon_w})],[(#GET{icon_h})]\],
  "icon_anchor": \[[(#GET{icon_w}|div{2})],[(#GET{icon_h})]\],
  "popup_anchor": \[1,[-(#GET{icon_h}|div{1.2})]\]]
}}
</BOUCLE_gis>
</BOUCLE_art>

      Dans mon squelette, j’ai intégré les deux lignes suivantes

      [(#FORMULAIRE_GISMOTSLEGENDE)]
[(#MODELE{carte_gis,objets=motslegende,mots=#ENV{mots}})]

      J’ai bien le formulaire qui apparaît et la carte toutefois, je n’ai rien sur la carte même lorsque je sélectionne un élément de la légende ?

      Auiez-vous une idée ?
      Merci pour votre aide

    • flouvel

      J’ai des articles ayant des point GIS. Ces points GIS sont associés à un mot clé (du groupe 7) et chaque mot clé à un logo (marqueur).

      Dans mon exemple si vous le suivez à la lettre en remplaçant rubrique par article, ce sont les articles qui sont associés à un mot clé, et ce sont les articles qui sont affichés sur la carte ...
      Vous dites associer les points GIS à un mot clé ? c’est possible ? pas dans « mon » spip ...
      Si c’est votre clavier qu’a fourché, et que c’est bien vos articles qui ont un mot clé (du groupe 7, avec logo, servant de marqueur), euh... :
      -  vérifier que #ENVmots est bien présent : /spip.php ?articleX&var_mode=debugvar_mode=debug
      -  commencer par tester le formulaire en affichant simplement la liste des articles ayant le(s) mot(s) clé(s) sélectionné(s)
      -  ...

    • jeromeD

      Bonsoir,
      En effet je confirme on peut associer des mots clé à un point géolocalisé, il suffit que le groupe de mots clés l’autorise (modifier un groupe de mots clés puis « Les mots-clés de ce groupe peuvent être associés — cocher points géolocalisés »

      C’est donc ce que j’avais fait. J’ai donc modifier pour l’associer non pas au point mais à l’article et cela fonctionne.
      Je vais finir le toilettage CSS et je reviens vers vous pour vous donner le lien de la carte. Merci pour l’aide en tout cas.
      Remarque  : Parfois on aimerait avoir un point géolocaliser sans article derrière juste pour situer un bâtiment avec les infos du points géolocalisés.

      Bonne soirée

    • flouvel

      Mais oui on peut associer des mots clé à un point géolocalisé !
      Dans ce cas je pense que vous pouvez vous en tirez autrement, surtout si, au vu de votre remarque, vos mots clés (du groupe 7) n’ont pas d’intérêts à être liés aux articles.
      Peut être alors simplement pour gis_motslegende.html :

      <BOUCLE_gis(GIS){id_mot IN #ENV{mots}}{autre ...}{","}>
 {"type": "Feature",
etc.

    Répondre à ce message

  • Racim

    bonjour,

    superbe article.
    il serait bien que les admin de spip-contrib créent un mot-clé « contribution pédagogique », pour retrouver d’un lien ce genre d’articles.

    merci.

    Répondre à ce message

Ajouter un commentaire

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom