Bonus Video: Intro to Leaflet
Welcome to the 11th and final video of this series where, if you made it this far, you’ve succeeded in Making a Location-Based Web Application with Django and GeoDjango. Congratulations!
This video is a bonus video to show you how to incorporate maps into your site for a better user experience.
To accomplish this task you’ll learn about Leaflet, a popular, lightweight open source library that makes it easy to build interactive maps.
Congratulations, you made it to the end of the course! What’s your #1 takeaway or favorite thing you learned? How are you going to put your newfound skills to use? Leave a comment in the discussion section and let us know.
00:11 This video is a bonus video to show you how to incorporate maps into your site for a better user experience. To accomplish this task, you’ll learn about Leaflet, a popular, lightweight open-source library that makes it easy to build interactive maps.
To add Leaflet to your
nearbyshops page, you’ll need to add five pieces of code to your
index.html template. To your
<head> section, you’ll add three things: a CSS link to
leaflet.css, a script link to
leaflet.js, and then a short piece of CSS to set a map height for a map ID. In the
<body> section, you’ll add two things: an empty
<div> with the ID you used in your CSS above, and then at the bottom of your
<body> section between
The best way to get the code snippets for the
<head> section is to visit the Quick Start Guide and copy them, so let’s go there now. First, we will copy the CSS link, followed by the script link.
Now, paste in the code snippets that you copied in their respective positions. The first two blocks of code can be pasted as is with no changes. However, you’ll need to create
<style> tags before pasting in the CSS for the map height.
03:02 Mapbox is a great product, and I highly recommend you check it out and sign up. But if you use this code, you’ll need to have an API key. In the interest of time, we’re going to create our map with OpenStreetMap tiles instead.
Luckily, there’s a code snippet for this ready to go on the homepage of Leaflet. We’ll just have to change a few things to get it to work. Back in the editor, I have
index.html ready to edit, and I also have
views.py on standby because I’ll need to borrow the lat/long coordinates we assigned earlier. At the end of the
<body> section in the area we’ve specified, create
Let’s paste this code below our other map code in
index.html. A Leaflet
circle is a marker that will be added to our map, and we want to do this for each location that was returned from our query.
We already used template syntax to iterate through this
Here’s the code we pasted to create the markers. The first thing we should do is fix this so the variable name passed to the
.addTo() method matches our map variable name, which is
map. Next, we’ll add the template code to cycle through our shops.
This is on the same page as our list view, so the for loop we use for that will work just the same here, even using the same
shops variable. With this loop, however, as the iterating
shop holds our current record, we need to somehow access the lat/long coordinates from the dataset in order to replace these values. And if you recall, when we modeled our field names, we only had four:
city. What do we do?
This is where GeoDjango and PostGIS come to our rescue. In our schema,
location is a
PointField, and therefore the coordinates are accessible as a child value. Back in our code, replace the first coordinate, latitude, with
shop.location.y. Replace the second, longitude, with
07:15 Now that you’ve completed this video series, you may want to explore more features in Leaflet. You may also want to use a geocoding API to translate human-readable addresses into map coordinates. I sincerely thank you for watching this video series.
Become a Member to join the conversation.