Developers of Open Source Software, Open Hardware, Open Knowledge in Asia
Embed Leaflet map as coordinates picker
As a warm up task for my GSoC project, I want to embed a map to the FOSSASIA API generator form as a convenient way for users to provide their location coordinates. When the user clicks on a location on the map, two input fields Latitudeand Longitude will be automatically updated with fresh values. Here’s how.
For this task you need jquery and leaflet – an openstreetmap library. You also want to prepare an empty div for the embed map :
Now, let’s instanciate the div using the leaflet API. A tile layer must be provided, in this example I’m using mapbox but there are other tile providers as well :
When the user clicks on the map, I want to point a marker to their choice and display a popup with choosen coordinates. That’s what updateMarker function is good for :
The last missing piece is, on map click event, updating the lat and lng inputs :
Now if you need the other way around – enter manually the input fields to update the marker, it could be easily done as well, by capturing a useful event associated with HTML input tag – the… input event :
That’s about it ! Check out this tutorial on Gist and JSFiddle.