How to fit an folium map into a div

by

I want to load a map created with folium into a site that is served by flask.
A Javascript function fetches the map from Flask and inserts it into a div. My Problem is that the map is way larger than the div. How can i make the map fit inside the div?

I already tried the height and width parameter of folium.Map but the behaviour doesn’t change.

The <div>-Element
The div

The map inserted into the <div> with width 80%.
I have set the background-color to gray to show that the size of the map.
The map inserted into the div

Here is an example showing the problem.

app.py

import folium
from flask import Flask, render_template

app = Flask(__name__)


@app.route("https://stackoverflow.com/")
def index():
    return render_template('index.html')


@app.route('/map')
def map():
    folium_map = folium.Map(location=[39.750855, -101.533079], width="80%")
    return folium_map.get_root()._repr_html_()

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background-color: rgb(128,128,128);">
    <div id="smallDiv" style="height: 40vh; width: 100%; background: aqua;"></div>
    <script>
        setTimeout(() => {
            fetch('/map')
            .then(repsonse => repsonse.text())
            .then(data => {
                document.getElementById('smallDiv').innerHTML = data;
            })
        }, 3000);

    </script>
</body>
</html>

requirements.txt

blinker==1.7.0
branca==0.7.0
certifi==2023.11.17
charset-normalizer==3.3.2
click==8.1.7
colorama==0.4.6
Flask==3.0.0
folium==0.15.0
idna==3.4
itsdangerous==2.1.2
Jinja2==3.1.2
MarkupSafe==2.1.3
numpy==1.26.2
requests==2.31.0
urllib3==2.1.0
Werkzeug==3.0.1

Add the CSS Shorthand property

overflow: hidden

To the ‘smallDiv’ element.

<div id="smallDiv" style="height: 40vh; width: 100%; background: aqua; overflow: hidden;"></div>

Leave a Comment