react-map-gl - npm Package Compare versions

Comparing version 6.1.15 to 6.1.16

CHANGELOG.md

@@ -5,2 +5,9 @@ # CHANGELOG
 
+## 6.1.16 (Jun 4, 2021)
+
+- Support Mapbox terrain (#1483)
+- Making features available to onMouseEnter (#1474)
+- Prevent attribution button from submitting forms (#1477)
+- Remove extra props in GeolocateControl callback (#1480)
+
 ## 6.1.15 (May 12, 2021)
@@ -7,0 +14,0 @@

dist/es5/components/attribution-control.js

@@ -110,2 +110,3 @@ "use strict";
   }, React.createElement("button", {
+    type: "button",
     className: "mapboxgl-ctrl-attrib-button",
@@ -112,0 +113,0 @@ title: props.toggleLabel,

dist/es5/components/geolocate-control.js

@@ -26,3 +26,3 @@ "use strict";
 
-var _transitionManager = _interopRequireDefault(require("../utils/transition-manager"));
+var _mapController = require("../utils/map-controller");
 
@@ -37,6 +37,2 @@ var _geolocateUtils = require("../utils/geolocate-utils");
 
-var LINEAR_TRANSITION_PROPS = Object.assign({}, _transitionManager["default"].defaultProps, {
-  transitionDuration: 500
-});
-
 var noop = function noop() {};
@@ -130,3 +126,3 @@
   var mapState = new _mapState["default"](newViewState);
-  var viewState = Object.assign({}, mapState.getViewportProps(), LINEAR_TRANSITION_PROPS);
+  var viewState = Object.assign({}, mapState.getViewportProps(), _mapController.LINEAR_TRANSITION_PROPS);
   var onViewportChange = props.onViewportChange || context.onViewportChange || noop;
@@ -133,0 +129,0 @@ var onViewStateChange = props.onViewStateChange || context.onViewStateChange || noop;

dist/es5/components/interactive-map.js

@@ -22,8 +22,6 @@ "use strict";
 
-var _staticMap = _interopRequireDefault(require("./static-map"));
+var _staticMap = _interopRequireWildcard(require("./static-map"));
 
 var _mapState = require("../utils/map-state");
 
-var _viewportMercatorProject = _interopRequireDefault(require("viewport-mercator-project"));
-
 var _transitionManager = _interopRequireDefault(require("../utils/transition-manager"));
@@ -39,2 +37,4 @@
 
+var _terrain = require("../utils/terrain");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -130,8 +130,8 @@
   var pos = [x, y];
-  var viewport = new _viewportMercatorProject["default"](Object.assign({}, this.props, this.props.viewState, {
-    width: this.width,
-    height: this.height
-  }));
   event.point = pos;
-  event.lngLat = viewport.unproject(pos);
+  var viewport = this.viewport;
+  var location = viewport.unproject(pos, {
+    targetZ: viewport.meterOffset[2]
+  });
+  event.lngLat = [location[0], location[1]];
   return event;
@@ -191,7 +191,2 @@ }
 
-    if (onHover) {
-      event.features = features;
-      onHover(event);
-    }
-
     var isHovering = Boolean(interactiveLayerIds && features && features.length > 0);
@@ -201,2 +196,10 @@ var isEntering = isHovering && !this.state.isHovering;
 
+    if (onHover || isEntering) {
+      event.features = features;
+
+      if (onHover) {
+        onHover(event);
+      }
+    }
+
     if (isEntering) {
@@ -310,2 +313,7 @@ onEvent.call(this, 'onMouseEnter', event);
         onViewportChange = _thisRef$props.onViewportChange;
+    Object.defineProperty(viewState, 'position', {
+      get: function get() {
+        return [0, 0, (0, _terrain.getTerrainElevation)(thisRef.map, viewState)];
+      }
+    });
 
@@ -335,2 +343,4 @@ if (onViewStateChange) {
   context.onViewportChange = handleViewportChange;
+  context.viewport = parentContext.viewport || (0, _staticMap.getViewport)(thisRef);
+  thisRef.viewport = context.viewport;
 
@@ -337,0 +347,0 @@ var handleInteractionStateChange = function handleInteractionStateChange(interactionState) {

dist/es5/components/marker.js

@@ -22,2 +22,4 @@ "use strict";
 
+var _terrain = require("../utils/terrain");
+
 var propTypes = Object.assign({}, _draggableControl.draggableControlPropTypes, {
@@ -42,2 +44,4 @@ className: PropTypes.string,
       dragOffset = state.dragOffset;
+  var viewport = context.viewport,
+      map = context.map;
 
@@ -48,7 +52,12 @@ if (dragPos && dragOffset) {
 
-  var _context$viewport$pro = context.viewport.project([longitude, latitude]),
-      _context$viewport$pro2 = (0, _slicedToArray2["default"])(_context$viewport$pro, 2),
-      x = _context$viewport$pro2[0],
-      y = _context$viewport$pro2[1];
+  var altitude = (0, _terrain.getTerrainElevation)(map, {
+    longitude: longitude,
+    latitude: latitude
+  });
 
+  var _viewport$project = viewport.project([longitude, latitude, altitude]),
+      _viewport$project2 = (0, _slicedToArray2["default"])(_viewport$project, 2),
+      x = _viewport$project2[0],
+      y = _viewport$project2[1];
+
   x += offsetLeft;
@@ -55,0 +64,0 @@ y += offsetTop;

dist/es5/components/popup.js

@@ -24,2 +24,4 @@ "use strict";
 
+var _terrain = require("../utils/terrain");
+
 var _crispPixel = require("../utils/crisp-pixel");
@@ -48,3 +50,2 @@
   className: '',
-  altitude: 0,
   offsetLeft: 0,
@@ -150,10 +151,19 @@ offsetTop: 0,
   }, [contentRef.current]);
-  var viewport = context.viewport;
+  var viewport = context.viewport,
+      map = context.map;
   var className = props.className,
       longitude = props.longitude,
       latitude = props.latitude,
-      altitude = props.altitude,
       tipSize = props.tipSize,
       closeButton = props.closeButton,
       children = props.children;
+  var altitude = props.altitude;
+
+  if (altitude === undefined) {
+    altitude = (0, _terrain.getTerrainElevation)(map, {
+      longitude: longitude,
+      latitude: latitude
+    });
+  }
+
   var position = viewport.project([longitude, latitude, altitude]);
@@ -160,0 +170,0 @@ var positionType = getPosition(props, viewport, contentRef.current, position);

dist/es5/components/static-map.js

@@ -10,8 +10,9 @@ "use strict";
 });
+exports.getViewport = getViewport;
 exports["default"] = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var React = _interopRequireWildcard(require("react"));
@@ -37,2 +38,4 @@
 
+var _terrain = require("../utils/terrain");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -47,2 +50,17 @@
 
+function getViewport(_ref) {
+  var map = _ref.map,
+      props = _ref.props,
+      width = _ref.width,
+      height = _ref.height;
+
+  var viewportProps = _objectSpread(_objectSpread(_objectSpread({}, props), props.viewState), {}, {
+    width: width,
+    height: height
+  });
+
+  viewportProps.position = [0, 0, (0, _terrain.getTerrainElevation)(map, viewportProps)];
+  return new _viewportMercatorProject["default"](viewportProps);
+}
+
 var UNAUTHORIZED_ERROR_CODE = 401;
@@ -113,3 +131,6 @@ var CONTAINER_STYLE = {
 
-  var _useState3 = (0, React.useState)([0, 0]),
+  var _useState3 = (0, React.useState)({
+    width: 0,
+    height: 0
+  }),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
@@ -129,6 +150,4 @@ size = _useState4[0],
 
-    var mapbox = new _mapbox["default"](_objectSpread(_objectSpread({}, props), {}, {
+    var mapbox = new _mapbox["default"](_objectSpread(_objectSpread(_objectSpread({}, props), size), {}, {
       mapboxgl: _mapboxgl["default"],
-      width: size[0],
-      height: size[1],
       container: mapDivRef.current,
@@ -157,3 +176,6 @@ onError: function onError(evt) {
             _height = _entries$0$contentRec.height;
-        setSize([_width, _height]);
+        setSize({
+          width: _width,
+          height: _height
+        });
         props.onResize({
@@ -174,6 +196,3 @@ width: _width,
     if (mapboxRef.current) {
-      mapboxRef.current.setProps(Object.assign({}, props, {
-        width: size[0],
-        height: size[1]
-      }));
+      mapboxRef.current.setProps(_objectSpread(_objectSpread({}, props), size));
     }
@@ -185,4 +204,4 @@ });
   }, []);
-  var preventScroll = (0, React.useCallback)(function (_ref) {
-    var target = _ref.target;
+  var preventScroll = (0, React.useCallback)(function (_ref2) {
+    var target = _ref2.target;
 
@@ -195,6 +214,6 @@ if (target === overlayRef.current) {
     value: _objectSpread(_objectSpread({}, context), {}, {
-      viewport: context.viewport || new _viewportMercatorProject["default"](_objectSpread(_objectSpread(_objectSpread({}, props), props.viewState), {}, {
-        width: size[0],
-        height: size[1]
-      })),
+      viewport: context.viewport || getViewport(_objectSpread({
+        map: map,
+        props: props
+      }, size)),
       map: map,
@@ -201,0 +220,0 @@ container: context.container || containerRef.current

dist/es5/utils/transition-manager.d.ts

@@ -8,4 +8,4 @@ import {TransitionInterpolator} from './transition';
   onTransitionEnd: Function,
-  onViewportChange: Function,
-  onStateChange: Function
+  onViewportChange?: Function,
+  onStateChange?: Function
 };
@@ -12,0 +12,0 @@

dist/es5/utils/transition-manager.js

@@ -48,5 +48,3 @@ "use strict";
   onTransitionInterrupt: noop,
-  onTransitionEnd: noop,
-  onViewportChange: noop,
-  onStateChange: noop
+  onTransitionEnd: noop
 };
@@ -53,0 +51,0 @@

dist/es6/components/attribution-control.js

@@ -76,2 +76,3 @@ import * as React from 'react';
   }, React.createElement("button", {
+    type: "button",
     className: "mapboxgl-ctrl-attrib-button",
@@ -78,0 +79,0 @@ title: props.toggleLabel,

dist/es6/components/geolocate-control.js

@@ -7,8 +7,5 @@ import * as React from 'react';
 import MapState from '../utils/map-state';
-import TransitionManager from '../utils/transition-manager';
+import { LINEAR_TRANSITION_PROPS } from '../utils/map-controller';
 import { isGeolocationSupported } from '../utils/geolocate-utils';
 import useMapControl, { mapControlDefaultProps, mapControlPropTypes } from './use-map-control';
-const LINEAR_TRANSITION_PROPS = Object.assign({}, TransitionManager.defaultProps, {
-  transitionDuration: 500
-});
 
@@ -15,0 +12,0 @@ const noop = () => {};

dist/es6/components/interactive-map.js

@@ -5,5 +5,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as PropTypes from 'prop-types';
-import StaticMap from './static-map';
+import StaticMap, { getViewport } from './static-map';
 import { MAPBOX_LIMITS } from '../utils/map-state';
-import WebMercatorViewport from 'viewport-mercator-project';
 import TransitionManager from '../utils/transition-manager';
@@ -14,2 +13,3 @@ import MapContext, { MapContextProvider } from './map-context';
 import useIsomorphicLayoutEffect from '../utils/use-isomorphic-layout-effect';
+import { getTerrainElevation } from '../utils/terrain';
 const propTypes = Object.assign({}, StaticMap.propTypes, {
@@ -101,8 +101,10 @@ maxZoom: PropTypes.number,
   const pos = [x, y];
-  const viewport = new WebMercatorViewport(Object.assign({}, this.props, this.props.viewState, {
-    width: this.width,
-    height: this.height
-  }));
   event.point = pos;
-  event.lngLat = viewport.unproject(pos);
+  const {
+    viewport
+  } = this;
+  const location = viewport.unproject(pos, {
+    targetZ: viewport.meterOffset[2]
+  });
+  event.lngLat = [location[0], location[1]];
   return event;
@@ -165,7 +167,2 @@ }
 
-    if (onHover) {
-      event.features = features;
-      onHover(event);
-    }
-
     const isHovering = Boolean(interactiveLayerIds && features && features.length > 0);
@@ -175,2 +172,10 @@ const isEntering = isHovering && !this.state.isHovering;
 
+    if (onHover || isEntering) {
+      event.features = features;
+
+      if (onHover) {
+        onHover(event);
+      }
+    }
+
     if (isEntering) {
@@ -282,2 +287,5 @@ onEvent.call(this, 'onMouseEnter', event);
     } = thisRef.props;
+    Object.defineProperty(viewState, 'position', {
+      get: () => [0, 0, getTerrainElevation(thisRef.map, viewState)]
+    });
 
@@ -303,2 +311,4 @@ if (onViewStateChange) {
   context.onViewportChange = handleViewportChange;
+  context.viewport = parentContext.viewport || getViewport(thisRef);
+  thisRef.viewport = context.viewport;
 
@@ -305,0 +315,0 @@ const handleInteractionStateChange = interactionState => {

dist/es6/components/marker.js

@@ -6,2 +6,3 @@ import * as React from 'react';
 import { crispPixel } from '../utils/crisp-pixel';
+import { getTerrainElevation } from '../utils/terrain';
 const propTypes = Object.assign({}, draggableControlPropTypes, {
@@ -31,2 +32,6 @@ className: PropTypes.string,
   } = state;
+  const {
+    viewport,
+    map
+  } = context;
 
@@ -37,3 +42,7 @@ if (dragPos && dragOffset) {
 
-  let [x, y] = context.viewport.project([longitude, latitude]);
+  const altitude = getTerrainElevation(map, {
+    longitude,
+    latitude
+  });
+  let [x, y] = viewport.project([longitude, latitude, altitude]);
   x += offsetLeft;
@@ -40,0 +49,0 @@ y += offsetTop;

dist/es6/components/popup.js

@@ -6,2 +6,3 @@ import * as React from 'react';
 import { getDynamicPosition, ANCHOR_POSITION } from '../utils/dynamic-position';
+import { getTerrainElevation } from '../utils/terrain';
 import { crispPercentage, crispPixel } from '../utils/crisp-pixel';
@@ -25,3 +26,2 @@ const propTypes = Object.assign({}, mapControlPropTypes, {
   className: '',
-  altitude: 0,
   offsetLeft: 0,
@@ -119,3 +119,4 @@ offsetTop: 0,
   const {
-    viewport
+    viewport,
+    map
   } = context;
@@ -126,3 +127,2 @@ const {
     latitude,
-    altitude,
     tipSize,
@@ -132,2 +132,13 @@ closeButton,
   } = props;
+  let {
+    altitude
+  } = props;
+
+  if (altitude === undefined) {
+    altitude = getTerrainElevation(map, {
+      longitude,
+      latitude
+    });
+  }
+
   const position = viewport.project([longitude, latitude, altitude]);
@@ -134,0 +145,0 @@ const positionType = getPosition(props, viewport, contentRef.current, position);

dist/es6/components/static-map.js

@@ -12,2 +12,3 @@ import * as React from 'react';
 import useIsomorphicLayoutEffect from '../utils/use-isomorphic-layout-effect';
+import { getTerrainElevation } from '../utils/terrain';
 const TOKEN_DOC_URL = 'https://visgl.github.io/react-map-gl/docs/get-started/mapbox-tokens';
@@ -18,2 +19,16 @@ const NO_TOKEN_WARNING = 'A valid API access token is required to use Mapbox data';
 
+export function getViewport({
+  map,
+  props,
+  width,
+  height
+}) {
+  const viewportProps = { ...props,
+    ...props.viewState,
+    width,
+    height
+  };
+  viewportProps.position = [0, 0, getTerrainElevation(map, viewportProps)];
+  return new WebMercatorViewport(viewportProps);
+}
 const UNAUTHORIZED_ERROR_CODE = 401;
@@ -77,3 +92,6 @@ const CONTAINER_STYLE = {
   const [accessTokenValid, setTokenState] = useState(true);
-  const [size, setSize] = useState([0, 0]);
+  const [size, setSize] = useState({
+    width: 0,
+    height: 0
+  });
   const mapboxRef = useRef(null);
@@ -90,5 +108,4 @@ const mapDivRef = useRef(null);
     const mapbox = new Mapbox({ ...props,
+      ...size,
       mapboxgl,
-      width: size[0],
-      height: size[1],
       container: mapDivRef.current,
@@ -118,3 +135,6 @@ onError: evt => {
         } = entries[0].contentRect;
-        setSize([width, height]);
+        setSize({
+          width,
+          height
+        });
         props.onResize({
@@ -135,6 +155,5 @@ width,
     if (mapboxRef.current) {
-      mapboxRef.current.setProps(Object.assign({}, props, {
-        width: size[0],
-        height: size[1]
-      }));
+      mapboxRef.current.setProps({ ...props,
+        ...size
+      });
     }
@@ -153,6 +172,6 @@ });
     value: { ...context,
-      viewport: context.viewport || new WebMercatorViewport({ ...props,
-        ...props.viewState,
-        width: size[0],
-        height: size[1]
+      viewport: context.viewport || getViewport({
+        map,
+        props,
+        ...size
       }),
@@ -159,0 +178,0 @@ map,

dist/es6/utils/transition-manager.d.ts

@@ -8,4 +8,4 @@ import {TransitionInterpolator} from './transition';
   onTransitionEnd: Function,
-  onViewportChange: Function,
-  onStateChange: Function
+  onViewportChange?: Function,
+  onStateChange?: Function
 };
@@ -12,0 +12,0 @@

dist/es6/utils/transition-manager.js

@@ -25,5 +25,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
   onTransitionInterrupt: noop,
-  onTransitionEnd: noop,
-  onViewportChange: noop,
-  onStateChange: noop
+  onTransitionEnd: noop
 };
@@ -30,0 +28,0 @@ export default class TransitionManager {

dist/esm/components/attribution-control.js

@@ -95,2 +95,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
   }, React.createElement("button", {
+    type: "button",
     className: "mapboxgl-ctrl-attrib-button",
@@ -97,0 +98,0 @@ title: props.toggleLabel,

dist/esm/components/geolocate-control.js

@@ -14,8 +14,5 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import MapState from '../utils/map-state';
-import TransitionManager from '../utils/transition-manager';
+import { LINEAR_TRANSITION_PROPS } from '../utils/map-controller';
 import { isGeolocationSupported } from '../utils/geolocate-utils';
 import useMapControl, { mapControlDefaultProps, mapControlPropTypes } from './use-map-control';
-var LINEAR_TRANSITION_PROPS = Object.assign({}, TransitionManager.defaultProps, {
-  transitionDuration: 500
-});
 
@@ -22,0 +19,0 @@ var noop = function noop() {};

dist/esm/components/interactive-map.js

@@ -12,5 +12,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as PropTypes from 'prop-types';
-import StaticMap from './static-map';
+import StaticMap, { getViewport } from './static-map';
 import { MAPBOX_LIMITS } from '../utils/map-state';
-import WebMercatorViewport from 'viewport-mercator-project';
 import TransitionManager from '../utils/transition-manager';
@@ -21,2 +20,3 @@ import MapContext, { MapContextProvider } from './map-context';
 import useIsomorphicLayoutEffect from '../utils/use-isomorphic-layout-effect';
+import { getTerrainElevation } from '../utils/terrain';
 var propTypes = Object.assign({}, StaticMap.propTypes, {
@@ -108,8 +108,8 @@ maxZoom: PropTypes.number,
   var pos = [x, y];
-  var viewport = new WebMercatorViewport(Object.assign({}, this.props, this.props.viewState, {
-    width: this.width,
-    height: this.height
-  }));
   event.point = pos;
-  event.lngLat = viewport.unproject(pos);
+  var viewport = this.viewport;
+  var location = viewport.unproject(pos, {
+    targetZ: viewport.meterOffset[2]
+  });
+  event.lngLat = [location[0], location[1]];
   return event;
@@ -169,7 +169,2 @@ }
 
-    if (onHover) {
-      event.features = features;
-      onHover(event);
-    }
-
     var isHovering = Boolean(interactiveLayerIds && features && features.length > 0);
@@ -179,2 +174,10 @@ var isEntering = isHovering && !this.state.isHovering;
 
+    if (onHover || isEntering) {
+      event.features = features;
+
+      if (onHover) {
+        onHover(event);
+      }
+    }
+
     if (isEntering) {
@@ -288,2 +291,7 @@ onEvent.call(this, 'onMouseEnter', event);
         onViewportChange = _thisRef$props.onViewportChange;
+    Object.defineProperty(viewState, 'position', {
+      get: function get() {
+        return [0, 0, getTerrainElevation(thisRef.map, viewState)];
+      }
+    });
 
@@ -313,2 +321,4 @@ if (onViewStateChange) {
   context.onViewportChange = handleViewportChange;
+  context.viewport = parentContext.viewport || getViewport(thisRef);
+  thisRef.viewport = context.viewport;
 
@@ -315,0 +325,0 @@ var handleInteractionStateChange = function handleInteractionStateChange(interactionState) {

dist/esm/components/marker.js

@@ -7,2 +7,3 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { crispPixel } from '../utils/crisp-pixel';
+import { getTerrainElevation } from '../utils/terrain';
 var propTypes = Object.assign({}, draggableControlPropTypes, {
@@ -27,2 +28,4 @@ className: PropTypes.string,
       dragOffset = state.dragOffset;
+  var viewport = context.viewport,
+      map = context.map;
 
@@ -33,7 +36,12 @@ if (dragPos && dragOffset) {
 
-  var _context$viewport$pro = context.viewport.project([longitude, latitude]),
-      _context$viewport$pro2 = _slicedToArray(_context$viewport$pro, 2),
-      x = _context$viewport$pro2[0],
-      y = _context$viewport$pro2[1];
+  var altitude = getTerrainElevation(map, {
+    longitude: longitude,
+    latitude: latitude
+  });
 
+  var _viewport$project = viewport.project([longitude, latitude, altitude]),
+      _viewport$project2 = _slicedToArray(_viewport$project, 2),
+      x = _viewport$project2[0],
+      y = _viewport$project2[1];
+
   x += offsetLeft;
@@ -40,0 +48,0 @@ y += offsetTop;

dist/esm/components/popup.js

@@ -13,2 +13,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { getDynamicPosition, ANCHOR_POSITION } from '../utils/dynamic-position';
+import { getTerrainElevation } from '../utils/terrain';
 import { crispPercentage, crispPixel } from '../utils/crisp-pixel';
@@ -32,3 +33,2 @@ var propTypes = Object.assign({}, mapControlPropTypes, {
   className: '',
-  altitude: 0,
   offsetLeft: 0,
@@ -134,10 +134,19 @@ offsetTop: 0,
   }, [contentRef.current]);
-  var viewport = context.viewport;
+  var viewport = context.viewport,
+      map = context.map;
   var className = props.className,
       longitude = props.longitude,
       latitude = props.latitude,
-      altitude = props.altitude,
       tipSize = props.tipSize,
       closeButton = props.closeButton,
       children = props.children;
+  var altitude = props.altitude;
+
+  if (altitude === undefined) {
+    altitude = getTerrainElevation(map, {
+      longitude: longitude,
+      latitude: latitude
+    });
+  }
+
   var position = viewport.project([longitude, latitude, altitude]);
@@ -144,0 +153,0 @@ var positionType = getPosition(props, viewport, contentRef.current, position);

dist/esm/components/static-map.js

@@ -0,3 +1,3 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 
@@ -19,2 +19,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 import useIsomorphicLayoutEffect from '../utils/use-isomorphic-layout-effect';
+import { getTerrainElevation } from '../utils/terrain';
 var TOKEN_DOC_URL = 'https://visgl.github.io/react-map-gl/docs/get-started/mapbox-tokens';
@@ -25,2 +26,16 @@ var NO_TOKEN_WARNING = 'A valid API access token is required to use Mapbox data';
 
+export function getViewport(_ref) {
+  var map = _ref.map,
+      props = _ref.props,
+      width = _ref.width,
+      height = _ref.height;
+
+  var viewportProps = _objectSpread(_objectSpread(_objectSpread({}, props), props.viewState), {}, {
+    width: width,
+    height: height
+  });
+
+  viewportProps.position = [0, 0, getTerrainElevation(map, viewportProps)];
+  return new WebMercatorViewport(viewportProps);
+}
 var UNAUTHORIZED_ERROR_CODE = 401;
@@ -91,3 +106,6 @@ var CONTAINER_STYLE = {
 
-  var _useState3 = useState([0, 0]),
+  var _useState3 = useState({
+    width: 0,
+    height: 0
+  }),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -107,6 +125,4 @@ size = _useState4[0],
 
-    var mapbox = new Mapbox(_objectSpread(_objectSpread({}, props), {}, {
+    var mapbox = new Mapbox(_objectSpread(_objectSpread(_objectSpread({}, props), size), {}, {
       mapboxgl: mapboxgl,
-      width: size[0],
-      height: size[1],
       container: mapDivRef.current,
@@ -135,3 +151,6 @@ onError: function onError(evt) {
             _height = _entries$0$contentRec.height;
-        setSize([_width, _height]);
+        setSize({
+          width: _width,
+          height: _height
+        });
         props.onResize({
@@ -152,6 +171,3 @@ width: _width,
     if (mapboxRef.current) {
-      mapboxRef.current.setProps(Object.assign({}, props, {
-        width: size[0],
-        height: size[1]
-      }));
+      mapboxRef.current.setProps(_objectSpread(_objectSpread({}, props), size));
     }
@@ -163,4 +179,4 @@ });
   }, []);
-  var preventScroll = useCallback(function (_ref) {
-    var target = _ref.target;
+  var preventScroll = useCallback(function (_ref2) {
+    var target = _ref2.target;
 
@@ -173,6 +189,6 @@ if (target === overlayRef.current) {
     value: _objectSpread(_objectSpread({}, context), {}, {
-      viewport: context.viewport || new WebMercatorViewport(_objectSpread(_objectSpread(_objectSpread({}, props), props.viewState), {}, {
-        width: size[0],
-        height: size[1]
-      })),
+      viewport: context.viewport || getViewport(_objectSpread({
+        map: map,
+        props: props
+      }, size)),
       map: map,
@@ -179,0 +195,0 @@ container: context.container || containerRef.current

dist/esm/utils/transition-manager.d.ts

@@ -8,4 +8,4 @@ import {TransitionInterpolator} from './transition';
   onTransitionEnd: Function,
-  onViewportChange: Function,
-  onStateChange: Function
+  onViewportChange?: Function,
+  onStateChange?: Function
 };
@@ -12,0 +12,0 @@

dist/esm/utils/transition-manager.js

@@ -31,5 +31,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
   onTransitionInterrupt: noop,
-  onTransitionEnd: noop,
-  onViewportChange: noop,
-  onStateChange: noop
+  onTransitionEnd: noop
 };
@@ -36,0 +34,0 @@

package.json

 {
   "name": "react-map-gl",
   "description": "React components for Mapbox GL JS-compatible libraries",
-  "version": "6.1.15",
+  "version": "6.1.16",
   "keywords": [
@@ -52,7 +52,7 @@ "mapbox",
     "@types/mapbox-gl": "^2.0.3",
-    "mapbox-gl": "^2.0.1",
+    "mapbox-gl": "^2.3.0",
     "mjolnir.js": "^2.5.0",
     "prop-types": "^15.7.2",
     "resize-observer-polyfill": "^1.5.1",
-    "viewport-mercator-project": "^6.2.3 || ^7.0.2"
+    "viewport-mercator-project": "^7.0.3"
   },
@@ -59,0 +59,0 @@ "devDependencies": {

src/components/attribution-control.js

@@ -82,2 +82,3 @@ import * as React from 'react';
         <button
+          type="button"
           className="mapboxgl-ctrl-attrib-button"
@@ -84,0 +85,0 @@ title={props.toggleLabel}

src/components/geolocate-control.js

@@ -9,3 +9,3 @@ import * as React from 'react';
 import MapState from '../utils/map-state';
-import TransitionManager from '../utils/transition-manager';
+import {LINEAR_TRANSITION_PROPS} from '../utils/map-controller';
 import {isGeolocationSupported} from '../utils/geolocate-utils';
@@ -15,6 +15,2 @@
 
-const LINEAR_TRANSITION_PROPS = Object.assign({}, TransitionManager.defaultProps, {
-  transitionDuration: 500
-});
-
 const noop = () => {};
@@ -21,0 +17,0 @@

src/components/interactive-map.js

@@ -5,5 +5,4 @@ import * as React from 'react';
 
-import StaticMap from './static-map';
+import StaticMap, {getViewport} from './static-map';
 import {MAPBOX_LIMITS} from '../utils/map-state';
-import WebMercatorViewport from 'viewport-mercator-project';
 
@@ -16,2 +15,3 @@ import TransitionManager from '../utils/transition-manager';
 import useIsomorphicLayoutEffect from '../utils/use-isomorphic-layout-effect';
+import {getTerrainElevation} from '../utils/terrain';
 
@@ -150,12 +150,8 @@ const propTypes = Object.assign({}, StaticMap.propTypes, {
 
-  const viewport = new WebMercatorViewport(
-    Object.assign({}, this.props, this.props.viewState, {
-      width: this.width,
-      height: this.height
-    })
-  );
-
   event.point = pos;
-  event.lngLat = viewport.unproject(pos);
 
+  const {viewport} = this;
+  const location = viewport.unproject(pos, {targetZ: viewport.meterOffset[2]});
+  event.lngLat = [location[0], location[1]];
+
   return event;
@@ -221,7 +217,2 @@ }
     }
-    if (onHover) {
-      // backward compatibility: v3 `onHover` interface
-      event.features = features;
-      onHover(event);
-    }
 
@@ -232,2 +223,11 @@ const isHovering = Boolean(interactiveLayerIds && features && features.length > 0);
 
+    if (onHover || isEntering) {
+      event.features = features;
+
+      // backward compatibility: v3 `onHover` interface
+      if (onHover) {
+        onHover(event);
+      }
+    }
+
     if (isEntering) {
@@ -336,2 +336,7 @@ onEvent.call(this, 'onMouseEnter', event);
 
+    /* eslint-disable accessor-pairs */
+    Object.defineProperty(viewState, 'position', {
+      get: () => [0, 0, getTerrainElevation(thisRef.map, viewState)]
+    });
+
     if (onViewStateChange) {
@@ -356,2 +361,4 @@ onViewStateChange({viewState, interactionState, oldViewState});
   context.onViewportChange = handleViewportChange;
+  context.viewport = parentContext.viewport || getViewport(thisRef);
+  thisRef.viewport = context.viewport;
 
@@ -358,0 +365,0 @@ const handleInteractionStateChange = interactionState => {

src/components/marker.js

@@ -28,2 +28,3 @@ // Copyright (c) 2015 Uber Technologies, Inc.
 import {crispPixel} from '../utils/crisp-pixel';
+import {getTerrainElevation} from '../utils/terrain';
 
@@ -46,2 +47,3 @@ const propTypes = Object.assign({}, draggableControlPropTypes, {
   const {dragPos, dragOffset} = state;
+  const {viewport, map} = context;
 
@@ -53,4 +55,6 @@ // If dragging, just return the current drag position
 
+  const altitude = getTerrainElevation(map, {longitude, latitude});
+
   // Otherwise return the projected lat/lng with offset
-  let [x, y] = context.viewport.project([longitude, latitude]);
+  let [x, y] = viewport.project([longitude, latitude, altitude]);
   x += offsetLeft;
@@ -57,0 +61,0 @@ y += offsetTop;

src/components/popup.js

@@ -26,3 +26,3 @@ // Copyright (c) 2015 Uber Technologies, Inc.
 import {getDynamicPosition, ANCHOR_POSITION} from '../utils/dynamic-position';
-
+import {getTerrainElevation} from '../utils/terrain';
 import {crispPercentage, crispPixel} from '../utils/crisp-pixel';
@@ -61,3 +61,2 @@
   className: '',
-  altitude: 0,
   offsetLeft: 0,
@@ -160,5 +159,10 @@ offsetTop: 0,
 
-  const {viewport} = context;
-  const {className, longitude, latitude, altitude, tipSize, closeButton, children} = props;
+  const {viewport, map} = context;
+  const {className, longitude, latitude, tipSize, closeButton, children} = props;
 
+  let {altitude} = props;
+  if (altitude === undefined) {
+    altitude = getTerrainElevation(map, {longitude, latitude});
+  }
+
   const position = viewport.project([longitude, latitude, altitude]);
@@ -165,0 +169,0 @@

src/components/static-map.js

@@ -33,2 +33,3 @@ // Copyright (c) 2015 Uber Technologies, Inc.
 import useIsomorphicLayoutEffect from '../utils/use-isomorphic-layout-effect';
+import {getTerrainElevation} from '../utils/terrain';
 
@@ -42,2 +43,13 @@ /* eslint-disable max-len */
 
+export function getViewport({map, props, width, height}) {
+  const viewportProps = {
+    ...props,
+    ...props.viewState,
+    width,
+    height
+  };
+  viewportProps.position = [0, 0, getTerrainElevation(map, viewportProps)];
+  return new WebMercatorViewport(viewportProps);
+}
+
 const UNAUTHORIZED_ERROR_CODE = 401;
@@ -117,3 +129,3 @@
   const [accessTokenValid, setTokenState] = useState(true);
-  const [size, setSize] = useState([0, 0]);
+  const [size, setSize] = useState({width: 0, height: 0});
   const mapboxRef = useRef(null);
@@ -133,5 +145,4 @@ const mapDivRef = useRef(null);
       ...props,
+      ...size,
       mapboxgl, // Handle to mapbox-gl library
-      width: size[0],
-      height: size[1],
       container: mapDivRef.current,
@@ -157,3 +168,3 @@ onError: evt => {
         const {width, height} = entries[0].contentRect;
-        setSize([width, height]);
+        setSize({width, height});
         props.onResize({width, height});
@@ -174,8 +185,3 @@ }
     if (mapboxRef.current) {
-      mapboxRef.current.setProps(
-        Object.assign({}, props, {
-          width: size[0],
-          height: size[1]
-        })
-      );
+      mapboxRef.current.setProps({...props, ...size});
     }
@@ -200,10 +206,3 @@ });
         ...context,
-        viewport:
-          context.viewport ||
-          new WebMercatorViewport({
-            ...props,
-            ...props.viewState,
-            width: size[0],
-            height: size[1]
-          }),
+        viewport: context.viewport || getViewport({map, props, ...size}),
         map,
@@ -210,0 +209,0 @@ container: context.container || containerRef.current

src/utils/transition-manager.d.ts

@@ -8,4 +8,4 @@ import {TransitionInterpolator} from './transition';
   onTransitionEnd: Function,
-  onViewportChange: Function,
-  onStateChange: Function
+  onViewportChange?: Function,
+  onStateChange?: Function
 };
@@ -12,0 +12,0 @@

src/utils/transition-manager.js

@@ -29,5 +29,3 @@ /* global requestAnimationFrame, cancelAnimationFrame */
   onTransitionInterrupt: noop,
-  onTransitionEnd: noop,
-  onViewportChange: noop,
-  onStateChange: noop
+  onTransitionEnd: noop
 };
@@ -34,0 +32,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1790074

increased by0.62%

Number of package files

572

increased by1.24%

Lines of code

19757

increased by0.77%

Dependency changes

• Updatedmapbox-gl@^2.3.0

• Updatedviewport-mercator-project@^7.0.3