GIS: légende par mots clés

Published : 12 September 2018 – updated on 5 January 2019 – by flouvel – 14 commentaires

1
2
3
4
5
5 Votes

This is an « educational contribution » which shows, with concrete example, how to develop a new functionality for 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 ...

Discussion

5 years 1 year 3 months Without limit
par date
Filter

4 discussions

  • 2
    miros

    Bonjour,
    Je recrée un nouveau fil, pour demander de l’aide car j’ai bien tout suivi et ce tutoriel fonctionne.

    Néanmoins si on a plusieurs points geo par rubrique, patatras cela ne fonctionne plus ! normalement.
    Comment adapter tout ceci pour que cela fonctionne avec plusieurs points geo par rubriques ( ou articles)
    Pas faute d’avoir essayé, je n’ai pas trouvé de solution
    Merci d’avance

    Cordialement

    • miros

      re Bonjour,

      Je me permet ici d’essayer d’expliquer une partie de mon problème :

      Sur une rubrique j’ai respectivement
      2 points géo qui ont pour mots clés :
      tonton (logo vert) et tata ( logo pourpre).

      1°) Sur la carte les couleurs de logo des points ne s’affichent pas, mais
      en lieu et place les icônes par défaut de Gis (bleus) .

      2°) La légende propose donc 2 points :

      si je clique la checkbox « tonton », le point tonton s’affiche bien
      si je clique une seconde fois sur la checkbox tata
      (les deux checkbox sont donc activés) j’ai bien mais 2 points
      par contre si je décoche tonton, logiquement tonton disparait
      mais aussi tata alors que la checkbox tata est bien resté cochée.

      Donc problème avec le point « tata »

      Voilà où j’en suis , il faut dire que je tourne en rond, je ne sais pas comment
      modifier les boucles dans Json , ou/et le formulaire de sélection .

      Merci pour votre aide et votre patience.

      Cordialement

    • miros

      Errata !

      Je n’avais pas vu un troisième point sur ma carte ( d’une autre rubrique)
      je viens de l’enlever et cela fonctionne donc avec les 2 points cités en exemple dans mon message plus précédent.
      Ce qui n’enlève pas le dysfonctionnement avec plusieurs points sur plusieurs rubriques .

      Cordialement

    Reply to this message

  • 2
    miros

    Bonjour, et surtout merci pour cette contribution !

    Voilà, ma carte fonctionne , j’ai bien mes points géo avec mots clés associés.
    Pourtant à l’affichage de ma carte mes points n’apparaissent pas .
    Même quand je clique sur la légende ( formulaire qui lui fonctionne).

    Je vous mets ici mon json qui semble le coupable...

    <BOUCLE_art(ARTICLES){gis}{id_mot IN #ENV{mots}}{","}>
<BOUCLE_gis(GIS){id_mot IN #ENV{mots}}{autre ...}{","}>
 {"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_gis=#_gis:ID_GIS}{id_groupe=1}{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>

    Si un spiper pouvait m’aider car je patauge depuis longtemps là dessus...!

    Merci
    Cordialement

    • flouvel

      <BOUCLE_gis(GIS){id_mot IN #ENV{mots}}{autre ...}{","}>
      le critère “autre ...” ne doit pas exister … .
      Ensuite, vous appliquez le même critère “id_mot IN #ENV[mots]” aux boucles _art(ARTICLES) et _gis(GIS), c’est redondant (même si ça ne devrait pas gêner si les mots clés sont bien affectés aux 2, mais quel intérêt alors ?)
      Enfin de là, de ce choix, est-ce bien id_gis=#_gis:ID_GIS le bon critère pour BOUCLE_mot(MOTS)
      (dans mon exemple les mots sont liés aux rubriques, si pour vous ils sont liés aux articles, cela devrait être id_article=#_art:ID_ARTICLE, s’ils sont bien liés aux point GIS a priori ça devrait être ok en supprimant id_mot IN #ENVmots de la BOUCLE_art(ARTICLES).

      En espérant que ça vous aiguille sur la solution (je m’excuse pas avance je n’aurai plus guère le temps de répondre cette semaine)

    • miros

      Merci d’avoir pris le temps de me répondre avec ces explications, cela fonctionne maintenant.

      Je peux passer à l’étape suivante de mon projet ! ;-)

      Cordialement

    Reply to this message

  • 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.

    Reply to this 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.

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom