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