Xiaoji Chen 6c852e20aa Updates
2020-06-28 15:05:12 -07:00

1 line
84 KiB
JSON

{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/static-map","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/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\n\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\": \"staticmap\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h1\"\n }, {\n \"href\": \"#staticmap\",\n \"aria-label\": \"staticmap permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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 })))), \"StaticMap\"), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://img.shields.io/badge/since-v3.0-green\",\n \"alt\": \"Since v3.0\"\n }))), mdx(\"p\", null, \"The simplest \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"React\"), \" wrapper around \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"MapboxGL\"), \". This is designed to be completely\\nstatic, and should be used to render a map with no interactivity. For a component\\nthat supports full user interactivity, see \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/react-map-gl/docs/api-reference/interactive-map.md\"\n }), \"InteractiveMap\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"language-js\"\n }), mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"import\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"Component\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"from\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), \"'react'\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \";\"), \"\\n\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"import\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"StaticMap\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"from\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), \"'react-map-gl'\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \";\"), \"\\n\\n\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"class\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token class-name\"\n }), \"Map\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"extends\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token class-name\"\n }), \"Component\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), \"render\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"return\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"<\"), \"StaticMap\\n width\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"=\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"400\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), \"\\n height\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"=\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"400\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), \"\\n latitude\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"=\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"37.7577\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), \"\\n longitude\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"=\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"-\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"122.4376\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), \"\\n zoom\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"=\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"8\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"/\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \">\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \";\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), \"\\n\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\")))), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#properties\",\n \"aria-label\": \"properties permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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 })))), \"Properties\"), mdx(\"h3\", {\n \"id\": \"initialization\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#initialization\",\n \"aria-label\": \"initialization permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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 })))), \"Initialization\"), mdx(\"p\", null, \"The following props are used during the creation of the Mapbox map.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textattributioncontrolcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textattributioncontrolcode-boolean\",\n \"aria-label\": \"code classlanguage textattributioncontrolcode boolean permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"attributionControl\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"true\"))), mdx(\"p\", null, \"Equivalent to Mapbox's \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"attributionControl\"), \" \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://www.mapbox.com/mapbox-gl-js/api/#map\"\n }), \"option\"), \". If \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"true\"), \", shows Mapbox's attribution control.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textdisabletokenwarningcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textdisabletokenwarningcode-boolean\",\n \"aria-label\": \"code classlanguage textdisabletokenwarningcode boolean permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"disableTokenWarning\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"false\"))), mdx(\"p\", null, \"If the provided API access token is rejected by Mapbox, \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"StaticMap\"), \" renders a warning instead of failing silently. If you know what you are doing and want to hide this warning anyways, set this prop to \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"true\"), \".\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textglcode-webglcontext\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textglcode-webglcontext\",\n \"aria-label\": \"code classlanguage textglcode webglcontext permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"gl\"), \" (WebGLContext)\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"This prop is experimental.\")), mdx(\"p\", null, \"Use an existing WebGLContext instead of creating a new one. This allows multiple libraries to render into a shared buffer. Use with caution.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textmapboxapiaccesstokencode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textmapboxapiaccesstokencode-string\",\n \"aria-label\": \"code classlanguage textmapboxapiaccesstokencode string permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"mapboxApiAccessToken\"), \" (String)\"), mdx(\"p\", null, \"Mapbox API access token for \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"MapboxGL\"), \". Required when using Mapbox vector tiles/styles\\nMapbox WebGL context creation option. Useful when you want to export the canvas as a PNG\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textmapboxapiurlcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textmapboxapiurlcode-string\",\n \"aria-label\": \"code classlanguage textmapboxapiurlcode string permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"mapboxApiUrl\"), \" (String)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"https://api.mapbox.com\"))), mdx(\"p\", null, \"Enables the use of private and country specific servers Mapbox servers, e.g. \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://api.mapbox.cn/\"\n }), \"https://api.mapbox.cn/\"), \".\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textmapoptionscode-object\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textmapoptionscode-object\",\n \"aria-label\": \"code classlanguage textmapoptionscode object permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"mapOptions\"), \" (Object)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"{}\"))), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"Non-public API, see \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://github.com/visgl/react-map-gl/issues/545\"\n }), \"https://github.com/visgl/react-map-gl/issues/545\"))), mdx(\"p\", null, \"An object of additional options to be passed to Mapbox's \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://www.mapbox.com/mapbox-gl-js/api/#map\"\n }), mdx(\"code\", _extends({\n parentName: \"a\"\n }, {\n \"className\": \"language-text\"\n }), \"Map\"), \" constructor\"), \". Options specified here\\nwill take precedence over those same options if set via props.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textpreservedrawingbuffercode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textpreservedrawingbuffercode-boolean\",\n \"aria-label\": \"code classlanguage textpreservedrawingbuffercode boolean permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"preserveDrawingBuffer\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"false\"))), mdx(\"p\", null, \"Equivalent to Mapbox's \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"preserveDrawingBuffer\"), \" \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://www.mapbox.com/mapbox-gl-js/api/#map\"\n }), \"option\"), \". If \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"true\"), \", the map's canvas can be exported to a PNG using \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"map.getCanvas().toDataURL()\"), \".\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textpreventstylediffingcode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textpreventstylediffingcode-boolean\",\n \"aria-label\": \"code classlanguage textpreventstylediffingcode boolean permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"preventStyleDiffing\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"false\"))), mdx(\"p\", null, \"If \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"mapStyle\"), \" is assigned an Immutable object, when the prop changes, \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"StaticMap\"), \" can diff between the two values and call the appropriate Mapbox API such as \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"addLayer\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"removeLayer\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"setStyle\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"setData\"), \", etc.\\nThis allows apps to update data sources and layer styles efficiently. In use cases such as animation or dynamic showing/hiding layers, style diffing prevents the map from reloading and flickering when the map style changes.\"), mdx(\"p\", null, \"There are known issues with style diffing. As stopgap, use this option to prevent style diffing.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textreusemapscode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textreusemapscode-boolean\",\n \"aria-label\": \"code classlanguage textreusemapscode boolean permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"reuseMaps\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"false\"))), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"This prop is experimental.\")), mdx(\"p\", null, \"If \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"true\"), \", when the map component is unmounted, instead of calling \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"remove\"), \" on the Mapbox map instance, save it for later reuse. This will avoid repeatedly creating new Mapbox map instances if possible.\"), mdx(\"p\", null, \"Applications that frequently mount and unmount maps may try this prop to help work around a mapbox-gl resource leak issue that can lead to a browser crash in certain situations.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-texttransformrequestcode-function\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-texttransformrequestcode-function\",\n \"aria-label\": \"code classlanguage texttransformrequestcode function permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"transformRequest\"), \" (Function)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"null\"))), mdx(\"p\", null, \"A callback run before the Map makes a request for an external URL. The callback can be used to modify the url, set headers, or set the credentials property for cross-origin requests.\\nExpected to return an object with a \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"url\"), \" property and optionally \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"headers\"), \" and \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"credentials\"), \" properties. Equivalent to Mapbox's \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"transformRequest\"), \" \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://www.mapbox.com/mapbox-gl-js/api#map\"\n }), \"map option\"), \".\"), mdx(\"h3\", {\n \"id\": \"map-state\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#map-state\",\n \"aria-label\": \"map state permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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 State\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textmapstylecode-string--object--immutablemap\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textmapstylecode-string--object--immutablemap\",\n \"aria-label\": \"code classlanguage textmapstylecode string object immutablemap permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"mapStyle\"), \" (String | Object | Immutable.Map)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"'mapbox://styles/mapbox/light-v8'\"))), mdx(\"p\", null, \"The Mapbox style. A string url or a\\n\", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://www.mapbox.com/mapbox-gl-style-spec/#layer-interactive\"\n }), \"MapboxGL style\"), \"\\nobject (regular JS object or Immutable.Map).\"), mdx(\"p\", null, \"Whenever the \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"mapStyle\"), \" prop changes, the component will attempt to update the style of the underlying Mapbox map. The behavior can be further customized with the \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"preventStyleDiffing\"), \" prop.\"), mdx(\"p\", null, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"mapStyle\"), \" is ignored when explicitly set to \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"null\"), \".\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textwidthcode-number--string-required\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textwidthcode-number--string-required\",\n \"aria-label\": \"code classlanguage textwidthcode number string required permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"width\"), \" (Number | String, required)\"), mdx(\"p\", null, \"The width of the map. Can be either a number in pixels, or a valid CSS string.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textheightcode-number--string-required\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textheightcode-number--string-required\",\n \"aria-label\": \"code classlanguage textheightcode number string required permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"height\"), \" (Number | String, required)\"), mdx(\"p\", null, \"The height of the map. Can be either a number in pixels, or a valid CSS string.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textlatitudecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textlatitudecode-number\",\n \"aria-label\": \"code classlanguage textlatitudecode number permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"latitude\"), \" (Number)\"), mdx(\"p\", null, \"The latitude of the center of the map, as a top level prop. Only used if \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"viewState\"), \" is not supplied.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textlongitudecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textlongitudecode-number\",\n \"aria-label\": \"code classlanguage textlongitudecode number permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"longitude\"), \" (Number)\"), mdx(\"p\", null, \"The longitude of the center of the map, as a top level prop. Only used if \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"viewState\"), \" is not supplied.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textzoomcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textzoomcode-number\",\n \"aria-label\": \"code classlanguage textzoomcode number permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"zoom\"), \" (Number)\"), mdx(\"p\", null, \"The tile zoom level of the map, as a top level prop. Only used if \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"viewState\"), \" is not supplied.\"), mdx(\"p\", null, \"Bounded implicitly by default \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"minZoom\"), \" and \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"maxZoom\"), \" of \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"MapboxGL\")), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textbearingcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textbearingcode-number\",\n \"aria-label\": \"code classlanguage textbearingcode number permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"bearing\"), \" (Number)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"0\"))), mdx(\"p\", null, \"Specify the bearing of the viewport, as a top level prop. Only used if \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"viewState\"), \" is not supplied.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textpitchcode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textpitchcode-number\",\n \"aria-label\": \"code classlanguage textpitchcode number permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"pitch\"), \" (Number)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"0\"))), mdx(\"p\", null, \"Specify the pitch of the viewport, as a top level prop. Only used if \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"viewState\"), \" is not supplied..\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textaltitudecode-number\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textaltitudecode-number\",\n \"aria-label\": \"code classlanguage textaltitudecode number permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"altitude\"), \" (Number)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"1.5\"))), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"Non-public API, see \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://github.com/mapbox/mapbox-gl-js/issues/1137\"\n }), \"https://github.com/mapbox/mapbox-gl-js/issues/1137\"), \".\")), mdx(\"p\", null, \"Altitude of the viewport camera, relative to screen height.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textviewstatecode-object\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textviewstatecode-object\",\n \"aria-label\": \"code classlanguage textviewstatecode object permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"viewState\"), \" (Object)\"), mdx(\"p\", null, \"An object containing the view state of the map specified by the following fields:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"latitude\"), \" (Number) - The latitude of the center of the map.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"longitude\"), \" (Number) - The longitude of the center of the map.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"zoom\"), \" (Number) - The tile zoom level of the map. Bounded implicitly by default \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"minZoom\"), \" and \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"maxZoom\"), \" of \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"MapboxGL\"), \".\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"bearing\"), \" (Number) - default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"0\"), \" - The bearing of the viewport.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"pitch\"), \" (Number) - default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"0\"), \" - The pitch of the viewport.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"altitude\"), \" (Number) - default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"1.5 screen heights\"))), mdx(\"p\", null, \"Note: Either the \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"viewState\"), \", or the \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"latitude\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"longitude\"), \" and \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"zoom\"), \" properties need to be specified.\"), mdx(\"h3\", {\n \"id\": \"render-options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#render-options\",\n \"aria-label\": \"render options permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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 })))), \"Render Options\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textasyncrendercode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textasyncrendercode-boolean\",\n \"aria-label\": \"code classlanguage textasyncrendercode boolean permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"asyncRender\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"false\"))), mdx(\"p\", null, \"If \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"true\"), \", let Mapbox manage its own render cycle. This is the behavior prior to v4.1.\"), mdx(\"p\", null, \"If \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"false\"), \", force Mapbox canvas to redraw with DOM updates. This will make the map synchronize better with other controls during prop-driven viewport changes.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textstylecode-object\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textstylecode-object\",\n \"aria-label\": \"code classlanguage textstylecode object permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"style\"), \" (Object)\"), mdx(\"p\", null, \"The CSS style of the map container.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textvisiblecode-boolean\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textvisiblecode-boolean\",\n \"aria-label\": \"code classlanguage textvisiblecode boolean permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"visible\"), \" (Boolean)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"true\"))), mdx(\"p\", null, \"Whether the map is visible. Unmounting and re-mounting a Mapbox instance is known to be costly. This option offers a way to hide a map using CSS style.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textvisibilityconstraintscode-object\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textvisibilityconstraintscode-object\",\n \"aria-label\": \"code classlanguage textvisibilityconstraintscode object permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"visibilityConstraints\"), \" (Object)\"), mdx(\"p\", null, \"An object that specifies bounds for viewport props with \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"min*\"), \", \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"max*\"), \" keys. If the viewport props are outside of these constraints, the Mapbox map is automatically hidden.\"), mdx(\"p\", null, \"Default: \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"{ minZoom: 0, maxZoom: 20, minPitch: 0, maxPitch: 60 }\")), mdx(\"h3\", {\n \"id\": \"callbacks\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#callbacks\",\n \"aria-label\": \"callbacks permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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 })))), \"Callbacks\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textonloadcode-function\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textonloadcode-function\",\n \"aria-label\": \"code classlanguage textonloadcode function permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"onLoad\"), \" (Function)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"() => {}\"))), mdx(\"p\", null, \"A callback run when the map emits a \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"load\"), \" event. \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://www.mapbox.com/mapbox-gl-js/api#map.event:load\"\n }), \"Mapbox docs\")), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textonresizecode-function\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textonresizecode-function\",\n \"aria-label\": \"code classlanguage textonresizecode function permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"onResize\"), \" (Function)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"() => {}\"))), mdx(\"p\", null, \"A callback run when the map size has changed.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textonerrorcode-function\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textonerrorcode-function\",\n \"aria-label\": \"code classlanguage textonerrorcode function permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"onError\"), \" (Function)\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"default: \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"console.error\"))), mdx(\"p\", null, \"A callback run when the map emits an \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"error\"), \" event. \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://www.mapbox.com/mapbox-gl-js/api#map.event:error\"\n }), \"Mapbox docs\")), mdx(\"h2\", {\n \"id\": \"methods\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#methods\",\n \"aria-label\": \"methods permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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 })))), \"Methods\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textgetmapcode\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textgetmapcode\",\n \"aria-label\": \"code classlanguage textgetmapcode permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"getMap\")), mdx(\"p\", null, \"Returns the Mapbox instance if initialized. The \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"Map\"), \" instance will have full access to \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://www.mapbox.com/mapbox-gl-js/api/#map\"\n }), \"MapboxGL's API\"), \".\"), mdx(\"p\", null, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"getMap()\")), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textqueryrenderedfeaturescode\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#code-classlanguage-textqueryrenderedfeaturescode\",\n \"aria-label\": \"code classlanguage textqueryrenderedfeaturescode permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"queryRenderedFeatures\")), mdx(\"p\", null, \"Use Mapbox's \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"queryRenderedFeatures\"), \" API to find features at point or in a bounding box. If the \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"parameters\"), \" argument is not specified, only queries the layers with the \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"interactive\"), \" property in the layer style.\"), mdx(\"p\", null, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"queryRenderedFeatures(geometry, parameters)\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"geometry\"), \" {\", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"[Number, Number\"), \" | \", mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"[[Number, Number, [Number, Number\"), \" - Point or an array of two points defining the bounding box. Coordinates in pixels.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), \"parameters\"), \" - Query options. For more details, see \", mdx(\"a\", _extends({\n parentName: \"li\"\n }, {\n \"href\": \"https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures\"\n }), \"Mapbox API documentation\"), \".\")), mdx(\"h2\", {\n \"id\": \"faq\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#faq\",\n \"aria-label\": \"faq permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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 })))), \"FAQ\"), mdx(\"h5\", {\n \"id\": \"where-is-code-classlanguage-textfitboundscode\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h5\"\n }, {\n \"href\": \"#where-is-code-classlanguage-textfitboundscode\",\n \"aria-label\": \"where is code classlanguage textfitboundscode permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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 })))), \"Where is \", mdx(\"code\", _extends({\n parentName: \"h5\"\n }, {\n \"className\": \"language-text\"\n }), \"fitBounds\"), \"?\"), mdx(\"p\", null, \"You can use the \", mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), \"WebMercatorViewport\"), \" utility to find the target viewport that fits around a lngLat bounding box:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", _extends({\n parentName: \"div\"\n }, {\n \"className\": \"language-js\"\n }), mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"import\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"WebMercatorViewport\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"from\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token string\"\n }), \"'react-map-gl'\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \";\"), \"\\n\\n\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"const\"), \" viewport \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"=\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token keyword\"\n }), \"new\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token class-name\"\n }), \"WebMercatorViewport\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"width\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"800\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" height\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"600\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \".\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token function\"\n }), \"fitBounds\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"(\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"[\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"[\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"-\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"122.4\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"37.7\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"]\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"[\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"-\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"122.5\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"37.8\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"]\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"]\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"{\"), \"\\n padding\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"20\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \"\\n offset\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \":\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"[\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"0\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \",\"), \" \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token operator\"\n }), \"-\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token number\"\n }), \"100\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"]\"), \"\\n \", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \"}\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \")\"), mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token punctuation\"\n }), \";\"), \"\\n\\n\", mdx(\"span\", _extends({\n parentName: \"code\"\n }, {\n \"className\": \"token comment\"\n }), \"/* viewport is a WebMercatorViewport instance, containing these fields:\\n latitude: 37.75001689223574,\\n longitude: -122.44999999999976,\\n zoom: 10.966817190981073,\\n pitch: 0,\\n bearing: 0,\\n ...\\n */\")))), mdx(\"p\", null, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"docs/api-reference/web-mercator-viewport.md\"\n }), \"Documentation of WebMercatorViewport\")), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#source\",\n \"aria-label\": \"source permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\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\", _extends({\n parentName: \"svg\"\n }, {\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 })))), \"Source\"), mdx(\"p\", null, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://github.com/visgl/react-map-gl/tree/5.2-release/src/components/static-map.js\"\n }), \"static-map.js\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":4,"excerpt":"StaticMap The simplest React wrapper around MapboxGL . This is designed to be completely\nstatic, and should be used to render a map with…","frontmatter":{"title":"StaticMap"}}},"pageContext":{"relativeLinks":{"docs/README":"/docs","../../../docs":"/docs","docs":"/docs","docs/get-started/adding-custom-data":"/docs/get-started/adding-custom-data","../../get-started/adding-custom-data":"/docs/get-started/adding-custom-data","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/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/get-started":"/docs/get-started/get-started","../../get-started/get-started":"/docs/get-started/get-started","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/canvas-overlay":"/docs/api-reference/canvas-overlay","../canvas-overlay":"/docs/api-reference/canvas-overlay","docs/api-reference/fly-to-interpolator":"/docs/api-reference/fly-to-interpolator","../fly-to-interpolator":"/docs/api-reference/fly-to-interpolator","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/html-overlay":"/docs/api-reference/html-overlay","../html-overlay":"/docs/api-reference/html-overlay","docs/api-reference/linear-interpolator":"/docs/api-reference/linear-interpolator","../linear-interpolator":"/docs/api-reference/linear-interpolator","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/interactive-map":"/docs/api-reference/interactive-map","../interactive-map":"/docs/api-reference/interactive-map","docs/api-reference/map-controller":"/docs/api-reference/map-controller","../map-controller":"/docs/api-reference/map-controller","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/pointer-event":"/docs/api-reference/pointer-event","../pointer-event":"/docs/api-reference/pointer-event","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../source":"/docs/api-reference/source","docs/api-reference/web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","../web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","docs/api-reference/static-map":"/docs/api-reference/static-map","../static-map":"/docs/api-reference/static-map","docs/advanced/custom-map-controller":"/docs/advanced/custom-map-controller","../../advanced/custom-map-controller":"/docs/advanced/custom-map-controller","docs/api-reference/svg-overlay":"/docs/api-reference/svg-overlay","../svg-overlay":"/docs/api-reference/svg-overlay","docs/advanced/custom-components":"/docs/advanced/custom-components","../../advanced/custom-components":"/docs/advanced/custom-components","docs/advanced/viewport-transition":"/docs/advanced/viewport-transition","../../advanced/viewport-transition":"/docs/advanced/viewport-transition","docs/advanced/custom-overlays":"/docs/advanced/custom-overlays","../../advanced/custom-overlays":"/docs/advanced/custom-overlays","docs/contributing":"/docs/contributing","../../contributing":"/docs/contributing"},"title":"StaticMap","slug":"docs/api-reference/static-map","toc":"docs"}}}