MMap
The MMap class creates all the necessary map elements and provides a base container for nesting other entities into it. If necessary, the class can be destroyed.
Creating a map
When creating a map, in the class constructor:
- Specify the HTML element where the map will be placed.
- Initialize the map via the
locationmap parameter.
<head>
<script>
mappable.ready.then(() => {
// HTML element.
const map = new mappable.MMap(document.getElementById('first_map'), {
location: {
center: [25.229762, 55.289311],
zoom: 10
}
});
});
</script>
</head>
<body>
<p>Map</p>
<div id="first_map" style="width:400px; height:300px"></div>
</body>
The map can be placed in any HTML block-level element and completely fills the bounding box it occupies. The dimensions of the box are calculated using ResizeObserver.
Destroying a map
To destroy a map from DOM, use the destroy() method.
// Destroying the map.
map.destroy();
The HTML element specified when creating the map isn't deleted from the DOM tree.
Example of creating and destroying a map.
Constructor
new MMap(rootContainer, props[, children]);
Constructor parameters
|
Parameter |
Type |
required |
Description |
|
|
required |
Link to the HTML element that contains the map |
|
|
|
required |
Map parameters |
|
|
|
- |
Child elements |
Props
|
Property |
Type |
required |
Description |
|
|
required |
Initial location or request to change the location with the option to specify an animation. |
|
|
|
- |
Active behaviors. |
|
|
|
- |
Initial camera or request to change the camera with duration. |
|
|
|
|
- |
Name of the map container css class. |
|
|
- |
Other configurations. |
|
|
|
|
- |
Strategy for requesting hotspots on the map for the entire viewport or on hover. |
|
|
- |
Map margins. |
|
|
|
- |
Map mode: |
|
|
|
- |
Projection used on the map. |
|
|
|
|
- |
Restricts the map view area preventing the user from going beyond it. |
|
|
- |
Whether to repeat the world on the X-axis. |
|
|
|
- |
Limiting the minimum and maximum zoom. |
|
|
|
- |
Zoom rounding. If |
|
|
|
- |
Zoom strategy describes whether the map center is linked to the zoom point or not. |
Methods
addChild
Objects extended from the MMapEntity class can be added to the map with the addChild() method called from the map's instance:
const {MMap, MMapLayer} = mappable;
// Initialize the map
const map = new MMap(...);
// Initialize a layer
const layer = new MMapLayer(...);
// Add this layer to the map
map.addChild(layer);
|
Parameter |
Type |
required |
Description |
|
|
required |
Entity being added to the map. |
|
|
|
|
- |
Returns the MMap map instance
removeChild
Removes an object from the map.
const {MMap, MMapLayer} = mappable;
const map = new MMap(...);
const layer = new MMapLayer(...);
map.addChild(layer);
map.removeChild(layer);
|
Parameter |
Type |
required |
Description |
|
|
required |
Object being removed from the map. |
Returns the MMap map instance
update
update(changedProps): void
Method of updating object props.
setLocation(location: MMapLocationRequest): void {
this.update({location});
}
Parameters
|
Parameter |
Type |
Description |
|
|
|
New |
Returns
void
setLocation
You can set the mapping region using the setLocation() method. You can change it at any time.
// Specifying the map center and scale
map.setLocation({
center: [25.229762, 55.289311],
zoom: 5
});
// Specifying the boundaries of the visible part of the map
map.setLocation({
bounds: [[25.6, 55.7], [25.16, 55.17]]
});
|
Parameter |
Type |
required |
Description |
|
|
required |
Mapping region. |
Returns void
setBehaviors
The map has a set of behaviors that define the map's response to user actions. For example, when moving the mouse cursor across the viewport with the left mouse button held down, the map moves with the cursor.
When initializing the map, it is assigned a set of behaviors that can be changed later using the setBehaviors() method. You can access map behaviors via the behaviors field.
const map = new MMap(element, {
document.getElementById('map'),
{
// ... other props.
behaviors: ['drag', 'pinchZoom', 'mouseTilt']
}
});
map.setBehaviors(['drag', 'pinchZoom']);
|
Parameter |
Type |
required |
Description |
|
|
required |
Set of behaviors. |
Returns void
setMode
You can set the map mode either in the Map Builder or using the setMode() method.
// Setting the raster mode in the Map Builder.
const map = new MMap(
document.getElementById('map'),
{
// ... other props.
mode: 'raster'
}
);
// Setting the vector mode using the setMode() method.
map.setMode('vector');
|
Parameter |
Type |
required |
Description |
|
|
required |
Map mode. |
Returns void
destroy
Destroys the map
const {MMap} = mappable;
const map = new MMap(...);
map.destroy();