Jump to content

Save leaflet draw layer


webhoes
 Share

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.

 

<?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>
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
 Share

  • Recently Browsing   0 members

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