Questionnaire carto avec 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.

<!-- CSS Leaflet -->
<link href="https://unpkg.com/leaflet@1.9.1/dist/leaflet.css" rel="stylesheet" />

<!-- JS Leaflet -->
<script src="https://unpkg.com/leaflet@1.9.1/dist/leaflet.js"></script>

<!-- CSS Leaflet Draw -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css" rel="stylesheet" />

<!-- JS Leaflet Draw -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"></script>

<!-- CSS Leaflet Search -->
<link href="https://unpkg.com/leaflet-search@3.0.3/dist/leaflet-search.src.css" rel="stylesheet" />

<!-- JS Leaflet Search -->
<script src="https://unpkg.com/leaflet-search@3.0.3/dist/leaflet-search.src.js"></script>

<!-- CSS pour la taille de la carte et pour cacher le formulaire de réponse -->
<style type="text/css">
    #map {
        height: 500px;
    }
    .answer-container {
        display:none;
    }
</style>

<!-- Question -->
Carte :
<div id="map"> </div>

<!-- JS de la carte -->
<script type="text/javascript" charset="utf-8">

    // Paramètres de la carte de base
    var map = L.map('map', {
        crs: L.CRS.EPSG3857,
        minZoom: 5,
        maxZoom: 18,
    }).setView([45.763, 4.732], 13);

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

    // Ajout de la couche WMS géoportail
    var wmsGeoportail = L.tileLayer.wms('https://wxs.ign.fr/cartes/geoportail/r/wms?SERVICE=WMS&VERSION=1.3.0&CRS=EPSG:3857', {
        layers: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2',
        attribution: 'IGN-F'
    }).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);

    // Paramètres de la barre d'outils d'édition
    var drawControl = new L.Control.Draw({
        draw: {
            circle: false,
            rectangle: false,
            polyline: false,
            marker: false
        },
        edit: {
            featureGroup: drawnItems
        }
    });
    map.addControl(drawControl);

    // Evenements à déclencher lors de la création d'une entité
    map.on(L.Draw.Event.CREATED, function (event) {
        var layer = event.layer;

        drawnItems.addLayer(layer);

        var JSONoutput = JSON.stringify(drawnItems.toGeoJSON());
        $('#answer{SGQ}').val(JSONoutput);
    });

    // Evenements à déclencher lors de la suppression d'une entité
    map.on(L.Draw.Event.DELETED, function (event) {
        var JSONoutput = JSON.stringify(drawnItems.toGeoJSON());
        $('#answer{SGQ}').val(JSONoutput);
    });

    // Evenements à déclencher lors de l'édition d'une entité
    map.on(L.Draw.Event.EDITED, function (event) {
        var JSONoutput = JSON.stringify(drawnItems.toGeoJSON());
        $('#answer{SGQ}').val(JSONoutput);
    });
</script>