Save leaflet draw layer

[webhoes]

Hello, I am trying to save the leaflet draw layer to a database field. I scrambled some code together but can't see the post value in tracydebugger.

Can anybody give me a hand with this code?

In the end after the json is submitted to the database after a page refresh the layer needs to be loaded in the leaflet map. That part is not made yet.

 

<?php

 

namespace ProcessWire;

 

if ($input->post->update) {

$page->json_map = $input->post->map2;

}

?>

 

<pw-region id="chartjs">

 

<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>

<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />

<style>

body {

margin: 0;

padding: 0;

}

 

#map {

height: 400px;

width: 100%;

}

</style>

 

</pw-region>

 

<pw-region id="content">

<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.4.10/leaflet.draw.css' rel='stylesheet' />

<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.4.10/leaflet.draw.js'></script>

 

<div id='map'></div>

 

<script>

L.mapbox.accessToken = 'pk.eyJ1IjoiZHJvbmVtYXRpY2EiLCJhIjoiY2tjYXlsMTN0MW54aTJybGpvMmJoMDlhcSJ9.DfvRd_GsoPu8ARWKFVM5EA';

var map = L.mapbox.map('map')

.setView([52.3583, 6.66236], 17)

.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

 

var featureGroup = L.featureGroup().addTo(map);

 

var drawControl = new L.Control.Draw({

edit: {

featureGroup: featureGroup

}

}).addTo(map);

 

map.on('draw:created', function(e) {

 

// Each time a feaute is created, it's added to the over arching feature group

featureGroup.addLayer(e.layer);

});

 

 

 

document.getElementById('export').onclick = function(e) {

// Extract GeoJson from featureGroup

var data = featureGroup.toGeoJSON();

 

// Stringify the GeoJson

var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));

 

// Create export

document.getElementById("map2").value = convertedData;

 

// document.getElementById('export').setAttribute('href', 'data:' + convertedData);

// document.getElementById('export').setAttribute('download','data.geojson');

}

</script>

<a href='#' id='export'>Export Features</a>

<form id="form" action="./" method="post">

<input form=form type="hidden" name="map2" value="">

<button type="submit" class="btn btn-primary" id="update" value="update">Update</button>

</form>

</pw-region>

[androbey]

Hi @webhoes,

it can be that I am overlooking something, but as far as I can see you don't have a "name" attribute called "update" in your button element. So your if statement never evaluates to true. 
 

[webhoes]

@androbey the if statements gets triggered by the value of the button. I added the name value with update and this returns update with value update.

But still the value of map2 stays empty. This is where I would like to have the json string.

There is a link with name export. That should trigger the layers to convert to a json and bind it to map2. Did not know a way to do it better due to lack of js knowledge. I only know PHP...

[androbey]

Ok you try to bind the value to an element with id "map2", but you don't have an element with that id.

Your input element probably needs that id: 

 

<input type="hidden" name="map2" id="map2">