@openremote/or-map 1.8.0-snapshot.20250725074716 → 1.8.0-snapshot.20250725120001

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/@types/maplibre-gl-geocoder.d.ts +2 -2
  2. package/README.md +113 -113
  3. package/dist/umd/index.bundle.js +915 -915
  4. package/dist/umd/index.bundle.js.map +1 -1
  5. package/dist/umd/index.js +915 -915
  6. package/dist/umd/index.js.map +1 -1
  7. package/dist/umd/index.orbundle.js +974 -974
  8. package/dist/umd/index.orbundle.js.map +1 -1
  9. package/lib/index.js +519 -39
  10. package/lib/mapbox-url-utils.js +66 -1
  11. package/lib/mapwidget.js +885 -1
  12. package/lib/markers/or-map-marker-asset.js +178 -1
  13. package/lib/markers/or-map-marker.js +335 -80
  14. package/lib/or-map-asset-card.js +167 -18
  15. package/lib/style.js +242 -235
  16. package/lib/util.js +100 -1
  17. package/package.json +8 -8
package/lib/style.js CHANGED
@@ -1,235 +1,242 @@
1
- import{css as r,unsafeCSS as a}from"lit";import{DefaultColor1 as o,DefaultColor2 as e,DefaultColor3 as t,DefaultColor4 as i,DefaultColor5 as n,DefaultHeaderHeight as m}from"@openremote/core";export const markerColorVar="--internal-or-map-marker-color";export const markerActiveColorVar="--internal-or-map-marker-active-color";export const style=r`
2
- :host {
3
- --internal-or-map-width: var(--or-map-width, 100%);
4
- --internal-or-map-min-height: var(--or-map-min-height, 300px);
5
- --internal-or-map-marker-transform: var(--or-map-marker-transform, translate(-16px, -29px));
6
- --internal-or-map-marker-width: var(--or-map-marker-width, 32px);
7
- --internal-or-map-marker-height: var(--or-map-marker-height, 32px);
8
- --internal-or-map-marker-color: var(--or-map-marker-color, var(--or-app-color4, ${a(i)}));
9
- --internal-or-map-marker-stroke: var(--or-map-marker-stroke, none);
10
- --internal-or-map-marker-icon-color: var(--or-map-marker-icon-color, var(--or-app-color1, ${a(o)}));
11
- --internal-or-map-marker-icon-stroke: var(--or-map-marker-icon-stroke, none);
12
- --internal-or-map-marker-icon-width: var(--or-map-marker-icon-width, 16px);
13
- --internal-or-map-marker-icon-height: var(--or-map-marker-icon-height, 16px);
14
- --internal-or-map-marker-icon-transform: var(--or-map-marker-icon-transform, translate(-50%, -14px));
15
- --internal-or-map-marker-active-transform: var(--or-map-marker-active-transform, translate(-24px, -44px));
16
- --internal-or-map-marker-active-width: var(--or-map-marker-active-width, 48px);
17
- --internal-or-map-marker-active-height: var(--or-map-marker-active-height, 48px);
18
- --internal-or-map-marker-active-color: var(--or-map-marker-active-color, var(--or-app-color4, ${a(i)}));
19
- --internal-or-map-marker-active-stroke: var(--or-map-marker-active-stroke, 2px);
20
- --internal-or-map-marker-icon-active-color: var(--or-map-marker-icon-active-color, var(--or-app-color1, ${a(o)}));
21
- --internal-or-map-marker-icon-active-stroke: var(--or-map-marker-icon-active-stroke, none);
22
- --internal-or-map-marker-icon-active-width: var(--or-map-marker-icon-active-width, 24px);
23
- --internal-or-map-marker-icon-active-height: var(--or-map-marker-icon-active-height, 24px);
24
- --internal-or-map-marker-icon-active-transform: var(--or-map-marker-icon-active-transform, translate(-50%, -20px));
25
- display: block;
26
- overflow: hidden;
27
-
28
- min-height: var(--internal-or-map-min-height);
29
- width: var(--internal-or-map-width);
30
- }
31
-
32
- canvas {
33
- outline: none !important;
34
- }
35
-
36
- :host([hidden]) {
37
- display: none;
38
- }
39
-
40
- slot {
41
- display: none;
42
- }
43
-
44
- #container {
45
- position: relative;
46
- width: 100%;
47
- height: 100%;
48
- }
49
-
50
- #map {
51
- position: absolute;
52
- left: 0;
53
- right: 0;
54
- top: 0;
55
- bottom: 0;
56
- }
57
- .mapboxgl-ctrl-geocoder,
58
- .maplibregl-ctrl-geocoder--input {
59
- width: calc(100% - 20px)
60
- }
61
-
62
- /* Prevents overflow from elements outside the map component (like menu overlays). See #1844 */
63
- .maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right {
64
- z-index: 1;
65
- }
66
- .leaflet-marker-icon, .maplibregl-marker, .mapboxgl-marker {
67
- pointer-events: none !important;
68
- }
69
-
70
- .or-map-marker {
71
- position: absolute; /* This makes mapboxJS behave like mapboxGL */
72
- }
73
-
74
- .or-map-marker.active {
75
- z-index: 1;
76
- }
77
-
78
- .marker-container {
79
- position: relative;
80
- cursor: pointer;
81
- transform: var(--internal-or-map-marker-transform);
82
- --or-icon-fill: var(--internal-or-map-marker-color);
83
- --or-icon-width: var(--internal-or-map-marker-width);
84
- --or-icon-height: var(--internal-or-map-marker-height);
85
- --or-icon-stroke: var(--internal-or-map-marker-stroke);
86
- }
87
-
88
- .or-map-marker.active .marker-container {
89
- transform: var(--internal-or-map-marker-active-transform);
90
- --or-icon-fill: var(--internal-or-map-marker-active-color);
91
- --or-icon-width: var(--internal-or-map-marker-active-width);
92
- --or-icon-height: var(--internal-or-map-marker-active-height);
93
- --or-icon-stroke: var(--internal-or-map-marker-active-stroke);
94
- }
95
-
96
- .or-map-marker.interactive .marker-container {
97
- pointer-events: all;
98
- }
99
-
100
- .or-map-marker-default.interactive .marker-container {
101
- pointer-events: none;
102
- --or-icon-pointer-events: visible;
103
- }
104
-
105
- .or-map-marker .marker-icon {
106
- position: absolute;
107
- left: 50%;
108
- top: 50%;
109
- z-index: 1000;
110
- --or-icon-fill: var(--internal-or-map-marker-icon-color);
111
- --or-icon-stroke: var(--internal-or-map-marker-icon-stroke);
112
- --or-icon-width: var(--internal-or-map-marker-icon-width);
113
- --or-icon-height: var(--internal-or-map-marker-icon-height);
114
- transform: var(--internal-or-map-marker-icon-transform);
115
- }
116
-
117
- .or-map-marker.active .marker-icon {
118
- transform: var(--internal-or-map-marker-icon-active-transform);
119
- --or-icon-fill: var(--internal-or-map-marker-icon-active-color);
120
- --or-icon-stroke: var(--internal-or-map-marker-icon-active-stroke);
121
- --or-icon-width: var(--internal-or-map-marker-icon-active-width);
122
- --or-icon-height: var(--internal-or-map-marker-icon-active-height);
123
- }
124
-
125
- #openremote {
126
- position: absolute;
127
- bottom: 25px;
128
- right: 5px;
129
- height: 20px;
130
- width: 20px;
131
- cursor: pointer;
132
- }
133
-
134
- #openremote img {
135
- height: 20px;
136
- width: 20px;
137
- }
138
-
139
- @media only screen and (max-width: 640px) {
140
- #openremote {
141
- bottom: 40px;
142
- right: 12px;
143
- }
144
- }
145
- `;export const mapAssetCardStyle=r`
146
- :host {
147
- --internal-or-map-asset-card-header-color: var(--or-map-asset-card-header-color, var(--or-app-color4, ${a(i)}));
148
- --internal-or-map-asset-card-header-text-color: var(--or-map-asset-card-header-text-color, var(--or-app-color1, ${a(o)}));
149
- --internal-or-map-asset-card-header-height: var(--or-map-asset-card-header-height, calc(${a(m)} - 10px));
150
- --internal-or-map-asset-card-background-color: var(--or-map-asset-card-background-color, var(--or-app-color1, ${a(o)}));
151
- --internal-or-map-asset-card-background-text-color: var(--or-map-asset-card-background-text-color, var(--or-app-color3, ${a(t)}));
152
- --internal-or-map-asset-card-separator-color: var(--or-map-asset-card-separator-color, var(--or-app-color2, ${a(e)}));
153
-
154
- display: block;
155
- }
156
-
157
- #card-container {
158
- display: flex;
159
- flex-direction: column;
160
- height: 100%;
161
- background-color: var(--internal-or-map-asset-card-background-color);
162
- -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.28);
163
- -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.28);
164
- box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.28);
165
- }
166
-
167
- #header {
168
- height: var(--internal-or-map-asset-card-header-height);
169
- background-color: var(--internal-or-map-asset-card-header-color);
170
- line-height: var(--internal-or-map-asset-card-header-height);
171
- border-bottom: 1px solid ${a(n)};
172
- text-align: center;
173
- color: var(--internal-or-map-asset-card-header-text-color);
174
- --or-icon-fill: var(--internal-or-map-asset-card-header-text-color);
175
- --or-icon-width: 20px;
176
- --or-icon-height: 20px;
177
- z-index: 99999;
178
- }
179
-
180
- #header > or-icon {
181
- margin-right: 5px;
182
- }
183
-
184
- #title {
185
- font-weight: 500;
186
- }
187
-
188
- #attribute-list {
189
- flex: 1;
190
- color: var(--internal-or-map-asset-card-background-text-color);
191
- padding: 10px 20px;
192
- overflow: auto;
193
- font-size: 14px;
194
- }
195
-
196
- ul {
197
- list-style-type: none;
198
- margin: 0;
199
- padding: 0;
200
- }
201
-
202
- li {
203
- display: flex;
204
- line-height: 30px;
205
- }
206
- li.highlighted {
207
- font-weight: bold;
208
- }
209
-
210
- .attribute-name {
211
- flex: 1;
212
- }
213
-
214
- .attribute-value {
215
- overflow: hidden;
216
- padding-left: 20px;
217
- text-align: right;
218
- }
219
-
220
- #footer {
221
- height: var(--internal-or-map-asset-card-header-height);
222
- border-top: 1px solid var(--internal-or-map-asset-card-separator-color);
223
- text-align: right;
224
- padding: 5px 12px;
225
- }
226
-
227
- @media only screen and (min-width: 40em){
228
- #card-container {
229
- height: 400px; /* fallback for IE */
230
- height: max-content;
231
- max-height: calc(100vh - 150px);
232
- min-height: 134px;
233
- }
234
- }
235
- `;
1
+ import { css, unsafeCSS } from "lit";
2
+ import { DefaultColor1, DefaultColor2, DefaultColor3, DefaultColor4, DefaultColor5, DefaultHeaderHeight } from "@openremote/core";
3
+ export const markerColorVar = "--internal-or-map-marker-color";
4
+ export const markerActiveColorVar = "--internal-or-map-marker-active-color";
5
+ // language=CSS
6
+ export const style = css `
7
+ :host {
8
+ --internal-or-map-width: var(--or-map-width, 100%);
9
+ --internal-or-map-min-height: var(--or-map-min-height, 300px);
10
+ --internal-or-map-marker-transform: var(--or-map-marker-transform, translate(-16px, -29px));
11
+ --internal-or-map-marker-width: var(--or-map-marker-width, 32px);
12
+ --internal-or-map-marker-height: var(--or-map-marker-height, 32px);
13
+ --internal-or-map-marker-color: var(--or-map-marker-color, var(--or-app-color4, ${unsafeCSS(DefaultColor4)}));
14
+ --internal-or-map-marker-stroke: var(--or-map-marker-stroke, none);
15
+ --internal-or-map-marker-icon-color: var(--or-map-marker-icon-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)}));
16
+ --internal-or-map-marker-icon-stroke: var(--or-map-marker-icon-stroke, none);
17
+ --internal-or-map-marker-icon-width: var(--or-map-marker-icon-width, 16px);
18
+ --internal-or-map-marker-icon-height: var(--or-map-marker-icon-height, 16px);
19
+ --internal-or-map-marker-icon-transform: var(--or-map-marker-icon-transform, translate(-50%, -14px));
20
+ --internal-or-map-marker-active-transform: var(--or-map-marker-active-transform, translate(-24px, -44px));
21
+ --internal-or-map-marker-active-width: var(--or-map-marker-active-width, 48px);
22
+ --internal-or-map-marker-active-height: var(--or-map-marker-active-height, 48px);
23
+ --internal-or-map-marker-active-color: var(--or-map-marker-active-color, var(--or-app-color4, ${unsafeCSS(DefaultColor4)}));
24
+ --internal-or-map-marker-active-stroke: var(--or-map-marker-active-stroke, 2px);
25
+ --internal-or-map-marker-icon-active-color: var(--or-map-marker-icon-active-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)}));
26
+ --internal-or-map-marker-icon-active-stroke: var(--or-map-marker-icon-active-stroke, none);
27
+ --internal-or-map-marker-icon-active-width: var(--or-map-marker-icon-active-width, 24px);
28
+ --internal-or-map-marker-icon-active-height: var(--or-map-marker-icon-active-height, 24px);
29
+ --internal-or-map-marker-icon-active-transform: var(--or-map-marker-icon-active-transform, translate(-50%, -20px));
30
+ display: block;
31
+ overflow: hidden;
32
+
33
+ min-height: var(--internal-or-map-min-height);
34
+ width: var(--internal-or-map-width);
35
+ }
36
+
37
+ canvas {
38
+ outline: none !important;
39
+ }
40
+
41
+ :host([hidden]) {
42
+ display: none;
43
+ }
44
+
45
+ slot {
46
+ display: none;
47
+ }
48
+
49
+ #container {
50
+ position: relative;
51
+ width: 100%;
52
+ height: 100%;
53
+ }
54
+
55
+ #map {
56
+ position: absolute;
57
+ left: 0;
58
+ right: 0;
59
+ top: 0;
60
+ bottom: 0;
61
+ }
62
+ .mapboxgl-ctrl-geocoder,
63
+ .maplibregl-ctrl-geocoder--input {
64
+ width: calc(100% - 20px)
65
+ }
66
+
67
+ /* Prevents overflow from elements outside the map component (like menu overlays). See #1844 */
68
+ .maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right {
69
+ z-index: 1;
70
+ }
71
+ .leaflet-marker-icon, .maplibregl-marker, .mapboxgl-marker {
72
+ pointer-events: none !important;
73
+ }
74
+
75
+ .or-map-marker {
76
+ position: absolute; /* This makes mapboxJS behave like mapboxGL */
77
+ }
78
+
79
+ .or-map-marker.active {
80
+ z-index: 1;
81
+ }
82
+
83
+ .marker-container {
84
+ position: relative;
85
+ cursor: pointer;
86
+ transform: var(--internal-or-map-marker-transform);
87
+ --or-icon-fill: var(--internal-or-map-marker-color);
88
+ --or-icon-width: var(--internal-or-map-marker-width);
89
+ --or-icon-height: var(--internal-or-map-marker-height);
90
+ --or-icon-stroke: var(--internal-or-map-marker-stroke);
91
+ }
92
+
93
+ .or-map-marker.active .marker-container {
94
+ transform: var(--internal-or-map-marker-active-transform);
95
+ --or-icon-fill: var(--internal-or-map-marker-active-color);
96
+ --or-icon-width: var(--internal-or-map-marker-active-width);
97
+ --or-icon-height: var(--internal-or-map-marker-active-height);
98
+ --or-icon-stroke: var(--internal-or-map-marker-active-stroke);
99
+ }
100
+
101
+ .or-map-marker.interactive .marker-container {
102
+ pointer-events: all;
103
+ }
104
+
105
+ .or-map-marker-default.interactive .marker-container {
106
+ pointer-events: none;
107
+ --or-icon-pointer-events: visible;
108
+ }
109
+
110
+ .or-map-marker .marker-icon {
111
+ position: absolute;
112
+ left: 50%;
113
+ top: 50%;
114
+ z-index: 1000;
115
+ --or-icon-fill: var(--internal-or-map-marker-icon-color);
116
+ --or-icon-stroke: var(--internal-or-map-marker-icon-stroke);
117
+ --or-icon-width: var(--internal-or-map-marker-icon-width);
118
+ --or-icon-height: var(--internal-or-map-marker-icon-height);
119
+ transform: var(--internal-or-map-marker-icon-transform);
120
+ }
121
+
122
+ .or-map-marker.active .marker-icon {
123
+ transform: var(--internal-or-map-marker-icon-active-transform);
124
+ --or-icon-fill: var(--internal-or-map-marker-icon-active-color);
125
+ --or-icon-stroke: var(--internal-or-map-marker-icon-active-stroke);
126
+ --or-icon-width: var(--internal-or-map-marker-icon-active-width);
127
+ --or-icon-height: var(--internal-or-map-marker-icon-active-height);
128
+ }
129
+
130
+ #openremote {
131
+ position: absolute;
132
+ bottom: 25px;
133
+ right: 5px;
134
+ height: 20px;
135
+ width: 20px;
136
+ cursor: pointer;
137
+ }
138
+
139
+ #openremote img {
140
+ height: 20px;
141
+ width: 20px;
142
+ }
143
+
144
+ @media only screen and (max-width: 640px) {
145
+ #openremote {
146
+ bottom: 40px;
147
+ right: 12px;
148
+ }
149
+ }
150
+ `;
151
+ export const mapAssetCardStyle = css `
152
+ :host {
153
+ --internal-or-map-asset-card-header-color: var(--or-map-asset-card-header-color, var(--or-app-color4, ${unsafeCSS(DefaultColor4)}));
154
+ --internal-or-map-asset-card-header-text-color: var(--or-map-asset-card-header-text-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)}));
155
+ --internal-or-map-asset-card-header-height: var(--or-map-asset-card-header-height, calc(${unsafeCSS(DefaultHeaderHeight)} - 10px));
156
+ --internal-or-map-asset-card-background-color: var(--or-map-asset-card-background-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)}));
157
+ --internal-or-map-asset-card-background-text-color: var(--or-map-asset-card-background-text-color, var(--or-app-color3, ${unsafeCSS(DefaultColor3)}));
158
+ --internal-or-map-asset-card-separator-color: var(--or-map-asset-card-separator-color, var(--or-app-color2, ${unsafeCSS(DefaultColor2)}));
159
+
160
+ display: block;
161
+ }
162
+
163
+ #card-container {
164
+ display: flex;
165
+ flex-direction: column;
166
+ height: 100%;
167
+ background-color: var(--internal-or-map-asset-card-background-color);
168
+ -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.28);
169
+ -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.28);
170
+ box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.28);
171
+ }
172
+
173
+ #header {
174
+ height: var(--internal-or-map-asset-card-header-height);
175
+ background-color: var(--internal-or-map-asset-card-header-color);
176
+ line-height: var(--internal-or-map-asset-card-header-height);
177
+ border-bottom: 1px solid ${unsafeCSS(DefaultColor5)};
178
+ text-align: center;
179
+ color: var(--internal-or-map-asset-card-header-text-color);
180
+ --or-icon-fill: var(--internal-or-map-asset-card-header-text-color);
181
+ --or-icon-width: 20px;
182
+ --or-icon-height: 20px;
183
+ z-index: 99999;
184
+ }
185
+
186
+ #header > or-icon {
187
+ margin-right: 5px;
188
+ }
189
+
190
+ #title {
191
+ font-weight: 500;
192
+ }
193
+
194
+ #attribute-list {
195
+ flex: 1;
196
+ color: var(--internal-or-map-asset-card-background-text-color);
197
+ padding: 10px 20px;
198
+ overflow: auto;
199
+ font-size: 14px;
200
+ }
201
+
202
+ ul {
203
+ list-style-type: none;
204
+ margin: 0;
205
+ padding: 0;
206
+ }
207
+
208
+ li {
209
+ display: flex;
210
+ line-height: 30px;
211
+ }
212
+ li.highlighted {
213
+ font-weight: bold;
214
+ }
215
+
216
+ .attribute-name {
217
+ flex: 1;
218
+ }
219
+
220
+ .attribute-value {
221
+ overflow: hidden;
222
+ padding-left: 20px;
223
+ text-align: right;
224
+ }
225
+
226
+ #footer {
227
+ height: var(--internal-or-map-asset-card-header-height);
228
+ border-top: 1px solid var(--internal-or-map-asset-card-separator-color);
229
+ text-align: right;
230
+ padding: 5px 12px;
231
+ }
232
+
233
+ @media only screen and (min-width: 40em){
234
+ #card-container {
235
+ height: 400px; /* fallback for IE */
236
+ height: max-content;
237
+ max-height: calc(100vh - 150px);
238
+ min-height: 134px;
239
+ }
240
+ }
241
+ `;
242
+ //# sourceMappingURL=style.js.map
package/lib/util.js CHANGED
@@ -1 +1,100 @@
1
- import{LngLat as t,LngLatBounds as e}from"maplibre-gl";import{AssetModelUtil as n}from"@openremote/model";export function getLngLat(e){if(e){if(e instanceof t)return e;if(e.lat)return e.lon?{lng:e.lon,lat:e.lat}:{lng:e.lng,lat:e.lat};if(Array.isArray(e))return{lng:e[0],lat:e[1]};if(e.coordinates&&Array.isArray(e.coordinates)&&e.coordinates.length>=2)return getLngLat(e.coordinates);if(e.attributes){let t=e.attributes.location;return t&&t.value?getLngLat(t.value):void 0}if(e.value)return getLngLat(e.value)}}export function getGeoJSONPoint(t){if(t)return Array.isArray(t)?{type:"Point",coordinates:t}:{type:"Point",coordinates:[t.hasOwnProperty("lng")?t.lng:t.lon,t.lat]}}export function getLngLatBounds(t){if(t){if(t instanceof e)return t;if(2===t.length){let n=getLngLat(t[0]),r=getLngLat(t[1]);if(n&&r)return new e(n,r)}if(4===t.length)return new e([t[0],t[1],t[2],t[3]])}}export function getLatLngBounds(t){let e=getLngLatBounds(t);if(e)return L.latLngBounds(e.getNorthEast(),e.getSouthWest())}export function getMarkerIconAndColorFromAssetType(t,e){if(!t)return;let r="string"==typeof t?n.getAssetDescriptor(t):t,o=r&&r.icon?r.icon:"help-circle",i=r&&r.colour?r.colour:void 0;if(e&&e.markerConfig){let t=e.markerConfig,n=e.currentValue;if("range"===t.type&&t.ranges&&"number"==typeof n){let e=t.ranges;i=(e.sort((t,e)=>e.min-t.min).find(t=>n>=t.min)||e.reduce((t,e)=>e.min>t.min?t:e)).colour||void 0}else"boolean"===t.type?i=t[!!n+""]:"string"===t.type&&(i=t[n+""])}return{color:i,icon:o}}
1
+ import { LngLat, LngLatBounds } from "maplibre-gl";
2
+ import { AssetModelUtil } from "@openremote/model";
3
+ export function getLngLat(lngLatLike) {
4
+ if (!lngLatLike) {
5
+ return;
6
+ }
7
+ if (lngLatLike instanceof LngLat) {
8
+ return lngLatLike;
9
+ }
10
+ if (lngLatLike.lat) {
11
+ if (lngLatLike.lon) {
12
+ return { lng: lngLatLike.lon, lat: lngLatLike.lat };
13
+ }
14
+ return { lng: lngLatLike.lng, lat: lngLatLike.lat };
15
+ }
16
+ if (Array.isArray(lngLatLike)) {
17
+ return { lng: lngLatLike[0], lat: lngLatLike[1] };
18
+ }
19
+ if (lngLatLike.coordinates && Array.isArray(lngLatLike.coordinates) && lngLatLike.coordinates.length >= 2) {
20
+ return getLngLat(lngLatLike.coordinates);
21
+ }
22
+ if (lngLatLike.attributes) {
23
+ // This is an asset
24
+ const locationAttribute = lngLatLike.attributes["location" /* WellknownAttributes.LOCATION */];
25
+ if (!locationAttribute) {
26
+ return;
27
+ }
28
+ if (locationAttribute.value) {
29
+ return getLngLat(locationAttribute.value);
30
+ }
31
+ return;
32
+ }
33
+ if (lngLatLike.value) {
34
+ return getLngLat(lngLatLike.value);
35
+ }
36
+ }
37
+ export function getGeoJSONPoint(lngLat) {
38
+ if (!lngLat) {
39
+ return;
40
+ }
41
+ return Array.isArray(lngLat) ? { type: "Point", coordinates: lngLat } : { type: "Point", coordinates: [lngLat.hasOwnProperty("lng") ? lngLat.lng : lngLat.lon, lngLat.lat] };
42
+ }
43
+ export function getLngLatBounds(lngLatBoundsLike) {
44
+ if (lngLatBoundsLike) {
45
+ if (lngLatBoundsLike instanceof LngLatBounds) {
46
+ return lngLatBoundsLike;
47
+ }
48
+ const arr = lngLatBoundsLike;
49
+ if (arr.length === 2) {
50
+ const sw = getLngLat(arr[0]);
51
+ const ne = getLngLat(arr[1]);
52
+ if (sw && ne) {
53
+ return new LngLatBounds(sw, ne);
54
+ }
55
+ }
56
+ if (arr.length === 4) {
57
+ return new LngLatBounds([arr[0], arr[1], arr[2], arr[3]]);
58
+ }
59
+ }
60
+ }
61
+ export function getLatLngBounds(lngLatBoundsLike) {
62
+ const lngLatBounds = getLngLatBounds(lngLatBoundsLike);
63
+ if (lngLatBounds) {
64
+ return L.latLngBounds(lngLatBounds.getNorthEast(), lngLatBounds.getSouthWest());
65
+ }
66
+ }
67
+ export function getMarkerIconAndColorFromAssetType(type, configOverrideSettings) {
68
+ if (!type) {
69
+ return;
70
+ }
71
+ const descriptor = typeof (type) === "string" ? AssetModelUtil.getAssetDescriptor(type) : type;
72
+ const icon = descriptor && descriptor.icon ? descriptor.icon : "help-circle";
73
+ let colour = descriptor && descriptor.colour ? descriptor.colour : undefined;
74
+ if (configOverrideSettings) {
75
+ if (configOverrideSettings.markerConfig) {
76
+ const colourConfig = configOverrideSettings.markerConfig;
77
+ const attrVal = configOverrideSettings.currentValue;
78
+ if (colourConfig.type === "range" && colourConfig.ranges && typeof attrVal === "number") {
79
+ const ranges = colourConfig.ranges;
80
+ // see in what range the attrVal fits and if not, what the setting for the highest range is
81
+ const colourFromRange = ranges.sort((a, b) => b.min - a.min).find(r => attrVal >= r.min) || ranges.reduce((a, b) => (b.min > a.min) ? a : b);
82
+ colour = colourFromRange.colour || undefined;
83
+ }
84
+ else if (colourConfig.type === "boolean") {
85
+ const value = !!attrVal + "";
86
+ colour = colourConfig[value];
87
+ }
88
+ else if (colourConfig.type === "string") {
89
+ const value = attrVal + "";
90
+ colour = colourConfig[value];
91
+ }
92
+ }
93
+ // todo icon override
94
+ }
95
+ return {
96
+ color: colour,
97
+ icon: icon
98
+ };
99
+ }
100
+ //# sourceMappingURL=util.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openremote/or-map",
3
- "version": "1.8.0-snapshot.20250725074716",
3
+ "version": "1.8.0-snapshot.20250725120001",
4
4
  "description": "Displays s vector or raster map",
5
5
  "customElements": "custom-elements.json",
6
6
  "main": "dist/umd/index.bundle.js",
@@ -20,12 +20,12 @@
20
20
  "license": "AGPL-3.0-or-later",
21
21
  "dependencies": {
22
22
  "@maplibre/maplibre-gl-geocoder": "^1.5.0",
23
- "@openremote/core": "1.8.0-snapshot.20250725074716",
24
- "@openremote/model": "1.8.0-snapshot.20250725074716",
25
- "@openremote/or-icon": "1.8.0-snapshot.20250725074716",
26
- "@openremote/or-mwc-components": "1.8.0-snapshot.20250725074716",
27
- "@openremote/or-translate": "1.8.0-snapshot.20250725074716",
28
- "@openremote/rest": "1.8.0-snapshot.20250725074716",
23
+ "@openremote/core": "1.8.0-snapshot.20250725120001",
24
+ "@openremote/model": "1.8.0-snapshot.20250725120001",
25
+ "@openremote/or-icon": "1.8.0-snapshot.20250725120001",
26
+ "@openremote/or-mwc-components": "1.8.0-snapshot.20250725120001",
27
+ "@openremote/or-translate": "1.8.0-snapshot.20250725120001",
28
+ "@openremote/rest": "1.8.0-snapshot.20250725120001",
29
29
  "@polymer/polymer": "^3.3.1",
30
30
  "@types/mapbox": "^1.6.42",
31
31
  "lit": "^2.0.2",
@@ -33,7 +33,7 @@
33
33
  "maplibre-gl": "^4.1.2"
34
34
  },
35
35
  "devDependencies": {
36
- "@openremote/util": "1.8.0-snapshot.20250725074716",
36
+ "@openremote/util": "1.8.0-snapshot.20250725120001",
37
37
  "@types/geojson": "^7946.0.7"
38
38
  },
39
39
  "publishConfig": {