@siemens/maps-ng 49.16.0 → 51.0.0-rc.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@siemens/maps-ng",
   "description": "Element maps library based on OpenLayers.",
-  "version": "49.16.0",
+  "version": "51.0.0-rc.10",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -12,17 +12,19 @@
     "email": "info@siemens.com"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "directory": "../../dist/@siemens/maps-ng"
   },
   "homepage": "https://github.com/siemens/element",
   "bugs": "https://github.com/siemens/element/issues/new",
   "type": "module",
   "peerDependencies": {
-    "@angular/common": "21 - 22",
-    "@angular/core": "21 - 22",
-    "@siemens/element-translate-ng": "49.16.0",
-    "@siemens/element-theme": "49.16.0",
-    "ol": "~10.6.0 || ~10.7.0 || ~10.8.0 || ~10.9.0",
+    "@angular/common": "22",
+    "@angular/core": "22",
+    "@siemens/element-theme": "51.0.0-rc.10",
+    "@siemens/element-translate-ng": "51.0.0-rc.10",
+    "@siemens/map-styles": "51.0.0-rc.10",
+    "ol": "~10.6.0 || ~10.7.0 || ~10.8.0 || ~10.9.0 || ~10.10.0",
     "ol-ext": "^4.0.24",
     "ol-mapbox-style": "^13.1.0"
   },
@@ -47,5 +49,6 @@
   "sideEffects": false,
   "dependencies": {
     "tslib": "^2.3.0"
-  }
+  },
+  "readme": "# Element Maps\n\nElement maps library based on OpenLayers.\n\n## Usage\n\nTo use this library in other projects, add it to your dependencies using:\n\n```sh\nnpm install --save @siemens/maps-ng\n\n# Also install the needed peer dependencies\nnpm install --save ol@~10.2.0 ol-ext ol-mapbox-style\n```\n\nAdd library assets and CommonJs dependencies in your _angular.json_ under the build options\n\n```json\n{\n  \"architect\": {\n    \"build\": {\n      \"options\": {\n        \"assets\": [\n          // ... other assets\n          {\n            \"glob\": \"**/*\",\n            \"input\": \"./node_modules/@siemens/maps-ng/assets\",\n            \"output\": \"/assets/\"\n          }\n        ],\n        // ... other options\n        \"allowedCommonJsDependencies\": [\n          \"xml-utils/find-tags-by-name.js\",\n          \"xml-utils/get-attribute.js\",\n          \"web-worker\",\n          \"pbf\",\n          \"earcut\",\n          \"rbush\"\n        ]\n      }\n    }\n  }\n}\n```\n\nImport openlayers styles into your main global stylesheet\n\n```scss\n@use 'ol/ol.css';\n```\n\nAdd the library to the list of _imports_ in your Angular _AppModule_ like this:\n\n```ts\n// [...]\n\n// Import this library and required dependencies\nimport { SiMapModule } from '@siemens/maps-ng';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n\n    // Import this library\n    SiMapModule\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\nOr simply _import_ the `SiMapComponent` in your standalone component.\n\n```ts\n@Component({\n  selector: 'app-map',\n  imports: [SiMapComponent],\n  templateUrl: './sample.component.html',\n  host: { class: 'h-100' }\n})\nexport class SampleComponent {}\n```\n\nAnd lastly, add the map to your template and add a MapTiler key.\nNote, the map has not height per default and comes with a `block`\ndisplay. Set the height or put it in a related container.\n\nThe demo key works on localhost. It will be renewed regularly\nto avoid missuses of the key. Contact the SiMPL team to receive\na key for your SI BP product.\n\n```html\n<si-map [maptilerKey]=\"'REPLACE_WITH_YOUR_MAPTILER_KEY'\" style=\"height: 500px;\"></si-map>\n```\n\n### Testing\n\nDo **not** load map data (tiles) from maptiler in automated tests, to reduce the number of\npayed requests to a minimum. E.g. during testing, you want to test your functions and not the\ntile data provided by maptiler.\n\n- **Unit tests:** Do simply **not** provide an API key during\n- **Playwright tests:** Stub the `tiles.json` request (and some others) using [page.route(...)](playwright/e2e/simpl-element/maps/static.spec.ts).\n\n### Running Unit Tests\n\nRun `pnpm run maps:test` to perform the unit tests via [Vitest](https://main.vitest.dev/).\n\n## License\n\nThe following applies for code and documentation of the git repository,\nunless explicitly mentioned.\n\nCopyright (c) Siemens 2016 - 2026\n\nMIT, see [LICENSE](LICENSE).\n"
 }

package/template-i18n.json

@@ -1,7 +1,7 @@
 {
   "SI_MAPS.ATTRIBUTIONS_BUTTON": "Attributions",
-  "SI_MAPS.TOOLTIP_MORE_TEXT": "and {{length}} more...",
+  "SI_MAPS.TOOLTIP_MORE_TEXT": "+ {{length}} locations",
   "SI_MAPS.ZOOM_IN_BUTTON": "Zoom in",
   "SI_MAPS.ZOOM_OUT_BUTTON": "Zoom out",
-  "SI_MAPS.ZOOM_TO_DEFAULT_BUTTON": "Zoom to default view"
+  "SI_MAPS.ZOOM_TO_DEFAULT_BUTTON": "Reset zoom"
 }

package/types/siemens-maps-ng.d.ts

@@ -1,6 +1,6 @@
-import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
 import * as _angular_core from '@angular/core';
-import { ElementRef, Type, ViewContainerRef, TemplateRef, AfterViewInit, OnChanges, OnDestroy, AfterViewChecked, SimpleChanges } from '@angular/core';
+import { Type, ViewContainerRef, TemplateRef, AfterViewInit, OnChanges, OnDestroy, AfterViewChecked, ElementRef, SimpleChanges } from '@angular/core';
+import * as _siemens_element_translate_ng_translate from '@siemens/element-translate-ng/translate';
 import Map from 'ol/Map';
 import Control from 'ol/control/Control';
 import Overlay, { Positioning } from 'ol/Overlay';
@@ -18,13 +18,12 @@ import Select, { SelectEvent } from 'ol/interaction/Select';
 export * from '@siemens/maps-ng/translate';
 
 declare class SiMapTooltipComponent {
-    protected readonly content: _angular_core.Signal<ElementRef<any>>;
     /**
      * Cutoff text for tooltips, when cluster combines more than 4 features
      *
      * @defaultValue
      * ```
-     * t(() =>$localize`:@@SI_MAPS.TOOLTIP_MORE_TEXT:and {{length}} more...`)
+     * t(() =>$localize`:@@SI_MAPS.TOOLTIP_MORE_TEXT:+ {{length}} locations`)
      * ```
      */
     readonly moreText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
@@ -36,6 +35,7 @@ declare class SiMapTooltipComponent {
     readonly maxLabelLength: _angular_core.InputSignal<number>;
     get nativeElement(): HTMLElement;
     protected readonly hiddenEntries: _angular_core.WritableSignal<number>;
+    protected readonly tooltipLabels: _angular_core.WritableSignal<string[]>;
     private readonly elementRef;
     /**
      * Method sets tooltip content. If parameter is of type
@@ -45,8 +45,7 @@ declare class SiMapTooltipComponent {
      * @param labels - array of strings or string itself
      */
     setTooltip(labels: string[] | string): void;
-    private getLabelSnippet;
-    private setContent;
+    private getLabelText;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiMapTooltipComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiMapTooltipComponent, "si-map-tooltip", never, { "moreText": { "alias": "moreText"; "required": false; "isSignal": true; }; "maxLabelLength": { "alias": "maxLabelLength"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -167,8 +166,6 @@ declare const DEFAULT_FEATURE_CLICK_ZOOM = 15;
 declare const DEFAULT_CLUSTER_CLICK_ZOOM = 15;
 declare const DEFAULT_GLOBAL_ZOOM = 5;
 declare const DEFAULT_CLUSTER_DISTANCE = 40;
-/** @deprecated will be removed in favour of individual inputs. */
-declare const DEFAULT_FIT_PADDING: number[];
 /** Updates the amount of buildings to be shown in a cluster tooltip after hovering over it */
 declare const TOOLTIP_FEATURES_TO_DISPLAY = 4;
 /** Specifies the maximum amount of buildings allowed to be displayed as a number in a cluster */
@@ -499,17 +496,6 @@ declare class SiMapComponent implements AfterViewInit, OnChanges, OnDestroy, Aft
      * @defaultValue [20, 20, 20, 20]
      */
     readonly fitGeoJsonPadding: _angular_core.InputSignal<number[]>;
-    /**
-     * Cutoff text for tooltips, when cluster combines more than 4 features
-     *
-     * @deprecated Use `SiMapTooltipComponent` instead to set the `moreText` input e.g. `<si-map ...><si-map-tooltip [moreText]="'KEY_MORE'" /></si-map>`.
-     *
-     * @defaultValue
-     * ```
-     * t(() => $localize`:@@SI_MAPS.TOOLTIP_MORE_TEXT:and {{length}} more...`)
-     * ```
-     */
-    readonly moreText: _angular_core.InputSignal<_siemens_element_translate_ng_translate.TranslatableString>;
     /**
      * Show multiple worlds, including points that cross the 180th meridian.
      *
@@ -708,7 +694,7 @@ declare class SiMapComponent implements AfterViewInit, OnChanges, OnDestroy, Aft
     private calculateClusterCoordinates;
     private showClusterPopover;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SiMapComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiMapComponent, "si-map", never, { "points": { "alias": "points"; "required": false; "isSignal": true; }; "geoJson": { "alias": "geoJson"; "required": false; "isSignal": true; }; "styleFunction": { "alias": "styleFunction"; "required": false; "isSignal": true; }; "geoJsonProjection": { "alias": "geoJsonProjection"; "required": false; "isSignal": true; }; "markerAnimation": { "alias": "markerAnimation"; "required": false; "isSignal": true; }; "cluster": { "alias": "cluster"; "required": false; "isSignal": true; }; "groupColors": { "alias": "groupColors"; "required": false; "isSignal": true; }; "nativeProperties": { "alias": "nativeProperties"; "required": false; "isSignal": true; }; "styleJson": { "alias": "styleJson"; "required": false; "isSignal": true; }; "displayTooltipOnHover": { "alias": "displayTooltipOnHover"; "required": false; "isSignal": true; }; "displayPopoverOnClick": { "alias": "displayPopoverOnClick"; "required": false; "isSignal": true; }; "displayPopoverOnHover": { "alias": "displayPopoverOnHover"; "required": false; "isSignal": true; }; "maptilerKey": { "alias": "maptilerKey"; "required": false; "isSignal": true; }; "displayTooltipOnClusterHover": { "alias": "displayTooltipOnClusterHover"; "required": false; "isSignal": true; }; "clusterDistance": { "alias": "clusterDistance"; "required": false; "isSignal": true; }; "featureSelectZoom": { "alias": "featureSelectZoom"; "required": false; "isSignal": true; }; "featureClickZoom": { "alias": "featureClickZoom"; "required": false; "isSignal": true; }; "clusterClickZoom": { "alias": "clusterClickZoom"; "required": false; "isSignal": true; }; "globalZoom": { "alias": "globalZoom"; "required": false; "isSignal": true; }; "autoZoomFeatureClick": { "alias": "autoZoomFeatureClick"; "required": false; "isSignal": true; }; "autoZoomClusterClick": { "alias": "autoZoomClusterClick"; "required": false; "isSignal": true; }; "popoverComponent": { "alias": "popoverComponent"; "required": false; "isSignal": true; }; "clusterPopoverComponent": { "alias": "clusterPopoverComponent"; "required": false; "isSignal": true; }; "popoverComponentProps": { "alias": "popoverComponentProps"; "required": false; "isSignal": true; }; "popoverCloseOnClick": { "alias": "popoverCloseOnClick"; "required": false; "isSignal": true; }; "fitClusterPadding": { "alias": "fitClusterPadding"; "required": false; "isSignal": true; }; "fitPointPadding": { "alias": "fitPointPadding"; "required": false; "isSignal": true; }; "fitGeoJsonPadding": { "alias": "fitGeoJsonPadding"; "required": false; "isSignal": true; }; "moreText": { "alias": "moreText"; "required": false; "isSignal": true; }; "multiWorld": { "alias": "multiWorld"; "required": false; "isSignal": true; }; "alwaysShowLabels": { "alias": "alwaysShowLabels"; "required": false; "isSignal": true; }; "maxLabelLineLength": { "alias": "maxLabelLineLength"; "required": false; "isSignal": true; }; "maxLabelLines": { "alias": "maxLabelLines"; "required": false; "isSignal": true; }; }, { "points": "pointsChange"; "pointsSelected": "pointsSelected"; "pointsRefreshed": "pointsRefreshed"; }, ["projectedTooltip"], ["si-map-tooltip"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SiMapComponent, "si-map", never, { "points": { "alias": "points"; "required": false; "isSignal": true; }; "geoJson": { "alias": "geoJson"; "required": false; "isSignal": true; }; "styleFunction": { "alias": "styleFunction"; "required": false; "isSignal": true; }; "geoJsonProjection": { "alias": "geoJsonProjection"; "required": false; "isSignal": true; }; "markerAnimation": { "alias": "markerAnimation"; "required": false; "isSignal": true; }; "cluster": { "alias": "cluster"; "required": false; "isSignal": true; }; "groupColors": { "alias": "groupColors"; "required": false; "isSignal": true; }; "nativeProperties": { "alias": "nativeProperties"; "required": false; "isSignal": true; }; "styleJson": { "alias": "styleJson"; "required": false; "isSignal": true; }; "displayTooltipOnHover": { "alias": "displayTooltipOnHover"; "required": false; "isSignal": true; }; "displayPopoverOnClick": { "alias": "displayPopoverOnClick"; "required": false; "isSignal": true; }; "displayPopoverOnHover": { "alias": "displayPopoverOnHover"; "required": false; "isSignal": true; }; "maptilerKey": { "alias": "maptilerKey"; "required": false; "isSignal": true; }; "displayTooltipOnClusterHover": { "alias": "displayTooltipOnClusterHover"; "required": false; "isSignal": true; }; "clusterDistance": { "alias": "clusterDistance"; "required": false; "isSignal": true; }; "featureSelectZoom": { "alias": "featureSelectZoom"; "required": false; "isSignal": true; }; "featureClickZoom": { "alias": "featureClickZoom"; "required": false; "isSignal": true; }; "clusterClickZoom": { "alias": "clusterClickZoom"; "required": false; "isSignal": true; }; "globalZoom": { "alias": "globalZoom"; "required": false; "isSignal": true; }; "autoZoomFeatureClick": { "alias": "autoZoomFeatureClick"; "required": false; "isSignal": true; }; "autoZoomClusterClick": { "alias": "autoZoomClusterClick"; "required": false; "isSignal": true; }; "popoverComponent": { "alias": "popoverComponent"; "required": false; "isSignal": true; }; "clusterPopoverComponent": { "alias": "clusterPopoverComponent"; "required": false; "isSignal": true; }; "popoverComponentProps": { "alias": "popoverComponentProps"; "required": false; "isSignal": true; }; "popoverCloseOnClick": { "alias": "popoverCloseOnClick"; "required": false; "isSignal": true; }; "fitClusterPadding": { "alias": "fitClusterPadding"; "required": false; "isSignal": true; }; "fitPointPadding": { "alias": "fitPointPadding"; "required": false; "isSignal": true; }; "fitGeoJsonPadding": { "alias": "fitGeoJsonPadding"; "required": false; "isSignal": true; }; "multiWorld": { "alias": "multiWorld"; "required": false; "isSignal": true; }; "alwaysShowLabels": { "alias": "alwaysShowLabels"; "required": false; "isSignal": true; }; "maxLabelLineLength": { "alias": "maxLabelLineLength"; "required": false; "isSignal": true; }; "maxLabelLines": { "alias": "maxLabelLines"; "required": false; "isSignal": true; }; }, { "points": "pointsChange"; "pointsSelected": "pointsSelected"; "pointsRefreshed": "pointsRefreshed"; }, ["projectedTooltip"], ["si-map-tooltip"], true, never>;
 }
 
 declare class SiMapModule {
@@ -723,5 +709,5 @@ declare class SiMapsNgModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<SiMapsNgModule>;
 }
 
-export { ANIMATION_DURATION, CLUSTER_CHARTS_FRAGMENTS, CLUSTER_RADIUS_SIZE, DEFAULT_CLUSTER_CLICK_ZOOM, DEFAULT_CLUSTER_DISTANCE, DEFAULT_CLUSTER_TYPE, DEFAULT_DONUT_RATIO, DEFAULT_FEATURE_CLICK_ZOOM, DEFAULT_FEATURE_SELECT_ZOOM, DEFAULT_FIT_PADDING, DEFAULT_GLOBAL_ZOOM, DEFAULT_ICON, DEFAULT_ICON_SCALE, DEFAULT_OFFSET, DEFAULT_STROKE_WEIGHT, GEOJSON_LAYER, Grouping, LAYER_NAME, MAX_CLUSTER_BUILDINGS, MapService, POINTS_LAYER, SIEMENS_FONT, SIEMENS_FONT_LABELS, SiMapComponent, SiMapModule, SiMapPopoverComponent, SiMapTooltipComponent, SiMapsNgModule, SiMapsNgModule as SimplMapsNgModule, TOOLTIP_FEATURES_TO_DISPLAY };
+export { ANIMATION_DURATION, CLUSTER_CHARTS_FRAGMENTS, CLUSTER_RADIUS_SIZE, DEFAULT_CLUSTER_CLICK_ZOOM, DEFAULT_CLUSTER_DISTANCE, DEFAULT_CLUSTER_TYPE, DEFAULT_DONUT_RATIO, DEFAULT_FEATURE_CLICK_ZOOM, DEFAULT_FEATURE_SELECT_ZOOM, DEFAULT_GLOBAL_ZOOM, DEFAULT_ICON, DEFAULT_ICON_SCALE, DEFAULT_OFFSET, DEFAULT_STROKE_WEIGHT, GEOJSON_LAYER, Grouping, LAYER_NAME, MAX_CLUSTER_BUILDINGS, MapService, POINTS_LAYER, SIEMENS_FONT, SIEMENS_FONT_LABELS, SiMapComponent, SiMapModule, SiMapPopoverComponent, SiMapTooltipComponent, SiMapsNgModule, SiMapsNgModule as SimplMapsNgModule, TOOLTIP_FEATURES_TO_DISPLAY };
 export type { ColorPalette, ColorPalettes, IconMarkerOptions, LabelOptions, MapPoint, MapPointMetaData, MarkerOptions, MarkerStatusType, OverlayNativeProperties, RenderOptions };

package/projects/maps-ng/README.md

@@ -1,117 +0,0 @@
-# Element Maps
-
-Element maps library based on OpenLayers.
-
-## Usage
-
-To use this library in other projects, add it to your dependencies using:
-
-```sh
-npm install --save @siemens/maps-ng
-
-# Also install the needed peer dependencies
-npm install --save ol@~10.2.0 ol-ext ol-mapbox-style
-```
-
-Add library assets and CommonJs dependencies in your _angular.json_ under the build options
-
-```json
-{
-  "architect": {
-    "build": {
-      "options": {
-        "assets": [
-          // ... other assets
-          {
-            "glob": "**/*",
-            "input": "./node_modules/@siemens/maps-ng/assets",
-            "output": "/assets/"
-          }
-        ],
-        // ... other options
-        "allowedCommonJsDependencies": [
-          "xml-utils/find-tags-by-name.js",
-          "xml-utils/get-attribute.js",
-          "web-worker",
-          "pbf",
-          "earcut",
-          "rbush"
-        ]
-      }
-    }
-  }
-}
-```
-
-Import openlayers styles into your main global stylesheet
-
-```scss
-@use 'ol/ol.css';
-```
-
-Add the library to the list of _imports_ in your Angular _AppModule_ like this:
-
-```ts
-// [...]
-
-// Import this library and required dependencies
-import { SiMapModule } from '@siemens/maps-ng';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-
-    // Import this library
-    SiMapModule
-  ],
-  bootstrap: [AppComponent]
-})
-export class AppModule {}
-```
-
-Or simply _import_ the `SiMapComponent` in your standalone component.
-
-```ts
-@Component({
-  selector: 'app-map',
-  imports: [SiMapComponent],
-  templateUrl: './sample.component.html',
-  host: { class: 'h-100' }
-})
-export class SampleComponent {}
-```
-
-And lastly, add the map to your template and add a MapTiler key.
-Note, the map has not height per default and comes with a `block`
-display. Set the height or put it in a related container.
-
-The demo key works on localhost. It will be renewed regularly
-to avoid missuses of the key. Contact the SiMPL team to receive
-a key for your SI BP product.
-
-```html
-<si-map [maptilerKey]="'REPLACE_WITH_YOUR_MAPTILER_KEY'" style="height: 500px;"></si-map>
-```
-
-### Testing
-
-Do **not** load map data (tiles) from maptiler in automated tests, to reduce the number of
-payed requests to a minimum. E.g. during testing, you want to test your functions and not the
-tile data provided by maptiler.
-
-- **Unit tests:** Do simply **not** provide an API key during
-- **Playwright tests:** Stub the `tiles.json` request (and some others) using [page.route(...)](playwright/e2e/simpl-element/maps/static.spec.ts).
-
-### Running Unit Tests
-
-Run `npm run maps:test` to perform the unit tests via [Vitest](https://main.vitest.dev/).
-
-## License
-
-The following applies for code and documentation of the git repository,
-unless explicitly mentioned.
-
-Copyright (c) Siemens 2016 - 2026
-
-MIT, see [LICENSE.md](LICENSE.md).