Issue
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 map inserted into the <div> with width 80%.
I have set the background-color to gray to show that the size of the map.
Here is an example showing the problem.
app.py
import folium
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
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
Solution
Add the CSS Shorthand property
overflow: hidden
To the 'smallDiv' element.
<div id="smallDiv" style="height: 40vh; width: 100%; background: aqua; overflow: hidden;"></div>
Answered By - KRSpinelli
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.