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.

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

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

Properties deviation in region China 1

  • When wheelZoom property is set to false, zooming via CTRL key is not supported by Amap.
  • zoomLevel property allows 3-20 values by Amap.

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
1
2
3
interface IViewModel {
    refresh(): void;
}
IMapViewModel
1
2
3
interface IMapViewModel extends IViewModel {
    update(viewState: IMapViewState): void;
}
IMapViewState
1
2
3
4
interface IMapViewState {
    initial: IMapViewPort; // optional
    current: IMapViewPort;
}
IMapViewPort
1
2
3
4
interface IMapViewPort {
    center: IMapCoordinates;
    zoom: number;
}
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

Use viewChanged event and view.update method

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// 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.