@siemens/maps-ng¶

Element Maps¶

Element maps library based on OpenLayers.

Usage¶

To use this library in other projects, add it to your dependencies using:

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

{
  "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

@use 'ol/ol.css';

Add the library to the list of imports in your Angular AppModule like this:

// [...]

// 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.

@Component({
  selector: 'app-map',
  standalone: true,
  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.

<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(...).

Running Unit Tests¶

Run yarn maps:test to perform the unit tests via Karma. You can set a seed for running the tests in a specific using an environment variable: SEED=71384 yarn maps:test

License¶

The following applies for code and documentation of the git repository, unless explicitly mentioned.

MIT, see LICENSE.md.

Except where otherwise noted, content on this site is licensed under MIT License.