Mapbox-GL-Utils adds a number of utility functions and syntactic sugar to a Mapbox-GL-JS map instance. If you write a lot of Mapbox-GL-JS code, you may appreciate the more concise form, and simpler API.
- No need to distinguish between paint, layout and other properties.
- All properties can be expressed as camelCase rather than kebab-case.
- Layer operations can act on an array of layers, not just one.
- Source types, layer types and property names are incorporated into function names:
- Some other convenience functions:
- Better click and hover functions:
- Some functions behave better:
removeLayer()(not an error if layer doesn't exist),
removeSource()(removes attached layers automatically),
setFilter()(works on multiple layers at once)
// Adds U property to map, containing these methods.const U = ;// Certain methods (eg hoverPopup) require access to the mapboxgl library itselfconst mapboxgl = ;const U = ;
Adding and removing layers
// Conveniently add a line feature, mixing paint, layout and other properties.// Notice you can use camelCase for all property names.mapU;mapU;// Also addFill, addFillExtrusion, addRaster, addVideo, addSymbol, addHillshade, addHeatmap// You can sneakily create a datasource (with the same id), by passing in...// ...a URL to a GeoJSONmapU;// ... a GeoJSON as a data structureconst geojson = type: 'Feature' ... ;mapU;// ...or a vector tile source hosted on Mapbox.mapU;// and of course add the layer "before" another layer if needed:mapU;// removeLayer() doesn't throw errors if the layers don't existmapU;
Adding and removing sources
// Simpler way to create GeoJSON source:mapU;// Or create a GeoJSON source with initially blank data:mapU;// Simpler ways to create a vector tile source:// There's also addRaster(), addRasterDem(), addImage(), addVideo()mapU;mapU;// Additional properties still workmapU;// Automatically removes any layers using these sources. Not an error if sources don't exist.mapU;// You can also use the returned object to add layers conveniently:mapU;// Replace the source on an existing layer. (Actually removes and re-adds it.)mapU;mapU;// To change the source layer, pass a third argument, or null to clear it (if switching from vector tiles to geojson)mapU;
Setting properties and updating data
// Every property has a setXxx() form:mapU;// And they all work on multiple layers at once:mapU;// There's also a more familiar setProperty() form.mapU;mapU;// Existing properties aren't touchedmapU;// Simpler way to update source data:mapU;// Easier to remember way to turn layers on and off:mapU;mapU;mapU;
Hovering and clicking
// Use the mouse 'finger' cursor when hovering over this layer.mapU;// Sets a "hover" feature-state to be true or false as the mouse moves over features in this layer.// Requires that features have an `id`.mapU;// Want to apply the hover feature-state to a different source?mapU;// You can also add additional event handlers:mapU
// Like on('load') but fires immediately (and reliably) any time after map already loaded.mapU;// Gets the layer definition. Mapbox's `getLayer()` has weird paint and layout properties.const layer = mapU;// Resets all other properties to default first. Ignores non-paint, non-layout properties.map;// properties() converts an object to a layer object accepted by Mapbox-GL-JSmap;// layerStyle() is flexible, pass as many or as few of id, source, and type (in that order) as you like:mapUmapUmapUmapU// Hide/show/toggle all the layers attached to this sourcemapU;mapU;mapU;// Update several filters at once.mapU;// Conveniently load an image into the map in one stepmapU;// Seamlessly incorporate [Jam Session]() expressions:const U = ;mapU;// Update the map style's root "transition" propertymapU;