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.

Map deviation in region China 1

The map display is based on Amap in region China 1.
Zooming via CTRL key is not supported by Amap in region China 1.
You should follow the instructions from https://lbs.amap.com/dev/key/app to apply Web client(JS API) type Amap key for your Web application.
By default, Amap does not support detail oversea LBS service. If you need oversea LBS serivce, you should apply for it by creating ticket to Amap service via https://lbs.amap.com/dev/ticket/type.
You should add below code snippet into your Web application <head> for Amap integration.

Amap integration Sample

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&;key={Amap key}&plugin=AMap.MarkerClusterer"></script>
<script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js"></script>

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

{!./resources/mindsphere-webcomponents/components/generated-docs/china1-properties-note.txt"

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

Any questions left?

Ask the community

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

Last update: November 16, 2021

MindSphere Web ComponentsMap