Utilisateurs autorisés, Bureaucrates, Ingénieurs ISIG, Administrateurs d’interface, Utilisateurs autorisés automatiquement, Administrateurs
360
modifications
« Questionnaire carto avec Limesurvey » : différence entre les versions
Aller à la navigation
Aller à la recherche
→Version 1 - éditeur vectoriel classique
| (2 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 7 : | Ligne 7 : | ||
== Version 1 - éditeur vectoriel classique == | == Version 1 - éditeur vectoriel classique == | ||
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. | 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| | [[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 16 : | 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 | <!-- Leaflet GeoSearch --> | ||
<link href="https://unpkg.com/leaflet- | <link href="https://unpkg.com/leaflet-geosearch@3.6.1/dist/geosearch.css" rel="stylesheet" /> | ||
<script src="https://unpkg.com/leaflet- | <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 32 : | Ligne 32 : | ||
<!-- Question --> | <!-- Question --> | ||
Carte : | Carte : | ||
<div id="map"> | <div id="map"> </div> | ||
<!-- JS de la carte --> | <!-- JS de la carte --> | ||
| Ligne 42 : | 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 | ||
const search = new GeoSearch.GeoSearchControl({ | |||
provider: new GeoSearch.OpenStreetMapProvider(), | |||
}); | |||
map.addControl(search); | |||
})); | |||
// Ajout de la couche WMS géoportail | // Ajout de la couche WMS géoportail | ||
| Ligne 100 : | 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 113 : | Ligne 113 : | ||
== Version 2 - éditeur de type "pinceau à polygones" == | == Version 2 - éditeur de type "pinceau à polygones" == | ||
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. <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 | <!-- Leaflet GeoSearch --> | ||
<link href="https://unpkg.com/leaflet- | <link href="https://unpkg.com/leaflet-geosearch@3.6.1/dist/geosearch.css" rel="stylesheet" /> | ||
<script src="https://unpkg.com/leaflet- | <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 152 : | 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 | ||
const search = new GeoSearch.GeoSearchControl({ | |||
provider: new GeoSearch.OpenStreetMapProvider(), | |||
}); | |||
map.addControl(search); | |||
})); | |||
// Ajout de la couche WMS géoportail | // Ajout de la couche WMS géoportail | ||
| Ligne 181 : | Ligne 177 : | ||
}, | }, | ||
// Définition de la position de la barre d'outils sur la carte | // Définition de la position de la barre d'outils sur la carte | ||
position: "topleft" | 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 | |||
} | |||
}); | }); | ||