Leaflet Zooming in Causes TypeError: coordinates must be finite numbers
If your Leaflet map works perfectly on initial load but crashes with a TypeError: coordinates must be finite numbers as soon as you scroll or click the zoom button, you are likely hitting a projection mismatch. This error occurs when Leaflet attempts to "unproject" a pixel coordinate back into a Latitude/Longitude pair and receives NaN (Not a Number) or Infinity instead of a valid float.
1. The Common Culprit: Custom CRS and Proj4Leaflet
By default, Leaflet uses EPSG:3857 (Web Mercator). If you are using a local coordinate system (like the Dutch RD-coordinates EPSG:28992 or British National Grid) via the Proj4Leaflet plugin, the most common cause is an undefined or insufficient resolutions array.
- The Issue: When you zoom into a level that isn't defined in your
resolutionsarray, the math inside theunprojectfunction breaks. - The Fix: Ensure your
L.Proj.CRSdefinition includes a resolution for every zoom level you allow on the map.
// Example of a correct Proj4Leaflet CRS definition
var crs = new L.Proj.CRS('EPSG:28992', '+proj=sterea ...', {
resolutions: [3440.64, 1720.32, 860.16, 430.08, 215.04, 107.52, 53.76, 26.88, 13.44, 6.72, 3.36, 1.68, 0.84, 0.42, 0.21],
origin: [0, 0]
});2. Mismatched Lat/Lng Ranges
Leaflet expects the center of the map to be in WGS84 (EPSG:4326) coordinates (Latitude -90 to 90, Longitude -180 to 180). If you accidentally pass coordinates in meters (like 155000, 463000) directly to map.setView() or center, the zoom calculation will eventually produce an "infinite" number when trying to fit those values into a degree-based grid.
3. Troubleshooting Diagnostic Table
| System Symptom | Likely Root Cause | Immediate Action |
|---|---|---|
| Error only on high zoom | Missing resolution in CRS array. | Add more steps to your resolutions list in the CRS options. |
| Error on first zoom event | Invalid center coordinates. |
Ensure your map center is in [Lat, Lng] degrees, not meters. |
| Error with React-Leaflet | State update race condition. | Verify that zoom and center props aren't becoming undefined during the transition. |
| Error with worldCopyJump | Antimeridian wrapping glitch. | Try setting worldCopyJump: false in your Map options. |
4. Advanced Debugging with checkCoord
If you are still stuck, you can "catch" the bad coordinate before Leaflet crashes. Inside your zoom handler, check the map bounds. If map.getBounds() returns NaN values, the issue is definitely in the projection math.
map.on('zoomend', function() {
const center = map.getCenter();
if (!isFinite(center.lat) || !isFinite(center.lng)) {
console.error("Zoom produced non-finite coordinates!", center);
}
});Conclusion
The TypeError: coordinates must be finite numbers in Leaflet is a safety mechanism that prevents the browser from trying to render an "infinite" map. By ensuring your resolutions array matches your max zoom and confirming that you are passing WGS84 Lat/Lng to the map center, you can eliminate this error in 2026. Remember: Proj4Leaflet handles the display, but Leaflet always wants to talk in degrees.
Keywords
Leaflet TypeError coordinates must be finite numbers, Leaflet zoom crash, Proj4Leaflet resolutions error, Leaflet EPSG:28992 zoom fix, coordinates must be finite numbers on zoom in, GIS web mapping debug 2026, Leaflet coordinate projection mismatch.
