I have created a map using python and folium library from this code and i need to visualize it in my html webpage :
import folium
m = folium.Map(
location=[56.462490 , 13.753191],
width= 650,
height=550,
zoom_start=4.36,
tiles='https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
attr='My Data Attribution'
)
folium.GeoJson(
r'/Users/bader/Desktop/pandaTable/european-union-countries.geojson',
name='geoJson',
tooltip=folium.features.GeoJsonTooltip(
fields=['name_sort'],
aliases=['Name'],
sticky=True,
opacity=2.3,
direction='right',
),
).add_to(m)
m.save('map.html')
I need to have it in this html page in iframe tag(its google map for now):
<!DOCTYPE html>
<html style="font-size: 16px;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="page_type" content="np-template-header-footer-from-plugin">
<title>Cases</title>
<link rel="stylesheet" href="nicepage.css" media="screen">
<link rel="stylesheet" href="Cases.css" media="screen">
<script class="u-script" type="text/javascript" src="jquery.js" defer=""></script>
<script class="u-script" type="text/javascript" src="nicepage.js" defer=""></script>
<meta name="generator" content="Nicepage 3.11.0, nicepage.com">
<link id="u-theme-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i">
<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "Organization",
"name": "Safehub19",
"url": "index.html"
}</script>
<meta property="og:title" content="Cases">
<meta property="og:type" content="website">
<meta name="theme-color" content="#478ac9">
<link rel="canonical" href="index.html">
<meta property="og:url" content="index.html">
</head>
<body class="u-body"><header class="u-clearfix u-custom-color-2 u-header u-header" id="sec-0b4f"><nav class="u-menu u-menu-dropdown u-offcanvas u-menu-1">
<div class="menu-collapse" style="font-size: 1.25rem; letter-spacing: 0px;">
<a class="u-button-style u-custom-active-border-color u-custom-active-color u-custom-border u-custom-border-color u-custom-borders u-custom-hover-border-color u-custom-hover-color u-custom-left-right-menu-spacing u-custom-padding-bottom u-custom-text-active-color u-custom-text-color u-custom-text-hover-color u-custom-text-shadow u-custom-text-shadow-blur u-custom-text-shadow-color u-custom-text-shadow-transparency u-custom-text-shadow-x u-custom-text-shadow-y u-custom-top-bottom-menu-spacing u-nav-link u-text-active-palette-1-base u-text-hover-palette-2-base" href="#">
<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-hamburger"></use></svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol id="menu-hamburger" viewBox="0 0 16 16" style="width: 16px; height: 16px;"><rect y="1" width="16" height="2"></rect><rect y="7" width="16" height="2"></rect><rect y="13" width="16" height="2"></rect>
</symbol>
</defs></svg>
</a>
</div>
<div class="u-custom-menu u-nav-container">
<ul class="u-custom-font u-nav u-spacing-2 u-text-font u-unstyled u-nav-1"><li class="u-nav-item"><a class="u-active-grey-5 u-border-active-palette-1-base u-border-hover-palette-1-base u-button-style u-hover-grey-10 u-nav-link u-text-active-grey-90 u-text-grey-90 u-text-hover-grey-90" href="Home.html" style="padding: 10px 20px;">Home</a>
</li><li class="u-nav-item"><a class="u-active-grey-5 u-border-active-palette-1-base u-border-hover-palette-1-base u-button-style u-hover-grey-10 u-nav-link u-text-active-grey-90 u-text-grey-90 u-text-hover-grey-90" href="Cases.html" style="padding: 10px 20px;">Cases</a>
</li><li class="u-nav-item"><a class="u-active-grey-5 u-border-active-palette-1-base u-border-hover-palette-1-base u-button-style u-hover-grey-10 u-nav-link u-text-active-grey-90 u-text-grey-90 u-text-hover-grey-90" href="Vaccination.html" style="padding: 10px 20px;">Vaccination</a>
</li></ul>
</div>
<div class="u-custom-menu u-nav-container-collapse">
<div class="u-black u-container-style u-inner-container-layout u-opacity u-opacity-95 u-sidenav">
<div class="u-sidenav-overflow">
<div class="u-menu-close"></div>
<ul class="u-align-center u-nav u-popupmenu-items u-unstyled u-nav-2"><li class="u-nav-item"><a class="u-button-style u-nav-link" href="Home.html" style="padding: 10px 20px;">Home</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="Cases.html" style="padding: 10px 20px;">Cases</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="Vaccination.html" style="padding: 10px 20px;">Vaccination</a>
</li></ul>
</div>
</div>
<div class="u-black u-menu-overlay u-opacity u-opacity-70"></div>
</div>
</nav><img class="u-image u-image-1" src="images/newh1.png" data-image-width="1291" data-image-height="855" data-href="#"></header>
<section class="u-align-center u-clearfix u-custom-color-4 u-section-1" id="carousel_07be">
<div class="u-clearfix u-sheet u-sheet-1">
<h1 class="u-text u-text-1">DAILY UPDATE </h1>
<h1 class="u-text u-text-2">country name </h1>
<div class="u-grey-light-2 u-map u-map-1">
<div class="embed-responsive">
<iframe class="embed-responsive-item" src="//maps.google.com/maps?output=embed&q=Manhattan%2C%20New%20York&z=10&t=m" data-map="JTdCJTIycG9zaXRpb25UeXBlJTIyJTNBJTIybWFwLXBvaW50JTIyJTJDJTIyYWRkcmVzcyUyMiUzQSUyMk1hbmhhdHRhbiUyQyUyME5ldyUyMFlvcmslMjIlMkMlMjJ6b29tJTIyJTNBMTAlMkMlMjJ0eXBlSWQlMjIlM0ElMjJyb2FkJTIyJTJDJTIybGFuZyUyMiUzQSUyMiUyMiU3RA=="></iframe>
</div>
</div>
<div class="u-list u-repeater u-list-1">
<div class="u-align-center u-container-style u-list-item u-repeater-item">
<div class="u-container-layout u-similar-container u-container-layout-1">
<h3 class="u-text u-text-3" data-animation-name="counter" data-animation-event="scroll" data-animation-duration="3000">230</h3>
<h1 class="u-text u-text-4">CASES</h1>
</div>
</div>
<div class="u-align-center u-container-style u-list-item u-repeater-item">
<div class="u-container-layout u-similar-container u-container-layout-2">
<h3 class="u-text u-text-5" data-animation-name="counter" data-animation-event="scroll" data-animation-duration="3000">46</h3>
<h1 class="u-text u-text-6">DEATHS</h1>
</div>
</div>
<div class="u-align-center u-container-style u-list-item u-repeater-item">
<div class="u-container-layout u-similar-container u-container-layout-3">
<h3 class="u-text u-text-7" data-animation-name="counter" data-animation-event="scroll" data-animation-duration="3000">60</h3>
<h1 class="u-text u-text-8">Recoverd </h1>
</div>
</div>
<div class="u-align-center u-container-style u-list-item u-repeater-item">
<div class="u-container-layout u-similar-container u-container-layout-4">
<h3 class="u-text u-text-9" data-animation-name="counter" data-animation-event="scroll" data-animation-duration="3000">100</h3>
<h1 class="u-text u-text-10">CRITICAL </h1>
</div>
</div>
</div>
<img src="images/clipart21950221.png" alt="" class="u-image u-image-default u-image-1" data-image-width="406" data-image-height="357">
<img src="images/clipart104601.png" alt="" class="u-image u-image-default u-image-2" data-image-width="501" data-image-height="512">
<img src="images/clipart166497.png" alt="" class="u-image u-image-default u-image-3" data-image-width="2026" data-image-height="2400">
<img src="images/clipart2464149.png" alt="" class="u-image u-image-default u-image-4" data-image-width="326" data-image-height="481">
</div>
</section>
<section class="u-align-center u-clearfix u-custom-color-1 u-section-2" id="sec-f85d">
<div class="u-clearfix u-sheet u-sheet-1">
<div class="u-table u-table-responsive u-table-1">
<table class="u-table-entity u-table-entity-1">
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="25%">
</colgroup>
<tbody class="u-table-body">
<tr style="height: 85px;">
<td class="u-border-1 u-border-grey-30 u-table-cell">Column 1</td>
<td class="u-border-1 u-border-grey-30 u-table-cell">Column 2</td>
<td class="u-border-1 u-border-grey-30 u-table-cell">Column 3</td>
<td class="u-border-1 u-border-grey-30 u-table-cell">Column 4</td>
</tr>
<tr style="height: 87px;">
<td class="u-border-1 u-border-grey-30 u-table-cell">Row 1</td>
<td class="u-border-1 u-border-grey-30 u-table-cell">Description</td>
<td class="u-border-1 u-border-grey-30 u-table-cell">Description</td>
<td class="u-border-1 u-border-grey-30 u-table-cell">Description</td>
</tr>
<tr style="height: 87px;">
<td class="u-border-1 u-border-grey-30 u-table-cell">Row 2</td>
<td class="u-border-1 u-border-grey-30 u-table-cell">Description</td>
<td class="u-border-1 u-border-grey-30 u-table-cell">Description</td>
<td class="u-border-1 u-border-grey-30 u-table-cell">Description</td>
</tr>
<tr style="height: 87px;">
<td class="u-border-1 u-border-grey-30 u-table-cell">Row 3</td>
<td class="u-border-1 u-border-grey-30 u-table-cell">Description</td>
<td class="u-border-1 u-border-grey-30 u-table-cell">Description</td>
<td class="u-border-1 u-border-grey-30 u-table-cell">Description</td>
</tr>
<tr style="height: 87px;">
<td class="u-border-1 u-border-grey-30 u-table-cell">Row 4</td>
<td class="u-border-1 u-border-grey-30 u-table-cell">Description</td>
<td class="u-border-1 u-border-grey-30 u-table-cell">Description</td>
<td class="u-border-1 u-border-grey-30 u-table-cell">Description</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="u-align-center u-clearfix u-custom-color-4 u-section-3" id="sec-39ca">
<div class="u-clearfix u-sheet u-sheet-1">
<h1 class="u-text u-text-1">CHART</h1>
<h1 class="u-text u-text-2">CHART</h1>
</div>
</section>
<style class="u-overlap-style">.u-overlap:not(.u-sticky-scroll) .u-header {
background-color: #e8e8e8 !important
}</style>
<footer class="u-align-center u-clearfix u-footer u-grey-80 u-footer" id="sec-5af5"><div class="u-clearfix u-sheet u-sheet-1">
<p class="u-small-text u-text u-text-variant u-text-1">Sample text. Click to select the text box. Click again or double click to start editing the text.</p>
</div></footer>
<section class="u-backlink u-clearfix u-grey-80">
<a class="u-link" href="https://nicepage.com/website-templates" target="_blank">
<span>Website Templates</span>
</a>
<p class="u-text">
<span>created with</span>
</p>
<a class="u-link" href="https://nicepage.com/" target="_blank">
<span>Website Builder Software</span>
</a>.
</section>
</body>
</html>
The end result should look like this and you can adjust the width and hight of the map to fix on the left side of the page :
[End result]