Leaflet/Leaflet · error · Error

Set map center and zoom first.

Error message

Set map center and zoom first.

What it means

Thrown by Map._checkIfLoaded() (src/map/Map.js:1296) when this._loaded is false. It is called by getCenter() (Map.js:837) and getPixelOrigin() (Map.js:933). _loaded becomes true after the first setView completes and the map fires 'load'; before that, geographic/pixel queries are not meaningful and Leaflet refuses them.

Source

Thrown at src/map/Map.js:1297

	}

	_rawPanBy(offset) {
		DomUtil.setPosition(this._mapPane, this._getMapPanePos().subtract(offset));
	}

	_getZoomSpan() {
		return this.getMaxZoom() - this.getMinZoom();
	}

	_panInsideMaxBounds() {
		if (!this._enforcingBounds) {
			this.panInsideBounds(this.options.maxBounds);
		}
	}

	_checkIfLoaded() {
		if (!this._loaded) {
			throw new Error('Set map center and zoom first.');
		}
	}

	// DOM event handling

	// @section Interaction events
	_initEvents(remove) {
		this._targets = {};
		this._targets[Util.stamp(this._container)] = this;

		const onOff = remove ? DomEvent.off : DomEvent.on;

		// @event click: PointerEvent
		// Fired when the user clicks (or taps) the map.
		// @event dblclick: PointerEvent
		// Fired when the user double-clicks (or double-taps) the map.
		// @event pointerdown: PointerEvent
		// Fired when the user pushes the pointer on the map.

View on GitHub (pinned to c96f31a7a3)

Solutions

1. Call setView(center, zoom) or fitBounds(...) before reading center/pixelOrigin.
2. Listen for the map's 'load' event and run dependent code in that handler.
3. Guard: if (map._loaded) { ... } else map.once('load', () => {...}).
4. For layers, use onAdd (which runs after the map is ready) rather than beforeAdd for center-dependent logic.

Example fix

// before
const map = new L.Map('node');
const c = map.getCenter(); // _loaded is false -> throws
// after
const map = new L.Map('node').setView([51.5, -0.09], 13);
const c = map.getCenter();
// or defer: map.once('load', () => { const c = map.getCenter(); });

function getCenterIfLoaded(map, fallback) {
  return map._loaded ? map.getCenter() : fallback;
}
// Or subscribe:
map.once('load', () => { const c = map.getCenter(); });

function isMapLoaded(map) { return !!map._loaded; }

try { return map.getCenter(); }
catch (e) { if (/Set map center and zoom first/.test(e.message)) { map.once('load', () => map.getCenter()); } else throw e; }

When it happens

Trigger: const map = new L.Map('node'); map.getCenter(); before any setView; calling getCenter() synchronously after construction; calling getPixelOrigin() in a beforeAdd hook.

Common situations: Calling getCenter()/getPixelOrigin() during component init before setView or fitBounds ran; reading the center in a layer's beforeAdd; SSR or early render where the map never loaded; assuming the map is ready immediately after `new Map`.

Related errors

• Must add layer to map before using getCenter()
• Must add layer to map before using getCenter()
• Map container is being reused by another instance
• Map container not found.
• Map container is already initialized.

AI-assisted analysis of Leaflet/Leaflet@c96f31a7a3 (2026-08-13). Data as JSON: /api/errors/23188661ce2f6c32. Report an issue: GitHub.