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