Add custom html and JS to output html page

[achourasia]

Is there a way to add custom HTML and JS to the output page? Something like following would be nice, for example

my_before = '<script> abc ... </script>'  
my_after = '<p> Arctic Ocean</p>'
create_map('abc.html', plugin_data=True, before=my_before, after=my_after)

[ocefpaf]

Hi @achourasia,

Sorry for the delay to answer. One way of doing this is with custom templates like this:

m.create_map(path='map.html', plugin_data_out=True, template='my_template.html')

To create your own template use the default template as a starting point.

[achourasia]

thanks

[ocefpaf]

@achourasia let me know if that works for you.

PS: You had my_after = '<p> Arctic Ocean</p>' in your example and, as an oceanographer, you got me curious about what you are building. If it is something you can share let me know. We might use your application as an example on how to use custom templates 😬

[achourasia]

I am toying with seismic data, but don't have all pieces working yet, will send you a note when have something usable. I will dig into template stuff once a core issue is resolved. BTW, if you have an example to pass user input back and forth using Flask that would be nice. My current setup is bit crummy where the map and geojson needs to load every time rather than just changing colors based on some selection.

[ocefpaf]

That sounds like an interesting application. I do not have experience with Flask, but I am trying to learn to do something similar. I'll ping you if I get a working example.

[birdage]

@achourasia got lots of experience with flask, tell me what the plan is and im sure i can whip up an example

[achourasia]

@birdage Great, I created a new issue for this #88
Feel free to edit and modify the scenarios

[ocefpaf]

@birdage Wait... my partner in crime is a flask expert and I did not know! We need to talk more 😜

[bdoohan]

Using:

m.create_map(path='map.html', plugin_data_out=True, template='my_template.html')
Gives this error:
AttributeError: 'Map' object has no attribute 'create_map'
The solutions in #227 do not work.
Looking to use custom template in creating map.

[claudiodsf]

Hi, it looks like m.create_map() does not exist anymore.

Is there another way of using a custom template?

[DenisFLASH]

Hi, it looks like m.create_map() does not exist anymore.

Is there another way of using a custom template?

up

[FabeG]

Maybe would it be interesting to add a add_custom_js method to Map, that could allow to write direcly some parts directly in JavaScript in case the functionnality is not available in folium yet ?

For example, something in the class Map like:

def add_custom_js(self, custom_js):
    macro = MacroElement()
    macro._template = (Template("""{% macro script(this, kwargs) %}"""
                                + custom_js
                                + """{% endmacro %}"""))
    self.get_root().add_child(macro)

It would then be possible to plug some callbacks in folium, for example:

import folium

m = folium.Map()

customjs = """
{{kwargs['map']}}.on('click', function(e) {
    alert(e.latlng);
});"""

m.add_custom_js(customjs)
m.save('customjs.html', map=m.get_name())

Please let me know if this approach seems interesting (and deserves a PR) or if there are other simpler ways to do that.

[Conengmo]

Hi @FabeG,

The example you show already seems quite simple to me :) I don't know if this functionality warrants its own method/class. Then again, it may be easier if users don't have to figure out how to use the macro script part.

The way folium is currently set up doesn't really work with class methods, but with combining classes in a tree.

How about having a simple Javascript class that implements your example? I'm thinking we could put it in features.py.