SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 220 visiteurs en ce moment

Accueil > Géo, carto, météo > GIS > Tutoriel : créer une carte interactive avec GIS4

Tutoriel : créer une carte interactive avec GIS4

19 octobre 2013 – par Yohooo – 24 commentaires

9 votes

Utilisation de quelques fonctions javascript pour créer des interactions avec une carte GIS.

L’objet de ce tutoriel est de produire une carte interactive comme celle-ci

Effacer tous les points d’une carte d’une carte

La fonction javascript removeAllMarkers() permet d’effacer tous les points de la carte à laquelle elle est associée.

Exemple, pour effacer tous les articles de la carte map1 :
map1.removeAllMarkers();

Afficher des points sur une carte existante.

De la même manière, il est possible d’ajouter des points à une carte grâce à la fonction javascript parseGeoJson()

Cette fonction prend comme unique variable le contenu du Json à appliquer. Avec GIS, on pourra l’utiliser de la manière suivante en incluant les fichiers se trouvant dans le répertoire /json  :

Exemple d’utilisation de ces 2 fonctions :

Pour créer une carte :
-  affichant les logos des mots-clés associés aux articles
-  filtrable par logo de mots-clé

1./ On aligne une série de pictos comprenant :
-  les logos des mot-clés qui serviront de lien pour filtrer les points
-  d’un visuel qui servira de lien pour rétablir la carte initiale (images/tout.png)

2./ On adapte un squelette Json qui permettra d’afficher tous les logos :

Nous créons donc un fichier gis_touslesmots dans squelettes/json  :

Petites particularités :
-  Si le point ne possède pas de titre et/ou de descriptif, ceux-ci sont remplacés respectivement par le titre et/ou descriptif de l’article auquel ils sont associés.
-  Le descriptif se termine par un lien vers l’article auquel est associé le point

Ces 2 particularités expliquent la présence d’une boucle ARTICLES encadrant le code. Cette boucle est associé aux balises #_art:TITRE, #_art:INTRODUCTION et #_art:URL_ARTICLE.

3./ De la même manière, on crée un squelette Json permettant d’afficher les points géolocalisant les articles associés à un mot clé particulier. Nous l’appelons gis_articlesmot . Une variable id_mot est nécessaire à sa génération :

4./ On affiche la carte qui fait apparaître tous les points en s’appuyant sur le premier des 2 squelettes Json.

5./ Enfin, ajoutons les fonctions javascript qui filtreront les points après un clic sur l’un des boutons générés ci-dessus.

Allons plus loin : générons une liste de liens permettant de faire apparaître les infobulles

6./ La liste apparaîtra en entier par défaut dans un cadre scrollable. Elle sera filtrée en même temps que les points.

Il faudra donc styliser la balise nommée « listedroite » avec un overflow : auto ; , une hauteur et une largeur fixe.

7./ Nous modifierons les fonctions javascript ci-dessus pour filtrer les listes lors des clics sur les logos des mots-clé :

8./ Ces fonctions chargent la page suivante qu’il convient de placer dans le répertoire squelettes  :

Et voila, c’est fini pour aujourd’hui.

Dernière modification de cette page le 18 mai 2016

Retour en haut de la page

Vos commentaires

  • Le 21 août à 13:37, par jeromeD En réponse à : Tutoriel : créer une carte interactive avec GIS4

    Bonjour,
    J’essaye de mettre en oeuvre ce tutoriel mais j’avoue sans succès... Je retrace ici mes étapes.
    1. Je créée un groupe de mots clés (le N°2) cela tombe bien. Dedans je créée des mots clés auquel j’associe un logo/marqueur.
    2. Je créée une rubrique dans laquelle je créée des articles auxquels j’associe un mot clé du groupe 2
    3. Je créée les fichiers gis_touslesmots.html et gis_articlesmot.html que je place dans le dossier squelettes/json
    4. Je créée un fichier rubrique.html de mon choix, chez moi rubrique=46 ou je place certains codes : celui de votre étape 1, celui de votre étape 4 et enfin celui de votre étape 5
    enfin si j’ai bien compris.
    là mon résultat fait bien apparaître une carte avec mes points qui redirige vers un article
    Mais, ils n’ont pas comme logo, le logo de leur mot clé
    Mais, la liste des mots clés apparaît bien avec leur logo, mais rien n’est cliquable

    Est-ce que quelqu’un peut prendre un peu de temps pour me dire ce que je n’ai pas compris ?
    En vous remerciant d’avance

    Jérôme

    Répondre à ce message

  • Le 31 mai à 22:32, par Sylvain Nogues En réponse à : Tutoriel : créer une carte interactive avec GIS4

    Bonjour,
    je n’arrive pas à faire fonctionner cela en spip 3.1. La borne indiquée est 3.0, quelqu’un a-t-il une idée de comment faire en 3.1 ?
    en particulier, map1.removeAllMarkers(); ne fonctionne pas chez moi.

    PAr ailleurs, est-ce vraiment ce code qui est exécuté sur le site montré en exemple ?

    Répondre à ce message

  • Le 2 avril à 14:36, par RealET En réponse à : Tutoriel : créer une carte interactive avec GIS4

    Dans le chapeau, le lien sur l’exemple n’est plus bon : le nom de domaine a été racheté par des spameurs.

    Répondre à ce message

  • Le 13 novembre 2015 à 21:52, par Manou En réponse à : Tutoriel : créer une carte interactive avec GIS4

    Bonjour tout le monde,
    J’essaie d’adapter cette carte, mais je bloque au numéro 5
    5./ Enfin, ajoutons les fonctions javascript qui filtreront les points après un clic sur l’un des boutons générés ci-dessus.

    ou est ce qu’il faut mettre ce code

     <BOUCLE_domainesjs(MOTS){id_groupe=1}>                 
                                     $('.markermot[(#ID_MOT)]').click(function(){
                                    map1.removeAllMarkers();
                                    map1.parseGeoJson({"type": "FeatureCollection",        "features": [[(#INCLURE{fond=json/gis_articlesmot}{id_mot=#ID_MOT}{limit=500})]]}        );
                                    $('#listedroite').load('[(#URL_PAGE{listedroite,id_mot=[(#ID_MOT)]}|replace{'&amp;amp;','&amp;'}|url_absolue)]');       
                            });
                    </BOUCLE_domainesjs>

    Mes logos ne bouge pas après click, je ne sais vraiment pas ce que j’ai loupé

    voici mon url Site

    • Le 14 novembre 2015 à 14:00, par Yohooo En réponse à : Tutoriel : créer une carte interactive avec GIS4

      Bonjour Manou,

      Tu as juste mis style=« javascript » au lieu de type=« text/javascript » dans ta balise script.

      Si tu modifies ce détail, ça marchera.

    • Le 15 novembre 2015 à 00:57, par Manou En réponse à : Tutoriel : créer une carte interactive avec GIS4

      Merci Yohooo,
      ça marche toujours pas, j’ai fais le changement mais toujours rien...Vous pouvez consulté le lien. Pour info, j’ai mis ce code dans rubrique.html est ce que le bon endroit ?? Merci de votre aide

       <BOUCLE_domainesjs(MOTS){id_groupe=1}>                 
                   <script type="text/javascript">
                              $('.markermot[(#ID_MOT)]').click(function(){
                                      map1.removeAllMarkers();
                                      map1.parseGeoJson({"type": "FeatureCollection",        "features": [[(#INCLURE{fond=json/gis_articlesmot}{id_mot=#ID_MOT}{limit=500})]]}        );
                                      $('#listedroite').load('[(#URL_PAGE{listedroite,id_mot=[(#ID_MOT)]}|replace{'&amp;amp;','&amp;'}|url_absolue)]');       
                              });
                      </script>       
                              </BOUCLE_domainesjs>

    Répondre à ce message

  • Le 13 septembre 2014 à 20:13, par DD En réponse à : Tutoriel : créer une carte interactive avec GIS4

    Bonjour,

    J’essaie de mettre en œuvre cette carte interactive très pratique mais j’ai du mal :
    en recopiant texto le code de cet article dans un squelette rubrique j’ai bien les logos et la liste des mots clé, la carte avec tous les logos et les points, la liste des articles à droite.

    mais aucun des liens javascript n’est actif sur les mots clé pour le filtrage.

    Si j’ai bien saisi le contenu du point 7 ci-dessus remplace le contenu du point 5. Même en décommentant

    <!--
    <BOUCLE_domainesjs(MOTS){id_groupe=2}>
    ..

    Rien ne se passe.
    Ou est mon erreur ?
    merci
    dd

    • Le 15 septembre 2014 à 11:04, par Yohooo En réponse à : Tutoriel : créer une carte interactive avec GIS4

      Salut DD,

      Un ptit lien vers la page où se trouve ton site pourrait peut-être m’aider à te répondre.

    • Le 15 septembre 2014 à 12:13, par DD En réponse à : Tutoriel : créer une carte interactive avec GIS4

      Bonjour,

      Je fais des tests en local mais comme c’est très bloquant je le mettrais en ligne si tu veux regarder.
      Et aussi j’ai :
      Erreur SQL 1054 Unknown column ’gis.departement’ in ’field list’
      dans squelettes/json/gis_articlesmot.html _art 1

      Merci
      dd

    • Le 18 septembre 2014 à 12:41, par Yohooo En réponse à : Tutoriel : créer une carte interactive avec GIS4

      Le plugin a dû évoluer.

      Il faut adapter les boucles.

    • Le 14 octobre 2014 à 21:17, par DD En réponse à : Tutoriel : créer une carte interactive avec GIS4

      Bonjour,

      Après réinstall sur un SPIP propre (3.0.17) les erreurs SQL ont disparu.

      La partie logo de mot clés + carte fonctionne (sauf que le clic sur les logos modifie aussi la barre admin-float, mais bon ça c’est pas trop gênant pour le visiteur).

      Par contre la partie appel du fichier squelettes/listedroite.html ne fonctionne pas : la liste des articles n’est pas mise à jour en fonction du mot clé lorsque l’on clique sur un logo de mot.

      Au début du fichier liste droite j’ai :

      <BOUCLE_mot(MOTS){id_mot=#ENV{id_mot}}>
      <td id="listedroite">
      <p style="margin-left:10px;">Cliquez sur un titre ci-dessous pour l'afficher sur la carte :</p>
      <h2 id="gtitre">[(#LOGO_MOT|image_reduire{19})] [(#TITRE)]</h2>

      mais aucun logo ni titre ne s’affiche. donc le #ID_MOT n’est visiblement pas transmis.

      Donc en résumé je sèche complètement.

      dd

    Répondre à ce message

  • Le 2 octobre 2014 à 11:36, par jef14 En réponse à : Tutoriel : créer une carte interactive avec GIS4

    Bonjour
    J’aimerais voir l’exemple de la carte interactive mais le lien indiqué (cet exemple) est protégé

    Merci d’avance,
    jean-François

    Répondre à ce message

  • Le 21 mars 2014 à 12:20, par Teenoo En réponse à : Tutoriel : créer une carte interactive avec GIS4

    Quelques petites questions :

    1) Mes mots-clés sont associés aux rubriques. Les articles ont la liaison gis. Comment afficher les articles de la rubrique avec le mot clé (et donc le marqueur) associé ?

    Ceci m’affiche bien les lieux liés à des articles, mais pas le contenu des articles. Le titre est celui du lieu par exemple. (J’ai allégé le code entre les boucles)

    1. <BOUCLE_art(RUBRIQUES){id_mot}{","}>
    2. <BOUCLE_arti(ARTICLES){id_rubrique}{gis}{","}>
    3. <BOUCLE_gis(GIS){id_article}{doublons}{","}>
    4. {"type": "Feature",
    5. "geometry": {"type": "Point", "coordinates": [#LON, #LAT]},
    6. "id":"#ID_GIS",
    7. "properties": {
    8. "title":
    9. [(#TITRE*|sinon{#_art:TITRE*}|supprimer_numero|json_encode)],
    10. </BOUCLE_gis>
    11. </BOUCLE_arti>
    12. </BOUCLE_art>

    Télécharger

    2) Puis-je mettre une autre boucle dans le même fichier, appelant des données externes XML.
     ? Ces données sont liées à des rubriques aussi mais n’utilisent bien sûr pas GIS.

    1. <BOUCLE_rub(RUBRIQUES){gis}{id_mot}{","}>
    2. #SET{xml, moxml#ID_RUBRIQUE.xml}
    3. #SET{trier,#ARRAY}
    4. <BOUCLE_gis2(DATA)
    5. {source simplexml, #GET{xml}}
    6. {datapath root/children/resultat/0/children/sit_liste}
    7. {","}>
    8. #SET{photo,''}
    9. <BOUCLE_photos(DATA)
    10. {source tableau,#VALEUR{children/criteres/0/children/crit}}
    11. {attributes/clef_critere = 30000279}>
    12. #SET{photo,#VALEUR{text}}
    13. </BOUCLE_photos>
    14. {"type": "Feature",
    15. "geometry": {"type": "Point", "coordinates": [
    16. #VALEUR{children/longitude/0/text},
    17. #VALEUR{children/latitude/0/text}]},
    18. "id":"#VALEUR{children/produit/0/text}",
    19. "properties": {
    20. "title":[(#VALEUR{children/nom/0/text}|json_encode)],
    21. "description":[(#GET{photo}|sinon{''}|json_encode)][(#SET{logo_doc,''})]
    22. }}
    23. </BOUCLE_gis2>
    24. </BOUCLE_rub>

    Télécharger

    Là je n’ai strictement rien à l’affichage...

    Merci pour les idées de correction :)

    • Le 21 mars 2014 à 14:45, par Teenoo En réponse à : Tutoriel : créer une carte interactive avec GIS4

      Réponse à moi-même (et les autres) pour la question n°1. Pour avoir les bonnes données je dois bien nommer la balise s’associant aux articles. Donc pas #_art:TITRE* mais #_arti:TITRE*

      Reste la question 2 :)

    Répondre à ce message

  • Le 16 février 2014 à 14:43, par nicod_ En réponse à : Tutoriel : créer une carte interactive avec GIS4

    Très intéressant, merci pour cet article.

    Je cherchais à créer une carte GIS en lui transmettant soit des paramètres (pas prévus dans le modèle carte_gis), soit en lui passant carrément une liste de points pré-calculés.

    Cet article m’a mis sur la bonne voie, mais pour charger automatiquement la liste de point au démarrage et pas au clic, il faut se baser sur l’évènement « ready », exemple :

    $('#map1').on('ready',function(){
      map1.parseGeoJson({"type": "FeatureCollection",        "features": [<INCLURE{fond=json/gis_mon_json}{liste=#GET{mon_tableau}|json_encode}>]});
    });

    Et par sécurité, pour être sûr de bien s’adresser à #map1 et map1, il vaut mieux passer l’identifiant de la carte en dur dans l’appel au modèle :

    [(#MODELE{
      carte_gis, id_carte_gis=1,
      ...
    })]

    Par contre, les clusters réagissent un peu différemment dans le cas où on lance un parseGeoJson après chargement de la carte.

    Répondre à ce message

  • Le 4 février 2014 à 22:12, par Fil En réponse à : Utilisation avancée de GIS 4

    Je suggère de renommer cet article (très intéressant) « Tutoriel : créer une carte interactive avec GIS4 ». Merci !

    Répondre à ce message

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

  • GIS 4

    11 août 2012 – 1286 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 (...)

  • Médiathèque

    20 novembre 2008 – 292 commentaires

    Un plugin pour gérer tous vos documents de façon centralisée.

  • Metas +

    3 décembre – commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Import ICS 2 (agenda distant)

    2 août – 35 commentaires

    La version 2 du plugin « import ICS » en reprend la principale fonctionnalité, à savoir l’ajout automatique d’évènements distants dans la liste des évènements d’un site. À la différence de la première version, elle ne dépend pas du plugin « Séminaire » et est (...)

  • Newsletters

    16 janvier 2013 – 374 commentaires

    Ce plugin permet de composer des Info-lettres. Par info-lettre, on désigne ici le contenu éditorial qui va être composé et envoyé par courriel à une liste d’inscrits. Le plugin permet de composer une info-lettre à partir d’un modèle pré-composé, (...)

Ça spipe par là