Skip to content

Commit 9520b89

Browse files
labstractionlabstraction
committedMar 20, 2022
first commit
0 parents  commit 9520b89

13 files changed

+323
-0
lines changed
 

‎css/leaflet.min.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/style.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
body {
2+
font-family: sans-serif;
3+
}
4+
5+
6+
html, body{
7+
display: flex;
8+
height: 100%;
9+
margin: 0;
10+
padding: 0;
11+
width: 100%;
12+
}
13+
14+

‎favicon.ico

948 Bytes
Binary file not shown.

‎images/icon.png

3.53 KB
Loading

‎index.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Sindbad PWA</title>
6+
<link rel="manifest" href="/manifest.json">
7+
<link rel="stylesheet" href="css/style.css">
8+
<link rel="icon" href="favicon.ico" type="image/x-icon" />
9+
<link rel="apple-touch-icon" href="images/icon.png">
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11+
<meta name="theme-color" content="Black"/>
12+
<meta name="apple-mobile-web-app-capable" content="yes">
13+
<meta name="apple-mobile-web-app-status-bar-style" content="black">
14+
<meta name="apple-mobile-web-app-title" content="Sindbad PWA">
15+
<meta name="msapplication-TileImage" content="images/icon.png">
16+
<meta name="msapplication-TileColor" content="#000000">
17+
<script src="js/leaflet.min.js"></script>
18+
<script src="js/map-viewer.js"></script>
19+
<script src="js/main.js"></script>
20+
</head>
21+
<body>
22+
<map-viewer
23+
theme="#bbff11"
24+
wms-overlays-url="settings/wms.json"
25+
></map-viewer>
26+
</body>
27+
</html>

‎js/leaflet.min.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/main.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
window.onload = () => {
2+
'use strict';
3+
4+
if ('serviceWorker' in navigator) {
5+
navigator.serviceWorker
6+
.register('./sw.js');
7+
}
8+
}
9+
10+
11+

‎js/map-viewer.js

+178
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
class MapViewer extends HTMLElement {
2+
3+
constructor() {
4+
super();
5+
this.attachShadow({ mode: 'open' });
6+
}
7+
8+
connectedCallback() {
9+
this.defineAttributes();
10+
this.initTag()
11+
this.initMap()
12+
if (this.baseLayersUrl) {
13+
this.initBaseLayers()
14+
} else {
15+
this.initDefaultLayer()
16+
}
17+
//sthis.initWmsOverlays()
18+
this.initGeoJSONOverlays()
19+
}
20+
21+
defineAttributes() {
22+
this.lat = this.getAttributeOrDefault('lat', '51.505');
23+
this.lng = this.getAttributeOrDefault('lng', '-0.09');
24+
this.zoom = this.getAttributeOrDefault('zoom', '3');
25+
this.baseLayersUrl = this.getAttributeOrDefault('base-layers-url', "");
26+
this.wmsOverlaysUrl = this.getAttributeOrDefault('wms-overlays-url', "");
27+
this.geoJSONOverlaysUrl = this.getAttributeOrDefault('geo-json-overlays-url', "");
28+
this.theme = this.getAttributeOrDefault('theme', '#313131');
29+
}
30+
31+
getAttributeOrDefault(attribute, defaultValue) {
32+
if (this.hasAttribute(attribute)) {
33+
return this.getAttribute(attribute);
34+
} else {
35+
this.setAttribute(attribute, defaultValue);
36+
return defaultValue;
37+
}
38+
}
39+
40+
initTag() {
41+
42+
this.style.height = '100%';
43+
this.style.width = '100%';
44+
45+
46+
const style = document.createElement('style');
47+
style.textContent = `
48+
.leaflet-control, .leaflet-control a{
49+
background-color: ${this.theme} !important;
50+
color: ${this.contrastingColor(this.theme)} !important;
51+
border-color: ${this.contrastingColor(this.theme)}70 !important;
52+
}`
53+
54+
this.shadowRoot.appendChild(style);
55+
56+
const cssLink = document.createElement('link');
57+
cssLink.rel = 'stylesheet';
58+
cssLink.href = './css/leaflet.min.css';
59+
this.shadowRoot.appendChild(cssLink);
60+
61+
}
62+
63+
initMap() {
64+
65+
const mapDiv = document.createElement('div');
66+
mapDiv.id = 'map';
67+
mapDiv.style.width = '100%';
68+
mapDiv.style.height = '100%';
69+
mapDiv.style.backgroundColor = this.theme;
70+
this.shadowRoot.appendChild(mapDiv);
71+
72+
let mapOptions = {
73+
maxBounds: [[-90, -180], [90, 180]],
74+
minZoom: 3,
75+
maxZoom: 8
76+
}
77+
78+
this.map = L.map(mapDiv, mapOptions).setView([this.lat, this.lng], this.zoom);
79+
80+
}
81+
82+
83+
initDefaultLayer() {
84+
85+
const defaultColor = "#03d6f1"
86+
let color = this.contrastingColor(this.theme);
87+
88+
var geojsonOptions = {
89+
fillColor: color,
90+
color: color,
91+
weight: 1,
92+
opacity: 0,
93+
fillOpacity: 0.4
94+
};
95+
96+
fetch("/map/world.json")
97+
.then(resp => resp.json())
98+
.then(json => {
99+
console.log(json)
100+
L.geoJSON(json, geojsonOptions).addTo(this.map);
101+
});
102+
}
103+
104+
initWmsOverlays() {
105+
if (this.wmsOverlaysUrl) {
106+
fetch(this.wmsOverlaysUrl)
107+
.then(resp => resp.json())
108+
.then(json => json.forEach(layerConf => this.createWmsLayer(layerConf)));
109+
}
110+
}
111+
112+
createWmsLayer(layerConfig){
113+
if (layerConfig) {
114+
const wmsLayer = L.tileLayer.wms(layerConfig.url, layerConfig.options);
115+
wmsLayer.setOpacity(layerConfig.opacity);
116+
wmsLayer.addTo(this.map);
117+
}
118+
}
119+
120+
121+
initGeoJSONOverlays() {
122+
console.log(this.geoJSONOverlaysUrl)
123+
if (this.geoJSONOverlaysUrl) {
124+
fetch(this.geoJSONOverlaysUrl)
125+
.then(resp => resp.json())
126+
.then(json => json.forEach(layerConf => this.loadGeoJsonData(layerConf)));
127+
}
128+
}
129+
130+
loadGeoJsonData(layerConfig){
131+
if (layerConfig.url) {
132+
fetch(layerConfig.url)
133+
.then(resp => resp.json())
134+
.then(json => this.createGeoJsonLayer(json,layerConfig))
135+
}
136+
}
137+
138+
createGeoJsonLayer(data, layerConfig){
139+
if (data) {
140+
const options = { pointToLayer: (feature, latlng) => Function(layerConfig.pointToLayer)(feature, latlng) };
141+
142+
const geoJsonLayer = L.geoJSON(data);
143+
144+
geoJsonLayer.addTo(this.map);
145+
}
146+
}
147+
148+
fromStringToRGB(str){
149+
const ctx = document.createElement("canvas").getContext("2d");
150+
ctx.fillStyle = str;
151+
const hexCode = ctx.fillStyle.replace("#", "");
152+
var aRgbHex = hexCode.match(/.{1,2}/g);
153+
var aRgb = [
154+
parseInt(aRgbHex[0], 16),
155+
parseInt(aRgbHex[1], 16),
156+
parseInt(aRgbHex[2], 16)
157+
];
158+
return aRgb;
159+
}
160+
161+
contrastingColor(color)
162+
{
163+
return (this.luma(color) >= 165) ? '#000000' : '#ffffff';
164+
}
165+
166+
luma(color)
167+
{
168+
const rgb = this.fromStringToRGB(color);
169+
return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]);
170+
}
171+
172+
173+
}
174+
175+
176+
177+
178+
customElements.define('map-viewer', MapViewer);

‎manifest.json

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "Sindbad PWA",
3+
"short_name": "Hello",
4+
"icons": [{
5+
"src": "images/icon.png",
6+
"sizes": "128x128",
7+
"type": "image/png"
8+
}, {
9+
"src": "images/icon.png",
10+
"sizes": "144x144",
11+
"type": "image/png"
12+
}, {
13+
"src": "images/icon.png",
14+
"sizes": "152x152",
15+
"type": "image/png"
16+
}, {
17+
"src": "images/icon.png",
18+
"sizes": "192x192",
19+
"type": "image/png"
20+
}, {
21+
"src": "images/icon.png",
22+
"sizes": "256x256",
23+
"type": "image/png"
24+
}, {
25+
"src": "images/icon.png",
26+
"sizes": "512x512",
27+
"type": "image/png"
28+
}],
29+
"lang": "en-US",
30+
"start_url": "/index.html",
31+
"display": "standalone",
32+
"background_color": "black",
33+
"theme_color": "black"
34+
}

‎map/world.json

+1
Large diffs are not rendered by default.

‎settings/geo.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
[
3+
{
4+
"name": "River",
5+
"url": "http://geoserver.emodnet-physics.eu/geoserver/emodnet/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=emodnet%3Adat_platformmapcache&outputFormat=application%2Fjson&CQL_FILTER=platformtypeid%3D23 and projectsdescr%3D'%3BPSMSL%3B'",
6+
"pointToLayer": "{return L.circleMarker(latlng)}"
7+
}
8+
]

‎settings/wms.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
[
2+
{
3+
"name": "Temperatura 2m (GFS)",
4+
"url": "http://188.166.63.249/thredds/wms/SINDBAD-GFS-1HR/SINDBAD-GFS-Temperature_height_above_ground.nc?",
5+
"opacity": 0.5,
6+
"options": {
7+
"layers": "Temperature_height_above_ground",
8+
"format": "image/png",
9+
"transparent": true,
10+
"tiled": true,
11+
"styles": "boxfill/rainbow",
12+
"colorscalerange": "263.15,313.15",
13+
"unit": "K",
14+
"logscale": false,
15+
"abovemaxcolor": "extend",
16+
"belowmincolor": "extend"
17+
}
18+
}
19+
]

‎sw.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
var cacheName = 'sindbad-pwa';
2+
var filesToCache = [
3+
'/',
4+
'/index.html',
5+
'/css/style.css',
6+
'/css/leaflet.min.css',
7+
'/js/main.js',
8+
'/js/leaflet.min.js',
9+
'/map/world.json'
10+
];
11+
12+
/* Start the service worker and cache all of the app's content */
13+
self.addEventListener('install', function(e) {
14+
e.waitUntil(
15+
caches.open(cacheName).then(function(cache) {
16+
return cache.addAll(filesToCache);
17+
})
18+
);
19+
self.skipWaiting();
20+
});
21+
22+
/* Serve cached content when offline */
23+
self.addEventListener('fetch', function(e) {
24+
e.respondWith(
25+
caches.match(e.request).then(function(response) {
26+
return response || fetch(e.request);
27+
})
28+
);
29+
});

0 commit comments

Comments
 (0)
Please sign in to comment.