Embed leaflet data collection or geojson.io map to form

Question

I'm trying to figure out the most lightweight way to collect data for individual mapped polygons from non-technical users. Here's the end vision: users fill out a web form, draw a shape, and then they can easily email their formatted data to me or my colleagues (I know-- the email idea is probably horrifying readers, but I'm working within a lot of restrictive parameters beyond my control. Email is a known quantity.).

Is there a way to strip down something like geojson.io or even just a leaflet map with leaflet.draw and then pass resulting coordinates into text that can be emailed?

Again, my needs are basic. One shape would be mapped at a time. The fewer visual options and controls the better. My audience is largely very non-technical.

It looks like this user was trying to ask the same question, but didn't get far.

Thanks!

score 2 · Answer 1 · answered Sep 13 '16 at 13:40

A quick proof of concept, adapting code from Leaflet.draw example:

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();
});

This converts the drawn item into GeoJSON string, and displays it in a popup bound to the item.

Demo: https://jsfiddle.net/3v7hd2vx/75/

Thanks! This is a helpful start. I'm still working on ways to get the geojson out in a way that's not going to overwhelm users with seeing code. But this is a wonderful starting point. — jolene, Sep 13 '16 at 14:00

score 1 · Accepted Answer · edited May 23 '17 at 10:33

1

As explained here, you cannot send your geojson data directly but you can let the browser open a mail client with preset data.

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

Here is a full example

edited May 23 '17 at 10:33

Community

1
1

answered Sep 13 '16 at 15:29

YaFred

9,698
3
28
40

This is brilliant. Exactly what I was looking for. I think I can eventually build this out into something really functional. Thanks for helping me fill in the gaps. – jolene Sep 13 '16 at 15:50

Embed leaflet data collection or geojson.io map to form

2 Answers2