Skip to main content

Plugins and frameworks

Mapbox GL JS plugins include features and functionality that extend the core Mapbox GL JS library.

Many plugins are maintained by the Mapbox developer community and welcome questions and contributions on GitHub.

book
Help improve this list

If you know of a Mapbox GL JS plugin that should be added, removed, or updated here, let us know by using the Share your feedback widget on this page.

User interface plugins (12)

UI plugins offer features and functionality related to map controls and other things that users can touch or interact with, like draw tools, map export tools, directions and geocoding controls, and more.
mapbox-gl-compare
Enables users to compare two maps by swiping left and right.
mapbox-gl-controls
Adds controls for a ruler, style inspector, localization, and style switcher.
mapbox-gl-directions
Adds a control to allow users to plot driving, walking, and cycling directions on the map. Directions API calls are [billable by request](https://docs.mapbox.com/api/navigation/directions/#directions-api-pricing).
mapbox-gl-draw
Adds support for drawing and editing features on Mapbox GL JS maps.
mapbox-gl-elevation
Adds a control that inquiry altitude from terrain RGB tileset.
mapbox-gl-export
Adds a control that exports the map as a PDF or PNG.
mapbox-gl-geocoder
Adds a geocoder control to Mapbox GL JS. Geocoding API calls are [billable by request](https://docs.mapbox.com/api/search/geocoding/#geocoding-api-pricing).
mapbox-gl-infobox
Adds a control to display an infobox or a gradient.
mapbox-gl-legend
Adds a control that shows a legend generated from the map style.
mapbox-gl-opacity
Make multiple tile layers transparent.
mapbox-gl-style-switcher
Adds a control to switch between styles.
mapboxgl-minimap
Adds a control to show a miniature overview of the current map.

Map Rendering Plugins (9)

Map rendering plugins offer features and functionality related to things that appear on a map, like advanced custom layers, map labels, data visualizations, and more.
mapbox-gl-language
Automatically localizes the map into the user’s language.
mapbox-gl-rtl-text
Adds right-to-left text support to Mapbox GL JS.
mapbox-gl-traffic
Hide and show traffic layers on your map with an optional toggle button.
mapbox-gl-animated-popup
An animated popup component for Mapbox GL JS.
mapbox-gl-rain-layer
An animated rain layer for Mapbox GL JS.
deck.gl
Adds advanced WebGL visualization layers to Mapbox GL JS.
L7
Adds large-scale WebGL-powered geospatial data visualization framework to Mapbox GL JS.
flowmap.blue
Render a geographic flow map visualization from a spreadsheet published on Google Sheets.
TextureMap
Textures, patterns, and shapes that make web maps work for people with color vision deficiency. Design colorblind-friendly Mapbox GL maps.

Framework Integrations (9)

Framework integration plugins can help you use Mapbox GL JS with external frameworks.
echartslayer
Provides an [echarts](https://ecomfe.github.io/echarts/index-en.html) integration for Mapbox GL JS.
wtMapbox
Provides a [Webtoolkit](https://www.webtoolkit.eu/wt) integration for Mapbox GL JS.
react-mapbox-gl
Provides a [React](https://facebook.github.io/react/) integration for Mapbox GL JS.
angular-mapboxgl-directive
Provides an [AngularJS](https://angularjs.org/) directive for Mapbox GL JS.
ngx-mapbox-gl
Provides an [Angular](https://angular.io/) integration for Mapbox GL JS.
elm-mapbox
Provides an [Elm](https://elm-lang.org) integration for Mapbox GL JS.
ember-mapbox-gl
Provides an [Ember](http://emberjs.com) integration for Mapbox GL JS.
vue-mapbox
Provides a [Vue.js](https://vuejs.org/) integration for Mapbox GL JS.
@types/mapbox-gl
This npm package contains [TypeScript](https://www.typescriptlang.org/) type definitions for Mapbox GL JS.

Utility Libraries (8)

Utility library plugins offer features and functionality for tasks like data processing and format conversion, synchronizing objects, or building with convenience methods.
turf
Provides advanced geospatial analysis tools.
mapbox-gl-layer-groups
Manages layer groups in Mapbox GL JS.
expression-jamsession
Converts [Mapbox Studio formulas](https://www.mapbox.com/help/studio-manual-styles/#use-a-formula) into [expressions](https://docs.mapbox.com/style-spec/reference/expressions).
simplespec-to-gl-style
Converts GeoJSON styles with ["simplestyle-spec"](https://github.com/mapbox/simplestyle-spec/) to a Mapbox GL Style.
mapbox-gl-supported
Determines if the current browser supports Mapbox GL JS.
mapbox-gl-sync-move
Syncs movement between two Mapbox GL JS maps.
mapbox-choropleth
Create a choropleth layer from a CSV source and a geometry source.
mapbox-gl-utils
Manage layers, sources, and properties with syntactic sugar and convenience functions.

Development Tools (3)

Development tool plugins offer features and functionality related to the development process, like inspection tools that give you insight into a map’s performance or data sources.
mapbox-gl-inspect
Adds an inspect control to view vector source features and properties.
mapbox-gl-fps
A frames-per-seconds GUI control and measurer with statistic report output.
mapbox-gl-framerate
A frame rate control to evaluate map rendering performance.
Was this example helpful?