Мне было интересно, можно ли сделать вывод фолиума (ИЛИ извлечь только соответствующие данные тега div и тега script) только необходимые элементы, необходимые для отображения карты внутри div в пользовательском html.
Возможно, folium или сценарий python для отображения может просто записать необходимый html в файл. И этот файл может быть включен Jinja в более крупный проект.
У меня просто есть коды для карты и пользовательский html, куда я хотел бы вставить вывод фолиума. Я не смог найти ничего об ограничении или программном изменении html, сгенерированного фолиумом.
Mapping -> генерирует map. html
import webbrowser
import folium
m = folium.Map(location=[23.7041, 79.1025], tiles='CartoDB Positron', zoom_start=4)
lon = 23.7041
lat = 79.1025
folium.Circle(50*2000,location=[lat, lon],color='crimson',fill=True).add_to(m)
m.save('mapindex.html')
webbrowser.open('map.html')
Код Jinja makemap.py -
import webbrowser
from jinja2 import Environment, FileSystemLoader
template_loader = FileSystemLoader(searchpath='./')
template_env = Environment(loader=template_loader)
TEMPLATE = "template.html"
template = template_env.get_template(TEMPLATE)
output_html = template.render()
with open("output.html", "w+") as f:
f.write(output_html)
webbrowser.open('output.html')
Шаблоны Jinja
template.html -
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<style>
* {
border: 2px solid red;
}
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item{
width: 100%;
height: 400px;
max-width: 50em;
}
</style>
</head>
<body>
<div class="container">
{% include 'map.html' %}
{% include 'article.html' %}
</div>
</body>
</html>
map.html -
<div id="map" class="item" style="height: 400px;">
<script>
var map = L.map('map').setView([23.7041, 79.1025], 4).invalidateSize(false);
var CartoDB_PositronNoLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19
});
CartoDB_PositronNoLabels.addTo(map);
</script>
<script>
var circle_marker = L.circleMarker(
[15.75458548900002, 79.95790645500007],
{ "bubblingMouseEvents": true, "color": "crimson", "dashArray": null, "dashOffset": null, "fill": true, "fillColor": "crimson", "fillOpacity": 0.2, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "opacity": 0.8, "radius": 5, "stroke": true, "weight": 1.5 }
).addTo(map);
</script>
</div>
article.html -
<div class="item">
This is a an article that accompanies the map on the left.
What a beautiful article about the map.
</div>
Если вы запустите файл кода Jinja makemap.py, то увидите, что он работает с жестко закодированным map.html.
Мне бы хотелось, чтобы я мог вывести такой файл map.html, который можно напрямую включить в шаблон jinja.
EDIT1
В идеале Я бы не хотел использовать iframe или подобные решения.