CODEWITHSUNDEEP
pythondjangomapsfolium
adhg
adhg

Reputation: 10853

Django and Folium integration

Django newbie here: my aim is to integrate Folium to an html page. so what I have at the moment:

polls/views.py

def show_map(request):  
    #creation of map comes here + business logic
    m = folium.Map([51.5, -0.25], zoom_start=10)
    test = folium.Html('<b>Hello world</b>', script=True)
    popup = folium.Popup(test, max_width=2650)
    folium.RegularPolygonMarker(location=[51.5, -0.25], popup=popup).add_to(m)

    context = {'my_map': m}

    return render(request, 'polls/show_folium_map.html', context)

polls/urls.py

urlpatterns = [   
       path('show_my_map', views.show_map, name='show_map'),

]

and show_folium_map.html

 <h1>map result comes here</h1>
 {{ my_map }}

problem is that I get the 'to_string' value of the map (I promise you I saw that coming). So how can I integrate the map in such way that I can actually see the map and also define the size?

enter image description here

Upvotes: 12

Views: 9020

Answers (3)

Jai
Jai

Reputation: 849

You can try the below way. I also had faced the same issue and it worked great for me.

views.py

def show_map(request):  
    #creation of map comes here + business logic
    m = folium.Map([51.5, -0.25], zoom_start=10)
    test = folium.Html('<b>Hello world</b>', script=True)
    popup = folium.Popup(test, max_width=2650)
    folium.RegularPolygonMarker(location=[51.5, -0.25], popup=popup).add_to(m)
    m=m._repr_html_() #updated
    context = {'my_map': m}

    return render(request, 'polls/show_folium_map.html', context)

show_folium_map.html

{{ my_map|safe }}

Upvotes: 8

Henhuy
Henhuy

Reputation: 1154

In order to really include folium into custom django template you have to render your figure first before adding it to context (This will recursivly load all parts of the map into the figure). Afterwards in your template, you have to access header, html and script parts of figure seperatly by calling their render function. Additionally, those parts have to marked as "safe" by django template tag in order to allow html insertion. See example below.

Example:

views.py:

import folium

from django.views.generic import TemplateView


class FoliumView(TemplateView):
    template_name = "folium_app/map.html"

    def get_context_data(self, **kwargs):
        figure = folium.Figure()
        m = folium.Map(
            location=[45.372, -121.6972],
            zoom_start=12,
            tiles='Stamen Terrain'
        )
        m.add_to(figure)

        folium.Marker(
            location=[45.3288, -121.6625],
            popup='Mt. Hood Meadows',
            icon=folium.Icon(icon='cloud')
        ).add_to(m)

        folium.Marker(
            location=[45.3311, -121.7113],
            popup='Timberline Lodge',
            icon=folium.Icon(color='green')
        ).add_to(m)

        folium.Marker(
            location=[45.3300, -121.6823],
            popup='Some Other Location',
            icon=folium.Icon(color='red', icon='info-sign')
        ).add_to(m)
        figure.render()
        return {"map": figure}

templates/folium_app/map.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {{map.header.render|safe}}
</head>
<body>
  <div><h1>Here comes my folium map:</h1></div>
  {{map.html.render|safe}}
  <script>
    {{map.script.render|safe}}
  </script>
</body>
</html>

Upvotes: 11

Conengmo
Conengmo

Reputation: 793

You can get the html as a string by triggering the rendering on the (internal) parent of Map:

m = folium.Map()
html: str = m.get_root().render()

Note that this returns a full html page, so you may need to put it in an iframe.

Alternatively, you can render the head, body and script parts separately. That way you can put each part on your page where it belongs and you don't need an iframe:

m = folium.Map()
html_head: str = m.get_root().header.render()
html_body: str = m.get_root().html.render()
html_script: str = m.get_root().script.render()

Upvotes: 3

Related Questions