Python with Folium: How can I embed a webpage in the popup?
I'm working on a simple implementation of Python Folium with simple markers based on this page.
import folium
map_1 = folium.Map(location=[45.372, -121.6972], zoom_start=12,
tiles='Stamen Terrain')
map_1.simple_marker([45.3288, -121.6625], popup='Mt. Hood Meadows')
map_1.simple_marker([45.3311, -121.7113], popup='Timberline Lodge')
map_1.create_map(path='mthood.html')
I can include HTML in the popup, but I'd like to embed a webpage. Here is my mock-up.
Is it possible?
Answer
Here a quick example of how I proceed :
def get_frame(url,width,height):
html = """
<!doctype html>
<html>
<iframe id="myIFrame" width="{}" height="{}" src={}""".format(width,height,url) + """ frameborder="0"></iframe>
<script type="text/javascript">
var resizeIFrame = function(event) {
var loc = document.location;
if (event.origin != loc.protocol + '//' + loc.host) return;
var myIFrame = document.getElementById('myIFrame');
if (myIFrame) {
myIFrame.style.height = event.data.h + "px";
myIFrame.style.width = event.data.w + "px";
}
};
if (window.addEventListener) {
window.addEventListener("message", resizeIFrame, false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", resizeIFrame);
}
</script>
</html>"""
popup = get_frame(url,
width,
height)
marker = folium.CircleMarker([lat,lon],
radius=radius,
color='#3186cc',
fill_color = '#3186cc',
popup=popup)
marker.add_to(map)
iframe = folium.element.IFrame(html=html,width=width,height=height)
popup = folium.Popup(iframe,max_width=width)
return popup
I took the script from this link, and you can check running the code snippet
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://rawgithub.com/lvoogdt/Leaflet.awesome-markers/2.0/develop/dist/leaflet.awesome-markers.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/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.1.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://rawgit.com/lvoogdt/Leaflet.awesome-markers/2.0/develop/dist/leaflet.awesome-markers.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
<link rel="stylesheet" href="https://raw.githubusercontent.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css" />
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map {
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
}
</style>
<style> #map_b2063da716d14361b72b0f9a50315884 {
position : relative;
width : 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
</style>
</head>
<body>
<div class="folium-map" id="map_b2063da716d14361b72b0f9a50315884" ></div>
</body>
<script>
var southWest = L.latLng(-90, -180);
var northEast = L.latLng(90, 180);
var bounds = L.latLngBounds(southWest, northEast);
var map_b2063da716d14361b72b0f9a50315884 = L.map('map_b2063da716d14361b72b0f9a50315884', {
center:[37.38583,-5.99306],
zoom: 12,
maxBounds: bounds,
layers: [],
crs: L.CRS.EPSG3857
});
var tile_layer_b2761496c65d46bf86a90b028be4d5f1 = L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 18,
minZoom: 1,
attribution: 'Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
detectRetina: false
}
).addTo(map_b2063da716d14361b72b0f9a50315884);
var circle_marker_16be3d0af1084adbbb743bb146162d55 = L.circle(
[37.38376,-5.9914],
20,
{
color: '#3186cc',
fillColor: '#3186cc',
fillOpacity: 0.6
}
)
.addTo(map_b2063da716d14361b72b0f9a50315884);
var popup_0146596d5713425b90dd89b1beb77099 = L.popup({maxWidth: '800'});
var i_frame_8bf40a55fcf94c2aae94317c7c942f95 = $('<iframe src="data:text/html;base64,CiAgICAgICAgCiAgICAgICAgICAgICAKICAgICAgICAgICAgPCFkb2N0eXBlIGh0bWw+CiAgICAgICAgPGh0bWw+CiAgICAgICAgPGlmcmFtZSBpZD0ibXlJRnJhbWUiIHdpZHRoPSI4MDAiIGhlaWdodD0iNTAwIiBzcmM9aHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvU2V2aWxsZV9DYXRoZWRyYWwgZnJhbWVib3JkZXI9IjAiPjwvaWZyYW1lPgogICAgICAgIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KICAgICAgICB2YXIgcmVzaXplSUZyYW1lID0gZnVuY3Rpb24oZXZlbnQpIHsKICAgICAgICAgICAgdmFyIGxvYyA9IGRvY3VtZW50LmxvY2F0aW9uOwogICAgICAgICAgICBpZiAoZXZlbnQub3JpZ2luICE9IGxvYy5wcm90b2NvbCArICcvLycgKyBsb2MuaG9zdCkgcmV0dXJuOwogICAgICAgICAgICAKICAgICAgICAgICAgdmFyIG15SUZyYW1lID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ215SUZyYW1lJyk7CiAgICAgICAgICAgIGlmIChteUlGcmFtZSkgewogICAgICAgICAgICAgICAgbXlJRnJhbWUuc3R5bGUuaGVpZ2h0ID0gZXZlbnQuZGF0YS5oICsgInB4IjsKICAgICAgICAgICAgICAgIG15SUZyYW1lLnN0eWxlLndpZHRoICA9IGV2ZW50LmRhdGEudyArICJweCI7CiAgICAgICAgICAgIH0KICAgICAgICB9OwogICAgICAgIGlmICh3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcikgewogICAgICAgICAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcigibWVzc2FnZSIsIHJlc2l6ZUlGcmFtZSwgZmFsc2UpOwogICAgICAgIH0gZWxzZSBpZiAod2luZG93LmF0dGFjaEV2ZW50KSB7CiAgICAgICAgICAgIHdpbmRvdy5hdHRhY2hFdmVudCgib25tZXNzYWdlIiwgcmVzaXplSUZyYW1lKTsKICAgICAgICB9CiAgICAgICAgPC9zY3JpcHQ+CiAgICAgICAgPC9odG1sPgogICAgICAgIAogICAgICAgIA==" width="800" height="500"></iframe>')[0];
popup_0146596d5713425b90dd89b1beb77099.setContent(i_frame_8bf40a55fcf94c2aae94317c7c942f95);
circle_marker_16be3d0af1084adbbb743bb146162d55.bindPopup(popup_0146596d5713425b90dd89b1beb77099);
var circle_marker_0211ff4767b34184ad4c663e0b1d729c = L.circle(
[37.383889,-5.991389],
20,
{
color: '#3186cc',
fillColor: '#3186cc',
fillOpacity: 0.6
}
)
.addTo(map_b2063da716d14361b72b0f9a50315884);
var popup_b92b5fd312c94c00984279d5b1b86f69 = L.popup({maxWidth: '800'});
var i_frame_2d42c75caa4245a59d6f07b1c9212cc8 = $('<iframe src="data:text/html;base64,CiAgICAgICAgCiAgICAgICAgICAgICAKICAgICAgICAgICAgPCFkb2N0eXBlIGh0bWw+CiAgICAgICAgPGh0bWw+CiAgICAgICAgPGlmcmFtZSBpZD0ibXlJRnJhbWUiIHdpZHRoPSI4MDAiIGhlaWdodD0iNTAwIiBzcmM9aHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvQWxjwod6YXJfb2ZfU2V2aWxsZSBmcmFtZWJvcmRlcj0iMCI+PC9pZnJhbWU+CiAgICAgICAgPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPgogICAgICAgIHZhciByZXNpemVJRnJhbWUgPSBmdW5jdGlvbihldmVudCkgewogICAgICAgICAgICB2YXIgbG9jID0gZG9jdW1lbnQubG9jYXRpb247CiAgICAgICAgICAgIGlmIChldmVudC5vcmlnaW4gIT0gbG9jLnByb3RvY29sICsgJy8vJyArIGxvYy5ob3N0KSByZXR1cm47CiAgICAgICAgICAgIAogICAgICAgICAgICB2YXIgbXlJRnJhbWUgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbXlJRnJhbWUnKTsKICAgICAgICAgICAgaWYgKG15SUZyYW1lKSB7CiAgICAgICAgICAgICAgICBteUlGcmFtZS5zdHlsZS5oZWlnaHQgPSBldmVudC5kYXRhLmggKyAicHgiOwogICAgICAgICAgICAgICAgbXlJRnJhbWUuc3R5bGUud2lkdGggID0gZXZlbnQuZGF0YS53ICsgInB4IjsKICAgICAgICAgICAgfQogICAgICAgIH07CiAgICAgICAgaWYgKHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKSB7CiAgICAgICAgICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCJtZXNzYWdlIiwgcmVzaXplSUZyYW1lLCBmYWxzZSk7CiAgICAgICAgfSBlbHNlIGlmICh3aW5kb3cuYXR0YWNoRXZlbnQpIHsKICAgICAgICAgICAgd2luZG93LmF0dGFjaEV2ZW50KCJvbm1lc3NhZ2UiLCByZXNpemVJRnJhbWUpOwogICAgICAgIH0KICAgICAgICA8L3NjcmlwdD4KICAgICAgICA8L2h0bWw+CiAgICAgICAgCiAgICAgICAg" width="800" height="500"></iframe>')[0];
popup_b92b5fd312c94c00984279d5b1b86f69.setContent(i_frame_2d42c75caa4245a59d6f07b1c9212cc8);
circle_marker_0211ff4767b34184ad4c663e0b1d729c.bindPopup(popup_b92b5fd312c94c00984279d5b1b86f69);
var circle_marker_4cc91c97e25a4456b822e55f4ecb1549 = L.circle(
[37.384,-5.992],
20,
{
color: '#3186cc',
fillColor: '#3186cc',
fillOpacity: 0.6
}
)
.addTo(map_b2063da716d14361b72b0f9a50315884);
var popup_0b953df7a418459c8e72e0f5c1b0bb87 = L.popup({maxWidth: '800'});
var i_frame_d059900a061a4549b59097ff5ee8b4d0 = $('<iframe src="data:text/html;base64,CiAgICAgICAgCiAgICAgICAgICAgICAKICAgICAgICAgICAgPCFkb2N0eXBlIGh0bWw+CiAgICAgICAgPGh0bWw+CiAgICAgICAgPGlmcmFtZSBpZD0ibXlJRnJhbWUiIHdpZHRoPSI4MDAiIGhlaWdodD0iNTAwIiBzcmM9aHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvR2VuZXJhbF9BcmNoaXZlX29mX3RoZV9JbmRpZXMgZnJhbWVib3JkZXI9IjAiPjwvaWZyYW1lPgogICAgICAgIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KICAgICAgICB2YXIgcmVzaXplSUZyYW1lID0gZnVuY3Rpb24oZXZlbnQpIHsKICAgICAgICAgICAgdmFyIGxvYyA9IGRvY3VtZW50LmxvY2F0aW9uOwogICAgICAgICAgICBpZiAoZXZlbnQub3JpZ2luICE9IGxvYy5wcm90b2NvbCArICcvLycgKyBsb2MuaG9zdCkgcmV0dXJuOwogICAgICAgICAgICAKICAgICAgICAgICAgdmFyIG15SUZyYW1lID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ215SUZyYW1lJyk7CiAgICAgICAgICAgIGlmIChteUlGcmFtZSkgewogICAgICAgICAgICAgICAgbXlJRnJhbWUuc3R5bGUuaGVpZ2h0ID0gZXZlbnQuZGF0YS5oICsgInB4IjsKICAgICAgICAgICAgICAgIG15SUZyYW1lLnN0eWxlLndpZHRoICA9IGV2ZW50LmRhdGEudyArICJweCI7CiAgICAgICAgICAgIH0KICAgICAgICB9OwogICAgICAgIGlmICh3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcikgewogICAgICAgICAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcigibWVzc2FnZSIsIHJlc2l6ZUlGcmFtZSwgZmFsc2UpOwogICAgICAgIH0gZWxzZSBpZiAod2luZG93LmF0dGFjaEV2ZW50KSB7CiAgICAgICAgICAgIHdpbmRvdy5hdHRhY2hFdmVudCgib25tZXNzYWdlIiwgcmVzaXplSUZyYW1lKTsKICAgICAgICB9CiAgICAgICAgPC9zY3JpcHQ+CiAgICAgICAgPC9odG1sPgogICAgICAgIAogICAgICAgIA==" width="800" height="500"></iframe>')[0];
popup_0b953df7a418459c8e72e0f5c1b0bb87.setContent(i_frame_d059900a061a4549b59097ff5ee8b4d0);
circle_marker_4cc91c97e25a4456b822e55f4ecb1549.bindPopup(popup_0b953df7a418459c8e72e0f5c1b0bb87);
var circle_marker_f36b000114d34c4480c0e3874b3a1aff = L.circle(
[37.3925,-5.999722],
20,
{
color: '#3186cc',
fillColor: '#3186cc',
fillOpacity: 0.6
}
)
.addTo(map_b2063da716d14361b72b0f9a50315884);
var popup_8b33998389c647748a4b7f558db9086f = L.popup({maxWidth: '800'});
var i_frame_37f9728e7129448d8421dadcc3a5a7e7 = $('<iframe src="data:text/html;base64,CiAgICAgICAgCiAgICAgICAgICAgICAKICAgICAgICAgICAgPCFkb2N0eXBlIGh0bWw+CiAgICAgICAgPGh0bWw+CiAgICAgICAgPGlmcmFtZSBpZD0ibXlJRnJhbWUiIHdpZHRoPSI4MDAiIGhlaWdodD0iNTAwIiBzcmM9aHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvTXVzZXVtX29mX0ZpbmVfQXJ0c19vZl9TZXZpbGxlIGZyYW1lYm9yZGVyPSIwIj48L2lmcmFtZT4KICAgICAgICA8c2NyaXB0IHR5cGU9InRleHQvamF2YXNjcmlwdCI+CiAgICAgICAgdmFyIHJlc2l6ZUlGcmFtZSA9IGZ1bmN0aW9uKGV2ZW50KSB7CiAgICAgICAgICAgIHZhciBsb2MgPSBkb2N1bWVudC5sb2NhdGlvbjsKICAgICAgICAgICAgaWYgKGV2ZW50Lm9yaWdpbiAhPSBsb2MucHJvdG9jb2wgKyAnLy8nICsgbG9jLmhvc3QpIHJldHVybjsKICAgICAgICAgICAgCiAgICAgICAgICAgIHZhciBteUlGcmFtZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdteUlGcmFtZScpOwogICAgICAgICAgICBpZiAobXlJRnJhbWUpIHsKICAgICAgICAgICAgICAgIG15SUZyYW1lLnN0eWxlLmhlaWdodCA9IGV2ZW50LmRhdGEuaCArICJweCI7CiAgICAgICAgICAgICAgICBteUlGcmFtZS5zdHlsZS53aWR0aCAgPSBldmVudC5kYXRhLncgKyAicHgiOwogICAgICAgICAgICB9CiAgICAgICAgfTsKICAgICAgICBpZiAod2luZG93LmFkZEV2ZW50TGlzdGVuZXIpIHsKICAgICAgICAgICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoIm1lc3NhZ2UiLCByZXNpemVJRnJhbWUsIGZhbHNlKTsKICAgICAgICB9IGVsc2UgaWYgKHdpbmRvdy5hdHRhY2hFdmVudCkgewogICAgICAgICAgICB3aW5kb3cuYXR0YWNoRXZlbnQoIm9ubWVzc2FnZSIsIHJlc2l6ZUlGcmFtZSk7CiAgICAgICAgfQogICAgICAgIDwvc2NyaXB0PgogICAgICAgIDwvaHRtbD4KICAgICAgICAKICAgICAgICA=" width="800" height="500"></iframe>')[0];
popup_8b33998389c647748a4b7f558db9086f.setContent(i_frame_37f9728e7129448d8421dadcc3a5a7e7);
circle_marker_f36b000114d34c4480c0e3874b3a1aff.bindPopup(popup_8b33998389c647748a4b7f558db9086f);
var circle_marker_c8f4a3824ab248d7b4516decbda1b587 = L.circle(
[37.3899,-5.98711],
20,
{
color: '#3186cc',
fillColor: '#3186cc',
fillOpacity: 0.6
}
)
.addTo(map_b2063da716d14361b72b0f9a50315884);
var popup_d59527a47f074edb946f6a17991ba6e3 = L.popup({maxWidth: '800'});
var i_frame_c087ed2281544bcd954d25c51e54fcb3 = $('<iframe src="data:text/html;base64,CiAgICAgICAgCiAgICAgICAgICAgICAKICAgICAgICAgICAgPCFkb2N0eXBlIGh0bWw+CiAgICAgICAgPGh0bWw+CiAgICAgICAgPGlmcmFtZSBpZD0ibXlJRnJhbWUiIHdpZHRoPSI4MDAiIGhlaWdodD0iNTAwIiBzcmM9aHR0cHM6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvQ2FzYV9kZV9QaWxhdG9zIGZyYW1lYm9yZGVyPSIwIj48L2lmcmFtZT4KICAgICAgICA8c2NyaXB0IHR5cGU9InRleHQvamF2YXNjcmlwdCI+CiAgICAgICAgdmFyIHJlc2l6ZUlGcmFtZSA9IGZ1bmN0aW9uKGV2ZW50KSB7CiAgICAgICAgICAgIHZhciBsb2MgPSBkb2N1bWVudC5sb2NhdGlvbjsKICAgICAgICAgICAgaWYgKGV2ZW50Lm9yaWdpbiAhPSBsb2MucHJvdG9jb2wgKyAnLy8nICsgbG9jLmhvc3QpIHJldHVybjsKICAgICAgICAgICAgCiAgICAgICAgICAgIHZhciBteUlGcmFtZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdteUlGcmFtZScpOwogICAgICAgICAgICBpZiAobXlJRnJhbWUpIHsKICAgICAgICAgICAgICAgIG15SUZyYW1lLnN0eWxlLmhlaWdodCA9IGV2ZW50LmRhdGEuaCArICJweCI7CiAgICAgICAgICAgICAgICBteUlGcmFtZS5zdHlsZS53aWR0aCAgPSBldmVudC5kYXRhLncgKyAicHgiOwogICAgICAgICAgICB9CiAgICAgICAgfTsKICAgICAgICBpZiAod2luZG93LmFkZEV2ZW50TGlzdGVuZXIpIHsKICAgICAgICAgICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoIm1lc3NhZ2UiLCByZXNpemVJRnJhbWUsIGZhbHNlKTsKICAgICAgICB9IGVsc2UgaWYgKHdpbmRvdy5hdHRhY2hFdmVudCkgewogICAgICAgICAgICB3aW5kb3cuYXR0YWNoRXZlbnQoIm9ubWVzc2FnZSIsIHJlc2l6ZUlGcmFtZSk7CiAgICAgICAgfQogICAgICAgIDwvc2NyaXB0PgogICAgICAgIDwvaHRtbD4KICAgICAgICAKICAgICAgICA=" width="800" height="500"></iframe>')[0];
popup_d59527a47f074edb946f6a17991ba6e3.setContent(i_frame_c087ed2281544bcd954d25c51e54fcb3);
circle_marker_c8f4a3824ab248d7b4516decbda1b587.bindPopup(popup_d59527a47f074edb946f6a17991ba6e3);
</script>