In this video, we learn how to integrate Leaflet.js maps in a Django application. We will learn:
1. How to plot markers from database data that's been dumped to JSON with Django's json_script template-filter.
2. How to dynamically add markers to a map on the map's click event
3. How to send coordinates to our Django server via AJAX requests and find the closest point to the give coordinates, using GeoPy and the geodesic function
4. How to draw a line between user location and the nearest station with Leaflet's PolyLine
5. How to display a popup on the Leaflet map
๐ ๐๐ต๐ฎ๐ฝ๐๐ฒ๐ฟ๐:
00:00 Intro
00:44 Including leaflet.js in a Django application
05:05 Fetching location data from the database
06:37 Dumping database data to JSON with Djangoโs json_script template-filter
07:27 Parsing JSON data into JavaScript objects with JSON.parse() function
08:12 Plotting Markers on a Leaflet map
09:30 Performing actions on Leaflet map click event
11:01 Dynamically adding marker on map click event
12:26 Sending AJAX request to Django when map is clicked
14:07 Handing AJAX request on our Django server
15:42 Finding nearest EV station to the user location using GeoPy
19:28 Processing JSON response with JavaScript
20:32 Drawing line between user location and nearest station with Leaflet PolyLine
23:00 Adding Leaflet Popup showing distance to nearest station
๐ ๐๐๐ฟ๐๐ต๐ฒ๐ฟ ๐ฟ๐ฒ๐ฎ๐ฑ๐ถ๐ป๐ด ๐ฎ๐ป๐ฑ ๐ถ๐ป๐ณ๐ผ๐ฟ๐บ๐ฎ๐๐ถ๐ผ๐ป:
Starter Code: https://github.com/bugbytes-io/django-folium-example
LeafletJS Download: https://leafletjs.com/download.html
LeafletJS Quick Start: https://leafletjs.com/examples/quick-start/
json_script video: https://www.youtube.com/watch?v=h39eMGWmEV4
โHow to Safely Pass Data to JavaScript in a Django Templateโ [Adam Johnson] https://adamj.eu/tech/2022/10/06/how-to-safely-pass-data-to-javascript-in-a-django-template/
