@openremote/or-map 1.16.0-snapshot.20260204153145 → 1.16.1
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.
- package/README.md +4 -10
- package/custom-elements-jsx.d.ts +0 -3
- package/custom-elements.json +21 -48
- package/dist/umd/index.bundle.js +111 -116
- package/dist/umd/index.bundle.js.map +1 -1
- package/dist/umd/index.js +107 -112
- package/dist/umd/index.js.map +1 -1
- package/dist/umd/index.orbundle.js +139 -144
- package/dist/umd/index.orbundle.js.map +1 -1
- package/lib/index.d.ts +1 -2
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +8 -8
- package/lib/index.js.map +1 -1
- package/lib/mapwidget.d.ts +10 -10
- package/lib/mapwidget.d.ts.map +1 -1
- package/lib/mapwidget.js +1 -1
- package/lib/mapwidget.js.map +1 -1
- package/lib/style.d.ts.map +1 -1
- package/lib/style.js +6 -11
- package/lib/style.js.map +1 -1
- package/lib/util/index.d.ts +0 -1
- package/lib/util/index.d.ts.map +1 -1
- package/lib/util/index.js +1 -1
- package/lib/util/index.js.map +1 -1
- package/package.json +7 -9
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
[![Linux Build][travis-image]][travis-url]
|
|
4
4
|
[![Test Coverage][coveralls-image]][coveralls-url]
|
|
5
5
|
|
|
6
|
-
Web Component for displaying a
|
|
6
|
+
Web Component for displaying a MapLibre map; either raster or vector (default). This component requires an OpenRemote
|
|
7
7
|
Manager to retrieve map settings and tiles.
|
|
8
8
|
|
|
9
9
|
## Install
|
|
@@ -19,19 +19,13 @@ For a full list of properties, methods and options refer to the TypeDoc generate
|
|
|
19
19
|
<or-map center="5.454250, 51.445990" zoom="5" style="height: 500px; width: 100%;" />
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
-
For a raster map (raster tile serving in the OpenRemote Manager must be properly configured):
|
|
23
|
-
|
|
24
|
-
```$html
|
|
25
|
-
<or-map type="RASTER" center="5.454250, 51.445990" zoom="5" style="height: 500px; width: 100%;" />
|
|
26
|
-
```
|
|
27
|
-
|
|
28
22
|
The center and zoom are optional overrides for the defaults that will be defined in the `mapsettings` loaded from the
|
|
29
23
|
OpenRemote Manager; each realm can have different `mapsettings` with a fallback to the default.
|
|
30
24
|
|
|
31
25
|
Markers can be added via markup as children:
|
|
32
26
|
|
|
33
27
|
```$html
|
|
34
|
-
<or-map id="
|
|
28
|
+
<or-map id="map" center="5.454250, 51.445990" zoom="5" style="height: 500px; width: 100%;">
|
|
35
29
|
<or-map-marker id="demo-marker" lng="5.454250" class="marker" icon="or:logo-plain"></or-map-marker>
|
|
36
30
|
</or-map>
|
|
37
31
|
```
|
|
@@ -39,10 +33,10 @@ Markers can be added via markup as children:
|
|
|
39
33
|
Or programmatically:
|
|
40
34
|
|
|
41
35
|
```$typescript
|
|
42
|
-
const
|
|
36
|
+
const map = document.getElementById("map");
|
|
43
37
|
const assetMarker = document.createElement("or-map-marker-asset");
|
|
44
38
|
assetMarker.setAttribute("asset", apartment1.id!);
|
|
45
|
-
|
|
39
|
+
map.appendChild(assetMarker);
|
|
46
40
|
```
|
|
47
41
|
|
|
48
42
|
There are two types of built in markers:
|
package/custom-elements-jsx.d.ts
CHANGED
|
@@ -83,8 +83,6 @@ type BaseEvents = {
|
|
|
83
83
|
|
|
84
84
|
|
|
85
85
|
export type OrMapProps = {
|
|
86
|
-
/** */
|
|
87
|
-
"type"?: OrMap['type'];
|
|
88
86
|
/** */
|
|
89
87
|
"cluster"?: OrMap['cluster'];
|
|
90
88
|
/** */
|
|
@@ -145,7 +143,6 @@ export type OrMapLegendProps = {
|
|
|
145
143
|
*
|
|
146
144
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
147
145
|
*
|
|
148
|
-
* - `type`: undefined
|
|
149
146
|
* - `cluster`: undefined
|
|
150
147
|
* - `center`: undefined
|
|
151
148
|
* - `zoom`: undefined
|
package/custom-elements.json
CHANGED
|
@@ -145,15 +145,6 @@
|
|
|
145
145
|
"description": "",
|
|
146
146
|
"name": "OrMap",
|
|
147
147
|
"members": [
|
|
148
|
-
{
|
|
149
|
-
"kind": "field",
|
|
150
|
-
"name": "type",
|
|
151
|
-
"type": {
|
|
152
|
-
"text": "MapType"
|
|
153
|
-
},
|
|
154
|
-
"privacy": "public",
|
|
155
|
-
"attribute": "type"
|
|
156
|
-
},
|
|
157
148
|
{
|
|
158
149
|
"kind": "field",
|
|
159
150
|
"name": "cluster",
|
|
@@ -397,13 +388,6 @@
|
|
|
397
388
|
}
|
|
398
389
|
],
|
|
399
390
|
"attributes": [
|
|
400
|
-
{
|
|
401
|
-
"name": "type",
|
|
402
|
-
"type": {
|
|
403
|
-
"text": "MapType"
|
|
404
|
-
},
|
|
405
|
-
"fieldName": "type"
|
|
406
|
-
},
|
|
407
391
|
{
|
|
408
392
|
"name": "cluster",
|
|
409
393
|
"type": {
|
|
@@ -641,29 +625,12 @@
|
|
|
641
625
|
"members": [
|
|
642
626
|
{
|
|
643
627
|
"kind": "field",
|
|
644
|
-
"name": "
|
|
645
|
-
"type": {
|
|
646
|
-
"text": "L.mapbox.Map | undefined"
|
|
647
|
-
},
|
|
648
|
-
"privacy": "protected"
|
|
649
|
-
},
|
|
650
|
-
{
|
|
651
|
-
"kind": "field",
|
|
652
|
-
"name": "_mapGl",
|
|
628
|
+
"name": "_map",
|
|
653
629
|
"type": {
|
|
654
630
|
"text": "MapGL | undefined"
|
|
655
631
|
},
|
|
656
632
|
"privacy": "protected"
|
|
657
633
|
},
|
|
658
|
-
{
|
|
659
|
-
"kind": "field",
|
|
660
|
-
"name": "_type",
|
|
661
|
-
"type": {
|
|
662
|
-
"text": "MapType"
|
|
663
|
-
},
|
|
664
|
-
"privacy": "protected",
|
|
665
|
-
"default": "typeString"
|
|
666
|
-
},
|
|
667
634
|
{
|
|
668
635
|
"kind": "field",
|
|
669
636
|
"name": "_styleParent",
|
|
@@ -693,18 +660,9 @@
|
|
|
693
660
|
},
|
|
694
661
|
{
|
|
695
662
|
"kind": "field",
|
|
696
|
-
"name": "
|
|
663
|
+
"name": "_markers",
|
|
697
664
|
"type": {
|
|
698
|
-
"text": "Map<OrMapMarker,
|
|
699
|
-
},
|
|
700
|
-
"privacy": "protected",
|
|
701
|
-
"default": "new Map()"
|
|
702
|
-
},
|
|
703
|
-
{
|
|
704
|
-
"kind": "field",
|
|
705
|
-
"name": "_markersGl",
|
|
706
|
-
"type": {
|
|
707
|
-
"text": "Map<OrMapMarker, MarkerGL>"
|
|
665
|
+
"text": "Map<OrMapMarker, Marker>"
|
|
708
666
|
},
|
|
709
667
|
"privacy": "protected",
|
|
710
668
|
"default": "new Map()"
|
|
@@ -851,7 +809,7 @@
|
|
|
851
809
|
"kind": "field",
|
|
852
810
|
"name": "_cachedMarkers",
|
|
853
811
|
"type": {
|
|
854
|
-
"text": "Record<string,
|
|
812
|
+
"text": "Record<string, Marker>"
|
|
855
813
|
},
|
|
856
814
|
"privacy": "protected",
|
|
857
815
|
"default": "{}"
|
|
@@ -860,7 +818,7 @@
|
|
|
860
818
|
"kind": "field",
|
|
861
819
|
"name": "_markersOnScreen",
|
|
862
820
|
"type": {
|
|
863
|
-
"text": "Record<string,
|
|
821
|
+
"text": "Record<string, Marker>"
|
|
864
822
|
},
|
|
865
823
|
"privacy": "protected",
|
|
866
824
|
"default": "{}"
|
|
@@ -874,6 +832,21 @@
|
|
|
874
832
|
"privacy": "protected",
|
|
875
833
|
"default": "{}"
|
|
876
834
|
},
|
|
835
|
+
{
|
|
836
|
+
"kind": "field",
|
|
837
|
+
"name": "_onMove",
|
|
838
|
+
"privacy": "protected"
|
|
839
|
+
},
|
|
840
|
+
{
|
|
841
|
+
"kind": "field",
|
|
842
|
+
"name": "_onMoveEnd",
|
|
843
|
+
"privacy": "protected"
|
|
844
|
+
},
|
|
845
|
+
{
|
|
846
|
+
"kind": "field",
|
|
847
|
+
"name": "_onData",
|
|
848
|
+
"privacy": "protected"
|
|
849
|
+
},
|
|
877
850
|
{
|
|
878
851
|
"kind": "method",
|
|
879
852
|
"name": "setCenter",
|
|
@@ -1788,7 +1761,7 @@
|
|
|
1788
1761
|
{
|
|
1789
1762
|
"kind": "variable",
|
|
1790
1763
|
"name": "style",
|
|
1791
|
-
"default": "css` :host { --internal-or-map-width: var(--or-map-width, 100%); --internal-or-map-min-height: var(--or-map-min-height, 300px); --internal-or-map-marker-transform: var(--or-map-marker-transform, translate(-16px, -29px)); --internal-or-map-marker-width: var(--or-map-marker-width, 32px); --internal-or-map-marker-height: var(--or-map-marker-height, 32px); --internal-or-map-marker-color: var(--or-map-marker-color, var(--or-app-color3, ${unsafeCSS(DefaultColor3)})); --internal-or-map-marker-stroke: var(--or-map-marker-stroke, none); --internal-or-map-marker-icon-color: var(--or-map-marker-icon-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)})); --internal-or-map-marker-icon-stroke: var(--or-map-marker-icon-stroke, none); --internal-or-map-marker-icon-width: var(--or-map-marker-icon-width, 16px); --internal-or-map-marker-icon-height: var(--or-map-marker-icon-height, 16px); --internal-or-map-marker-icon-transform: var(--or-map-marker-icon-transform, translate(-50%, -14px)); --internal-or-map-marker-active-transform: var(--or-map-marker-active-transform, translate(-24px, -44px)); --internal-or-map-marker-active-width: var(--or-map-marker-active-width, 48px); --internal-or-map-marker-active-height: var(--or-map-marker-active-height, 48px); --internal-or-map-marker-active-color: var(--or-map-marker-active-color, var(--or-app-color3, ${unsafeCSS(DefaultColor3)})); --internal-or-map-marker-active-stroke: var(--or-map-marker-active-stroke, 2px); --internal-or-map-marker-icon-active-color: var(--or-map-marker-icon-active-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)})); --internal-or-map-marker-icon-active-stroke: var(--or-map-marker-icon-active-stroke, none); --internal-or-map-marker-icon-active-width: var(--or-map-marker-icon-active-width, 24px); --internal-or-map-marker-icon-active-height: var(--or-map-marker-icon-active-height, 24px); --internal-or-map-marker-icon-active-transform: var(--or-map-marker-icon-active-transform, translate(-50%, -20px)); display: flex; overflow: hidden; min-height: var(--internal-or-map-min-height); width: var(--internal-or-map-width); } canvas { outline: none !important; } :host([hidden]) { display: none; } slot { display: none; } #container { position: relative; /* * Setting height/width through percentages doesn't work for WebKit browsers as the parent * element's height property resolves to 0 when it's the :host element of a web components' * shadow-dom. */ flex: 1 1 auto; } #map { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .
|
|
1764
|
+
"default": "css` :host { --internal-or-map-width: var(--or-map-width, 100%); --internal-or-map-min-height: var(--or-map-min-height, 300px); --internal-or-map-marker-transform: var(--or-map-marker-transform, translate(-16px, -29px)); --internal-or-map-marker-width: var(--or-map-marker-width, 32px); --internal-or-map-marker-height: var(--or-map-marker-height, 32px); --internal-or-map-marker-color: var(--or-map-marker-color, var(--or-app-color3, ${unsafeCSS(DefaultColor3)})); --internal-or-map-marker-stroke: var(--or-map-marker-stroke, none); --internal-or-map-marker-icon-color: var(--or-map-marker-icon-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)})); --internal-or-map-marker-icon-stroke: var(--or-map-marker-icon-stroke, none); --internal-or-map-marker-icon-width: var(--or-map-marker-icon-width, 16px); --internal-or-map-marker-icon-height: var(--or-map-marker-icon-height, 16px); --internal-or-map-marker-icon-transform: var(--or-map-marker-icon-transform, translate(-50%, -14px)); --internal-or-map-marker-active-transform: var(--or-map-marker-active-transform, translate(-24px, -44px)); --internal-or-map-marker-active-width: var(--or-map-marker-active-width, 48px); --internal-or-map-marker-active-height: var(--or-map-marker-active-height, 48px); --internal-or-map-marker-active-color: var(--or-map-marker-active-color, var(--or-app-color3, ${unsafeCSS(DefaultColor3)})); --internal-or-map-marker-active-stroke: var(--or-map-marker-active-stroke, 2px); --internal-or-map-marker-icon-active-color: var(--or-map-marker-icon-active-color, var(--or-app-color1, ${unsafeCSS(DefaultColor1)})); --internal-or-map-marker-icon-active-stroke: var(--or-map-marker-icon-active-stroke, none); --internal-or-map-marker-icon-active-width: var(--or-map-marker-icon-active-width, 24px); --internal-or-map-marker-icon-active-height: var(--or-map-marker-icon-active-height, 24px); --internal-or-map-marker-icon-active-transform: var(--or-map-marker-icon-active-transform, translate(-50%, -20px)); display: flex; overflow: hidden; min-height: var(--internal-or-map-min-height); width: var(--internal-or-map-width); } canvas { outline: none !important; } :host([hidden]) { display: none; } slot { display: none; } #container { position: relative; /* * Setting height/width through percentages doesn't work for WebKit browsers as the parent * element's height property resolves to 0 when it's the :host element of a web components' * shadow-dom. */ flex: 1 1 auto; } #map { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .maplibregl-ctrl-geocoder--input { width: calc(100% - 20px) } /* Prevents overflow from elements outside the map component (like menu overlays). See #1844 */ .maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right { z-index: 1; } .maplibregl-marker { pointer-events: none !important; } .or-map-marker.active { z-index: 1; } .marker-container { position: relative; cursor: pointer; transform: var(--internal-or-map-marker-transform); --or-icon-fill: var(--internal-or-map-marker-color); --or-icon-width: var(--internal-or-map-marker-width); --or-icon-height: var(--internal-or-map-marker-height); --or-icon-stroke: var(--internal-or-map-marker-stroke); } .or-map-marker.active .marker-container { transform: var(--internal-or-map-marker-active-transform); --or-icon-fill: var(--internal-or-map-marker-active-color); --or-icon-width: var(--internal-or-map-marker-active-width); --or-icon-height: var(--internal-or-map-marker-active-height); --or-icon-stroke: var(--internal-or-map-marker-active-stroke); } .or-map-marker.interactive .marker-container { pointer-events: all; } .or-map-marker-default.interactive .marker-container { pointer-events: none; --or-icon-pointer-events: visible; } .or-map-marker .marker-icon { position: absolute; left: 50%; top: 50%; z-index: 1000; --or-icon-fill: var(--internal-or-map-marker-icon-color); --or-icon-stroke: var(--internal-or-map-marker-icon-stroke); --or-icon-width: var(--internal-or-map-marker-icon-width); --or-icon-height: var(--internal-or-map-marker-icon-height); transform: var(--internal-or-map-marker-icon-transform); } .or-map-marker.active .marker-icon { transform: var(--internal-or-map-marker-icon-active-transform); --or-icon-fill: var(--internal-or-map-marker-icon-active-color); --or-icon-stroke: var(--internal-or-map-marker-icon-active-stroke); --or-icon-width: var(--internal-or-map-marker-icon-active-width); --or-icon-height: var(--internal-or-map-marker-icon-active-height); } #openremote { position: absolute; bottom: 25px; right: 5px; height: 20px; width: 20px; cursor: pointer; } #openremote img { height: 20px; width: 20px; } @media only screen and (max-width: 640px) { #openremote { bottom: 40px; right: 12px; } } `"
|
|
1792
1765
|
},
|
|
1793
1766
|
{
|
|
1794
1767
|
"kind": "variable",
|