@dynatrace/strato-geo 3.5.2 → 3.7.0

package/esm/map/utils/fetch-base-layer-features.js

@@ -1,7 +1,7 @@
 import { isUndefined } from "lodash-es";
 import { CDN_BASE_PATH } from "../constants.js";
 const cache = /* @__PURE__ */ new Map();
-const MAPS_WITH_DISPUTED_BORDERS = ["IN", "IL", "CN"];
+const MAPS_WITH_DISPUTED_BORDERS = ["IN", "IL", "CN", "MA"];
 const getWorldViewParam = (countryCode) => MAPS_WITH_DISPUTED_BORDERS.includes(countryCode) ? `${countryCode}/` : "";
 const fetchWorldViewFeatures = async (tenantCountryCode) => {
   const worldViewParam = getWorldViewParam(tenantCountryCode);

package/esm/map/utils/fetch-base-layer-features.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/utils/fetch-base-layer-features.ts"],
-  "sourcesContent": ["import type { FeatureCollection } from 'geojson';\nimport { isUndefined } from 'lodash-es';\n\nimport { CDN_BASE_PATH } from '../constants.js';\n\nconst cache = new Map<string, FeatureCollection>();\n\nconst MAPS_WITH_DISPUTED_BORDERS = ['IN', 'IL', 'CN'];\n\nconst getWorldViewParam = (countryCode: string): string =>\n  MAPS_WITH_DISPUTED_BORDERS.includes(countryCode) ? `${countryCode}/` : '';\n\nexport const fetchWorldViewFeatures = async (\n  tenantCountryCode: string,\n): Promise<FeatureCollection> => {\n  const worldViewParam = getWorldViewParam(tenantCountryCode);\n\n  const cacheKey = worldViewParam || 'default';\n\n  let features = cache.get(cacheKey);\n\n  if (isUndefined(features)) {\n    const res = await fetch(\n      `${CDN_BASE_PATH}${worldViewParam}WORLD-COUNTRIES.json`,\n    );\n\n    features = (await res.json()) as FeatureCollection;\n\n    cache.set(cacheKey, features);\n  }\n\n  return features;\n};\n\nexport const fetchCountryFeatures = async (\n  tenantCountryCode: string,\n  regionCode: string,\n): Promise<FeatureCollection> => {\n  const worldViewParam = getWorldViewParam(tenantCountryCode);\n\n  const cacheKey = `${worldViewParam || 'default'}-${regionCode}`;\n\n  let features = cache.get(cacheKey);\n\n  if (isUndefined(features)) {\n    const res = await fetch(\n      `${CDN_BASE_PATH}${worldViewParam}${regionCode}.json`,\n    );\n\n    features = (await res.json()) as FeatureCollection;\n\n    cache.set(cacheKey, features);\n  }\n\n  return features;\n};\n\n/**\n * @internal\n * Only used in unit tests to reset the map features cache\n */\nexport const _clearCache = () => {\n  cache.clear();\n};\n"],
-  "mappings": "AACA,SAAS,mBAAmB;AAE5B,SAAS,qBAAqB;AAE9B,MAAM,QAAQ,oBAAI,IAA+B;AAEjD,MAAM,6BAA6B,CAAC,MAAM,MAAM,IAAI;AAEpD,MAAM,oBAAoB,CAAC,gBACzB,2BAA2B,SAAS,WAAW,IAAI,GAAG,WAAW,MAAM;AAElE,MAAM,yBAAyB,OACpC,sBAC+B;AAC/B,QAAM,iBAAiB,kBAAkB,iBAAiB;AAE1D,QAAM,WAAW,kBAAkB;AAEnC,MAAI,WAAW,MAAM,IAAI,QAAQ;AAEjC,MAAI,YAAY,QAAQ,GAAG;AACzB,UAAM,MAAM,MAAM;AAAA,MAChB,GAAG,aAAa,GAAG,cAAc;AAAA,IACnC;AAEA,eAAY,MAAM,IAAI,KAAK;AAE3B,UAAM,IAAI,UAAU,QAAQ;AAAA,EAC9B;AAEA,SAAO;AACT;AAEO,MAAM,uBAAuB,OAClC,mBACA,eAC+B;AAC/B,QAAM,iBAAiB,kBAAkB,iBAAiB;AAE1D,QAAM,WAAW,GAAG,kBAAkB,SAAS,IAAI,UAAU;AAE7D,MAAI,WAAW,MAAM,IAAI,QAAQ;AAEjC,MAAI,YAAY,QAAQ,GAAG;AACzB,UAAM,MAAM,MAAM;AAAA,MAChB,GAAG,aAAa,GAAG,cAAc,GAAG,UAAU;AAAA,IAChD;AAEA,eAAY,MAAM,IAAI,KAAK;AAE3B,UAAM,IAAI,UAAU,QAAQ;AAAA,EAC9B;AAEA,SAAO;AACT;AAMO,MAAM,cAAc,MAAM;AAC/B,QAAM,MAAM;AACd;",
+  "sourcesContent": ["import type { FeatureCollection } from 'geojson';\nimport { isUndefined } from 'lodash-es';\n\nimport { CDN_BASE_PATH } from '../constants.js';\n\nconst cache = new Map<string, FeatureCollection>();\n\nconst MAPS_WITH_DISPUTED_BORDERS = ['IN', 'IL', 'CN', 'MA'];\n\nconst getWorldViewParam = (countryCode: string): string =>\n  MAPS_WITH_DISPUTED_BORDERS.includes(countryCode) ? `${countryCode}/` : '';\n\nexport const fetchWorldViewFeatures = async (\n  tenantCountryCode: string,\n): Promise<FeatureCollection> => {\n  const worldViewParam = getWorldViewParam(tenantCountryCode);\n\n  const cacheKey = worldViewParam || 'default';\n\n  let features = cache.get(cacheKey);\n\n  if (isUndefined(features)) {\n    const res = await fetch(\n      `${CDN_BASE_PATH}${worldViewParam}WORLD-COUNTRIES.json`,\n    );\n\n    features = (await res.json()) as FeatureCollection;\n\n    cache.set(cacheKey, features);\n  }\n\n  return features;\n};\n\nexport const fetchCountryFeatures = async (\n  tenantCountryCode: string,\n  regionCode: string,\n): Promise<FeatureCollection> => {\n  const worldViewParam = getWorldViewParam(tenantCountryCode);\n\n  const cacheKey = `${worldViewParam || 'default'}-${regionCode}`;\n\n  let features = cache.get(cacheKey);\n\n  if (isUndefined(features)) {\n    const res = await fetch(\n      `${CDN_BASE_PATH}${worldViewParam}${regionCode}.json`,\n    );\n\n    features = (await res.json()) as FeatureCollection;\n\n    cache.set(cacheKey, features);\n  }\n\n  return features;\n};\n\n/**\n * @internal\n * Only used in unit tests to reset the map features cache\n */\nexport const _clearCache = () => {\n  cache.clear();\n};\n"],
+  "mappings": "AACA,SAAS,mBAAmB;AAE5B,SAAS,qBAAqB;AAE9B,MAAM,QAAQ,oBAAI,IAA+B;AAEjD,MAAM,6BAA6B,CAAC,MAAM,MAAM,MAAM,IAAI;AAE1D,MAAM,oBAAoB,CAAC,gBACzB,2BAA2B,SAAS,WAAW,IAAI,GAAG,WAAW,MAAM;AAElE,MAAM,yBAAyB,OACpC,sBAC+B;AAC/B,QAAM,iBAAiB,kBAAkB,iBAAiB;AAE1D,QAAM,WAAW,kBAAkB;AAEnC,MAAI,WAAW,MAAM,IAAI,QAAQ;AAEjC,MAAI,YAAY,QAAQ,GAAG;AACzB,UAAM,MAAM,MAAM;AAAA,MAChB,GAAG,aAAa,GAAG,cAAc;AAAA,IACnC;AAEA,eAAY,MAAM,IAAI,KAAK;AAE3B,UAAM,IAAI,UAAU,QAAQ;AAAA,EAC9B;AAEA,SAAO;AACT;AAEO,MAAM,uBAAuB,OAClC,mBACA,eAC+B;AAC/B,QAAM,iBAAiB,kBAAkB,iBAAiB;AAE1D,QAAM,WAAW,GAAG,kBAAkB,SAAS,IAAI,UAAU;AAE7D,MAAI,WAAW,MAAM,IAAI,QAAQ;AAEjC,MAAI,YAAY,QAAQ,GAAG;AACzB,UAAM,MAAM,MAAM;AAAA,MAChB,GAAG,aAAa,GAAG,cAAc,GAAG,UAAU;AAAA,IAChD;AAEA,eAAY,MAAM,IAAI,KAAK;AAE3B,UAAM,IAAI,UAAU,QAAQ;AAAA,EAC9B;AAEA,SAAO;AACT;AAMO,MAAM,cAAc,MAAM;AAC/B,QAAM,MAAM;AACd;",
   "names": []
 }

package/esm/map/utils/is-browser-firefox.js

@@ -0,0 +1,7 @@
+function isFirefox() {
+  return typeof navigator !== "undefined" && navigator.userAgent.toLowerCase().includes("firefox");
+}
+export {
+  isFirefox
+};
+//# sourceMappingURL=is-browser-firefox.js.map

package/esm/map/utils/is-browser-firefox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/map/utils/is-browser-firefox.ts"],
+  "sourcesContent": ["/**\n * @returns true if is firefox browser, false otherwise\n * @internal\n */\nexport function isFirefox() {\n  return (\n    typeof navigator !== 'undefined' &&\n    navigator.userAgent.toLowerCase().includes('firefox')\n  );\n}\n"],
+  "mappings": "AAIO,SAAS,YAAY;AAC1B,SACE,OAAO,cAAc,eACrB,UAAU,UAAU,YAAY,EAAE,SAAS,SAAS;AAExD;",
+  "names": []
+}

package/esm/map/utils/parse-tooltip-data.js

@@ -16,20 +16,35 @@ const parseFeatureProperties = (featureProperties) => {
   }
   return properties;
 };
-const parseTooltipData = (features) => {
+const resolveSourceId = (feature) => feature.source ?? feature.layer?.source;
+const restoreDataFromLookup = (sourceId, dataIndex, registry) => {
+  if (registry === void 0 || sourceId === void 0 || dataIndex === void 0) {
+    return void 0;
+  }
+  const lookup = registry.get(sourceId);
+  return lookup?.get(dataIndex);
+};
+const parseTooltipData = (features, registry) => {
   const data = [];
   for (const feature of features) {
     const properties = parseFeatureProperties(feature.properties);
-    const [latitude, longitude] = feature.geometry.coordinates;
+    const sourceId = resolveSourceId(feature);
+    const { __dataIndex, ...visibleProperties } = properties;
+    const dataIndex = typeof __dataIndex === "number" ? __dataIndex : void 0;
+    const originalData = restoreDataFromLookup(sourceId, dataIndex, registry);
+    const coordinates = feature.geometry.type === "Point" ? {
+      longitude: feature.geometry.coordinates[0],
+      latitude: feature.geometry.coordinates[1]
+    } : {};
     data.push({
-      ...properties,
-      latitude,
-      longitude
+      ...visibleProperties,
+      ...originalData !== void 0 ? { data: originalData } : {},
+      ...coordinates
     });
   }
   return data;
 };
-const extractDataFromEvent = (event) => {
+const extractDataFromEvent = (event, registry) => {
   if (!event.features?.length) {
     return {};
   }
@@ -38,7 +53,7 @@ const extractDataFromEvent = (event) => {
   const hoveredFeatures = event.features.filter(
     (feature2) => feature2.layer.id === hoveredLayerId
   );
-  const data = parseTooltipData(hoveredFeatures);
+  const data = parseTooltipData(hoveredFeatures, registry);
   return {
     featureId: `${hoveredLayerId}-${feature.id}`,
     hoveredLayerId,

package/esm/map/utils/parse-tooltip-data.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/utils/parse-tooltip-data.ts"],
-  "sourcesContent": ["import type GeoJSON from 'geojson';\nimport type { MapGeoJSONFeature, MapLayerMouseEvent } from 'maplibre-gl';\n\n/**\n * Tries to deserialize an object, if serialized\n * @param serializedObject - string\n */\nconst deserializeObject = (\n  serializedObject: string,\n): string | Record<string, unknown> => {\n  try {\n    return JSON.parse(serializedObject);\n  } catch {\n    return serializedObject;\n  }\n};\n\n/**\n * Deserializes map feature properties that are serialized\n *\n * @param featureProperties - map feature properties\n */\nconst parseFeatureProperties = (featureProperties: Record<string, unknown>) => {\n  const properties: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(featureProperties)) {\n    if (typeof value === 'string') {\n      properties[key] = deserializeObject(value);\n    } else {\n      properties[key] = value;\n    }\n  }\n\n  return properties;\n};\n\n/**\n * Extracts useful map features data for the tooltip\n * @param features - map features\n */\nexport const parseTooltipData = (features: MapGeoJSONFeature[]) => {\n  const data: unknown[] = [];\n\n  for (const feature of features) {\n    const properties = parseFeatureProperties(feature.properties);\n    const [latitude, longitude] = (feature.geometry as GeoJSON.Point)\n      .coordinates;\n\n    data.push({\n      ...properties,\n      latitude,\n      longitude,\n    });\n  }\n\n  return data;\n};\n\nexport const extractDataFromEvent = (event: MapLayerMouseEvent) => {\n  if (!event.features?.length) {\n    return {};\n  }\n  const feature = event.features[0];\n  const hoveredLayerId = feature.layer.id;\n  const hoveredFeatures = event.features.filter(\n    (feature) => feature.layer.id === hoveredLayerId,\n  );\n\n  const data = parseTooltipData(hoveredFeatures);\n\n  return {\n    featureId: `${hoveredLayerId}-${feature.id}`,\n    hoveredLayerId,\n    data,\n  };\n};\n"],
-  "mappings": "AAOA,MAAM,oBAAoB,CACxB,qBACqC;AACrC,MAAI;AACF,WAAO,KAAK,MAAM,gBAAgB;AAAA,EACpC,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAOA,MAAM,yBAAyB,CAAC,sBAA+C;AAC7E,QAAM,aAAsC,CAAC;AAE7C,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,iBAAiB,GAAG;AAC5D,QAAI,OAAO,UAAU,UAAU;AAC7B,iBAAW,GAAG,IAAI,kBAAkB,KAAK;AAAA,IAC3C,OAAO;AACL,iBAAW,GAAG,IAAI;AAAA,IACpB;AAAA,EACF;AAEA,SAAO;AACT;AAMO,MAAM,mBAAmB,CAAC,aAAkC;AACjE,QAAM,OAAkB,CAAC;AAEzB,aAAW,WAAW,UAAU;AAC9B,UAAM,aAAa,uBAAuB,QAAQ,UAAU;AAC5D,UAAM,CAAC,UAAU,SAAS,IAAK,QAAQ,SACpC;AAEH,SAAK,KAAK;AAAA,MACR,GAAG;AAAA,MACH;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO;AACT;AAEO,MAAM,uBAAuB,CAAC,UAA8B;AACjE,MAAI,CAAC,MAAM,UAAU,QAAQ;AAC3B,WAAO,CAAC;AAAA,EACV;AACA,QAAM,UAAU,MAAM,SAAS,CAAC;AAChC,QAAM,iBAAiB,QAAQ,MAAM;AACrC,QAAM,kBAAkB,MAAM,SAAS;AAAA,IACrC,CAACA,aAAYA,SAAQ,MAAM,OAAO;AAAA,EACpC;AAEA,QAAM,OAAO,iBAAiB,eAAe;AAE7C,SAAO;AAAA,IACL,WAAW,GAAG,cAAc,IAAI,QAAQ,EAAE;AAAA,IAC1C;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { MapGeoJSONFeature, MapLayerMouseEvent } from 'maplibre-gl';\n\nimport type { GeoDataLookupRegistry } from '../contexts/geo-data-lookup.context.js';\n\n/**\n * Tries to deserialize an object, if serialized\n * @param serializedObject - string\n */\nconst deserializeObject = (\n  serializedObject: string,\n): string | Record<string, unknown> => {\n  try {\n    return JSON.parse(serializedObject);\n  } catch {\n    return serializedObject;\n  }\n};\n\n/**\n * Deserializes map feature properties that are serialized\n *\n * @param featureProperties - map feature properties\n */\nconst parseFeatureProperties = (featureProperties: Record<string, unknown>) => {\n  const properties: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(featureProperties)) {\n    if (typeof value === 'string') {\n      properties[key] = deserializeObject(value);\n    } else {\n      properties[key] = value;\n    }\n  }\n\n  return properties;\n};\n\n/**\n * Resolves the source ID from a feature, looking at either the\n * `source` property or the `layer.source` property.\n */\nconst resolveSourceId = (feature: MapGeoJSONFeature): string | undefined =>\n  feature.source ?? feature.layer?.source;\n\n/**\n * Restores full user data from the data lookup registry using the\n * `__dataIndex` stored in the feature's properties.\n *\n * Returns the original data object if found, or undefined if not.\n */\nconst restoreDataFromLookup = (\n  sourceId: string | undefined,\n  dataIndex: number | undefined,\n  registry: GeoDataLookupRegistry | undefined,\n): unknown => {\n  if (\n    registry === undefined ||\n    sourceId === undefined ||\n    dataIndex === undefined\n  ) {\n    return undefined;\n  }\n\n  const lookup = registry.get(sourceId);\n  return lookup?.get(dataIndex);\n};\n\n/**\n * Extracts useful map features data for the tooltip.\n *\n * When a data lookup registry is provided, the full original data\n * is restored from the `__dataIndex` stored in GeoJSON properties.\n * This allows GeoJSON features to carry only rendering-relevant\n * fields while still providing full data for tooltips.\n *\n * @param features - map features\n * @param registry - optional data lookup registry for restoring full data\n */\nexport const parseTooltipData = (\n  features: MapGeoJSONFeature[],\n  registry?: GeoDataLookupRegistry,\n) => {\n  const data: unknown[] = [];\n\n  for (const feature of features) {\n    const properties = parseFeatureProperties(feature.properties);\n\n    const sourceId = resolveSourceId(feature);\n    const { __dataIndex, ...visibleProperties } = properties;\n    const dataIndex = typeof __dataIndex === 'number' ? __dataIndex : undefined;\n    const originalData = restoreDataFromLookup(sourceId, dataIndex, registry);\n\n    const coordinates =\n      feature.geometry.type === 'Point'\n        ? {\n            longitude: feature.geometry.coordinates[0],\n            latitude: feature.geometry.coordinates[1],\n          }\n        : {};\n\n    data.push({\n      ...visibleProperties,\n      ...(originalData !== undefined ? { data: originalData } : {}),\n      ...coordinates,\n    });\n  }\n\n  return data;\n};\n\nexport const extractDataFromEvent = (\n  event: MapLayerMouseEvent,\n  registry?: GeoDataLookupRegistry,\n) => {\n  if (!event.features?.length) {\n    return {};\n  }\n  const feature = event.features[0];\n  const hoveredLayerId = feature.layer.id;\n  const hoveredFeatures = event.features.filter(\n    (feature) => feature.layer.id === hoveredLayerId,\n  );\n\n  const data = parseTooltipData(hoveredFeatures, registry);\n\n  return {\n    featureId: `${hoveredLayerId}-${feature.id}`,\n    hoveredLayerId,\n    data,\n  };\n};\n"],
+  "mappings": "AAQA,MAAM,oBAAoB,CACxB,qBACqC;AACrC,MAAI;AACF,WAAO,KAAK,MAAM,gBAAgB;AAAA,EACpC,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAOA,MAAM,yBAAyB,CAAC,sBAA+C;AAC7E,QAAM,aAAsC,CAAC;AAE7C,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,iBAAiB,GAAG;AAC5D,QAAI,OAAO,UAAU,UAAU;AAC7B,iBAAW,GAAG,IAAI,kBAAkB,KAAK;AAAA,IAC3C,OAAO;AACL,iBAAW,GAAG,IAAI;AAAA,IACpB;AAAA,EACF;AAEA,SAAO;AACT;AAMA,MAAM,kBAAkB,CAAC,YACvB,QAAQ,UAAU,QAAQ,OAAO;AAQnC,MAAM,wBAAwB,CAC5B,UACA,WACA,aACY;AACZ,MACE,aAAa,UACb,aAAa,UACb,cAAc,QACd;AACA,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,SAAS,IAAI,QAAQ;AACpC,SAAO,QAAQ,IAAI,SAAS;AAC9B;AAaO,MAAM,mBAAmB,CAC9B,UACA,aACG;AACH,QAAM,OAAkB,CAAC;AAEzB,aAAW,WAAW,UAAU;AAC9B,UAAM,aAAa,uBAAuB,QAAQ,UAAU;AAE5D,UAAM,WAAW,gBAAgB,OAAO;AACxC,UAAM,EAAE,aAAa,GAAG,kBAAkB,IAAI;AAC9C,UAAM,YAAY,OAAO,gBAAgB,WAAW,cAAc;AAClE,UAAM,eAAe,sBAAsB,UAAU,WAAW,QAAQ;AAExE,UAAM,cACJ,QAAQ,SAAS,SAAS,UACtB;AAAA,MACE,WAAW,QAAQ,SAAS,YAAY,CAAC;AAAA,MACzC,UAAU,QAAQ,SAAS,YAAY,CAAC;AAAA,IAC1C,IACA,CAAC;AAEP,SAAK,KAAK;AAAA,MACR,GAAG;AAAA,MACH,GAAI,iBAAiB,SAAY,EAAE,MAAM,aAAa,IAAI,CAAC;AAAA,MAC3D,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AAEA,SAAO;AACT;AAEO,MAAM,uBAAuB,CAClC,OACA,aACG;AACH,MAAI,CAAC,MAAM,UAAU,QAAQ;AAC3B,WAAO,CAAC;AAAA,EACV;AACA,QAAM,UAAU,MAAM,SAAS,CAAC;AAChC,QAAM,iBAAiB,QAAQ,MAAM;AACrC,QAAM,kBAAkB,MAAM,SAAS;AAAA,IACrC,CAACA,aAAYA,SAAQ,MAAM,OAAO;AAAA,EACpC;AAEA,QAAM,OAAO,iBAAiB,iBAAiB,QAAQ;AAEvD,SAAO;AAAA,IACL,WAAW,GAAG,cAAc,IAAI,QAAQ,EAAE;AAAA,IAC1C;AAAA,IACA;AAAA,EACF;AACF;",
   "names": ["feature"]
 }

package/map/MapView.js

@@ -30,6 +30,7 @@ var import_MapContent = require("./components/MapContent.js");
 var import_MapUnavailable = require("./components/MapUnavailable.js");
 var import_constants = require("./constants.js");
 var import_formatter_context = require("./contexts/formatter.context.js");
+var import_geo_data_lookup_context = require("./contexts/geo-data-lookup.context.js");
 var import_layer_ids_context = require("./contexts/layer-ids.context.js");
 var import_map_base_layer_context = require("./contexts/map-base-layer.context.js");
 var import_map_configuration_context = require("./contexts/map-configuration.context.js");
@@ -69,7 +70,8 @@ const _MapView = (0, import_react.forwardRef)(
     const {
       flattenData: layersData,
       categories,
-      legendDomain
+      legendDomain,
+      dataLookupRegistry
     } = (0, import_extract_layers_data.extractLayersData)(parsedChildren, valueAccessors);
     const config = (0, import_iterate_config_slots.iterateConfigSlots)(children, legendDomain);
     const getMaxRange = () => {
@@ -119,43 +121,49 @@ const _MapView = (0, import_react.forwardRef)(
               import_map_truncation_mode_context.MapTruncationModeContext.Provider,
               {
                 value: truncationMode ?? import_constants.DEFAULT_TRUNCATION_MODE,
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_formatter_context.FormatterContext.Provider, { value: formatter, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_map_raw_data_context.MapRawDataContext.Provider, { value: layersData, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._OverlayProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._OverlayTooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_map_store_provider.MapStoreProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_color_scale_provider.ColorScaleProvider,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_formatter_context.FormatterContext.Provider, { value: formatter, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_map_raw_data_context.MapRawDataContext.Provider, { value: layersData, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_geo_data_lookup_context.GeoDataLookupContext.Provider,
                   {
-                    categories,
-                    dataMax,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_layer_color_strategy_provider.LayerColorStrategyProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                      import_charts._ChartLayout,
+                    value: dataLookupRegistry,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._OverlayProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._OverlayTooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_map_store_provider.MapStoreProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_color_scale_provider.ColorScaleProvider,
                       {
-                        ref: chartLayoutRef,
-                        chartHeight,
-                        errorState,
-                        showLoader: loading || isLoading,
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._ChartLayout.Graph, { children: baseFeatureCollection && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                            import_MapContent.MapContent,
-                            {
-                              ref: forwardedRef,
-                              onMapLoad: () => setIsMapLoaded(true),
-                              ...remaining,
-                              children: parsedChildren
-                            }
-                          ) }),
-                          !isLegendHidden && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                            import_charts._ChartLayout.Legend,
-                            {
-                              position: legendPosition,
-                              ratio: legendRatio,
-                              ratioBoundaries: import_constants.DEFAULT_LEGEND_SIZES,
-                              onResize: legendOnRatioChange,
-                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MapLegendRenderer.MapLegendRenderer, {})
-                            }
-                          )
-                        ]
+                        categories,
+                        dataMax,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_layer_color_strategy_provider.LayerColorStrategyProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          import_charts._ChartLayout,
+                          {
+                            ref: chartLayoutRef,
+                            chartHeight,
+                            errorState,
+                            showLoader: loading || isLoading,
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._ChartLayout.Graph, { children: baseFeatureCollection && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                import_MapContent.MapContent,
+                                {
+                                  ref: forwardedRef,
+                                  onMapLoad: () => setIsMapLoaded(true),
+                                  ...remaining,
+                                  children: parsedChildren
+                                }
+                              ) }),
+                              !isLegendHidden && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                import_charts._ChartLayout.Legend,
+                                {
+                                  position: legendPosition,
+                                  ratio: legendRatio,
+                                  ratioBoundaries: import_constants.DEFAULT_LEGEND_SIZES,
+                                  onResize: legendOnRatioChange,
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MapLegendRenderer.MapLegendRenderer, {})
+                                }
+                              )
+                            ]
+                          }
+                        ) })
                       }
-                    ) })
+                    ) }) }) })
                   }
-                ) }) }) }) }) })
+                ) }) })
               }
             ) }) })
           }

package/map/components/BubbleLayer/BubbleCircleLayer.d.ts

@@ -1,5 +1,6 @@
 import type { BehaviorTrackingProps } from '@dynatrace/strato-components/core';
-export declare const BubbleCircleLayer: ({ id, source, ...behavioralTrackingProps }: {
+export declare const BubbleCircleLayer: ({ id, source, beforeId, ...behavioralTrackingProps }: {
     id: string;
     source: string;
+    beforeId?: string;
 } & BehaviorTrackingProps) => import("react/jsx-runtime").JSX.Element;

package/map/components/BubbleLayer/BubbleCircleLayer.js

@@ -29,6 +29,7 @@ var import_constants = require("../../constants.js");
 const BubbleCircleLayer = ({
   id,
   source,
+  beforeId,
   ...behavioralTrackingProps
 }) => {
   const sizeInterpolation = (0, import_use_size_interpolation.useSizeInterpolation)();
@@ -39,6 +40,7 @@ const BubbleCircleLayer = ({
       type: "circle",
       id,
       source,
+      beforeId,
       paint: {
         "circle-color": [
           "case",

package/map/components/BubbleLayer/BubbleLayer.js

@@ -31,6 +31,7 @@ var import_size_interpolation_context = require("./contexts/size-interpolation.c
 var import_build_radius_scale = require("./utils/build-radius-scale.js");
 var import_parse_bubble_data_to_geo_json = require("./utils/parse-bubble-data-to-geo-json.js");
 var import_constants = require("../../constants.js");
+var import_use_layer_before_id = require("../../hooks/use-layer-before-id.js");
 var import_use_layer_coloring_strategy = require("../../hooks/use-layer-coloring-strategy.js");
 var import_use_legend_interaction_highlighting = require("../../hooks/use-legend-interaction-highlighting.js");
 var import_use_legend_interaction_visibility = require("../../hooks/use-legend-interaction-visibility.js");
@@ -58,24 +59,32 @@ const BubbleLayer = (props) => {
   const sourceId = `source-${layerId}`;
   (0, import_use_legend_interaction_highlighting.useLegendInteractionHighlighting)(props, sourceId);
   (0, import_use_legend_interaction_visibility.useLegendInteractionVisibility)(props, layerId);
+  const beforeId = (0, import_use_layer_before_id.useLayerBeforeId)(layerId);
   let radiusScale = (value) => value;
   if ((0, import_bubble_layer.isScaleRadius)(props)) {
     const { radiusRange = [10, 100], radius: radius2, scale = "linear" } = props;
     radiusScale = (0, import_build_radius_scale.buildRadiusScale)(data, radius2, scale, radiusRange);
   }
-  const dataGeoJson = (0, import_parse_bubble_data_to_geo_json.parseBubbleDataToGeoJSON)(
+  const { geoJson: dataGeoJson } = (0, import_parse_bubble_data_to_geo_json.parseBubbleDataToGeoJSON)(
     data,
     bubbleColor,
     radius,
     radiusScale
   );
-  const tooltipTemplate = (0, import_use_tooltip_template.useTooltipTemplate)(children, import_BubbleLayerTooltip2.BubbleLayerTooltip);
+  const {
+    handler: tooltipTemplate,
+    hidden: tooltipHidden,
+    symbolAlignment
+  } = (0, import_use_tooltip_template.useTooltipTemplate)(children, import_BubbleLayerTooltip2.BubbleLayerTooltip, {
+    extractProps: true
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_size_interpolation_context.SizeInterpolationContext.Provider, { value: sizeInterpolation, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_maplibre.Source, { id: sourceId, type: "geojson", data: dataGeoJson, generateId: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_BubbleCircleLayer.BubbleCircleLayer,
       {
         id: layerId,
         source: sourceId,
+        beforeId,
         ...behavioralTrackingProps
       }
     ),
@@ -83,7 +92,9 @@ const BubbleLayer = (props) => {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TooltipWrapper.TooltipWrapper, { layerId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_BubbleLayerTooltip.BubbleLayerTooltip,
       {
-        tooltipTemplate: (0, import_tooltip_type_guards.isBubbleTooltipTemplate)(tooltipTemplate) ? tooltipTemplate : void 0
+        tooltipTemplate: (0, import_tooltip_type_guards.isBubbleTooltipTemplate)(tooltipTemplate) ? tooltipTemplate : void 0,
+        hidden: tooltipHidden,
+        symbolAlignment
       }
     ) })
   ] }) });

package/map/components/BubbleLayer/BubbleLayerTooltip.d.ts

@@ -1,6 +1,8 @@
 import type { BubbleLayerTooltipHandler } from '../../types/tooltip.js';
 export interface BubbleLayerTooltipProps {
     tooltipTemplate?: BubbleLayerTooltipHandler;
+    hidden?: boolean;
+    symbolAlignment?: 'left' | 'right';
 }
 export declare const BubbleLayerTooltip: {
     (props: BubbleLayerTooltipProps): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;

package/map/components/BubbleLayer/BubbleLayerTooltip.js

@@ -27,9 +27,9 @@ var import_charts = require("@dynatrace/strato-components/charts");
 var import_use_geo_layer_tooltip = require("../../hooks/use-geo-layer-tooltip.js");
 var import_tooltip_type_guards = require("../../utils/tooltip-type-guards.js");
 const BubbleLayerTooltip = (props) => {
-  const { tooltipTemplate } = props;
+  const { tooltipTemplate, hidden, symbolAlignment } = props;
   const { data, inBounds, position } = (0, import_use_geo_layer_tooltip.useGeoLayerTooltip)("geoBubble");
-  if (!tooltipTemplate || !inBounds || !position) {
+  if (hidden || !tooltipTemplate || !inBounds || !position) {
     return null;
   }
   if (!data || !data[0]) {
@@ -55,6 +55,12 @@ const BubbleLayerTooltip = (props) => {
   if ((0, import_tooltip_type_guards.isDefaultTooltipHandler)(tooltipTemplate)) {
     return template;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._OverlayTooltip, { legacyTemplate: template });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_charts._OverlayTooltip,
+    {
+      legacyTemplate: template,
+      symbolAlignment
+    }
+  );
 };
 BubbleLayerTooltip["displayName"] = "BubbleLayerTooltip";

package/map/components/BubbleLayer/utils/parse-bubble-data-to-geo-json.d.ts

@@ -2,5 +2,7 @@ import type { ScaleLinear, ScaleLogarithmic } from 'd3-scale';
 import type GeoJSON from 'geojson';
 import type { Location } from '../../../types/location.js';
 type RadiusScale = ScaleLinear<number, number> | ScaleLogarithmic<number, number> | ((value: number) => number);
-export declare const parseBubbleDataToGeoJSON: <T extends Location>(data: T[], color: string | ((item: T) => string), radius: number | ((item: T) => number), scale: RadiusScale) => GeoJSON.FeatureCollection;
+export declare const parseBubbleDataToGeoJSON: <T extends Location>(data: T[], color: string | ((item: T) => string), radius: number | ((item: T) => number), scale: RadiusScale) => {
+    geoJson: GeoJSON.FeatureCollection;
+};
 export {};

package/map/components/BubbleLayer/utils/parse-bubble-data-to-geo-json.js

@@ -26,18 +26,17 @@ var import_define_radius = require("./define-radius.js");
 var import_calculate_hovered_color = require("../../../utils/calculate-hovered-color.js");
 var import_define_color = require("../../../utils/define-color.js");
 const parseBubbleDataToGeoJSON = (data, color, radius, scale) => {
-  return {
+  const geoJson = {
     type: "FeatureCollection",
-    features: data.map((feature) => {
-      const { longitude, latitude, ...properties } = feature;
+    features: data.map((feature, index) => {
+      const { longitude, latitude } = feature;
       const canvasColor = (0, import_charts._getCanvasColor)((0, import_define_color.defineColor)(color, feature));
       const hoveredColor = (0, import_calculate_hovered_color.calculateHoveredColor)(canvasColor);
       const scaledRadius = scale((0, import_define_radius.defineRadius)(radius, feature));
       return {
         type: "Feature",
         properties: {
-          data: feature,
-          ...properties,
+          __dataIndex: index,
           __color: canvasColor,
           __hoveredColor: hoveredColor,
           __radius: scaledRadius,
@@ -47,4 +46,5 @@ const parseBubbleDataToGeoJSON = (data, color, radius, scale) => {
       };
     })
   };
+  return { geoJson };
 };

package/map/components/ChoroplethLayer/ChoroplethLayer.js

@@ -28,6 +28,7 @@ var import_ChoroplethLayerTooltip = require("./ChoroplethLayerTooltip.js");
 var import_ChoroplethOutlineLayer = require("./ChoroplethOutlineLayer.js");
 var import_parse_region_data_to_geo_json = require("./utils/parse-region-data-to-geo-json.js");
 var import_constants = require("../../constants.js");
+var import_use_layer_before_id = require("../../hooks/use-layer-before-id.js");
 var import_use_layer_coloring_strategy = require("../../hooks/use-layer-coloring-strategy.js");
 var import_use_legend_interaction_highlighting = require("../../hooks/use-legend-interaction-highlighting.js");
 var import_use_legend_interaction_visibility = require("../../hooks/use-legend-interaction-visibility.js");
@@ -50,11 +51,15 @@ const ChoroplethLayer = (props) => {
   const sourceId = layerId.replace("layer", "source");
   (0, import_use_legend_interaction_highlighting.useLegendInteractionHighlighting)(props, sourceId);
   (0, import_use_legend_interaction_visibility.useLegendInteractionVisibility)(props, layerId);
-  const dataGeoJSON = mapSource && (0, import_parse_region_data_to_geo_json.parseRegionDataToGeoJSON)(mapSource, data, regionAccessor, choroplethColor);
-  const tooltipTemplate = (0, import_use_tooltip_template.useTooltipTemplate)(
-    children,
-    import_ChoroplethLayerTooltip2.ChoroplethLayerTooltip
-  );
+  const beforeId = (0, import_use_layer_before_id.useLayerBeforeId)(layerId);
+  const dataGeoJSON = mapSource ? (0, import_parse_region_data_to_geo_json.parseRegionDataToGeoJSON)(mapSource, data, regionAccessor, choroplethColor).geoJson : void 0;
+  const {
+    handler: tooltipTemplate,
+    hidden: tooltipHidden,
+    symbolAlignment
+  } = (0, import_use_tooltip_template.useTooltipTemplate)(children, import_ChoroplethLayerTooltip2.ChoroplethLayerTooltip, {
+    extractProps: true
+  });
   return dataGeoJSON && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_maplibre.Source, { id: sourceId, type: "geojson", data: dataGeoJSON, generateId: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react_maplibre.Layer,
@@ -62,6 +67,7 @@ const ChoroplethLayer = (props) => {
         id: layerId,
         source: sourceId,
         type: "fill",
+        beforeId,
         paint: {
           "fill-color": ["get", "__color"],
           "fill-opacity": [
@@ -82,11 +88,13 @@ const ChoroplethLayer = (props) => {
         ...behavioralTrackingProps
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChoroplethOutlineLayer.ChoroplethOutlineLayer, { sourceId }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChoroplethOutlineLayer.ChoroplethOutlineLayer, { sourceId, beforeId }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TooltipWrapper.TooltipWrapper, { layerId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_ChoroplethLayerTooltip.ChoroplethLayerTooltip,
       {
-        tooltipTemplate: (0, import_tooltip_type_guards.isChoroplethTooltipTemplate)(tooltipTemplate) ? tooltipTemplate : void 0
+        tooltipTemplate: (0, import_tooltip_type_guards.isChoroplethTooltipTemplate)(tooltipTemplate) ? tooltipTemplate : void 0,
+        hidden: tooltipHidden,
+        symbolAlignment
       }
     ) })
   ] });

package/map/components/ChoroplethLayer/ChoroplethLayerTooltip.d.ts

@@ -1,6 +1,8 @@
 import type { ChoroplethLayerTooltipHandler } from '../../types/tooltip.js';
 export interface ChoroplethLayerTooltipProps {
     tooltipTemplate?: ChoroplethLayerTooltipHandler;
+    hidden?: boolean;
+    symbolAlignment?: 'left' | 'right';
 }
 export declare const ChoroplethLayerTooltip: {
     (props: ChoroplethLayerTooltipProps): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;

package/map/components/ChoroplethLayer/ChoroplethLayerTooltip.js

@@ -26,9 +26,9 @@ var import_charts = require("@dynatrace/strato-components/charts");
 var import_use_geo_layer_tooltip = require("../../hooks/use-geo-layer-tooltip.js");
 var import_tooltip_type_guards = require("../../utils/tooltip-type-guards.js");
 const ChoroplethLayerTooltip = (props) => {
-  const { tooltipTemplate } = props;
+  const { tooltipTemplate, hidden, symbolAlignment } = props;
   const { data, inBounds, position } = (0, import_use_geo_layer_tooltip.useGeoLayerTooltip)("geoChoropleth");
-  if (!tooltipTemplate || !inBounds || !position) {
+  if (hidden || !tooltipTemplate || !inBounds || !position) {
     return null;
   }
   if (!data || !data[0]) {
@@ -47,6 +47,12 @@ const ChoroplethLayerTooltip = (props) => {
   if ((0, import_tooltip_type_guards.isDefaultTooltipHandler)(tooltipTemplate)) {
     return template;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._OverlayTooltip, { legacyTemplate: template });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_charts._OverlayTooltip,
+    {
+      legacyTemplate: template,
+      symbolAlignment
+    }
+  );
 };
 ChoroplethLayerTooltip["displayName"] = "ChoroplethLayerTooltip";

package/map/components/ChoroplethLayer/ChoroplethOutlineLayer.d.ts

@@ -1,3 +1,4 @@
 export declare const ChoroplethOutlineLayer: (props: {
     sourceId: string;
+    beforeId?: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/map/components/ChoroplethLayer/ChoroplethOutlineLayer.js

@@ -26,7 +26,7 @@ var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_charts = require("@dynatrace/strato-components/charts");
 var import_constants = require("../../constants.js");
 const ChoroplethOutlineLayer = (props) => {
-  const { sourceId } = props;
+  const { sourceId, beforeId } = props;
   const activeColor = (0, import_charts._getCanvasColor)(import_constants.ACTIVE_COLOR);
   const defaultBoundariesBorderColor = (0, import_charts._getCanvasColor)(
     import_constants.DEFAULT_BOUNDARIES_BORDER_COLOR
@@ -38,6 +38,7 @@ const ChoroplethOutlineLayer = (props) => {
       {
         source: sourceId,
         type: "line",
+        beforeId,
         paint: {
           "line-color": [
             "case",
@@ -65,6 +66,7 @@ const ChoroplethOutlineLayer = (props) => {
       {
         source: sourceId,
         type: "line",
+        beforeId,
         paint: {
           "line-color": [
             "case",

package/map/components/ChoroplethLayer/utils/parse-region-data-to-geo-json.d.ts

@@ -1,2 +1,4 @@
 import type GeoJSON from 'geojson';
-export declare const parseRegionDataToGeoJSON: <T extends Record<string, unknown>>(mapSource: GeoJSON.FeatureCollection, data: T[], regionAccessor: string | ((i: T) => string), color: string | ((i: T) => string)) => GeoJSON.FeatureCollection;
+export declare const parseRegionDataToGeoJSON: <T extends Record<string, unknown>>(mapSource: GeoJSON.FeatureCollection, data: T[], regionAccessor: string | ((i: T) => string), color: string | ((i: T) => string)) => {
+    geoJson: GeoJSON.FeatureCollection;
+};

package/map/components/ChoroplethLayer/utils/parse-region-data-to-geo-json.js

@@ -26,7 +26,7 @@ var import_core = require("@dynatrace/strato-components/core");
 var import_calculate_hovered_color = require("../../../utils/calculate-hovered-color.js");
 var import_define_color = require("../../../utils/define-color.js");
 const parseRegionDataToGeoJSON = (mapSource, data, regionAccessor, color) => {
-  const features = data.reduce((features2, item) => {
+  const features = data.reduce((features2, item, index) => {
     let id = "";
     if (typeof regionAccessor === "function") {
       id = regionAccessor(item);
@@ -44,8 +44,7 @@ const parseRegionDataToGeoJSON = (mapSource, data, regionAccessor, color) => {
         properties: {
           name,
           region_type,
-          data: item,
-          ...item,
+          __dataIndex: index,
           __color: canvasColor,
           __hoveredColor: hoveredColor
         }
@@ -55,7 +54,9 @@ const parseRegionDataToGeoJSON = (mapSource, data, regionAccessor, color) => {
     return features2;
   }, []);
   return {
-    type: "FeatureCollection",
-    features
+    geoJson: {
+      type: "FeatureCollection",
+      features
+    }
   };
 };

package/map/components/ConnectionLayer/ConnectionLayer.js

@@ -56,16 +56,19 @@ const ConnectionLayer = (props) => {
   const sourceId = `source-${layerId}`;
   (0, import_use_legend_interaction_highlighting.useLegendInteractionHighlighting)(props, sourceId);
   (0, import_use_legend_interaction_visibility.useLegendInteractionVisibility)(props, layerId);
-  const geoJsonData = (0, import_parse_connection_data_to_geo_json.parseConnectionDataToGeoJSON)(
+  const { geoJson: geoJsonData } = (0, import_parse_connection_data_to_geo_json.parseConnectionDataToGeoJSON)(
     data,
     thickness,
     connectionColor,
     curve
   );
-  const tooltipTemplate = (0, import_use_tooltip_template.useTooltipTemplate)(
-    children,
-    import_ConnectionLayerTooltip2.ConnectionLayerTooltip
-  );
+  const {
+    handler: tooltipTemplate,
+    hidden: tooltipHidden,
+    symbolAlignment
+  } = (0, import_use_tooltip_template.useTooltipTemplate)(children, import_ConnectionLayerTooltip2.ConnectionLayerTooltip, {
+    extractProps: true
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_ConnectionLayerLine.ConnectionLayerLine,
@@ -78,7 +81,9 @@ const ConnectionLayer = (props) => {
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TooltipWrapper.TooltipWrapper, { layerId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_ConnectionLayerTooltip.ConnectionLayerTooltip,
           {
-            tooltipTemplate: (0, import_tooltip_type_guards.isConnectionTooltipTemplate)(tooltipTemplate) ? tooltipTemplate : void 0
+            tooltipTemplate: (0, import_tooltip_type_guards.isConnectionTooltipTemplate)(tooltipTemplate) ? tooltipTemplate : void 0,
+            hidden: tooltipHidden,
+            symbolAlignment
           }
         ) })
       }

package/map/components/ConnectionLayer/ConnectionLayerLine.js

@@ -25,15 +25,18 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_core = require("@dynatrace/strato-components/core");
 var import_constants = require("../../constants.js");
+var import_use_layer_before_id = require("../../hooks/use-layer-before-id.js");
 const ConnectionLayerLine = (props) => {
   const { geoJsonData, layerId, sourceId, line, children, ...restProps } = props;
   const [behavioralTrackingProps] = (0, import_core._useBehavioralTrackingProps)(restProps);
+  const beforeId = (0, import_use_layer_before_id.useLayerBeforeId)(layerId);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_maplibre.Source, { id: sourceId, type: "geojson", data: geoJsonData, promoteId: "id", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react_maplibre.Layer,
       {
         type: "line",
         id: layerId,
+        beforeId,
         layout: {
           "line-cap": import_constants.DEFAULT_LINE_CAP,
           "line-join": import_constants.DEFAULT_LINE_JOIN

package/map/components/ConnectionLayer/ConnectionLayerTooltip.d.ts

@@ -1,6 +1,8 @@
 import type { ConnectionLayerTooltipHandler } from '../../types/tooltip.js';
 export interface ConnectionLayerTooltipProps {
     tooltipTemplate?: ConnectionLayerTooltipHandler;
+    hidden?: boolean;
+    symbolAlignment?: 'left' | 'right';
 }
 export declare const ConnectionLayerTooltip: {
     (props: ConnectionLayerTooltipProps): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;