Measure and display FPS on MapLibre GL JS

If you are working on maps, sooner or later you will want to debug if anything in your code is affecting the performance of the rendering. It’s as simple as monkey patching Map._render and using mrdoob‘s ubiquitous stats.js monitor.

First install the module

$ npm i stats.js

Then add this snippet after initializing the map

import Stats from 'stats.js'
[...]
const map = new maplibregl.Map(...)

const stats = new Stats()
const orig = map._render
map._render = (...args) => {
  stats.begin()
  const res = orig.apply(map, args)
  stats.end()

  return res
}

document.body.appendChild(stats.dom)
[...]