MMapControls

The MMapControls class is a DOM container used to combine visual controls so that they can be conveniently arranged on the map.

Usage example

vanilla

react

vue

const map = new MMap(element, {
  location: {center: [25.229762, 55.289311], zoom: 14}
});
const controls = new MMapControls({position: 'top left', orientation: 'vertical'});
controls.addChild(new MMapGeolocationControlI({}));
controls.addChild(new MMapZoomControlI({}));
map.addChild(controls);

Creating custom elements

You can create custom visual elements.

Example

Adding a button that moves the map center to Dubai:

const map = new MMap(element, {
  location: {center: [25.229762, 55.289311], zoom: 14}
});

const controls = new MMapControls({position: 'top left horizontal'});
const button = new MMapControlButton({
  text: 'Dubai',
  onClick: () => {
    map.setLocation({
      center: [25.229762, 55.289311],
      zoom: 5
    });
  }
});

controls.addChild(button);
map.addChild(controls);