Maplibre GL JS

The Maplibre GL JS map is the map component on the app.

The Maplibre GL JS API is for the map function. You use this API to do things like:

• initialize a map component at a certain [lng, lat] center and a certain zoom level with a certain style
• add markers, icons, circles, and polygons to the map
• use map events to do callbacks such as add popups or move the map around
• watch the map's properties like zoom level, and then add or remove features based on the property.

The Maplibre GL JS API documentation and the examples are very helpful for writing the js to create and add to the map. And because the codebase is so close to Mapbox, often if you are debugging something, someone's issue and peoples' suggestions with Mapbox in Github or Stack Overflow can be useful to read.

Note: the map style is determined by the map tiles used and how they are added to the project's $config which contains Maplibre styles.

Here is how to initialize a maplibre map.