archive-gh-me/react-map-gl
1
0
Fork 0
mirror of https://github.com/visgl/react-map-gl.git synced 2026-01-25 16:02:50 +00:00
Code Issues Projects Releases Wiki Activity
react-map-gl/page-data/docs/upgrade-guide/page-data.json

1 line
67 KiB
JSON
Raw Blame History

{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/upgrade-guide","result":{"data":{"docBySlug":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", {\n \"id\": \"upgrade-guide\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#upgrade-guide\",\n \"aria-label\": \"upgrade guide permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Upgrade Guide\"), mdx(\"h2\", {\n \"id\": \"upgrading-to-v70\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v70\",\n \"aria-label\": \"upgrading to v70 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Upgrading to v7.0\"), mdx(\"p\", null, \"v7 is a complete rewrite of the library. It is redesigned to be fast, lightweight, fully typed, to behave the same and expose the same APIs as the wrapped map library, and to provide the maximum compatibility with third-party plugins. To take advantages of these new features, you need to make some changes to your code that was previously depending on react-map-gl v5 and v6.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"If you are using react-map-gl controls (\", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Marker\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"Popup\"), \", \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"NavigationControl\"), \" etc.) with deck.gl's \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"ContextProvider\"), \", do not upgrade to this version. The old approach no longer works with v7. We are moving the support for this use case to a new project that does not depend on mapbox.\")), mdx(\"h3\", {\n \"id\": \"dependencies\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#dependencies\",\n \"aria-label\": \"dependencies permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Dependencies\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Add \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapbox-gl\"), \" (or a compatible fork) to your package.json. \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"react-map-gl\"), \" no longer lists a specific map renderer in its dependencies, so you are free to use it with Mapbox v1, v2 or Maplibre.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"viewport-mercator-project\"), \" (an alias of \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"@math.gl/web-mercator\"), \") is no longer a dependency. You can still install the library on the side as a utility for viewport-related math, but it's no longer required.\")), mdx(\"h3\", {\n \"id\": \"module-exports\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#module-exports\",\n \"aria-label\": \"module exports permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Module exports\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"StaticMap\"), \" are removed. Instead, import \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"setRTLTextPlugin\"), \" is removed. Use the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \" component's \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"RTLTextPlugin\"), \" prop (default enabled).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapController\"), \" is removed. v7.0 has removed its own implementation of user input handling in favor of the \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/api/handlers/\"\n }, \"native handlers\"), \". If you are using a custom implementation of \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapController\"), \", check if the native handlers offer options to address your application's needs.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapContext\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"useMapControl\"), \" are removed. Check out the new API \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/use-map.md\"\n }, \"useMap\"), \" and \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/use-control.md\"\n }, \"useControl\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The overlay components (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"HTMLOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"CanvasOverlay\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"SVGOverlay\"), \") are removed. Check out \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/custom-overlay\"\n }, \"this example\"), \" for implementing similar controls in your own application.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"LinearInterpolator\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"FlyToInterpolator\"), \" are removed. Use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"map.easeTo()\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"map.flyTo()\"), \" instead, see \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/viewport-animation\"\n }, \"this example\"), \".\")), mdx(\"h3\", {\n \"id\": \"map\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#map\",\n \"aria-label\": \"map permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Map\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/map.md\"\n }, \"documentation\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Renamed props for better consistency with the wrapped library:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapboxApiAccessToken\"), \" is now \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapboxAccessToken\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapboxApiUrl\"), \" is now \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"baseApiUrl\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"preventStyleDiffing\"), \" (default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"false\"), \") is replaced with \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"styleDiffing\"), \" (default \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"true\"), \")\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapStyle\"), \" should be explicitly specified. The default value has changed from \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"\\\"mapbox://styles/mapbox/light-v9\\\"\"), \" to an empty style.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The following props are removed and apps should use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"style\"), \" instead:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"width\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"height\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"visible\")))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onViewportChange\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onViewStateChange\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onInteractionStateChange\"), \" are removed. You can either use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \" as an uncontrolled component with the new \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"initialViewState\"), \" prop, or if you need to manage the camera state externally (e.g. in Redux), use the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMove\"), \" callback instead. See examples in \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/get-started/state-management.md\"\n }, \"state management\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"transition*\"), \" props are removed. Use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"map.easeTo()\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"map.flyTo()\"), \" instead, see \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/viewport-animation\"\n }, \"this example\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapOptions\"), \" is removed. Almost all of the options for the native \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \" class are exposed as props. \"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onHover\"), \" is removed. Use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMouseMove\"), \" or \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onMouseEnter\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The event argument is changed for all interaction callbacks. See documentation for details.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"getCursor\"), \" is removed as part of the effort to get \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \" behave the same as the native component. To set the cursor, use the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"cursor\"), \" prop. Follow \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/7.0-release/examples/custom-cursor\"\n }, \"this example\"), \" to change cursor on hover.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"touchAction\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"eventRecognizerOptions\"), \" are removed. Check out the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"cooperativeGestures\"), \" prop.\")), mdx(\"h3\", {\n \"id\": \"other-components\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#other-components\",\n \"aria-label\": \"other components permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Other components\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"capture*\"), \" props are removed.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"*label\"), \" props are removed. Use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Map\"), \"'s \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"locale\"), \" prop.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"All map controls' props are now strictly aligned with their mapbox-gl counterparts. In heading this direction, we are able to remove a significant amount of custom code and have the components behave more predictably for developers switching from the native library. If your application is relying on an old feature that is no longer supported, please open a topic on \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/visgl/react-map-gl/discussions\"\n }, \"Discussion\"), \" so we can review on a case-by-case basis.\")), mdx(\"h2\", {\n \"id\": \"upgrading-to-v53v61\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v53v61\",\n \"aria-label\": \"upgrading to v53v61 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Upgrading to v5.3/v6.1\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapContext\"), \" is now an official API. The experimental \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"_MapContext\"), \" export will be removed in a future release.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"react-virtualized-auto-sizer\"), \" is no longer a dependency.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Inertia has been enabled by default on the map controller. To revert to the behavior in previous versions, set the \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/api-reference/interactive-map.md#interaction-options\"\n }, \"interaction options\"), \":\")), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"CONTROLLER_OPTS\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"dragPan\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"inertia\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"0\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"dragRotate\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"inertia\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"0\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"touchZoom\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"inertia\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"0\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"MapGL \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token constant\"\n }, \"CONTROLLER_OPTS\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\")))), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Source\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Layer\"), \" components no longer expose imperative methods via \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"ref\"), \" as part of the migration to functional components. This is to comply with the pattern recommended by the latest React.\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"If you used to call \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"sourceRef.getSource()\"), \", it can be replaced with \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapRef().getMap().getSource(sourceId)\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If you used to call \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"layerRef.getLayer()\"), \", it can be replaced with \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapRef().getMap().getLayer(layerId)\"), \".\")))), mdx(\"h2\", {\n \"id\": \"upgrading-to-v6\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v6\",\n \"aria-label\": \"upgrading to v6 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Upgrading to v6\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"A valid Mapbox access token is always required.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The default value of \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \"'s \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"maxPitch\"), \" prop is changed to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"85\"), \" from \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"60\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapbox-gl\"), \" v2 introduced a breaking change to the build system. Transpiling it may result in a crash in the production build with the message \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"m is not defined\"), \". Find solutions in \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/issues/10173\"\n }, \"this thread\"), \".\")), mdx(\"h2\", {\n \"id\": \"upgrading-to-v4\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v4\",\n \"aria-label\": \"upgrading to v4 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Upgrading to v4\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onChangeViewport\"), \" is removed, use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onViewportChange\"), \" instead\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"Immutable.js\"), \" is no longer a dependency\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Export \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"experimental.MapControls\"), \" is removed, use \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"MapController\"), \" instead\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \"'s \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"mapControls\"), \" prop is renamed to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"controller\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Removed support for the deprecated \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"interactive\"), \" property on the layer styles. Use the \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"interactiveLayerIds\"), \" prop to specify which layers are clickable.\")), mdx(\"h2\", {\n \"id\": \"upgrading-to-v32\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v32\",\n \"aria-label\": \"upgrading to v32 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Upgrading to v3.2\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The latest mapbox-gl release requires stylesheet to be included at all times. See \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/react-map-gl/docs/get-started/get-started.md\"\n }, \"Get Started\"), \" for information about styling.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Immutable.js is no longer a hard dependency and will be removed in the next major release. If you are importing immutable in your application, it is recommended that you explicitly list it in the application's dependencies.\")), mdx(\"h2\", {\n \"id\": \"upgrading-to-v3\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v3\",\n \"aria-label\": \"upgrading to v3 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Upgrading to v3\"), mdx(\"p\", null, \"v3 is a major upgrade of react-map-gl. While we have tried to gently deprecated any changed or removed features, a few breaking changes could not be avoided.\"), mdx(\"h3\", {\n \"id\": \"version-requirements\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#version-requirements\",\n \"aria-label\": \"version requirements permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Version Requirements\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"Node Version Requirement\"), \" for \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"building\"), \" react-map-gl is now \", mdx(\"strong\", {\n parentName: \"li\"\n }, \">=v6.4.0\"), \". Using prebuilt react-map-gl does \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"NOT\"), \" has this limitation. This is introduced by \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/releases/tag/v0.38.0\"\n }, \"Mapbox GL JS v0.38.0\"))), mdx(\"h3\", {\n \"id\": \"mapgl-component\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#mapgl-component\",\n \"aria-label\": \"mapgl component permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"MapGL Component\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Two Map Components\"), \" - v3 now splits the Map component into two React components: \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"StaticMap\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \". \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"InteractiveMap\"), \" is the default export, and designed to be as compatible as possible with the v2 default component.\")), mdx(\"h4\", {\n \"id\": \"code-classlanguage-textonchangeviewportcode-callback-now-includes-code-classlanguage-textwidthcode-and-code-classlanguage-textheightcode\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#code-classlanguage-textonchangeviewportcode-callback-now-includes-code-classlanguage-textwidthcode-and-code-classlanguage-textheightcode\",\n \"aria-label\": \"code classlanguage textonchangeviewportcode callback now includes code classlanguage textwidthcode and code classlanguage textheightcode permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"onChangeViewport\"), \" callback now includes \", mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"width\"), \" and \", mdx(\"code\", {\n parentName: \"h4\",\n \"className\": \"language-text\"\n }, \"height\"), \".\"), mdx(\"p\", null, \"The \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"viewport\"), \" parameter passed to the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"onChangeViewport\"), \" callback now includes \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"width\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"height\"), \". Application code that composed the \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"viewport\"), \" with \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"width\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"height\"), \" may have to be updated. Please double check your render code if you relied on this behavior.\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// BAD: 'width' and 'height' below will be overridden by what's in the 'viewport' object\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"ReactMapGL width\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"500\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" height\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"400\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"viewport\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// GOOD: 'width' and 'height' below will override the values in 'viewport'\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"ReactMapGL \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"viewport\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" width\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"500\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" height\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"400\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\")))), mdx(\"h3\", {\n \"id\": \"overlays\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#overlays\",\n \"aria-label\": \"overlays permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Overlays\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Some Overlays Moved to Examples\"), \" - Some less frequently used overlays (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"DraggablePointsOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"ChoroplethOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"ScatterplotOverlay\"), \"), have been moved to examples. Most users are now using mapbox styles or deck.gl layers and removing these overlays reduces the size of the react-map-gl library for the majority of users that don't need them. If you still use them, simply copy the overlay source file(s) into your application.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Overlays must be Children of the Map\"), \" - Overlays \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"must\"), \" now be rendered as children of the main \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"react-map-gl\"), \" component to automatically sync with the map viewport.\")), mdx(\"h3\", {\n \"id\": \"code-classlanguage-textfitboundscode-utility-function\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#code-classlanguage-textfitboundscode-utility-function\",\n \"aria-label\": \"code classlanguage textfitboundscode utility function permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), mdx(\"code\", {\n parentName: \"h3\",\n \"className\": \"language-text\"\n }, \"fitBounds\"), \" utility function\"), mdx(\"p\", null, \"The \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"fitBounds\"), \" utility has been moved to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/uber-web/math.gl\"\n }, \"math.gl\"), \" library. The function can now be called as follows:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" WebMercatorViewport \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'viewport-mercator-project'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" viewport \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"new\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token class-name\"\n }, \"WebMercatorViewport\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"width\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"600\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"height\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"400\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" bound \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" viewport\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"fitBounds\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"73.9876\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40.7661\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"72.9876\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"41.7661\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"padding\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"20\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token literal-property property\"\n }, \"offset\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"0\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"40\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// => bounds: instance of WebMercatorViewport\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// {longitude: -73.48760000000007, latitude: 41.268014439447484, zoom: 7.209231188444142}\")))), mdx(\"h3\", {\n \"id\": \"deprecations\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#deprecations\",\n \"aria-label\": \"deprecations permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Deprecations\"), mdx(\"p\", null, \"We have started to deprecate a few React props. In all the cases below, the old \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"props\"), \" will still work (you'll get a warning in the console), but they will likely be removed in the next major version of react-map-gl so you should start using the new \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"props\"), \" as soon as possible.\"), mdx(\"table\", null, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Old Prop\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"New Prop\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"onChangeViewport(<viewport>)\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"onViewportChange(<viewport>)\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"onHoverFeatures(<features>)\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"onHover(<event>)\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"onClickFeatures(<features>)\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"onClick(<event>)\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"perspectiveEnabled [default: false]\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"code\", {\n parentName: \"td\",\n \"className\": \"language-text\"\n }, \"dragRotate [default: true]\"))))), mdx(\"h2\", {\n \"id\": \"upgrading-to-v2\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v2\",\n \"aria-label\": \"upgrading to v2 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Upgrading to v2\"), mdx(\"p\", null, \"v2 is API compatible with v1, however if you are still using \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"v1\"), \" of react-map-gl, make sure that you first upgrade:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Your \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"node\"), \" version to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"v4\"), \" or higher\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Your \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"react\"), \" version to \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"15.4\"), \" or higher.\")), mdx(\"p\", null, \"Background: \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"mapbox-gl\"), \" 0.31.0 introduced a hard dependency on Node >= v4.\"), mdx(\"h2\", {\n \"id\": \"upgrading-to-v1\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#upgrading-to-v1\",\n \"aria-label\": \"upgrading to v1 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Upgrading to v1\"), mdx(\"p\", null, \"(Upgrading from 0.6.x)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Importing Overlays\"), \" - The map overlay components (\", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"HTMLOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"CanvasOverlay\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"SVGOverlay\"), \" etc) are now named exports. They previously had to be imported via their relative source paths:\")), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// v1.0\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" MapGL\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"SVGOverlay\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// v0.6\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" MapGL \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" SVGOverlay \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-map-gl/src/api-reference/svg-overlay'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\")))), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Map State\"), \" - The map state reported by \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"onViewportChanged\"), \" will now contain additional state fields (tracking not only \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"pitch\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"bearing\"), \" needed for perspective mode, but also transient information about how the projection is being changed by the user).\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"This information must be passed back to the react-map-gl component in the next render.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"To simplify and future proof applications, it is recommended to simply save the entire \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"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 (like \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"longitude\"), \", \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"latitude\"), \" and \", mdx(\"code\", {\n parentName: \"li\",\n \"className\": \"language-text\"\n }, \"zoom\"), \").\")))));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":4,"excerpt":"Upgrade Guide Upgrading to v7.0 v7 is a complete rewrite of the library. It is redesigned to be fast, lightweight, fully typed, to behave…","frontmatter":{"title":"Upgrade Guide"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../docs":"/docs","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../api-reference/attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../api-reference/geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/layer":"/docs/api-reference/layer","../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/map-provider":"/docs/api-reference/map-provider","../api-reference/map-provider":"/docs/api-reference/map-provider","docs/api-reference/map":"/docs/api-reference/map","../api-reference/map":"/docs/api-reference/map","docs/api-reference/marker":"/docs/api-reference/marker","../api-reference/marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../api-reference/navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/popup":"/docs/api-reference/popup","../api-reference/popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../api-reference/scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../api-reference/source":"/docs/api-reference/source","docs/api-reference/types":"/docs/api-reference/types","../api-reference/types":"/docs/api-reference/types","docs/api-reference/use-control":"/docs/api-reference/use-control","../api-reference/use-control":"/docs/api-reference/use-control","docs/api-reference/use-map":"/docs/api-reference/use-map","../api-reference/use-map":"/docs/api-reference/use-map","docs/contributing":"/docs/contributing","../contributing":"/docs/contributing","docs/upgrade-guide":"/docs/upgrade-guide","../upgrade-guide":"/docs/upgrade-guide","docs/whats-new":"/docs/whats-new","../whats-new":"/docs/whats-new","docs/get-started/adding-custom-data":"/docs/get-started/adding-custom-data","../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/get-started":"/docs/get-started/get-started","../get-started/get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../get-started/state-management":"/docs/get-started/state-management","docs/get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks","../get-started/tips-and-tricks":"/docs/get-started/tips-and-tricks"},"title":"Upgrade Guide","slug":"docs/upgrade-guide","toc":"docs"}},"staticQueryHashes":["484347790"]}
Reference in New Issue View Git Blame Copy Permalink