DomUtil
Quick answer
L.DomUtil provides framework-free helpers for creating elements, toggling class names, setting opacity and positioning children inside map panes. It is the toolkit Leaflet uses internally, and custom overlays rely on it to stay in sync with map translation. Class helpers cover adding, removing and replacing class names.
L.DomUtil.get( id ) → HTMLElement
Key points
- create builds an element, applies a class and appends it to a container in one call.
- setPosition records coordinates in _leaflet_pos so map dragging accumulates correctly.
- setTransform writes translate3d directly, optionally combined with a scale factor.
Example
var pane = map.getPane('overlayPane');
var badge = L.DomUtil.create('div', 'count-badge', pane);
badge.textContent = '12 个要素';
L.DomUtil.setPosition(badge, L.point(12, 12));
L.DomUtil.setOpacity(badge, 0.85);.count-badge {
position: absolute;
padding: 2px 8px;
border-radius: 10px;
background: rgba(18, 24, 38, 0.82);
color: #fff;
font-size: 12px;
}Notes
- Elements positioned with left and top bypass Leaflet's transform and jitter during zoom.
- getTranslate parses computed styles and may not match the value you originally wrote.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). DomUtil. https://www.jingweizhi.com/en/leaflet/api/dom-util.html (accessed 2026-11-03).