Using Leaflet with GeoDjango for Geospatial Data Enabled Applications

There are many use cases that require working with geospatial data in your Django app. Displaying information based on an object’s geolocation is a popular use case for a lot of projects and products. When it comes to choosing the technology to power the collection, display, and interaction of geospatial data, there are many options with their inherent benefits and drawbacks. In this blog post I will present my choices of technology due to their open-source nature, ease of use, and large user base.

Using geospatial data to display maps, polygons and shapes is straightforward if you are familiar with the steps to set up your Django application with the tools that make it possible to use geospatial data.


1. Use the GeoDjango module as part of the backend of your geo-spatial data enabled app. The GeoDjango module has spatial database extenders for relational databases such as PostGRES, MySQL, and SQLite to allow location queries to be run in SQL.

  • Please refer to the Django documentation to install the GeoDjango GIS module since it is an involved process that this blog post cannot cover in depth.
  • Using GeoDjango allows your Django models to have out of the box validations for the fields that capture geospatial data.
  • Once you have GeoDjango module installed within your Django app, you should use the geometry field for the model fields that will hold geospatial data.
  • Your geospatial data fields will inherit python methods that will make formatting between different geo data formats a swift process. (this is very helpful when you need to call third party services that use a different geo data format

2. Use leaflet.js for the front end mapping due to its intuitive and flexible API mobile-friendly interactive maps.

  • It is mobile-friendly.
  • It has a well-documented API and basic tutorials to get you started implementing some of its features.
  • Leaflet.js provides you with enough features to get started quickly, but offers powerful plugins from the open-source mapping community.

3. Choose your map tiles

  • You can choose different looks for your leaflet map using a service such as Mapbox that offers customization of your map to fit your brand or you can choose a vanilla looking map from Open Street Map or MapQuest.
  • Leaflet.js allows you the ability to let your user choose from multiple map tiles.

4. Use Django ModelForm to capture the geospatial data.

  • Geospatial data validation will be handled by the GeoDjango module in the backend when the ModelForm’s is_valid() method is called.
  • The Javascript code for your leaflet map will parse the data from the ModelForm and render the data on the leaflet map.

5. Instantiate your leaflet.js map instance, map tile instance.

  • Refer to the leaflet.js documentation and tutorials to help you get started in rendering the map in the browser if you are not familar with using this tool.

6. Persist data on your map to your Django backend by writing some Javascript.

  • Leaflet.js layer objects (point, line, rectangle, polygon, multi-polygon) have a toGeoJSON() method that turns the geo data into a JSON representation of that data
  • Append JSON string into the ModelForm field input element thats holds the geospatial data
  • When a user submits the ModelForm, the GeoDjango backend will validate the data and persist that data to the database if it passed the validations

Although this not an in depth tutorial on how to create geo-spatial enabled applications, it offers an overview of the major parts of the application and how they work together to make using maps with geo-spatial data possible.