Django Folium: How to Display Saved Locations on a Map

In web applications, it’s often useful to display saved locations on a map. Django, a high-level Python web framework, combined with Folium, a powerful Python library for creating leaflet maps, provides an elegant solution for this task. In this tutorial, we’ll walk through the process of displaying saved locations on a map using Django-Folium. Additionally, we’ll create the map within the view code itself.

an example of a Django Folium map


  • Python and Django installed on your system.
  • Basic knowledge of Django and Python.
  • Familiarity with HTML, CSS, and JavaScript.

Getting Started

  • Setting Up the Django Project

First, let’s create a new Django project and set up a Django app within it.

django-admin startproject map_project
cd map_project
python3 startapp map_app

Next, we need to install Folium.

pip install folium
  • Creating the Model

In our Django app (map_app), let’s create a model to represent the locations we want to display on the map. Open map_app/ and define the model as follows.

from django.db import models

class Location(models.Model):
    name = models.CharField(max_length=100)
    latitude = models.FloatField()
    longitude = models.FloatField()

    def __str__(self):

Don’t forget to run migrations after creating the model.

python3 makemigrations
python3 migrate
  • Creating the View

Now, let’s create a view to display the map with saved locations. Open map_app/ and define the view.

from django.shortcuts import render
import folium
from .models import Location

def map_view(request):
    # Get all saved locations from the database
    locations = Location.objects.all()

    # Create a Folium map centered at a certain location
    map = folium.Map(location=[locations[0].latitude, locations[0].longitude], zoom_start=10)

    # Add markers for each location
    for location in locations:
        folium.Marker([location.latitude, location.longitude],

    # Render the map within the view code
    map = map._repr_html_()

    return render(request, 'map.html', {'map': map})
  • Creating the Template

Now, let’s create a template (map.html) to render the map. Create a new file map.html inside the map_app/templates directory.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="" />
    <script src=""></script>
        #map {
            width: 100%;
            height: 600px;
    <div id="map">{{ map|safe }}</div>
  • Configuring URLs

Lastly, let’s configure the URL routing. Open map_project/ and define the URL pattern for our view.

from django.contrib import admin
from django.urls import path
from map_app.views import map_view

urlpatterns = [
    path('', map_view, name='map_view'),

Now, you can run the Django development server.

python3 runserver

Visit in your browser, and you should see the map with the saved locations displayed as markers.

That’s it! You’ve successfully displayed saved locations on a map using Django Folium, with the map created within the view code itself.

Leave a Reply

Your email address will not be published. Required fields are marked *