Web Components for Insights Hub and Industrial IoT - Map - Developer Documentation
Skip to content

Web Components for Insights Hub and Industrial IoT
Map

The Map displays a geographic map based on OpenStreetMap. A marker can be added, e.g. for displaying an asset's location.

Examples

Map

Interface

Models

IViewModel
interface IViewModel {
    refresh(): void;
}
IMapViewModel
interface IMapViewModel extends IViewModel {
    update(viewState: IMapViewState): void;
}
IMapViewState
interface IMapViewState {
    initial: IMapViewPort; // optional
    current: IMapViewPort;
}
IMapViewPort
interface IMapViewPort {
    center: IMapCoordinates;
    zoom: number;
}
IMapCoordinates
interface IMapCoordinates {
    longitude: number;
    latitude: number;
}
MapMarkerStyle
class MapMarkerStyle {
    public set default(style: any);
    public set selected(style: any);
    public set clustered(style: any);
    public set clusteredSelected(style: any);
}

Remarks

  • Up to 25,000 requests to the underlying map service per month are free. For an extension please contact your assigned Account Executive or Customer Success Manager.
  • The number of free requests to the underlying map service is limited to 25.000 calls per month. For further support please contact our sales team.

Roles

  • This component does not require any specific role.

Snippets

Use Custom Markers

const mapComp = document.querySelector('mdsp-map');
mapComp.markerStyle.default = { src: '/lib/pin_red.png' };

Custom-Map

Use viewChanged event and view.update method

// listen on viewChanged event and save lastest view state
const mapComp = document.querySelector('mdsp-map');
mapComp.addEventListener('viewChanged', function (eventParams) {
    // log view state object
    console.log(new Date().toISOString() + " map.viewChanged: " + JSON.stringify(eventParams.detail));
    // save state object f.e. as global variable
    window.myMapViewState = eventParams.detail;
});

// restore the saved map view to any a point in time
if (window.mapViewState) {
    mapComp.view.update(window.myMapViewState);
}

Except where otherwise noted, content on this site is licensed under the Development License Agreement.


Last update: April 13, 2023