Jump to content

Save leaflet draw layer


Recommended Posts

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.


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' />
body {
margin: 0;
padding: 0;
#map {
height: 400px;
width: 100%;

<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>
L.mapbox.accessToken = 'pk.eyJ1IjoiZHJvbmVtYXRpY2EiLCJhIjoiY2tjYXlsMTN0MW54aTJybGpvMmJoMDlhcSJ9.DfvRd_GsoPu8ARWKFVM5EA';
var map = L.mapbox.map('map')
.setView([52.3583, 6.66236], 17)
var featureGroup = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: featureGroup
map.on('draw:created', function(e) {
// Each time a feaute is created, it's added to the over arching feature group
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');
<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>
Link to comment
Share on other sites

@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...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...