Skip to content

Commit dedaa0f

Browse files
author
Alexander
authored
Proper configuration for embedded geostories and dashboards. (#491)
(cherry picked from commit 4d1f07c)
1 parent 445ebf6 commit dedaa0f

8 files changed

+543
-2
lines changed

‎dashboard-embedded-template.html‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Dashboard Embedded</title>
8+
<style>
9+
body {
10+
margin: 0;
11+
}
12+
._ms2_init_center {
13+
position: fixed;
14+
top: 0;
15+
left: 0;
16+
bottom: 0;
17+
right: 0;
18+
overflow: show;
19+
margin: auto;
20+
display: flex;
21+
align-items: center;
22+
}
23+
._ms2_init_spinner {
24+
height: 176px;
25+
width: 176px;
26+
}
27+
._ms2_init_spinner > div,
28+
._ms2_init_spinner > div:after {
29+
border-radius: 50%;
30+
width: 176px;
31+
height: 176px;
32+
}
33+
._ms2_init_spinner > div {
34+
box-sizing: border-box;
35+
text-indent: -9999em;
36+
border: 16px solid rgba(119,119,119, 0.2);
37+
border-left: 16px solid #777777;
38+
-webkit-transform: translateZ(0);
39+
-ms-transform: translateZ(0);
40+
transform: translateZ(0);
41+
-webkit-animation: _ms2_init_anim 1.1s infinite linear;
42+
animation: _ms2_init_anim 1.1s infinite linear;
43+
}
44+
@-webkit-keyframes _ms2_init_anim {
45+
0% {
46+
-webkit-transform: rotate(0deg);
47+
transform: rotate(0deg);
48+
}
49+
100% {
50+
-webkit-transform: rotate(360deg);
51+
transform: rotate(360deg);
52+
}
53+
}
54+
@keyframes _ms2_init_anim {
55+
0% {
56+
-webkit-transform: rotate(0deg);
57+
transform: rotate(0deg);
58+
}
59+
100% {
60+
-webkit-transform: rotate(360deg);
61+
transform: rotate(360deg);
62+
}
63+
}
64+
._ms2_init_text {
65+
-webkit-animation: _ms2_init_text_anim 2s linear 0s infinite normal;
66+
animation: _ms2_init_text_anim 2s linear 0s infinite normal;
67+
color: #6F6F6f;
68+
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
69+
font-size: 20px;
70+
font-weight: bold;
71+
height: 0.75em;
72+
width: 6em;
73+
text-align: center;
74+
margin: auto;
75+
z-index: 1000;
76+
}
77+
@keyframes _ms2_init_text_anim {
78+
0% {opacity: 0}
79+
20% {opacity: 0}
80+
50% {opacity: 1}
81+
70% {opacity: .75}
82+
100%{opacity: 0}
83+
}
84+
85+
body {
86+
margin: 0;
87+
}
88+
#container {
89+
position: absolute;
90+
top: 0;
91+
left: 0;
92+
width: 100%;
93+
height: 100%;
94+
}
95+
</style>
96+
<link rel="preconnect" href="https://fonts.gstatic.com">
97+
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
98+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
99+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
100+
<!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
101+
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
102+
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
103+
<script type="text/javascript">
104+
var browserInfo = bowser.getParser(window.navigator.userAgent);
105+
var isValidBrowser = browserInfo.satisfies({
106+
"edge": ">1",
107+
"chrome": ">1",
108+
"safari": ">1",
109+
"firefox": ">1"
110+
});
111+
if (!isValidBrowser) {
112+
window.location.href = "unsupportedBrowser.html"
113+
document.querySelector("container").style.display = "none";
114+
}
115+
</script>
116+
</head>
117+
<body>
118+
<div id="container">
119+
<div class="_ms2_init_spinner _ms2_init_center"><div></div></div>
120+
<div class="_ms2_init_text _ms2_init_center">Loading</div>
121+
</div>
122+
</body>
123+
</html>

‎dashboard-embedded.html‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Dashboard Embedded</title>
8+
<style>
9+
body {
10+
margin: 0;
11+
}
12+
._ms2_init_center {
13+
position: fixed;
14+
top: 0;
15+
left: 0;
16+
bottom: 0;
17+
right: 0;
18+
overflow: show;
19+
margin: auto;
20+
display: flex;
21+
align-items: center;
22+
}
23+
._ms2_init_spinner {
24+
height: 176px;
25+
width: 176px;
26+
}
27+
._ms2_init_spinner > div,
28+
._ms2_init_spinner > div:after {
29+
border-radius: 50%;
30+
width: 176px;
31+
height: 176px;
32+
}
33+
._ms2_init_spinner > div {
34+
box-sizing: border-box;
35+
text-indent: -9999em;
36+
border: 16px solid rgba(119,119,119, 0.2);
37+
border-left: 16px solid #777777;
38+
-webkit-transform: translateZ(0);
39+
-ms-transform: translateZ(0);
40+
transform: translateZ(0);
41+
-webkit-animation: _ms2_init_anim 1.1s infinite linear;
42+
animation: _ms2_init_anim 1.1s infinite linear;
43+
}
44+
@-webkit-keyframes _ms2_init_anim {
45+
0% {
46+
-webkit-transform: rotate(0deg);
47+
transform: rotate(0deg);
48+
}
49+
100% {
50+
-webkit-transform: rotate(360deg);
51+
transform: rotate(360deg);
52+
}
53+
}
54+
@keyframes _ms2_init_anim {
55+
0% {
56+
-webkit-transform: rotate(0deg);
57+
transform: rotate(0deg);
58+
}
59+
100% {
60+
-webkit-transform: rotate(360deg);
61+
transform: rotate(360deg);
62+
}
63+
}
64+
._ms2_init_text {
65+
-webkit-animation: _ms2_init_text_anim 2s linear 0s infinite normal;
66+
animation: _ms2_init_text_anim 2s linear 0s infinite normal;
67+
color: #6F6F6f;
68+
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
69+
font-size: 20px;
70+
font-weight: bold;
71+
height: 0.75em;
72+
width: 6em;
73+
text-align: center;
74+
margin: auto;
75+
z-index: 1000;
76+
}
77+
@keyframes _ms2_init_text_anim {
78+
0% {opacity: 0}
79+
20% {opacity: 0}
80+
50% {opacity: 1}
81+
70% {opacity: .75}
82+
100%{opacity: 0}
83+
}
84+
85+
body {
86+
margin: 0;
87+
}
88+
#container {
89+
position: absolute;
90+
top: 0;
91+
left: 0;
92+
width: 100%;
93+
height: 100%;
94+
}
95+
</style>
96+
<link rel="preconnect" href="https://fonts.gstatic.com">
97+
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
98+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
99+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
100+
<!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
101+
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
102+
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
103+
</head>
104+
<body>
105+
<div id="container">
106+
<div class="_ms2_init_spinner _ms2_init_center"><div></div></div>
107+
<div class="_ms2_init_text _ms2_init_center">Loading</div>
108+
</div>
109+
<script src="dist/dashboard-embedded.js"></script>
110+
</body>
111+
</html>

‎geostory-embedded-template.html‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Geostory Embedded</title>
8+
<style>
9+
body {
10+
margin: 0;
11+
}
12+
._ms2_init_center {
13+
position: fixed;
14+
top: 0;
15+
left: 0;
16+
bottom: 0;
17+
right: 0;
18+
overflow: show;
19+
margin: auto;
20+
display: flex;
21+
align-items: center;
22+
}
23+
._ms2_init_spinner {
24+
height: 176px;
25+
width: 176px;
26+
}
27+
._ms2_init_spinner > div,
28+
._ms2_init_spinner > div:after {
29+
border-radius: 50%;
30+
width: 176px;
31+
height: 176px;
32+
}
33+
._ms2_init_spinner > div {
34+
box-sizing: border-box;
35+
text-indent: -9999em;
36+
border: 16px solid rgba(119,119,119, 0.2);
37+
border-left: 16px solid #777777;
38+
-webkit-transform: translateZ(0);
39+
-ms-transform: translateZ(0);
40+
transform: translateZ(0);
41+
-webkit-animation: _ms2_init_anim 1.1s infinite linear;
42+
animation: _ms2_init_anim 1.1s infinite linear;
43+
}
44+
@-webkit-keyframes _ms2_init_anim {
45+
0% {
46+
-webkit-transform: rotate(0deg);
47+
transform: rotate(0deg);
48+
}
49+
100% {
50+
-webkit-transform: rotate(360deg);
51+
transform: rotate(360deg);
52+
}
53+
}
54+
@keyframes _ms2_init_anim {
55+
0% {
56+
-webkit-transform: rotate(0deg);
57+
transform: rotate(0deg);
58+
}
59+
100% {
60+
-webkit-transform: rotate(360deg);
61+
transform: rotate(360deg);
62+
}
63+
}
64+
._ms2_init_text {
65+
-webkit-animation: _ms2_init_text_anim 2s linear 0s infinite normal;
66+
animation: _ms2_init_text_anim 2s linear 0s infinite normal;
67+
color: #6F6F6f;
68+
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
69+
font-size: 20px;
70+
font-weight: bold;
71+
height: 0.75em;
72+
width: 6em;
73+
text-align: center;
74+
margin: auto;
75+
z-index: 1000;
76+
}
77+
@keyframes _ms2_init_text_anim {
78+
0% {opacity: 0}
79+
20% {opacity: 0}
80+
50% {opacity: 1}
81+
70% {opacity: .75}
82+
100%{opacity: 0}
83+
}
84+
body {
85+
margin: 0;
86+
}
87+
#container {
88+
position: absolute;
89+
top: 0;
90+
left: 0;
91+
width: 100%;
92+
height: 100%;
93+
}
94+
</style>
95+
<link rel="preconnect" href="https://fonts.gstatic.com">
96+
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
97+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
98+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
99+
<link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
100+
<!--script src="https://maps.google.com/maps/api/js?v=3"></script-->
101+
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
102+
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
103+
<script type="text/javascript" src="https://unpkg.com/[email protected]/es5.js"></script>
104+
<script type="text/javascript">
105+
var browserInfo = bowser.getParser(window.navigator.userAgent);
106+
var isValidBrowser = browserInfo.satisfies({
107+
"edge": ">1",
108+
"chrome": ">1",
109+
"safari": ">1",
110+
"firefox": ">1"
111+
});
112+
if (!isValidBrowser) {
113+
window.location.href = "unsupportedBrowser.html"
114+
document.querySelector("container").style.display = "none";
115+
}
116+
</script>
117+
</head>
118+
<body>
119+
<div id="container">
120+
<div class="_ms2_init_spinner _ms2_init_center"><div></div></div>
121+
<div class="_ms2_init_text _ms2_init_center">Loading</div>
122+
</div>
123+
</body>
124+
</html>

0 commit comments

Comments
 (0)