I'm working on a project to make a map using folium and flask and I'm trying to add my own javascript to add some animation to the tile to appear one by one. The question is how can I add my custom javascript to the map using python flask

as I have tried this way in this code below:

from branca.element import Element
m = folium.Map()
map_id = m.get_name()

my_js = """
const items = document.querySelectorAll('.leaflet-interactive')
 items.forEach((one) => {
one.style.visibility = 'hidden'
 })
if (items.length > 0) {
if (items.length !== 0) {
  let i = 0
const m = setInterval(function () {
  if (i < items.length) {
    items[i].style.visibility = 'visible'
    i++
  }
  console.log('now i =' + i + ' || the  number of circle = ' + items.length)
  if (i === items.length) {
    clearInterval(m)
    console.log('now cleared')
  }
  }, 1000)
  }
  }
  """.format(map_id)
  e = Element(my_js)
  html = m.get_root()
  html.script.get_root().render()
  # Insert new element or custom JS
  html.script._children[e.get_name()] = e

m.save('mymap.html')

also have tried other way like this:

base_map.get_root().html.add_child(folium.JavascriptLink('static/custom.js'))

it injects to the template's body but it still doesn't work

I'm working on a project to make a map using folium and flask and I'm trying to add my own javascript to add some animation to the tile to appear one by one. The question is how can I add my custom javascript to the map using python flask

as I have tried this way in this code below:

from branca.element import Element
m = folium.Map()
map_id = m.get_name()

my_js = """
const items = document.querySelectorAll('.leaflet-interactive')
 items.forEach((one) => {
one.style.visibility = 'hidden'
 })
if (items.length > 0) {
if (items.length !== 0) {
  let i = 0
const m = setInterval(function () {
  if (i < items.length) {
    items[i].style.visibility = 'visible'
    i++
  }
  console.log('now i =' + i + ' || the  number of circle = ' + items.length)
  if (i === items.length) {
    clearInterval(m)
    console.log('now cleared')
  }
  }, 1000)
  }
  }
  """.format(map_id)
  e = Element(my_js)
  html = m.get_root()
  html.script.get_root().render()
  # Insert new element or custom JS
  html.script._children[e.get_name()] = e

m.save('mymap.html')

also have tried other way like this:

base_map.get_root().html.add_child(folium.JavascriptLink('static/custom.js'))

it injects to the template's body but it still doesn't work

• javascript
• python
• dictionary
• flask
• folium

2 Answers 2

I already found out how to include JavaScript and CSS external link also inline js:

Firstly, way we can add CSS link to the header of the page

m.get_root().header.add_child(CssLink('./static/style.css'))

Then, this is the code to insert JavaScript External link to folium

m.get_root().html.add_child(JavascriptLink('./static/js.js'))

Finally, to add to the Folium script that been generated before

my_js = '''
console.log('working perfectly')
'''
m.get_root().script.add_child(Element(my_js))

resources that helped me to understand how to do this is reading throw branca elements and checking Folium repo

1. Folium repo
2. Branca Element

It's better to use:

for CSS

  map.get_root().header.add_child(folium.CssLink('css/style.css'))

for JS

  map.get_root().html.add_child(folium.JavascriptLink('js/folium.js'))

by using just

        m.get_root().html.add_child(JavascriptLink('./static/js.js'))

you might get an error: NameError: name 'JavascriptLink' is not defined