@openremote/or-map 1.6.0-snapshot.20250514060942 → 1.6.0-snapshot.20250514095754

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.
@@ -1581,7 +1581,7 @@
1581
1581
  {
1582
1582
  "kind": "variable",
1583
1583
  "name": "style",
1584
- "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-color4, ${unsafeCSS(DefaultColor4)})); --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-color4, ${unsafeCSS(DefaultColor4)})); --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: block; 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; width: 100%; height: 100%; } #map { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .mapboxgl-ctrl-geocoder, .maplibregl-ctrl-geocoder--input { width: calc(100% - 20px) } .leaflet-marker-icon, .maplibregl-marker, .mapboxgl-marker { pointer-events: none !important; } .or-map-marker { position: absolute; /* This makes mapboxJS behave like mapboxGL */ } .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; } } `"
1584
+ "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-color4, ${unsafeCSS(DefaultColor4)})); --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-color4, ${unsafeCSS(DefaultColor4)})); --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: block; 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; width: 100%; height: 100%; } #map { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .mapboxgl-ctrl-geocoder, .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; } .leaflet-marker-icon, .maplibregl-marker, .mapboxgl-marker { pointer-events: none !important; } .or-map-marker { position: absolute; /* This makes mapboxJS behave like mapboxGL */ } .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; } } `"
1585
1585
  },
1586
1586
  {
1587
1587
  "kind": "variable",
@@ -59,6 +59,11 @@
59
59
  .maplibregl-ctrl-geocoder--input {
60
60
  width: calc(100% - 20px)
61
61
  }
62
+
63
+ /* Prevents overflow from elements outside the map component (like menu overlays). See #1844 */
64
+ .maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right {
65
+ z-index: 1;
66
+ }
62
67
  .leaflet-marker-icon, .maplibregl-marker, .mapboxgl-marker {
63
68
  pointer-events: none !important;
64
69
  }
package/dist/umd/index.js CHANGED
@@ -59,6 +59,11 @@
59
59
  .maplibregl-ctrl-geocoder--input {
60
60
  width: calc(100% - 20px)
61
61
  }
62
+
63
+ /* Prevents overflow from elements outside the map component (like menu overlays). See #1844 */
64
+ .maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right {
65
+ z-index: 1;
66
+ }
62
67
  .leaflet-marker-icon, .maplibregl-marker, .mapboxgl-marker {
63
68
  pointer-events: none !important;
64
69
  }