Join us and get access to hundreds of tutorials and a community of expert Pythonistas.

Unlock This Lesson

This lesson is for members only. Join us and get access to hundreds of tutorials and a community of expert Pythonistas.

Unlock This Lesson

Hint: You can adjust the default video playback speed in your account settings.
Sorry! Looks like there’s an issue with video playback 🙁 This might be due to a temporary outage or because of a configuration issue with your browser. Please see our video player troubleshooting guide to resolve the issue.

Bonus Video: Intro to Leaflet

Give Feedback

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.

Comments & Discussion

Erik James Mason on May 8, 2019

Thanks for the tutorial! It definitely piqued my interest!

bultita on May 10, 2019

Thanks! It is to the point and most of the explanations are great. However, * I expected more based on the topic and did not get all what I expected personally, I would love to have more interactive map with additional functionalities not just static map at the end of the course.

  • the course can be improved by:
  • Explaining the concepts in detail, as it was not detail enough particularly when it comes to the views
  • Add more on the mapping aspect, I think most people will take this course if you focus and strengthen the GIS part. There are lots of course on Django and what is missing is the link with GIS which you did elegantly but lacks depth.

Thanks and happy to come back and check when you have more courses on this.

Jackie Wilson RP Team on May 10, 2019

Thanks for your feedback and suggestions. While it was a conscious decision to keep the course short (which abbreviated the GIS and Leaflet parts), maybe this is an opportunity for a multi-part series?

bultita on May 10, 2019

Thanks for your response. I agree, to keep course shorter and to the point it right. Please add new courses as series.

bultita on May 10, 2019

Thanks for your response. I agree, to keep course shorter and to the point it great. Please add new courses as series.

Erik James Mason on May 11, 2019

I second the multi-series. I work with GIS systems and would love to have an alternative resource for making interactive maps for public-facing data.

Jackie Wilson RP Team on May 13, 2019

If we expanded the series, what platforms would you like covered? Do you think open source, like a QGIS, OpenStreetMap, Google Maps / Leaflet? Or Mapbox? Esri? The RP courses tend to be shorter and to the point, so it might be individual articles and videos arranged as a collection.

Kevin M on May 14, 2019

This tutorial was awesome . I’m developing a platform for an IoT project about remote monitoring. It would be great incorporating google maps or Mapbox, as well as how to display alerts or something when a parameter is being sent from a remote device. I’ll wait for any resource.

Thank you!!!

Jackie Wilson RP Team on May 15, 2019

Kevin M, thanks for the feedback! Your project sounds really interesting. Do you plan to use Postgres for the data?

Kevin M on May 15, 2019

I’m evaluating different options. The main idea is to develop my own platform as well as my own servers. I’m actually considering to connect the devices (raspberry, etc) to a Postgres database. So, all connected devices must be displayed in the platform (a map where all locations are shown). However, when a button is pressed the raspberry (or any other microcontroller) should send a parameter (1 or 0) and the map must show an alert with all info of the place where that alert is being sent.

The easiest way is to simply use an IoT cloud and configure a simple map in a Dashboard for that cloud. But I’m actually trying is to set up everything from scratch. So, I’m trying to connect a device to Postgres and store the parameter and load that data in the platform. Yes, all devices will be around the city and must be monitor form a central place.

Any resources you could share would be wonderful.

(I’m good at doing Data Science and sensors/devices programming with Python. But trying to get better at building web platforms for Internet of Thing Projects)

Erik James Mason on May 16, 2019

I predominately work with ESRI and the ArcGIS appsuite, so I would be curious to see some of the geoprocessing functions from a different set of eyes. Or how to make webapps with my already defined maps from ArcGIS Online. Now that would be a fantastic tutorial (for me…)

Hizakakkun on June 4, 2019

Similar to bultita, I could have used a little more detail. Overall this course was good and I learned a lot. Thank you!

bultita on June 13, 2019

I think it is better to keep using the open source software you have used plus add mapbox if possible. Django - plotly dash integration would also be a great addition as there is no such course out there but it can help to link django with dash - dashboard and it has a GIS capabilities.

Abby Jones on Aug. 4, 2019

This is so awesome!!!!!!!!!!!!!!!!!!

eclaudio on Feb. 11, 2020

Thank you so much for this tutorial. I attempted to deploy this project as part of my portfolio project. My issue is connecting the project to a hosted Database. I could not find an excellent place to host the DB with considerations to PostGIS. I would love a recommendation as to where to host the data so that I could get this up and running, and again thank you.

Jackie Wilson RP Team on Feb. 13, 2020

Hi @eclaudio, this is not to endorse any product over another, but I have not had any issues hosting PostGreSQL/PostGIS on AWS. I don’t think it makes a difference where, as long as when you go to install the PostGIS extensions using the PostGres admin tool, just point to the remote resource address (vs a local db resource name). You mention “portfolio”, so if you are a student, AWS offers a free tier with some added features for education customers. Even without those education extras, the free tier should allow you to install the PostGIS extensions without incurring any costs. There might be a trial time or usage, but it should be fine to try out your code in the short term. Hope that helps.

dthomas01 on March 18, 2020

Hello Jackie, Wow…I’m really impressed. Being fairly new with Python, Django, Postgres and total newbie in GIS, this really helped to understand how the pieces fit together a lot better. I was impressed that the final map was indeed interactive. I clicked/held mouse down in the middle and panned the map left and right. Zooming in did give lots more detail. Certainly appreciate the detail on using Django and how you loaded the data. You really packed a lot of information into a single course!

I’m now wondering if there is a way to show mouse hover text over the marker points that give more detail on the locations found. That way, the address doesn’t take up valuable screen space especially for smaller form factor browser devices. Perhaps for a Part 2, you could show that “Geo coding” concept where a user keys in their own city/state -or- zipcode and using a centerpoint maybe…find nearest locations....using Python 3.7?

Appreciate ya! Dave

Philip Waku on March 26, 2020

Hello Jackie, Thank you so much for putting this tutorial together; i enjoyed every bit of it and learned some new stuff.. I’m always new to the POSTGIS feature on postgres and you made it look so easy and fun to follow and implement. With the current situation here in Italy, I’m thinking of making a location web-based Covid-19 application that tells us in real time how many free spaces there are in the different departments of all Italian Covid-19 hospitals and within the same same project an app where it is possible to load the availability of housing to accommodate healthcare personnel who must move quickly from a certain region to a certain hospital to help people who are sick. I would appreciate if you could kindly up the series with more details on the already used tools. Thank you once again. Philip

Mydhe on April 4, 2020

Great Tutorial Jackie. Another series would be even better to have more interactive maps and features than a static map at the end exhausting GIS applicability with Django/PostgreSQl

Thank you.

Stazy on April 5, 2020

I am playing around with the code and trying to set markers for each shop and include a popup with the shop’s name. This is the code I’m working with and it’s not working:

    {% for shop in shops %}
    var mark = L.marker([{{ shop.location.y }}, {{ shop.location.x  }}], {
    }).addTo(map)
    .bindPopup(shop.name);
    {% endfor %}

Any suggestions?

Ricky White RP Team on April 6, 2020

Is that Javascript you are using in between the python template tags? If so you should have it in a script tag in your html file.

@Stazy You need to put shop.name inside handlebars {{ ... }}, like you’ve done with shop.location.y so it is treated as a django template variable. And inside quotes "" to make it a string.

{% for shop in shops %}
var mark = L.marker([{{ shop.location.y }}, {{ shop.location.x  }}], {
}).addTo(map)
.bindPopup("{{ shop.name }}");
{% endfor %}

kplrm on May 3, 2020

it would be awesome to expand this series with OpenStreetMap and Leaflet. Optional Mapbox, since there is a good free tier. I would love to see how a user could interact (with the map in the sense): * user can click on the map to store its position (i.e. for getting a delivery) * user can select a shop when clicking on a marker * shops can have a “delivery coverage” and users only select shops that delivers to his current location * delivery person gets route to follow (walking or by car)

Become a Member to join the conversation.