Map

Creating and deleting maps

Use the MMap class to create a map. In the class constructor, specify:

  • The HTML element where the map will be placed.
  • The coordinates of the map center.
  • The zoom level.
<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.

To delete a map from DOM, use the destroy() method.

// Deleting a map.
map.destroy();

The HTML element specified when creating the map isn't deleted from the DOM tree.

Layers

To display objects on the map after it is created, add layers.

You can add pre-configured layers. They are used to create the data source and a layer to display the roadmap with tiles:

const layer = new MMapDefaultSchemeLayer();
map.addChild(layer);

Learn more about layers

Map parameters

The main map parameters are:

  • The DOM element where the map will be placed.
  • The area which is displayed.
  • The map display mode: raster or vector.

When creating a map, you must set the mapping region by specifying the map center and zoom level. In future, you can change the mapping region using the setLocation() method.

map.setLocation({
  center: [25.229762, 55.289311],
  zoom: 5
});

map.setLocation({
  bounds: [
    [25.6, 55.7],
    [25.16, 55.17]
  ]
});

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(element, {
  // ... More options.
  mode: 'raster'
});

// Setting the vector mode using the setMode() method.
map.setMode('vector');

Behaviors

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, {
  // ... More options
  behaviors: ['drag', 'pinchZoom', 'mouseTilt']
});
map.setBehaviors(['drag', 'pinchZoom']);

Learn more about controls