gi-nx

---

gi-nx / MapEvents

type MapEvents = {
  boxzoomcancel: {
     originalEvent?: MouseEvent | KeyboardEvent;
  };
  boxzoomend: {
     originalEvent?: MouseEvent;
  };
  boxzoomstart: {
     originalEvent?: MouseEvent | KeyboardEvent;
  };
  click: MapMouseEvent;
  contextmenu: MapMouseEvent;
  data: MapDataEvent;
  dataloading: MapDataEvent;
  dblclick: MapMouseEvent;
  drag: {
     originalEvent?: MouseEvent | TouchEvent;
  };
  dragend: {
     originalEvent?: MouseEvent | TouchEvent;
  };
  dragstart: {
     originalEvent?: MouseEvent | TouchEvent;
  };
  error: {
     error: Error;
  };
  idle: void;
  load: void;
  mousedown: MapMouseEvent;
  mouseenter: MapMouseEvent;
  mouseleave: MapMouseEvent;
  mousemove: MapMouseEvent;
  mouseout: MapMouseEvent;
  mouseover: MapMouseEvent;
  mouseup: MapMouseEvent;
  move: {
     originalEvent?: MouseEvent | WheelEvent | TouchEvent;
  };
  moveend: {
     originalEvent?: MouseEvent | WheelEvent | TouchEvent;
  };
  movestart: {
     originalEvent?: MouseEvent | WheelEvent | TouchEvent;
  };
  pitch:   | {
     originalEvent?: MouseEvent | TouchEvent;
   }
     | void;
  pitchend:   | {
     originalEvent?: MouseEvent | TouchEvent;
   }
     | void;
  pitchstart:   | {
     originalEvent?: MouseEvent | TouchEvent;
   }
     | void;
  preclick: MapMouseEvent;
  remove: void;
  render: void;
  renderstart: void;
  resize: object | void;
  rotate: {
     originalEvent?: MouseEvent | TouchEvent;
  };
  rotateend: {
     originalEvent?: MouseEvent | TouchEvent;
  };
  rotatestart: {
     originalEvent?: MouseEvent | TouchEvent;
  };
  sourcedata: MapSourceDataEvent;
  sourcedataloading: MapSourceDataEvent;
  style.import.load: void;
  style.load: void;
  styledata: MapStyleDataEvent;
  styledataloading: MapStyleDataEvent;
  styleimagemissing: {
     id: string;
  };
  touchcancel: MapTouchEvent;
  touchend: MapTouchEvent;
  touchmove: MapTouchEvent;
  touchstart: MapTouchEvent;
  webglcontextlost: {
     originalEvent?: WebGLContextEvent;
  };
  webglcontextrestored: {
     originalEvent?: WebGLContextEvent;
  };
  wheel: MapWheelEvent;
  zoom:   | {
     originalEvent?: WheelEvent | TouchEvent;
   }
     | void;
  zoomend:   | {
     originalEvent?: WheelEvent | TouchEvent;
   }
     | void;
  zoomstart:   | {
     originalEvent?: WheelEvent | TouchEvent;
   }
     | void;
};

Events

Event	Type	Description
boxzoomcancel.originalEvent?	MouseEvent | KeyboardEvent	-
boxzoomend.originalEvent?	MouseEvent	-
boxzoomstart.originalEvent?	MouseEvent | KeyboardEvent	-
click	MapMouseEvent	Fired when a pointing device (usually a mouse) is pressed and released at the same point on the map. Note: This event is compatible with the optional layerId parameter. If layerId is included as the second argument in Map#on, the event listener will fire only when the point that is pressed and released contains a visible portion of the specifed layer. click Memberof Map Instance Examples // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener map.on('click', (e) => { console.log(A click event has occurred at ${e.lngLat}); }); // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener for a specific layer map.on('click', 'poi-label', (e) => { console.log(A click event has occurred on a visible portion of the poi-label layer at ${e.lngLat}); }); See - Example: Measure distances - Example: Center the map on a clicked symbol
contextmenu	MapMouseEvent	Fired when the right button of the mouse is clicked or the context menu key is pressed within the map. contextmenu Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // when the right mouse button is // pressed within the map. map.on('contextmenu', () => { console.log('A contextmenu event occurred.'); });
data	MapDataEvent	Fired when any map data loads or changes. See MapDataEvent for more information. data Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // when map data loads or changes. map.on('data', () => { console.log('A data event occurred.'); }); See Example: Display HTML clusters with custom properties
dataloading	MapDataEvent	Fired when any map data (style, source, tile, etc) begins loading or changing asynchronously. All dataloading events are followed by a data or error event. See MapDataEvent for more information. dataloading Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // when any map data begins loading // or changing asynchronously. map.on('dataloading', () => { console.log('A dataloading event occurred.'); });
dblclick	MapMouseEvent	Fired when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession. Note: This event is compatible with the optional layerId parameter. If layerId is included as the second argument in Map#on, the event listener will fire only when the point that is clicked twice contains a visible portion of the specifed layer. dblclick Memberof Map Instance Examples // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener map.on('dblclick', (e) => { console.log(A dblclick event has occurred at ${e.lngLat}); }); // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener for a specific layer map.on('dblclick', 'poi-label', (e) => { console.log(A dblclick event has occurred on a visible portion of the poi-label layer at ${e.lngLat}); });
drag.originalEvent?	MouseEvent | TouchEvent	-
dragend.originalEvent?	MouseEvent | TouchEvent	-
dragstart.originalEvent?	MouseEvent | TouchEvent	-
error.error	Error	-
idle	void	Fired after the last frame rendered before the map enters an "idle" state: - No camera transitions are in progress - All currently requested tiles have loaded - All fade/transition animations have completed. idle Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // just before the map enters an "idle" state. map.on('idle', () => { console.log('A idle event occurred.'); });
load	void	Fired immediately after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred. load Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // when the map has finished loading. map.on('load', () => { console.log('A load event occurred.'); }); See - Example: Draw GeoJSON points - Example: Add live realtime data - Example: Animate a point
mousedown	MapMouseEvent	Fired when a pointing device (usually a mouse) is pressed within the map. Note: This event is compatible with the optional layerId parameter. If layerId is included as the second argument in Map#on, the event listener will fire only when the the cursor is pressed while inside a visible portion of the specifed layer. mousedown Memberof Map Instance Examples // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener map.on('mousedown', () => { console.log('A mousedown event has occurred.'); }); // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener for a specific layer map.on('mousedown', 'poi-label', () => { console.log('A mousedown event has occurred on a visible portion of the poi-label layer.'); }); See - Example: Highlight features within a bounding box - Example: Create a draggable point
mouseenter	MapMouseEvent	Fired when a pointing device (usually a mouse) enters a visible portion of a specified layer from outside that layer or outside the map canvas. Important: This event can only be listened for when Map#on includes three arguments, where the second argument specifies the desired layer. mouseenter Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener map.on('mouseenter', 'water', () => { console.log('A mouseenter event occurred on a visible portion of the water layer.'); }); See - Example: Center the map on a clicked symbol - Example: Display a popup on click
mouseleave	MapMouseEvent	Fired when a pointing device (usually a mouse) leaves a visible portion of a specified layer or moves from the specified layer to outside the map canvas. Note: To detect when the mouse leaves the canvas, independent of layer, use Map.event:mouseout instead. Important: This event can only be listened for when Map#on includes three arguments, where the second argument specifies the desired layer. mouseleave Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // when the pointing device leaves // a visible portion of the specified layer. map.on('mouseleave', 'water', () => { console.log('A mouseleave event occurred.'); }); See - Example: Highlight features under the mouse pointer - Example: Display a popup on click
mousemove	MapMouseEvent	Fired when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map. Note: This event is compatible with the optional layerId parameter. If layerId is included as the second argument in Map#on, the event listener will fire only when the the cursor is inside a visible portion of the specified layer. mousemove Memberof Map Instance Examples // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener map.on('mousemove', () => { console.log('A mousemove event has occurred.'); }); // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener for a specific layer map.on('mousemove', 'poi-label', () => { console.log('A mousemove event has occurred on a visible portion of the poi-label layer.'); }); See - Example: Get coordinates of the mouse pointer - Example: Highlight features under the mouse pointer - Example: Display a popup on over
mouseout	MapMouseEvent	Fired when a point device (usually a mouse) leaves the map's canvas. mouseout Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // when the pointing device leaves // the map's canvas. map.on('mouseout', () => { console.log('A mouseout event occurred.'); });
mouseover	MapMouseEvent	Fired when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements. Note: This event is compatible with the optional layerId parameter. If layerId is included as the second argument in Map#on, the event listener will fire only when the the cursor is moved inside a visible portion of the specifed layer. mouseover Memberof Map Instance Examples // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener map.on('mouseover', () => { console.log('A mouseover event has occurred.'); }); // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener for a specific layer map.on('mouseover', 'poi-label', () => { console.log('A mouseover event has occurred on a visible portion of the poi-label layer.'); }); See - Example: Get coordinates of the mouse pointer - Example: Highlight features under the mouse pointer - Example: Display a popup on hover
mouseup	MapMouseEvent	Fired when a pointing device (usually a mouse) is released within the map. Note: This event is compatible with the optional layerId parameter. If layerId is included as the second argument in Map#on, the event listener will fire only when the the cursor is released while inside a visible portion of the specifed layer. mouseup Memberof Map Instance Examples // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener map.on('mouseup', () => { console.log('A mouseup event has occurred.'); }); // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener for a specific layer map.on('mouseup', 'poi-label', () => { console.log('A mouseup event has occurred on a visible portion of the poi-label layer.'); }); See - Example: Highlight features within a bounding box - Example: Create a draggable point
move.originalEvent?	MouseEvent | WheelEvent | TouchEvent	-
moveend.originalEvent?	MouseEvent | WheelEvent | TouchEvent	-
movestart.originalEvent?	MouseEvent | WheelEvent | TouchEvent	-
pitch	| { originalEvent?: MouseEvent | TouchEvent; } | void	Fired repeatedly during the map's pitch (tilt) animation between one state and another as the result of either user interaction or methods such as Map#flyTo. pitch Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // repeatedly during a pitch (tilt) transition. map.on('pitch', () => { console.log('A pitch event occurred.'); });
pitchend	| { originalEvent?: MouseEvent | TouchEvent; } | void	Fired immediately after the map's pitch (tilt) finishes changing as the result of either user interaction or methods such as Map#flyTo. pitchend Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // just after a pitch (tilt) transition ends. map.on('pitchend', () => { console.log('A pitchend event occurred.'); });
pitchstart	| { originalEvent?: MouseEvent | TouchEvent; } | void	Fired whenever the map's pitch (tilt) begins a change as the result of either user interaction or methods such as Map#flyTo . pitchstart Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // just before a pitch (tilt) transition starts. map.on('pitchstart', () => { console.log('A pitchstart event occurred.'); });
preclick	MapMouseEvent	Triggered when a click event occurs and is fired before the click event. Primarily implemented to ensure closeOnClick for pop-ups is fired before any other listeners. preclick Memberof Map Instance
remove	void	Fired immediately after the map has been removed with Map.event:remove. remove Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // just after the map is removed. map.on('remove', () => { console.log('A remove event occurred.'); });
render	void	Fired whenever the map is drawn to the screen, as the result of: - a change to the map's position, zoom, pitch, or bearing - a change to the map's style - a change to a GeoJSON source - the loading of a vector tile, GeoJSON file, glyph, or sprite. render Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // whenever the map is drawn to the screen. map.on('render', () => { console.log('A render event occurred.'); });
renderstart	void	Fired whenever the rendering process of the map is started. This event can be used in pair with the "render" event, to measure the time spent on the CPU during the rendering of a single frame. renderstart Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // when the map begins rendering. map.on('renderstart', () => { console.log('A renderstart event occurred.'); });
resize	object | void	Fired immediately after the map has been resized. resize Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // immediately after the map has been resized. map.on('resize', () => { console.log('A resize event occurred.'); });
rotate.originalEvent?	MouseEvent | TouchEvent	-
rotateend.originalEvent?	MouseEvent | TouchEvent	-
rotatestart.originalEvent?	MouseEvent | TouchEvent	-
sourcedata	MapSourceDataEvent	Fired when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes. See MapDataEvent for more information. sourcedata Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // when one of the map's sources loads or changes. map.on('sourcedata', () => { console.log('A sourcedata event occurred.'); });
sourcedataloading	MapSourceDataEvent	Fired when one of the map's sources begins loading or changing asynchronously. All sourcedataloading events are followed by a sourcedata or error event. See MapDataEvent for more information. sourcedataloading Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // when the map's sources begin loading or // changing asynchronously. map.on('sourcedataloading', () => { console.log('A sourcedataloading event occurred.'); });
style.import.load	void	Fired immediately after imported style resources have been downloaded and the first visually complete rendering of the base style extended with the imported style has occurred. style.import.load Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // when the style import has finished loading. map.on('style.import.load', () => { console.log('A style import load event occurred.'); });
style.load	void	Fired immediately after all style resources have been downloaded and the first visually complete rendering of the base style has occurred. In general, it's recommended to add custom sources and layers after this event. This approach allows for a more efficient initialization and faster rendering of the added layers. style.load Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // when the map has finished loading. map.on('style.load', () => { console.log('A style load event occurred.'); }); See Example: Persist layers when switching base style
styledata	MapStyleDataEvent	Fired when the map's style loads or changes. See MapDataEvent for more information. styledata Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // when the map's style loads or changes. map.on('styledata', () => { console.log('A styledata event occurred.'); });
styledataloading	MapStyleDataEvent	Fired when the map's style begins loading or changing asynchronously. All styledataloading events are followed by a styledata or error event. See MapDataEvent for more information. styledataloading Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // when the map's style begins loading or // changing asynchronously. map.on('styledataloading', () => { console.log('A styledataloading event occurred.'); });
styleimagemissing.id	string	-
touchcancel	MapTouchEvent	Fired when a touchcancel event occurs within the map. touchcancel Memberof Map Instance Example // Initialize the map. const map = new mapboxgl.Map({}); // Set an event listener that fires when a touchcancel event occurs within the map. map.on('touchcancel', () => { console.log('A touchcancel event occurred.'); });
touchend	MapTouchEvent	Fired when a touchend event occurs within the map. touchend Memberof Map Instance Example // Initialize the map. const map = new mapboxgl.Map({}); // Set an event listener that fires when a touchend event occurs within the map. map.on('touchend', () => { console.log('A touchend event occurred.'); }); See Example: Create a draggable point
touchmove	MapTouchEvent	Fired when a touchmove event occurs within the map. touchmove Memberof Map Instance Example // Initialize the map. const map = new mapboxgl.Map({}); // Set an event listener that fires when a touchmove event occurs within the map. map.on('touchmove', () => { console.log('A touchmove event occurred.'); }); See Example: Create a draggable point
touchstart	MapTouchEvent	Fired when a touchstart event occurs within the map. touchstart Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // when a touchstart event occurs within the map. map.on('touchstart', () => { console.log('A touchstart event occurred.'); }); See Example: Create a draggable point
webglcontextlost.originalEvent?	WebGLContextEvent	-
webglcontextrestored.originalEvent?	WebGLContextEvent	-
wheel	MapWheelEvent	Fired when a wheel event occurs within the map. wheel Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // when a wheel event occurs within the map. map.on('wheel', () => { console.log('A wheel event occurred.'); });
zoom	| { originalEvent?: WheelEvent | TouchEvent; } | void	Fired repeatedly during an animated transition from one zoom level to another, as the result of either user interaction or methods such as Map#flyTo. zoom Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // repeatedly during a zoom transition. map.on('zoom', () => { console.log('A zoom event occurred.'); }); See Example: Update a choropleth layer by zoom level
zoomend	| { originalEvent?: WheelEvent | TouchEvent; } | void	Fired just after the map completes a transition from one zoom level to another as the result of either user interaction or methods such as Map#flyTo. The zoom transition will usually end before rendering is finished, so if you need to wait for rendering to finish, use the Map.event:idle event instead. zoomend Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // just after a zoom transition finishes. map.on('zoomend', () => { console.log('A zoomend event occurred.'); });
zoomstart	| { originalEvent?: WheelEvent | TouchEvent; } | void	Fired just before the map begins a transition from one zoom level to another, as the result of either user interaction or methods such as Map#flyTo. zoomstart Memberof Map Instance Example // Initialize the map const map = new mapboxgl.Map({}); // Set an event listener that fires // just before a zoom transition starts. map.on('zoomstart', () => { console.log('A zoomstart event occurred.'); });