0

I would like to extend the functionality of my folium map

I found a nice thread here:

Python: How to extend Folium functionality (such as measuring distance) by using JS Leaflet inside python code?

but it doesn't work when apply to my code

 export_js = [
     (
        "leaflet_bigimage_js",
        "js/Leaflet.BigImage.js",
     )
  ]

 export_css = [
    (
        "leaflet_bigimage_css",
        "css/Leaflet.BigImage.css",
    )
 ]

 exp = folium.MacroElement()
 exp.template = jinja2.Template("""
 {% macro script(this, kwargs) %}
 L.control.bigImage({position: 'topright'}).addTo{map}
 {% endmacro %}
 """)
 map.get_root().add_child(exp)

the map works, but the element doesn't appear at all. Moreover, JS console sees nothing.

Is there any way how could I sort it out?

UPDATE:

I tried also:

 class exp(MacroElement):
exp_template = Template(u"""
{% macro script(this, kwargs) %}
L.control.bigImage({position: 'topright'}).addTo({{ 
 this._parent.get_name() }})
{% endmacro %}
""")
 map.add_child(exp())

but with the same result

Geographos
  • 827
  • 2
  • 23
  • 57

1 Answers1

0

If you have the css and js files on the computer, you can use the branca library, that gets installed with folium to include the js and css elements.

import folium
from branca.element import CssLink, JavascriptLink
from pathlib import Path

js_file = Path("/path/to/script.js")
js_link = JavascriptLink(js_file.as_uri())

css_file = Path("/path/to/style.css")
css_link = CssLink(css_file.as_uri())

map = folium.Map()
html = map.get_root()
header = html.header

#Add links
header.add_child(css_link)
header.add_child(js_link)
PeaceLeka
  • 1,138
  • 1
  • 9
  • 11
  • Unfortunately it cannot be done this way: line 761, in as_uri raise ValueError("relative path can't be expressed as a file URI") ValueError: relative path can't be expressed as a file URI – Geographos Nov 29 '22 at 11:34
  • What OS are you using and can you give an example how are you declaring `js_file` variable. – PeaceLeka Nov 29 '22 at 17:51