Intégrez la collection de données de dépliant ou la carte geojson.io pour former

Question

J'essaie de trouver la façon la plus légère de collecter des données pour des polygones mappés individuels à partir d'utilisateurs non techniques. Voici la vision finale: les utilisateurs remplissent un formulaire Web, dessinent une forme, puis ils peuvent facilement envoyer leurs données formatées à mes collègues ou à moi-même (je sais que l'idée d'e-mail est probablement horrifiante, mais je travaille dans un beaucoup de paramètres restrictifs au-delà de mon contrôle Email est une quantité connue.).

Existe-t-il un moyen de supprimer quelque chose comme geojson.io ou même simplement une carte de dépliant avec leaflet.draw, puis de transmettre les coordonnées résultantes dans un texte pouvant être envoyé par courrier électronique?

Encore une fois, mes besoins sont basiques. Une forme serait cartographiée à la fois. Le moins d'options visuelles et contrôles le mieux. Mon public est en grande partie très non technique.

Il ressemble à this user was trying to ask the same question, mais n'est pas allé loin.

Merci!

Answer 1

Comme expliqué here, vous ne pouvez pas envoyer vos données GeoJSON directement, mais vous pouvez laisser le navigateur ouvrir un client de messagerie avec des données prédéfinies.

var text=JSON.stringify(drawnItems.toGeoJSON()); 
    window.open('mailto:test@example.com?subject=subject&body=' + text); 

Voici une complète example

Answer 2

Une preuve rapide du concept, l'adaptation du code de Leaflet.draw exemple:

var drawControl = new L.Control.Draw({ 
    edit: { 
    featureGroup: drawnItems 
    } 
}); 
map.addControl(drawControl); 

map.on('draw:created', function(e) { 
    var layer = e.layer, 
     popupContent = layer.toGeoJSON ? 
     JSON.stringify(layer.toGeoJSON()) : "(no data)"; 

    drawnItems.addLayer(layer); 

    layer.bindPopup(popupContent).openPopup(); 
}); 

Il convertit l'élément en chaîne tirée GeoJSON, et l'affiche dans une fenêtre contextuelle liée à l'élément.

Démo: https://jsfiddle.net/3v7hd2vx/75/