Wiki ISIG

« Questionnaire carto avec Limesurvey » : différence entre les versions

Page Discussion

Questionnaire carto avec Limesurvey (voir la source)

Version du 6 juin 2023 à 15:29

1 240 octets ajoutés ,  6 juin 2023
→‎Version 1 - éditeur vectoriel classique
Aucun résumé des modifications
 
(8 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
À la demande d'une doctorante, j'ai rédigé ce petit bout de code en Javascript permettant d'intégrer une question de type ''Tracez un polygone sur la carte'' dans un questionnaire Limesurvey.  
À la demande d'une doctorante, j'ai rédigé ce petit bout de code en Javascript permettant d'intégrer une question de type ''Tracez un polygone sur la carte'' dans un questionnaire Limesurvey.  


Ce code est à insérer dans l'énoncé d'une question de type texte long. La réponse sera générée automatiquement par Leaflet : il s'agira d'un geojson contenant le polygone tracé par l'utilisateur.


 
Pour masquer le champ de réponse, il faut ajouter la classe <code>question-carto</code> aux styles css de la question dans les options de LimeSurvey.
Ce code est à insérer dans l'énoncé d'une question de type texte long. La réponse sera générée automatiquement par Leaflet : il s'agira d'un geojson contenant le polygone tracé par l'utilisateur.


== Version 1 - éditeur vectoriel classique ==
== Version 1 - éditeur vectoriel classique ==
<syntaxhighlight lang="html">
Cet éditeur classique utilise la librairie Leaflet-Draw la plus couramment utilisée. Les polygones doivent être tracés point par point, comme dans un SIG.
[[Fichier:Tracer Polygone LimeSurvey.webm|760x760px]]<syntaxhighlight lang="html">
<!-- Leaflet -->
<!-- Leaflet -->
<link href="https://unpkg.com/leaflet@1.9.1/dist/leaflet.css" rel="stylesheet" />
<link href="https://unpkg.com/leaflet@1.9.1/dist/leaflet.css" rel="stylesheet" />
Ligne 15 : Ligne 16 :
<script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
<script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>


<!-- Leaflet Search -->
<!-- Leaflet GeoSearch -->
<link href="https://unpkg.com/leaflet-search@3.0.3/dist/leaflet-search.src.css" rel="stylesheet" />
<link href="https://unpkg.com/leaflet-geosearch@3.6.1/dist/geosearch.css" rel="stylesheet" />
<script src="https://unpkg.com/leaflet-search@3.0.3/dist/leaflet-search.src.js"></script>
<script src="https://unpkg.com/leaflet-geosearch@3.6.1/dist/geosearch.umd.js"></script>


<!-- CSS pour la taille de la carte et pour cacher le formulaire de réponse -->
<!-- CSS pour la taille de la carte et pour cacher le formulaire de réponse -->
Ligne 24 : Ligne 25 :
         height: 500px;
         height: 500px;
     }
     }
     .answer-container {
     .question-carto > div.answer-container {
         display:none;
         display:none;
     }
     }
Ligne 31 : Ligne 32 :
<!-- Question -->
<!-- Question -->
Carte :
Carte :
<div id="map"> </div>
<div id="map"> </div>


<!-- JS de la carte -->
<!-- JS de la carte -->
Ligne 41 : Ligne 42 :
         minZoom: 5,
         minZoom: 5,
         maxZoom: 18,
         maxZoom: 18,
     }).setView([45.763, 4.732], 13);
     }).setView([45.763, 4.732], 13); // Définir ici l'emplacement par défaut de la carte et son niveau de zoom


     // Ajout de la fonction de recherche
     // Ajout de la fonction de recherche
     map.addControl(new L.Control.Search({
     const search = new GeoSearch.GeoSearchControl({
         url: 'https://nominatim.openstreetmap.org/search?format=json&q={ s }',
         provider: new GeoSearch.OpenStreetMapProvider(),
        jsonpParam: 'json_callback',
     });
        propertyName: 'display_name',
    map.addControl(search);
        propertyLoc: ['lat', 'lon'],
        marker: L.circleMarker([0, 0], { radius: 1 }),
        autoCollapse: true,
        autoType: false,
        minLength: 2
     }));


     // Ajout de la couche WMS géoportail
     // Ajout de la couche WMS géoportail
Ligne 99 : Ligne 94 :
     // Evenements à déclencher lors de la suppression d'une entité
     // Evenements à déclencher lors de la suppression d'une entité
     map.on(L.Draw.Event.DELETED, function (event) {
     map.on(L.Draw.Event.DELETED, function (event) {
         var JSONoutput = JSON.stringify(drawnItems.toGeoJSON());
 
         if (drawnItems.toGeoJSON().features.length == 0) {
            var JSONoutput = "";
        } else {
            var JSONoutput = JSON.stringify(drawnItems.toGeoJSON());
        }
 
         $('#answer{SGQ}').val(JSONoutput);
         $('#answer{SGQ}').val(JSONoutput);
     });
     });
Ligne 112 : Ligne 113 :


== Version 2 - éditeur de type "pinceau à polygones" ==
== Version 2 - éditeur de type "pinceau à polygones" ==
<syntaxhighlight lang="html">
Cet éditeur utilise le plugin [https://github.com/tcoupin/leaflet-paintpolygon Leaflet-PaintPolygon créé par Thibault Coupin]. Les polygones sont tracés avec un pinceau circulaire dont la taille est réglable. C'est moins conventionnel, mais peut se révéler plus ergonomique pour les enquêtés qui ne sont pas habitués aux SIG.
 
[[Fichier:Peindre Polygone LimeSurvey.webm|760x760px]] <syntaxhighlight lang="html">
<!-- Leaflet -->
<!-- Leaflet -->
<link href="https://unpkg.com/leaflet@1.9.1/dist/leaflet.css" rel="stylesheet" />
<link href="https://unpkg.com/leaflet@1.9.1/dist/leaflet.css" rel="stylesheet" />
<script src="https://unpkg.com/leaflet@1.9.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet@1.9.1/dist/leaflet.js"></script>


<!-- Leaflet Search -->
<!-- Leaflet GeoSearch -->
<link href="https://unpkg.com/leaflet-search@3.0.3/dist/leaflet-search.src.css" rel="stylesheet" />
<link href="https://unpkg.com/leaflet-geosearch@3.6.1/dist/geosearch.css" rel="stylesheet" />
<script src="https://unpkg.com/leaflet-search@3.0.3/dist/leaflet-search.src.js"></script>
<script src="https://unpkg.com/leaflet-geosearch@3.6.1/dist/geosearch.umd.js"></script>


<!-- Leaflet Paint-Polygon by Thibault Coupin -->
<!-- Leaflet Paint-Polygon by Thibault Coupin -->
Ligne 129 : Ligne 132 :
         height: 500px;
         height: 500px;
     }
     }
     .answer-container {
     .question-carto > div.answer-container {
         display:none;
         display:none;
    }
    /* Ci-dessous un fix pour le contrôle de la taille du pinceau qui s'affiche mal sur certaines versions de Limesurvey */
    .leaflet-control-paintpolygon-menu-open {
        width: 150px;
     }
     }
</style>
</style>
Ligne 146 : Ligne 154 :
         minZoom: 5,
         minZoom: 5,
         maxZoom: 18,
         maxZoom: 18,
     }).setView([45.763, 4.732], 13);
     }).setView([45.763, 4.732], 13); // Définir ici l'emplacement par défaut de la carte et son niveau de zoom


     // Ajout de la fonction de recherche
     // Ajout de la fonction de recherche
     map.addControl(new L.Control.Search({
     const search = new GeoSearch.GeoSearchControl({
         url: 'https://nominatim.openstreetmap.org/search?format=json&q={ s }',
         provider: new GeoSearch.OpenStreetMapProvider(),
        jsonpParam: 'json_callback',
     });
        propertyName: 'display_name',
    map.addControl(search);
        propertyLoc: ['lat', 'lon'],
        marker: L.circleMarker([0, 0], { radius: 1 }),
        autoCollapse: true,
        autoType: false,
        minLength: 2
     }));


     // Ajout de la couche WMS géoportail
     // Ajout de la couche WMS géoportail
Ligne 165 : Ligne 167 :
         attribution: 'IGN-F'
         attribution: 'IGN-F'
     }).addTo(map);
     }).addTo(map);
    // Définir une FeatureCollection pour les polygones tracés
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);
    // Définir le style de la couche
    var myStyle = {
        "color": "#ff7800",
        "weight": 5,
        "opacity": 0.65
    };
    drawnItems.setStyle(myStyle);


     // Ajout du pinceau à polygones
     // Ajout du pinceau à polygones
     var paintControl = L.control.paintPolygon({position: 'topleft'});
     var paintControl = L.control.paintPolygon({
        // Définition du style des polygones tracés
        layerOptions: {
            "color": "#ff7800",
            "weight": 5,
            "opacity": 0.65
        },
        // Définition de la position de la barre d'outils sur la carte
        position: "topleft",
        minRadius: 10, // Taille minimale du pinceau (en pixels)
        maxRadius: 50, // Taille maximale du pinceau (en pixels)
        menu: {
            size: true // Afficher (true) ou non (false) le réglage de la taille du pinceau
        }
    });
      
      
     paintControl.addTo(map);
     paintControl.addTo(map);
Ligne 194 : Ligne 198 :


== Script R pour extraire les entités vectorielles des résultats LimeSurvey ==
== Script R pour extraire les entités vectorielles des résultats LimeSurvey ==
<syntaxhighlight lang="r">
Le script suivant permet d'extraire toutes les réponses vectorielles d'une question dans un geopackage, en prenant soin de créer un champ "id_limesurvey" dans celui-ci pour pouvoir faire des jointures attributaires a posteriori. <syntaxhighlight lang="r">
library(dplyr)
library(dplyr)
library(sf)
library(sf)
Récupérée de « https://isig-wiki.ens-lyon.fr/wiki/Spécial:MobileDiff/578...623 »