leaflet and django and inserting html into templates

292 views
Skip to first unread message

Jeff Abrahamson

unread,
Oct 9, 2021, 9:43:26 AM10/9/21
to leafl...@googlegroups.com

I'm using leaflet with django.  My issue is that I'm (unintentionally) generating a full html doc instead of just the fragment that renders my map, so when I insert the html into a page with other stuff including site branding, it displays but the html is borked (e.g., two <!DOCTYPE html> strings, mine and leaflet's).

To be fair, this is leaflet + folium + branca, so maybe I'm barking up the wrong tree here, in which case my apologies and many thanks in advance for suggestions where I should address this instead.

I've made an as minimal as possible django app that renders an index page and a map page to demonstrate what I mean.

https://github.com/transport-nantes/map-mre

-- 
Jeff Abrahamson
+33 6 24 40 01 57
+44 7920 594 255
https://www.p27.eu/jeff/
https://www.mobilitains.fr/

Jeff Abrahamson

unread,
Oct 9, 2021, 9:45:02 AM10/9/21
to Leaflet
I should have added that the relevant view function is here:

Jeff Abrahamson

unread,
Oct 9, 2021, 2:05:29 PM10/9/21
to Leaflet
I have managed to fix the html at the document level.  Here's an update of the code (branch=correct-html-but-bootstrap-conflict):


I'm now seeing a conflict with bootstrap versions.

I see that this was addressed in 2015 in issue #192 and fixed in version 0.2.0.  (I'm running 0.12.1.)


The suggestion to use folium.element.JavascriptLink appears now to be folium.elements.JavascriptLink (with an "s" on "element").  Sadly, this isn't resulting in the bootstrap lines that I generate having the new value.  I've tried a couple variations:

figure._children['bootstrap'] = folium.elements.JavascriptLink('https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js')

in elements.py it appears I should instead say

root = figure.get_root()
root.header.add_child(JavascriptLink('https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js'), name="bootstrap")

but this also fails to have an effect in the generated html.

I also see in folium.py that somehow one (perhaps) ought to be able to modify _default_js and _default_css for customisation, but, again, I don't see how that is to work in practice.

Fwiw,  I'm also testing these in the django shell, calling, say, figure.header.render(), to make sure it's not some django interaction that I've failed to take into account.

Jeff Abrahamson

unread,
Oct 16, 2021, 3:24:41 PM10/16/21
to Leaflet
I'm grasping at straws a bit on this issue, but since I've still been unable to find documentation on this and since this list isn't able to help (no worries, that happens), I can at least document what I'm trying so that this issue has more documentation in this informal sense of list traffic.

It looks like the intent is that JSCSSMixin (from folium/elements.py) is the intended way to override js and css used by folium.  I've not seen how to make this go, however.

For example, in folium/features.py I see the class RegularPolygonMarker(JSCSSMixin, Marker) says

    default_js = [
        ('dvf_js',
         'https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.0/leaflet-dvf.markers.min.js'),
    ]
But deriving a django veiw from JSCSSMixin and declaring a modeule default_js doesn't make sense (and doesn't work, if by "work" we mean "cause the requested js link to change).

There's some hint (but no, just a mirage) that the class Map(JSCSSMixin, MacroElement) constructor at folium/folium.py would permit specifying default_js.  It looks like one should instead derive a new Map class, which is kind of a heavy way just to customise a couple class variables.  This also doesn't work out.

from folium.folium import Map

class ModernMap(Map):

    default_js = [
        ('bootstrap',
         'https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js'),
        ]

    default_css = [
        ('bootstrap_css',
         'https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css'),
        ('bootstrap_theme_css',
         'https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap-theme.min.css'),  # noqa
        ]

I'll go away again.

Jeff Abrahamson

unread,
Oct 19, 2021, 5:10:48 AM10/19/21
to Leaflet
I'm increasingly convinced this is purely a folium issue.  I'll close this thread then, barring a smoking gun pointing me back to leaflet.

Just to complete the cycle of documentation, I've filed this issue with folium describing the problem and suggesting that it's perhaps just a documentation issue to sort out.

Reply all
Reply to author
Forward
0 new messages