DEV Community

Cover image for Custom Leaflet GUI

Custom Leaflet GUI

Stevie G on May 17, 2019

Prerequites: Font Awesome Bootstrap 4 jQuery LeafletJS Leaflet Draw Leaflet Sidebar v2 Firstly start a basic HTML5 Template page. <html la...
Collapse
 
bjornor profile image
BjornOR • Edited

I have been working for over a month to save the marker data to a JSON file so that users can save locally and have their data appear on a live map.

When the marker is created I can stringify the data but I can't for the life of me figure out how to append the data to a file.

Collapse
 
itsmestevieg profile image
Stevie G

Are you trying to save the file client side (JavaScript)? or are you trying to append changes to a server side (PHP etc) JSON File?

Collapse
 
bjornor profile image
BjornOR

On the server side

Thread Thread
 
itsmestevieg profile image
Stevie G

I Might look at doing a tutorial on this soon.

Thread Thread
 
bjornor profile image
BjornOR

That would be super awesome. Thanks

Thread Thread
 
itsmestevieg profile image
Stevie G

I have a new tutorial which is the start of how to capture GeoJSON or WKT (SQL Spatial Format) if you want to check it out.

Collapse
 
phil24jones profile image
phil24jones • Edited

This is brilliant, thanks for the tutorial.

Just wondering, do you know of any way to integrate the leaflet-search plugin with the sidebar? I'd like a search icon in the sidebar to open the leaflet-search function, but I'm fairly new to Javascript and can't work it out!

Image attached to show what I mean!

thepracticaldev.s3.amazonaws.com/i...

Collapse
 
itsmestevieg profile image
Stevie G

I done up an example, Hope this helps :) codepen.io/ItsMeStevieG/pen/RwJdwjm