Interaction and controls
Quick answer
This tutorial separates DOM controls from map interactions: NavigationControl, ScaleControl, GeolocateControl, AttributionControl and TerrainControl added with addControl, and handlers such as dragPan, scrollZoom, dragRotate and touchPitch toggled with enable() and disable(). It also shows click queries with queryRenderedFeatures and layer-scoped mouseenter events. Afterwards you can build read-only maps, embedded maps and clickable features.
Key points
- Add controls with map.addControl and one of the four corner positions: top-left, top-right, bottom-left, bottom-right.
- Disable each handler individually, for example map.scrollZoom.disable() for maps inside scrollable pages.
- Pass a layers option to queryRenderedFeatures so clicks ignore basemap features.
Example
var map = new maplibregl.Map({
container: 'map',
style: 'https://demotiles.maplibre.org/style.json',
center: [116.391263, 39.907359],
zoom: 5,
attributionControl: false // 先关掉，改用自定义位置
});
map.addControl(new maplibregl.NavigationControl({
showCompass: true,
visualizePitch: true
}), 'top-right');
map.addControl(new maplibregl.ScaleControl({
unit: 'metric',
maxWidth: 120
}), 'bottom-left');
map.addControl(new maplibregl.GeolocateControl({
positionOptions: { enableHighAccuracy: true },
trackUserLocation: true
}), 'top-right');
map.addControl(new maplibregl.AttributionControl({
compact: true
}), 'bottom-right');map.scrollZoom.disable();
map.doubleClickZoom.disable();
map.boxZoom.disable();
function setReadOnly(readonly) {
['dragPan', 'scrollZoom', 'dragRotate', 'doubleClickZoom',
'touchZoomRotate', 'touchPitch', 'boxZoom', 'keyboard'
].forEach(function (name) {
if (readonly) map[name].disable();
else map[name].enable();
});
}Notes
- Layer-scoped listeners bound before the layer exists never fire and produce no warning.
- queryRenderedFeatures called on every mousemove stalls the render loop unless throttled.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Interaction and controls. https://www.jingweizhi.com/en/maplibre/tutorials/interactions-controls.html (accessed 2026-11-03).