User interaction handlers
Items related to the ways in which the map responds to user input.
BoxZoomHandler
The BoxZoomHandler allows the user to zoom the map to fit within a bounding box.
The bounding box is defined by clicking and holding shift while dragging the cursor.
Instance Members
ScrollZoomHandler
The ScrollZoomHandler allows the user to zoom the map by scrolling.
Instance Members
Enables the "scroll to zoom" interaction.
Parameters
(Object?)Options
object.
| Name | Description |
|---|---|
| options.around | If "center" is passed, map will zoom around center of map |
Example
DragPanHandler
src/ui/handler/shim/drag_pan.ts
The DragPanHandler allows the user to pan the map by clicking and dragging
the cursor.
Instance Members
Enables the "drag to pan" interaction.
Parameters
(Object?)Options
object
| Name | Description |
|---|---|
| options.linearity
default: 0
|
factor used to scale the drag velocity |
| options.easing
default: bezier(0,0,0.3,1)
|
easing function applled to
map.panTo
when applying the drag.
|
| options.maxSpeed
default: 1400
|
the maximum value of the drag velocity. |
| options.deceleration
default: 2500
|
the rate at which the speed reduces after the pan ends. |
Example
DragRotateHandler
src/ui/handler/shim/drag_rotate.ts
The DragRotateHandler allows the user to rotate the map by clicking and
dragging the cursor while holding the right mouse button or ctrl key.
Instance Members
KeyboardHandler
The KeyboardHandler allows the user to zoom, rotate, and pan the map using
the following keyboard shortcuts:
=/+: Increase the zoom level by 1.Shift-=/Shift-+: Increase the zoom level by 2.-: Decrease the zoom level by 1.Shift--: Decrease the zoom level by 2.- Arrow keys: Pan by 100 pixels.
Shift+⇢: Increase the rotation by 15 degrees.Shift+⇠: Decrease the rotation by 15 degrees.Shift+⇡: Increase the pitch by 10 degrees.Shift+⇣: Decrease the pitch by 10 degrees.
Instance Members
Disables the "keyboard pan/rotate" interaction, leaving the "keyboard zoom" interaction enabled.
Example
DoubleClickZoomHandler
src/ui/handler/shim/dblclick_zoom.ts
The DoubleClickZoomHandler allows the user to zoom the map at a point by
double clicking or double tapping.
Instance Members
TouchZoomRotateHandler
src/ui/handler/shim/touch_zoom_rotate.ts
The TouchZoomRotateHandler allows the user to zoom and rotate the map by
pinching on a touchscreen.
They can zoom with one finger by double tapping and dragging. On the second tap, hold the finger down and drag up or down to zoom in or out.
Instance Members
Disables the "pinch to rotate" interaction, leaving the "pinch to zoom" interaction enabled.
Example
Enables the "pinch to rotate and zoom" interaction.
Parameters
(Object?)Options
object.
| Name | Description |
|---|---|
| options.around | If "center" is passed, map will zoom around the center |
Example
TouchPitchHandler
src/ui/handler/touch_zoom_rotate.ts
The TouchPitchHandler allows the user to pitch the map by dragging up and down with two fingers.
Parameters
(Map)
Instance Members
JavaScript Maps API
Tutorials
- Get Started
- Learn the basics
- Display Marker
- GeoJSON Polygon Layer
- GeoJSON Line Layer
- GeoJSON Point Layer
- Raster Layer
- GeoJSON MultiGeom Layer
- Custom Map
- 3D Map
- Choropleth GeoJSON
- Geocoding
- Reverse Geocoding
- Geocoder component
- Countries filter
- Countries with data
- Elevation profile
- Center map by IP
- Disputed borders by IP
- Map language by IP
- Cookie consent by IP
- Scale control
- Style switcher
- Minimap control
- Legend control
- Choropleth Legend
Examples
- Add a 3D model
- Add a WMS source
- Add a canvas source
- Add a custom style layer
- Add a generated icon to the map
- Add a new layer below labels
- Add a pattern to a polygon
- Add a raster tile source
- Add a stretchable image to the map
- Add a third party vector tile source
- Add a vector tile source
- Add a video
- Add an animated icon to the map
- Add custom icons with Markers
- Add live realtime data
- Add multiple geometries from one GeoJSON source
- Add support for right-to-left scripts
- Animate a line
- Animate a marker
- Animate a point
- Animate a point along a route
- Animate a series of images
- Animate map camera around a point
- Attach a popup to a marker instance
- Center the map on a clicked symbol
- Change a layer's color with buttons
- Change a map's language
- Change building color based on zoom level
- Change the case of labels
- Change the default position for attribution
- Check if MapLibre GL JS is supported
- Create a draggable Marker
- Create a draggable point
- Create a gradient line using an expression
- Heatmap layer
- Hillshade layer
- Create a hover effect
- Polygon extrusion
- Create a time slider
- Style clusters
- Customize camera animations
- Disable map rotation
- Disable scroll zoom
- Display HTML clusters with custom properties
- Display a non-interactive map
- Display a popup
- Display a popup on click
- Display a popup on hover
- Display a satellite map
- Display and style rich text labels
- Display buildings in 3D
- Display line that crosses 180th meridian
- Display map navigation controls
- Draw GeoJSON points
- Extrude polygons for 3D indoor mapping
- Filter symbols by text input
- Filter symbols by toggling a list
- Fit a map to a bounding box
- Fit to the bounds of a LineString
- Fly to a location
- Fly to a location based on scroll position
- Generate and add a missing icon to the map
- Get coordinates of the mouse pointer
- Get features under the mouse pointer
- Jump to a series of locations
- Locate the user
- Measure distances
- Navigate the map with game-like controls
- Offset the vanishing point using padding
- Render world copies
- Restrict map panning to an area
- Set pitch and bearing
- Show drawn polygon area
- Show polygon information on click
- Slowly fly to a location
- Style lines with a data-driven property
- Toggle interactions
- Update a feature in realtime
- Use a fallback image
- Use locally generated ideographs
- Variable label placement
- View a fullscreen map
- View local GeoJSON
- View local GeoJSON (experimental)
- Visualize population density