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

Selector

<mdsp-map></mdsp-map>

Properties

Name Type Corresponding attribute Default Description Allowed Values
context string context Configures the context of the component. See also here.
draggable boolean draggable false Enables dragging of the map if true.
errorNotification boolean error-notification Enables error control if an error is thrown. This can be used for debug purposes.

For productive use, the error event should be caught and handled in the application. See also here.
latitude number latitude 0 Configures the latitude of the map center.
locale string locale Specifies the locale in which the component is displayed.
The locales en and de are provided by default.
See also here.
localeManager LocaleManager Returns a LocaleManager object.

This can be used to add locales or to get the locale settings. See also here.
longitude number longitude 0 Configures the longitude of the map center.
markerStyle MapMarkerStyle Returns an object for customizing the marker, refer to MapMarkerStyle model.
view IMapViewModel Returns an object for view handling, refer to IMapViewModel model.
wheelZoom boolean wheel-zoom false Enables zoom control by mouse wheel if true. Otherwise, the control key must be pressed for zooming.
zoomLevel number zoom-level 0 Specifies the zoom level of the map. 0 - 20

Events

Name Type Description
viewChanged EventEmitter<IMapViewState> Is triggered when map view is changed.
connected EventEmitter<any> Triggered after the component is created, initialized and appended to the DOM tree.
error EventEmitter<MdspUiError> Triggered when an error occurs in the component or while accessing APIs. See also here.

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

Last update: February 23, 2024

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