Prevent css and js to be included into HTML when saving map with folium

[MM-cyi]

Hi there.

Had a quick look on this forum and I don;t think I encountered the solution I am looking for.

I do my map with folium, works all right.
I save it to HMTL, so to embed it into my webpage, but some javascript/css libraries are messing up everything.

The culprit are the first, say, 15 lines of the HTML:
`
---THis is where I would like start cutting (not printing to html)

<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/> ----- this should be last line to be excluded

from here on, it can stay....

Instead of removing it programmatically (map is generated on a daily basis), I wonder if I can persuade python/folium NOT to print said lines.

Thanks.

Marco

[jtmiclat]

@MM-cyi I dont think folium would remove these lines as they are highly necessary to make the map work. But there are ways to configure them in a pythonic way

The JS/CSS are the default JS/CSS for folium map. This config can be found here:

folium/folium/folium.py

Lines 28 to 64 in 46bfa0b

	_default_js = [
	("leaflet", "https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"),
	("jquery", "https://code.jquery.com/jquery-1.12.4.min.js"),
	(
	"bootstrap",
	"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js",
	),
	(
	"awesome_markers",
	"https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js",
	), # noqa
	]
	_default_css = [
	("leaflet_css", "https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"),
	(
	"bootstrap_css",
	"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css",
	),
	# glyphicons came from Bootstrap 3 and are used for Awesome Markers
	(
	"glyphicons_css",
	"https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css",
	),
	(
	"awesome_markers_font_css",
	"https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css",
	), # noqa
	(
	"awesome_markers_css",
	"https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css",
	), # noqa
	(
	"awesome_rotate_css",
	"https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css",
	), # noqa
	]

You can actually remove them by creating a custom class extending folium.Map and just setting them to an empty list

import folium
class CustomNoCssJsMap(folium.Map):
    default_js = []
    default_css = []
no_default = CustomNoCssJsMap()
no_default.save("no_default.html")

This still leaves the following in the html

    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>

so it still might break.

If you really want to remove these lines, you would have to overwrite the render method of folium.Map to stop the injecting of these lines

folium/folium/folium.py

Lines 367 to 404 in 46bfa0b

	def render(self, **kwargs) -> None:
	"""Renders the HTML representation of the element."""
	figure = self.get_root()
	assert isinstance(
	figure, Figure
	), "You cannot render this Element if it is not in a Figure."
	# Set global switches
	figure.header.add_child(self.global_switches, name="global_switches")
	figure.header.add_child(
	Element(
	"<style>html, body {"
	"width: 100%;"
	"height: 100%;"
	"margin: 0;"
	"padding: 0;"
	"}"
	"</style>"
	),
	name="css_style",
	)
	figure.header.add_child(
	Element(
	"<style>#map {"
	"position:absolute;"
	"top:0;"
	"bottom:0;"
	"right:0;"
	"left:0;"
	"}"
	"</style>"
	),
	name="map_style",
	)
	super().render(**kwargs)

The final code for removing all these lines would be

import folium
from branca.element import Element,  Figure

from folium.elements import JSCSSMixin
class CusotmCssJsMap(folium.Map):
    default_js = []
    default_css = []
    def render(self, **kwargs) -> None:
        """Renders the HTML representation of the element."""
        figure = self.get_root()
        assert isinstance(
            figure, Figure
        ), "You cannot render this Element if it is not in a Figure."

        # Set global switches
        figure.header.add_child(self.global_switches, name="global_switches")

        super(JSCSSMixin, self).render(**kwargs)

no_default = CusotmCssJsMap()
no_default.save("no_default.html")

The final html would look something like

<!DOCTYPE html>
<html>
<head>
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
        <script>
            L_NO_TOUCH = false;
            L_DISABLE_3D = false;
        </script>
    
    
            <meta name="viewport" content="width=device-width,
                initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <style>
                #map_2694482c62a38c2bb025488800ff1bb1 {
                    position: relative;
                    width: 100.0%;
                    height: 100.0%;
                    left: 0.0%;
                    top: 0.0%;
                }
                .leaflet-container { font-size: 1rem; }
            </style>
        
</head>

[MM-cyi]

@jtmiclat hi there and thank you for your kind and indeed very useful answer. That got me started.

Some of the css and js scripts, even if removed, do not compromise the actual functioning of the generated html map. If at all present, and when imbedded into other webpage (jinja2: {%include mapFoilum.html%}) cause nasty interference with per-existing css styles, messing everything up.

Once again, thanks for the great tip
cheers

[Conengmo]

Thanks for helping out here @jtmiclat!

@MM-cyi I hope you are able to add your own CSS and in that way "overwrite" any CSS that's causing you issues. If not, please provide details what actual CSS is bothering your use case. Until then I'll close this issue, since the question seems answered.