-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathTSirc-map_overlay.html
39 lines (37 loc) · 1.33 KB
/
TSirc-map_overlay.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<title>Overlay Text on Iframe</title>
<!-- Font Awesome script -->
<script src="https://kit.fontawesome.com/46ff08c48c.js" crossorigin="anonymous"></script>
<!-- Overlay styling -->
<style>
#text-overlay {
text-align: left; font-family: Trebuchet MS; font-size: 1.5em;
position: absolute;
bottom: 9%;
left: 2%;
font-size: 12pt;
color: black;
background-color: white;
border: 2px solid black;
line-height: 2; /* Double-spacing */
border-radius: 5px;
padding: 5px;
z-index: 999;
}
</style>
</head>
<body>
<link href="./../emoji.css" rel="stylesheet" type='text/css'>
<!-- Overlay text with bbox_props styling -->
<div id="text-overlay" style="box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); border-radius: 10px; padding: 10px;">
<i class="fa-solid fa-map-pin fa-bounce fa-xl"></i>
<span style="margin-right: 0.1em;"></span>
Room 2192, Maarintie 8, 02150 Espoo, Finland <span class='emoji'>🇫🇮</span>
</div>
<!-- Iframe with generated HTML -->
<iframe src="./TSirc-map_Esri.html" width="45%" height="500"></iframe>
<iframe src="./TSirc-map_OSM.html" width="45%" height="500"></iframe>
</body>
</html>