v7 is a complete rewrite of the library. It addresses many long-standing issues in v5 and v6 limited by legacy architecture decisions. The most notable results of this redesign are:
- Performance: minimize the overhead of React, offer the same fast and smooth interaction as the native library
- Lightweight: the ESM build size is reduced from 219k to 57k
- Predictability: Components behave the same as their mapbox counterparts. Props are mapped 1:1 from the native options wherever appropriate. Almost all imperative APIs (
flyTo
,fitBounds
etc.) can now be called directly without breaking the React binding. - Compatibility: first and third-party plugins! Directly use mapbox-gl-draw, mapbox-gl-geocoder, to name a few.
- TypeScript compliant: the code base is now entirely written in TypeScript, and all types can be imported.
Visit the upgrade guide if you are trying to upgrade from v5 and v6.
- Add mapLib API (#1703)
- Support inline styling for all components (#1702)
- Refactor Mapbox class (#1701)
- Improve typing (#1695)
- [v7] Fix popup className update in mapbox v1/maplibre (#1694)
- [v7] Fix double controls in strict mode (#1678)
- [v7] Fix AttributionControl prop typo (#1679)
- [v7] Handle unmount order (#1676)
- [v7] Fix synchronization during transition (#1675)
- [v7] Update MapRef (#1674)
- [v7] Bug fixes (#1673)
- [v7] Fix resize synchronization (#1670)
- [v7] Add fog, light, terrain props (#1669)
- [v7] support global settings with MapProps (#1668)
- [v7] Clean up typings and expose more utility types (#1667)
- Drop flow types support (#1666)
- Update
@types/mapbox-gl
dependency
- [v7] utility hooks (#1663)
- [v7] Add Layer and Source (#1657)
- [v7] Control components (#1656)
- [v7] Marker and Popup (#1655)
- [v7] Map component (#1652)
- Typescript dev setup
- Add eventRecognizerOptions prop (#1302)
- Controller inertia (#1303)
- Misc component bug fixes (#1301)
- Align control component APIs (#1297)
- Minor fixes to GeolocateControl (#1296)
- Add AttributionControl (#1295)
- Smooth zoom on scroll (#1288)
- Defer onInteractionStateChange callback (#1287)
- Prevent overlay container from scrolling on focus (#1286)
- Fix no token warning message (#1289)
- Clean up and document MapContext and useMapControl APIs (#1278)
- Fix React error when transition is triggered (#1277)
- Bump mapbox-gl (#1279)
- Refactor StaticMap and InteractiveMap into functional components (#1271)
- Resolve prettier conflict (#1274)
- Migrate to TypeScript: initial commit (#1268)
- Fix bug where Source does not render its children on first render (#1250)
- Move controls to functional component (#1242)(#1243)(#1244)(#1245)
- Elevate map to top-level MapContext (#1233)
- Replace react resizer with ResizeObserver (#1174)
- Add support for 'sky' layer type to Layer component (#1270)
- Drop a breaking change intended for the next minor release
- [email protected] (#1263)
- Change
maxPitch
to85
- Safe check layer props (#1225)
- Fix dynamic position offscreen (#1253)
- Fix dynamic position tests (#1255)
- Use valid fill-extrusion value for layer type (#1199)
- Add capturePointerMove to NavigationControl (#1215)
- Fix user location dot offset (#1220)
- Safety check before calling cloneElement (#1219)
- Fix for layout and paint diffing logic (#1194)
- Add types for layer type and source-layer (#1192)
- Support updating vector source (#1196)
- Fix IE compatibility (#1195)
- Add label prop to FullscreenControl (#1197)
- Always rerender overlay after map initialization (#1172)
- NavigationControl: fall back to the latest UI version (#1124)
- [Geolocate] fix auto when location blocked (#1126)
- [Geolocate] Auto trigger when component loads (#1116)
- Check if map style is loaded before removing source or layer (#1123)
- Migrate to import * as React from 'react' (#1038)
- Fix issue where translate by partial pixels causes blurry rendering (#1039)
- Bump dev tools (#1040)
- Correct interaction state on double click (#1081)
- Fix edge case in transitionDuration:auto (#1080)
- Sanity check in source/layer update (#1022)
- Bump mjolnir.js dependency (#990)
- Re-export setRTLTextPlugin plugin (#1010)
- Fix GeolocateControl error when used with StaticMap (#1012)
- Fix issue where adding popup enables double click recognizer (#1013)
- Deep compare source props (#985)
- Export WebMercatorViewport (#979)
- Fix flyToInterpolator crash when transitioning to the same viewport center (#975)
- Fix NavigationControl crash when used with external context (#974)
- Upgrade viewport-mercator-project (#961)
- Fix control icons when used with mapbox-gl@>=1.6 (#967)
- Add ScaleControl (#966)
- Enhance GeolocateControl component (#761)
- Fix React state update warning (#968)
- marker component perf (#949)
- Allow customizing labels in NavigationControl and GeolocateControl (#959)
- Remove marker when GeolocateControl is disabled (#960)
- Fix TransitionManager when used with deck.gl's interpolators (#956)
- Remove overwritten dotElement from geolocate control (#944)
- Fix geolocate control crash: disable Mapbox's showUserLocation marker (#943)
- Fix geolocate control crash (#934)
- Fix more crashes when source/layer components are removed (#933)
- Avoid mutating style objects during normalization (#926)
- Fix crash during Source component removal (#928)
- Ignore empty mapStyle (#927)
- Use JSX sources/layers in examples (PR 2/2) (#897)
- Add React Source and Layer components (PR 1/2) (#896)
- Add babel react preset and migrate react components to jsx (#875)
- React 16.9.0 deprecated lifecycles (#861)
- remove deprecated react lifecycle methods (#863)
- Add pinchcancel handler (#859)
- fix delay after clicking close button (#857)
- Remove event manager properly on unmount (#847)
- Bump mjolnir (#839)
- Fix compressed popup when reaching right bound of map (#823)
- Fix interaction state when using mouse wheel (#840)
- Fix popup styling (#818)
- Fix style diff warning when reusing map (#816)
- bump mjolnir version (#812)
- Update mapbox-gl to 1.0.0 (#795)
- Use JSX sources/layers in examples (PR 2/2) (#897)
- Add React Source and Layer components (PR 1/2) (#896)
- Fix draw polygon example styling (#899)
- Add babel react preset and migrate react components to jsx (#875)
- Viewport flyTo Interpolation: add support for auto duration and other options. (#866)
- React 16.9.0 deprecated lifecycles (#861)
- remove deprecated react lifecycle methods (#863)
- Add pinchcancel handler (#859)
- fix delay after clicking close button (#857)
- Remove event manager properly on unmount (#847)
- Bump mjolnir (#839)
- Fix compressed popup when reaching right bound of map (#823)
- Fix interaction state when using mouse wheel (#840)
- Fix popup styling (#818)
- Fix style diff warning when reusing map (#816)
- bump mjolnir version (#812)
- mapbox-gl 0.54
- Pass callbacks via MapContext (#799)
- Fix geolocate control missing key warning (#789)
- Custom mapbox server (#769)
- Fix geolocate control marker styling (#764)
- Fix synchronous redraw bug (#772)
- Fix mapbox export warning (#757)
- add fullscreen support (#696)
- add geolocate control (#724)
- Fix: popup close button click event propagates to map (#751)
- Fix static context bug (#749)
- Bump mapbox-gl to 0.53 (#739)
- add onNativeClick callback (#733)
- fix synchronous redraw (#736)
- Consolidate InteractiveContext and StaticContext into one (#718)
- Deregister mapbox events listeners when destroy map (#723)
- Force map rerender synchronously after props update (#720)
- Remove excessive fields from NavigationControl's callback argument (#702)
- Default onError handler to console.error (#706)
- Don't query interactive layer ids before map has loaded (#708)
- Fix onLoad event calling when reuseMaps is set to true (#704)
- Reverse polarity of compass bearing rotation (#694)
- Fix dragging marker with offset (#693)
- Remove passive listener console warning in Chrome (#689)
- Disable console logging of package version (#688)
- Update mapbox-gl to 0.52.0 (#684)
- Fix map controller class extensibility (#674)
- Bump mapbox dependency to 0.51 (#670)
- Fix crash when
viewState
does not contain pitch or bearing (#671)
- Cache the interactive context to prevent context thrashing (#664)
- Remove math.gl from dependencies (#666)
- Fix popup bug when closeOnClick is off (#660)
- Bump maxZoom support to 24 (#659)
- New interruption mode: UPDATE (#631)
- API audit round 2 (#652)
- Set up flow (#651)
- Don't override visibility style when visible is true (#650)
- Fix usage of map ref in interactive-map (#645)
- Various bug fixes (#648)
- Add support for Create React App access token environment variable (#633)
- Upgrade function ref to createRef (#637)
- API audit (#638)
- Do not call onResize during render (#643)
- Fix render error when using
viewState
instead of flat props (#632)
- Add
sortByDepth
option to Popup component (#623) - Remove bower dependency (#615)
- Handle zoom center during linear transition (#625)
- Add interaction callbacks (#626)
- Add map to context (#627)
- Remove click delay in map controls when
captureDoubleClick
is on (#628)
- Upgrade to new React context API (#613)
- Support relative map size (#614)
- Bump mapbox-gl dep to 0.50.0 (#618)
- Bug fixes for auto-resize mode (#619)
- Remove usage of deprecated
interactive
properties in map styles (#621)
- Fix browser targets (#610)
- Add more interaction states (#573)
- Remove commonjs from globals (#592)
- Remove minify to make the code debuggable (#593)
- Upgrade build system (#596)
- Fix: Stylesheet check (#601)
- New: Support external GL context (#603)
- Provide static browser/node targets (#599)
- Remove immutablejs from dependency
- Use Mapbox's style diffing
- Add drag and drop support for Marker (#576)
- Fix queryRenderedFeatures (#560)
- Dcoument compability with create-react-app and Typescript (#540)
- Bump MapboxGl Version (#554)
- Bump Math.gl Version (#549)
- Move Visibility Check to StaticMap (#548)
- Pass the
maxTileCacheSize
option to the MapboxGL constructor (#546)
- NEW:
viewState
andonViewStateChange
prop - NEW: Automatically load missing Mapbox stylesheet
- FIX:
reuseMap
prop now respects mapStyles - Log react-map-gl version number
- Upgraded build system to support webpack 4 tree-shaking
- FIX:
captureClick
not working on Popup components
- NEW:
onContextMenu
prop - NEW:
touchAction
prop - FIX: support usage in Electron environments
- NEW: bump
mapbox-gl
version to 0.45
- FIX: support for to-be-deprecated prop
onChangeViewport
in viewport transition - FIX: reused map now applies new mapStyle
- FIX: Cannot scroll over popups with
captureScroll
turned on
- FIX:
onViewportChange
triggered with nothing changed - FIX: mapbox error when attempting to remove sources
- FIX: flicker when updating clustered GeoJSON source
- Add null check to BaseControl ref callback (#479)
- Manually bind methods (#463)
- mapbox-gl 0.44.0
- Fix
reuseMap
option - Add showZoom and showCompass options (#448)
- mapbox-gl 0.42.2
- Viewport transition: feature equivalent to Mapbox's flyTo and easeTo; smooth transition when using keyboard navigation or the NavigationControl. Add new props
transitionDuration
,transitionInterpolator
,transitionEasing
,transitionInterruption
,onTransitionStart
,onTransitionInterrupt
,onTransitionEnd
- Navigation using keyboard and the navigation control matches Mapbox behavior, including smooth transition when zooming and panning.
- Touch rotate support: new props of InteractiveMap
touchZoom
andtouchRotate
- Expose Mapbox's
transformRequest
API - Map Reuse (experimental): A new property
reuseMaps
is provided for applications that create and destroy maps, to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations.
- FIX: custom events in MapControls
- Add right mouse button click & drag to rotate
- Allow controls and overlays to block map interactions
- Extend control elements with custom classNames
- Bump Mapbox to 0.40.1
- StaticMap: Based on new Mapbox wrapper that supports reuse of mapbox maps
- StaticMap: Renders HTML mapbox token warning if no token supplied
- StaticMap: Remaining style diffing utils broken out
- FIX: missing
babel-runtime
module at runtime - FIX: interaction when map is scaled by CSS transform
Add babel transform-runtime to es5 build for IE11 support.
v3.0.2
skipped because of faulty publish- FIX: unbound
this
in ref callback for canvas-overlay (#337)
- FIX: pinch zoom
- FIX: wheel scrolling is blocked when onViewportChange is null
This is a major release of the library. For more information, please see What's new in latest documentation.
- Changed
postinstall
script again to use postinstall.js to run flow-remove-types. This attempts to resolve cross-platform issues. (#192)
- Fixed calculation of map pitch during interaction
- Changed
postinstall
script
- We updated to
mapbox-gl
0.31.0 which introduced flow types as well as having a hard dependency on Node >= v4. We now assume that you are on Node >= v4 and npm >= v3. - We want >= v2.0.0 of
react-map-gl
to continue trackingmapbox-gl
updates as closely as possible. This means minor / patch updates will be published more frequently. - This also marks the start of more aggressive development on
react-map-gl
and we will start rolling out bigger updates in the coming months.
- Bump
mapbox-gl
to v0.31.0 - Add
maxZoom
prop and defaults to20
- Add
onLoad
event handler - Add
onClick
prop handler (#140)
- Ensure fitBounds doesn't return NaN zoom value (#159)
- Use 'changedTouches' for 'touchend' / 'touchcancel' events (#164)
- Typo fix in draggable-points overlay (#178)
- Remove mapbox-gl's
Point
dependency from map-interactions. (#161)
- Added more info about usage with Webpack in README
- Use any one of the function keys {command, shift, ctrl, alt} to enable the perspective mode.
- Bump Mapbox version to 0.26
-
Provide a way to control per-layer interactivity - onClickFeatures and onHoverFeatures have the option to only query selected layers. Enabled by setting the
interactive
property totrue
in layer styles. (#131) -
Fix bug where onClickFeatures is fired after panning/rotating (#133)
- Hotfix: GeoJSON style support issue with mapbox-gl 0.24.0
- Reduced flicker when updating GeoJSON sources in styles - (Thanks @tsemerad) Covers certain cases, for more info see #124)
MapGL.supported()
- New function which calls mapbox-gl'ssupported()
. Enables applications to detect unsupported browsers and avoid rendering the react-map-gl, for graceful recovery or error handling.- Bumps mapbox-gl dependency to 0.24.0.
- Cursor now changes to pointer over interactive features
- Fix grab cursor in recent Chrome browsers
- Add touch support (Thanks @cammanderson)
- Remove alphaify dependency due to peerDependency issues
- Bumped
alphaify
dependency to avoid pulling in d3 v3 as sub-dependency - Added test case for
fitBounds
- Bump d3 to v4, replaces monolithic d3 dependency with specific d3 submodules.
- Added
clickRadius
prop to allow for customization of hitbox around clicked point
- Add
fitBounds
- Update mapbox-gl from v0.21.0 (from v0.20.0)
- Now supports
bearing
andpitch
properties, per mapbox-gl-js api documentation. These props default to 0 which means that maps will still be rendered in flat/ortographic mode when they are not provided. - Setting the
perspectiveEnabled
prop to true enables a perspective control mode (Command-Drag) allowing the user to change perspective.
Limitations: The existing overlays (HTMLOverlay, CanvasOverlay, SVGOverlay etc) do not currently support perspective mode. For a set of overlays that do support perspective mode, see deck.gl
Note: The map state reported by onViewportChanged may now contain additional state fields (tracking not only pitch and bearing, but also transient information about how the projection is being changed by the user). To simplify and future proof applications, it is recommended to simply save the entire mapState in your app store whenever it changes and then pass it back to the component rather than trying to keep track of individual fields (More info in README.md).
Note 2: A utility for calculating projections and projection matrices based
on props that include pitch and bearing will be provided separately.
In the mean-time, ViewportMercatorProject
still works
for non-perspective maps.
- The code base has been updated to ES6+ and is now transpiled back to ES5 before being published on npm.
- The map overlay components (HTMLOverlay, CanvasOverlay, SVGOverlay etc)
previously had to be imported via their relative source paths (e.g.
import SVGOverlay from 'react-map-gl/src/overlays/svg-overlays';
). These files still exist, but have now be rewritten in ES6+ which will not work for most applications. Instead the various Layers components are now exported as additional named exports from the module, and can be accessed using "desctructuring" imports:
import MapGL, {SVGOverlay} from 'react-map-gl';
or
var MapGL = require(`react-map-gl`);
var SVGOverlay = MapGL.SVGOverlay;
The previously exported fitbounds
function will be made available
as part of the separate package of utilities that handles coordinate
projections in perspective mode.
- React 16 preliminary integration.
- Fix: viewport misalignment with Mapbox at low zoom levels
- Fix: scroll zoom with touch does not block page scrolling
- Fix: feature lookup error when child components are rendered with error
- WEBSITE: Polish docs
- WEBSITE: Add links to other libraries
- WEBSITE: babel config fix
- update event manager (#283)
- Fix: Event Manager update fixes an issue where
scrollZoom
disabled will also consume the scroll event preventing the page from scrolling. - Fix: breakage on node (#292)
- BREAKING:
fitBounds
is now accessed through thePerspectiveMercatorViewport
class - BREAKING:
react-map-gl
now requires at least Node>=v6.4
in development - New:
SVGOverlay
CanvasOverlay
andHTMLOverlay
supports perspective mode; no longer requires viewport props
- BREAKING: Remove
fitBounds
util (#278) - Updated to
mapbox-gl-js
version0.38.0
(#285) - Update overlays code and documentation (#282)
- Fix: Compass arrow in navigation control (#277)
- New: Add new examples (#270)
- Fix: Add
onLoad
callback to static map props and componentDidMount (#269) - Fix: Change
pan
event listener to move specificpanmove
(#272)
- Bump mapbox-gl to 0.37.0
- New:
fitBounds
util function - Fix: Map flickering when drag over popups
- BREAKING:
onChangeViewport
is nowonViewportChange
- New event management system based on hammer.js
- FIX: Touch interaction
- Remove
MapControls
React component - Remove
ControllerClass
prop fromInteractiveMap
- Add
mapControls
prop toInteractiveMap
- Add
visibility
prop toStaticMap
for showing/hiding the map - Rename
_getMap
method togetMap
- Add
queryRenderedFeatures
method that exposes the MapboxGL API with the same name - Remove all interactivity related props from
StaticMap
- Remove intermediate state props from
InteractiveMap
:startPanLngLat
,startZoomLngLat
,startBearing
,startPitch
,startZoom
. InteractiveMap
is now stateful (isDragging
andisHover
)- Rename
onClickFeatures
andonHoverFeatures
toonClick
andonHover
. RemoveignoreEmptyFeatures
prop. The callbacks are invoked with an event object withfeatures
andlngLat
fields. - New
getCursor
prop ofInteractiveMap
: returns cursor style from the current map state - Rename
displayConstraints
tovisibilityConstraints
- Remove
perspectiveEnabled
prop. AddscrollZoom
,dragPan
,dragRotate
,doubleClickZoom
,touchZoomRotate
props.
- NEW: Marker component
- NEW: Popup component
- FIX:
attributeControl
prop - NEW: NavigationControl component
- FIX: Prop comparison bug in static map
- FIX: Children get unmounted/re-mounted when the map is shown/hidden
- FIX: Viewport jump at start of rotation with pitch
- FIX: Viewport jump at start of pan with pitch
- FIX: Zoom around mouse position
-
NEW: Supports "tree-shaking" in Webpack2 and Rollup - adds new package.json
module
field that points to files with preserved ES6 import/exports. -
NEW: Significant reduction in number of npm dependencies.
-
NEW: Setting the new
pressKeyToRotate
prop tofalse
will make rotation rather than pan the default operation, requiring a function key to be pressed for pan. -
BREAKING: The
ChoroplethOverlay
React component is no longer part of the exported library. It has been moved to examples folder, applications that still need it can copy it from there instead of importing it directly. RemovingChoroplethOverlay
eliminated a number of big D3 dependencies from react-map-gl, which seemed like the right tradeoff since most users are using mapbox styles or deck.gl layers for Choropleths.
- Event handling (Pan/Zoom/Tilt) has been significantly refactored, and is
now handled by a separate component (
MapControls
). - A new
StaticMap
component is the actualmapbox-gl
wrapper. It only handles click and hover events. - The separation of event handling from the map component opens up some
interesting use cases, including creating apps that can modify viewports
beyond mapbox' rendering limits and using the
MapControls
with non-mapbox maps.
- A new
InteractiveMap
is provided, that uses theMapControls
component to add pan/zoom/title toStaticMap
.InteractiveMap
closely resembles the originalMapGL
component from version 1 and is the default export ofreact-map-gl
in v2.react-map-gl
should thus be API compatible with v1 in most cases, although there might be subtle differences in how events are handled.