https://github.com/mapbox/mapbox-gl-framerate

A frame rate control to evaluate map rendering performance
https://github.com/mapbox/mapbox-gl-framerate

Last synced: about 17 hours ago
JSON representation

A frame rate control to evaluate map rendering performance

• Host: GitHub
• URL: https://github.com/mapbox/mapbox-gl-framerate
• Owner: mapbox
• License: isc
• Created: 2018-11-11T19:50:29.000Z (about 6 years ago)
• Default Branch: publisher-production
• Last Pushed: 2022-05-16T15:59:08.000Z (over 2 years ago)
• Last Synced: 2024-09-20T13:02:26.510Z (4 months ago)
• Language: JavaScript
• Homepage: https://labs.mapbox.com/mapbox-gl-framerate
• Size: 208 KB
• Stars: 21
• Watchers: 81
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-maplibre - mapbox-gl-framerate - A frame rate control to evaluate map rendering performance. (Development Tools Plugins / JavaScript)

README

        
mapbox-gl-framerate ([demo](https://labs.mapbox.com/mapbox-gl-framerate/))

---

A frame rate control to evaluate map rendering performance

### Usage

```js

const map = new mapboxgl.Map({

  container: 'map',

  style: 'mapbox://styles/mapbox/light-v9'

});

const fps = new mapboxgl.FrameRateControl({ /* optional options */ });

map.addControl(fps);

```

### Options

| Property | Value | Description |

| ---- | ---- | ---- |

| background | 
rgba(0,0,0,0.9)
 | Color of the background container. |

| barWidth | 
4 * window.devicePixelRatio
 | Width of each individual performance bar. |

| color | 
#7cf859
 | Bar & text color. |

| font | 
'Monaco, Consolas, Courier, monospace'
 | Comma separated string of fonts for text. |

| graphHeight | 
60 * window.devicePixelRatio
 | Graph height. |

| graphWidth | 
90 * window.devicePixelRatio
 | Graph width. |

| graphTop | 
0
 | Top position of the graph. |

| graphRight | 
5 * window.devicePixelRatio
 | Right position of the graph. |

| width | 
100 * window.devicePixelRatio
 | Container width of the graph. |


### Running the demo

```sh

npm install & npm start & open http://localhost:1337/

```