Map Events & Controls

This documentation provides methods for adding map events and controls

Map Events

OnMapLoad Event

myMap.on("load", () => yourCallback())

OnMapFailure Event

myMap.on("fail", () => yourCallback())

onMapIdle Event

myMap.on("idle", () => yourCallback())

onMapClick Event

myMap.on("click", () => yourCallback())

onMapMove Event

myMap.on("move", () => yourCallback())

onMapMoveStart Event

myMap.on("movestart", () => yourCallback())

onMapMoveEnd Event

myMap.on("moveend", () => yourCallback())

onMapZoom Event

myMap.on("zoom", () => yourCallback())

onMapZoomStart Event

myMap.on("zoomstart", () => yourCallback())

onMapZoomEnd Event

myMap.on("zoomend", () => yourCallback())

onMapPitch Event

myMap.on("pitch", () => yourCallback())

onMapPitchStart Event

myMap.on("pitchstart", () => yourCallback())

onMapPitchEnd Event

myMap.on("pitchend", () => yourCallback())

onMapRotate Event

myMap.on("rotate", () => yourCallback())

Get Map Styles

myMap.getStyle()

Map Event Demonstration

Try performing some actions like click,zoom,rotate etc on the map to see the events being triggered.

Map Controls

Enable Map Rotation

myMap.dragRotate.enable()  // By default rotation is enabled

Disable Map Rotation

myMap.dragRotate.disable();  // disable map rotation using right click + drag
myMap.keyboard.disable();  // disable map rotation using keyboard
myMap.touchZoomRotate.disableRotation();  // disable map rotation using touch rotation gesture

Enable Map Double Click Zoom

myMap.doubleClickZoom.enable()  // By default double click zoom is enabled

Disable Map Double Click Zoom

myMap.doubleClickZoom.disable()

Enable Map Scroll

myMap.dragPan.enable()  // By default scroll is enabled

Disable Map Scroll

myMap.dragPan.disable()

Enable Map Zoom

myMap.scrollZoom.enable()  // By default enabled
myMap.doubleClickZoom.enable()  // By default enabled
myMap.boxZoom.enable()  // By default enabled

Disable Map Zoom

myMap.scrollZoom.disable()
myMap.doubleClickZoom.disable()
myMap.boxZoom.disable()

Enable Map Compass

const navigationControls = olaMaps.addNavigationControls({
  showCompass: true,
  showZoom: false,
  visualizePitch: false,
});

myMap.addControl(navigationControls);