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/ 

Subscribe: https://www.youtube.com/@bugbytes3923/featured 

#python  #django   #gis  #mapping  #datascience 

How to Integrate Leaflet.js Maps in a Django Application
1 Likes1.75 GEEK