Skip to content

MindSphere Web Components
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

1
<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 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 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 Configures the longitude of the map center.
markerStyle MapMarkerStyle Returns an object for customizing the marker, refer to MapMarkerStyle model.
view IViewModel Returns an object for view handling, refer to IViewModel 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 Specifies the zoom level of the map. 0 - 20

Events

Name Type Description
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
1
2
3
interface IViewModel {
  refresh(): void;
}
IMapCoordinates
1
2
3
4
interface IMapCoordinates {
    longitude: number;
    latitude: number;
}
MapMarkerStyle
1
2
3
4
5
6
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

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

Custom-Map

Any questions left?

Ask the community


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