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¶

Interface¶

Models¶

interface IViewModel {
    refresh(): void;
}

interface IMapViewModel extends IViewModel {
    update(viewState: IMapViewState): void;
}

interface IMapViewState {
    initial: IMapViewPort; // optional
    current: IMapViewPort;
}

interface IMapViewPort {
    center: IMapCoordinates;
    zoom: number;
}

interface IMapCoordinates {
    longitude: number;
    latitude: number;
}

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' };

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.