Create the map <div> section and add the JavaScript that will enable map interactivity. If the map is clicked on, the JavaScript function showMapClick (which accepts an event e as a parameter) will move the marker. Within the function, jQuery is used to set the value of the latitude and longitude form elements, getting the values from the event argument's e.latlng method:
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
var themap = L.map('map').setView([ {{form.latitude.data}},{{form.longitude.data}}], 13);
L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
subdomains: 'abcd',
minZoom: 1,
maxZoom: 18,
ext: 'png'
}).addTo(themap);
marker = L.marker([ {{form.latitude.data}},{{form.longitude.data}}]).addTo(themap)
.bindPopup("Click to locate the new arena").openPopup();
var popup = L.popup();
function showMapClick(e) {
$('#longitude').val(e.latlng.lng);
$('#latitude').val(e.latlng.lat);
marker
.setLatLng(e.latlng)
.bindPopup("You added a new arena at " + e.latlng.toString())
.openPopup();
}
themap.on('click', showMapClick);
</script>