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

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		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

interface IViewModel {
  refresh(): void;
}

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

Any questions left?

Ask the community

---

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