Skip to content

Commit dec2caa

Browse files
labstractionlabstraction
committed
legend
1 parent 7cb13da commit dec2caa

File tree

15 files changed

+354
-72
lines changed

15 files changed

+354
-72
lines changed

‎css/style.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,28 @@ body {
55

66
html, body{
77
display: flex;
8+
flex-direction: column;
89
height: 100%;
910
margin: 0;
1011
padding: 0;
1112
width: 100%;
1213
}
1314

1415

16+
map-viewer{
17+
flex-grow: 1;
18+
}
19+
20+
map-legend{
21+
flex-grow: 1;
22+
max-height: 18px;
23+
}
24+
25+
logo-menu{
26+
position: absolute;
27+
top: 10px;
28+
left: 10px;
29+
background-color: teal;
30+
z-index: 10000;
31+
}
32+

‎images/layers-black.svg

Lines changed: 1 addition & 0 deletions
Loading

‎images/layers-white.svg

Lines changed: 1 addition & 0 deletions
Loading

‎images/logo.png

10.9 KB
Loading

‎index.html

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<base href="/mapPWA/">
5+
<!-- <base href="/mapPWA/"> -->
66
<title>map PWA</title>
7-
<link rel="canonical" href="https://labstraction.github.io/mapPWA/"/>
8-
<link rel="manifest" href="./manifest.json">
7+
<!-- <link rel="canonical" href="https://labstraction.github.io/mapPWA/"/> -->
8+
<link rel="manifest" href="./manifest.webmanifest">
99
<link rel="stylesheet" href="./css/style.css">
1010
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
1111
<link rel="apple-touch-icon" href="./images/icon_152.png">
@@ -16,13 +16,22 @@
1616
<meta name="apple-mobile-web-app-title" content="map PWA">
1717
<meta name="msapplication-TileImage" content="./images/icon_144.png">
1818
<meta name="msapplication-TileColor" content="#000000">
19-
<script src="./js/leaflet.min.js"></script>
20-
<script src="./js/map-viewer.js"></script>
19+
<script src="./js/leaflet/leaflet.min.js"></script>
20+
<script type="module" src="./js/map-viewer.js"></script>
21+
<script type="module" src="./js/map-legend.js"></script>
22+
<script type="module" src="./js/logo-menu.js"></script>
2123
<script src="./js/main.js"></script>
2224
</head>
2325
<body>
26+
<logo-menu
27+
image-url="./images/logo.png"
28+
></logo-menu>
2429
<map-viewer
25-
theme="tomato"
30+
theme="teal"
31+
overlays-url="./settings/layers.json"
2632
></map-viewer>
33+
<map-legend
34+
vertical="false"
35+
></map-legend>
2736
</body>
2837
</html>

‎js/leaflet.min.js renamed to ‎js/leaflet/leaflet.min.js

File renamed without changes.

‎js/logo-menu.js

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
'use strict'
2+
3+
4+
class LogoMenu extends HTMLElement {
5+
6+
7+
8+
constructor() {
9+
super();
10+
this.attachShadow({ mode: 'open' });
11+
}
12+
13+
connectedCallback() {
14+
this.defineAttributes();
15+
this.initTag()
16+
}
17+
18+
defineAttributes() {
19+
this.imageUrl = this.getAttributeOrDefault('image-url', "");
20+
this.backgroundColor = this.getAttributeOrDefault('background-color', 'white');
21+
this.width = this.getAttributeOrDefault('width', '60px');
22+
this.height = this.getAttributeOrDefault('height', '60px');
23+
}
24+
25+
getAttributeOrDefault(attribute, defaultValue) {
26+
if (this.hasAttribute(attribute)) {
27+
return this.getAttribute(attribute);
28+
} else {
29+
this.setAttribute(attribute, defaultValue);
30+
return defaultValue;
31+
}
32+
}
33+
34+
initTag() {
35+
const container = document.createElement('div');
36+
container.style.width = '100%';
37+
container.style.height = '100%';
38+
container.style.backgroundColor = this.backgroundColor || 'transparent';
39+
container.style.padding = '4px';
40+
container.style.borderRadius = '4px';
41+
if (this.width) {
42+
container.style.width = this.width;
43+
} else {
44+
container.style.height = this.height;
45+
}
46+
47+
const image = document.createElement('img');
48+
image.src = this.imageUrl;
49+
image.style.width = '100%';
50+
image.style.height = '100%';
51+
image.style.objectFit = 'contain';
52+
53+
container.appendChild(image);
54+
55+
this.shadowRoot.appendChild(container);
56+
}
57+
58+
59+
60+
61+
62+
63+
64+
fromStringToRGB(str) {
65+
const ctx = document.createElement("canvas").getContext("2d");
66+
ctx.fillStyle = str;
67+
const hexCode = ctx.fillStyle.replace("#", "");
68+
var aRgbHex = hexCode.match(/.{1,2}/g);
69+
var aRgb = [
70+
parseInt(aRgbHex[0], 16),
71+
parseInt(aRgbHex[1], 16),
72+
parseInt(aRgbHex[2], 16)
73+
];
74+
return aRgb;
75+
}
76+
77+
contrastingColor(color) {
78+
return (this.luma(color) >= 165) ? '#000000' : '#ffffff';
79+
}
80+
81+
luma(color) {
82+
const rgb = this.fromStringToRGB(color);
83+
return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]);
84+
}
85+
86+
roundTo(n, digits = 0) {
87+
var multiplicator = Math.pow(10, digits);
88+
n = n * multiplicator;
89+
return Math.round(n) / multiplicator;
90+
}
91+
92+
93+
}
94+
95+
96+
97+
98+
customElements.define('logo-menu', LogoMenu);

‎js/main.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
window.onload = () => {
2-
'use strict';
3-
4-
if ('serviceWorker' in navigator) {
5-
navigator.serviceWorker
6-
.register('./sw.js');
7-
}
8-
}
1+
// window.onload = () => {
2+
// 'use strict';
3+
4+
// if ('serviceWorker' in navigator) {
5+
// navigator.serviceWorker
6+
// .register('./sw.js');
7+
// }
8+
// }
99

1010

1111

‎js/map-legend.js

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
'use strict'
2+
3+
4+
class MapLegend extends HTMLElement {
5+
6+
7+
8+
constructor() {
9+
super();
10+
this.attachShadow({ mode: 'open' });
11+
}
12+
13+
connectedCallback() {
14+
this.defineAttributes();
15+
this.initTag()
16+
}
17+
18+
defineAttributes() {
19+
this.min = parseFloat(this.getAttributeOrDefault('min', '0'));
20+
this.max = parseFloat(this.getAttributeOrDefault('max', '10'));
21+
this.isLog = this.getAttributeOrDefault('log', 'false') === 'true';
22+
this.isVertical = this.getAttributeOrDefault('vertical', 'false') === 'true';
23+
this.colors = this.getAttributeOrDefault('colors', '#000000,#222222,#444444,#666666,#888888,#AAAAAA,#CCCCCC,#EEEEEE').split(',');
24+
this.unit = this.getAttributeOrDefault('unit', '');
25+
}
26+
27+
getAttributeOrDefault(attribute, defaultValue) {
28+
if (this.hasAttribute(attribute)) {
29+
return this.getAttribute(attribute);
30+
} else {
31+
this.setAttribute(attribute, defaultValue);
32+
return defaultValue;
33+
}
34+
}
35+
36+
initTag() {
37+
38+
const container = document.createElement('div');
39+
container.style.width = '100%';
40+
container.style.height = '100%';
41+
container.style.display = 'flex';
42+
container.style.flexDirection = this.isVertical ? 'column-reverse' : "row";
43+
44+
for (let i = 0; i < this.colors.length; i++) {
45+
const span = document.createElement('span');
46+
span.style.backgroundColor = this.colors[i];
47+
span.style.color = this.contrastingColor(this.colors[i]);
48+
span.style.flexGrow = 1;
49+
span.style.display = 'flex';
50+
span.style.alignItems = 'center';
51+
span.style.justifyContent = 'center';
52+
span.style.fontSize = '0.8em';
53+
if (i === 0 || i === this.colors.length - 1) {
54+
const text = this.roundTo(this.getStep(this.min, this.max, this.colors.length, this.isLog, i), 1) + ' ' + this.unit;
55+
span.appendChild(document.createTextNode(text));
56+
if (this.isVertical) {
57+
span.style.minHeight = '30px';
58+
} else {
59+
span.style.minWidth = '30px';
60+
}
61+
}
62+
container.appendChild(span);
63+
}
64+
this.shadowRoot.appendChild(container);
65+
}
66+
67+
68+
69+
70+
getStep(min, max, stepNumber, isLog, index) {
71+
if (isLog) {
72+
const minLog = Math.log(min);
73+
const maxLog = Math.log(max);
74+
const step = (maxLog - minLog) / (stepNumber - 1);
75+
return Math.exp(minLog + step * index);
76+
} else {
77+
console.log('pippo', ((max - min) / (stepNumber - 1)) * index)
78+
return ((max - min) / (stepNumber - 1)) * index;
79+
}
80+
}
81+
82+
fromStringToRGB(str) {
83+
const ctx = document.createElement("canvas").getContext("2d");
84+
ctx.fillStyle = str;
85+
const hexCode = ctx.fillStyle.replace("#", "");
86+
var aRgbHex = hexCode.match(/.{1,2}/g);
87+
var aRgb = [
88+
parseInt(aRgbHex[0], 16),
89+
parseInt(aRgbHex[1], 16),
90+
parseInt(aRgbHex[2], 16)
91+
];
92+
return aRgb;
93+
}
94+
95+
contrastingColor(color) {
96+
return (this.luma(color) >= 165) ? '#000000' : '#ffffff';
97+
}
98+
99+
luma(color) {
100+
const rgb = this.fromStringToRGB(color);
101+
return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]);
102+
}
103+
104+
roundTo(n, digits = 0) {
105+
var multiplicator = Math.pow(10, digits);
106+
n = n * multiplicator;
107+
return Math.round(n) / multiplicator;
108+
}
109+
110+
111+
}
112+
113+
114+
115+
116+
customElements.define('map-legend', MapLegend);

0 commit comments

Comments
 (0)