Django and LeafletJS - Interactive Maps, Map Events, and Finding Closest Points with GeoPy

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

▶️ Full Playlist:
   • Geospatial Python  

☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
https://ko-fi.com/bugbytes

𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: https://www.bugbytes.io/posts/
👾 Github: https://github.com/bugbytes-io/django...
🐦 Twitter:   / bugbytesio  

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
Starter Code: https://github.com/bugbytes-io/django...
LeafletJS Download: https://leafletjs.com/download.html
LeafletJS Quick Start: https://leafletjs.com/examples/quick-...
json_script video:    • Passing Backend Data to JavaScript - ...  
“How to Safely Pass Data to JavaScript in a Django Template” [Adam Johnson] https://adamj.eu/tech/2022/10/06/how-...

#python #django #gis #mapping #datascience