archive-gh-me/react-map-gl
1
0
Fork 0
mirror of https://github.com/visgl/react-map-gl.git synced 2026-01-18 15:54:22 +00:00
Code Issues Projects Releases Wiki Activity
react-map-gl/page-data/docs/api-reference/layer/page-data.json

1 line
29 KiB
JSON
Raw Blame History

{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/api-reference/layer","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\": \"layer\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#layer\",\n \"aria-label\": \"layer 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 }))), \"Layer\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"https://img.shields.io/badge/since-v5.1-green\",\n \"alt\": \"Since v5.1\"\n })), mdx(\"p\", null, \"This component allows apps to create a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers\"\n }, \"map layer\"), \" using React.\"), 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\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"*\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"as\"), \" React \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" ReactMapGL\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"Layer\", 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 keyword\"\n }, \"const\"), \" parkLayer \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n id\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'landuse_park'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n type\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'fill'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n source\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'mapbox'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'source-layer'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'landuse'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n filter\", 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 string\"\n }, \"'=='\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'class'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'park'\"), 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 keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"App\"), 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\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"viewport\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" setViewport\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n longitude\", 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 number\"\n }, \"122.45\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.78\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n zoom\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"14\"), \"\\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 punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"parkColor\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" setParkColor\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" React\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'#8fa'\"), 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 keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\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 string\"\n }, \"\\\"100vw\\\"\"), \" height\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"\\\"100vh\\\"\"), \" onViewportChange\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"setViewport\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), \"Layer \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"parkLayer\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" paint\", 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 punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'fill-color'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" parkColor\", 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 operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), \"ReactMapGL\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\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 punctuation\"\n }, \"}\")))), mdx(\"h2\", {\n \"id\": \"properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#properties\",\n \"aria-label\": \"properties 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 }))), \"Properties\"), mdx(\"p\", null, \"The props provided to this component should be conforming to the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers\"\n }, \"Mapbox layer specification\"), \".\"), mdx(\"p\", null, \"When props change \", mdx(\"em\", {\n parentName: \"p\"\n }, \"shallowly\"), \", the component will perform style diffing to update the layer. Avoid defining constant objects/arrays inline may help performance.\"), mdx(\"h3\", {\n \"id\": \"identity-properties\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#identity-properties\",\n \"aria-label\": \"identity properties 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 }))), \"Identity Properties\"), mdx(\"p\", null, \"Once a \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"<Layer>\"), \" is mounted, the following props should not change. If you add/remove multiple JSX layers dynamically, make sure you use React's \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactjs.org/docs/lists-and-keys.html#keys\"\n }, \"key prop\"), \" to give each element a stable identity.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textidcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h5\",\n \"href\": \"#code-classlanguage-textidcode-string\",\n \"aria-label\": \"code classlanguage textidcode string 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: \"h5\",\n \"className\": \"language-text\"\n }, \"id\"), \" (String)\"), mdx(\"p\", null, \"Unique identifier of the layer. If not provided, a default id will be assigned.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-texttypecode-string-required\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h5\",\n \"href\": \"#code-classlanguage-texttypecode-string-required\",\n \"aria-label\": \"code classlanguage texttypecode string required 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: \"h5\",\n \"className\": \"language-text\"\n }, \"type\"), \" (String, required)\"), mdx(\"p\", null, \"Type of the layer.\"), mdx(\"h3\", {\n \"id\": \"options\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#options\",\n \"aria-label\": \"options 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 }))), \"Options\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textbeforeidcode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h5\",\n \"href\": \"#code-classlanguage-textbeforeidcode-string\",\n \"aria-label\": \"code classlanguage textbeforeidcode string 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: \"h5\",\n \"className\": \"language-text\"\n }, \"beforeId\"), \" (String)\"), mdx(\"p\", null, \"The ID of an existing layer to insert this layer before. If this prop is omitted, the layer will be appended to the end of the layers array. This is useful when using dynamic layers with a map style from a URL.\"), mdx(\"p\", null, \"Note that layers are added by the order that they mount. They are \", mdx(\"em\", {\n parentName: \"p\"\n }, \"NOT\"), \" reordered later if their relative positions in the JSX tree change. If dynamic reordering is desired, you should manipulate \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"beforeId\"), \" for consistent behavior.\"), mdx(\"h5\", {\n \"id\": \"code-classlanguage-textsourcecode-string\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h5\",\n \"href\": \"#code-classlanguage-textsourcecode-string\",\n \"aria-label\": \"code classlanguage textsourcecode string 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: \"h5\",\n \"className\": \"language-text\"\n }, \"source\"), \" (String)\"), mdx(\"p\", null, mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"source\"), \" is required by some layer types in the Mapbox style specification. If \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"<Layer>\"), \" is used as the child of a \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/react-map-gl/docs/api-reference/source.md\"\n }, \"Source\"), \" component, this prop will be overwritten by the id of the parent source.\"), mdx(\"h2\", {\n \"id\": \"source\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#source\",\n \"aria-label\": \"source 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 }))), \"Source\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/6.1-release/src/components/layer.js\"\n }, \"layer.js\")));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Layer This component allows apps to create a map layer using React. Properties The props provided to this component should be conforming…","frontmatter":{"title":"Layer"}}},"pageContext":{"relativeLinks":{"docs":"/docs","../../../docs":"/docs","docs/advanced/custom-components":"/docs/advanced/custom-components","../../advanced/custom-components":"/docs/advanced/custom-components","docs/advanced/custom-map-controller":"/docs/advanced/custom-map-controller","../../advanced/custom-map-controller":"/docs/advanced/custom-map-controller","docs/advanced/viewport-transition":"/docs/advanced/viewport-transition","../../advanced/viewport-transition":"/docs/advanced/viewport-transition","docs/api-reference/attribution-control":"/docs/api-reference/attribution-control","../attribution-control":"/docs/api-reference/attribution-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/geolocate-control":"/docs/api-reference/geolocate-control","../geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/html-overlay":"/docs/api-reference/html-overlay","../html-overlay":"/docs/api-reference/html-overlay","docs/api-reference/interactive-map":"/docs/api-reference/interactive-map","../interactive-map":"/docs/api-reference/interactive-map","docs/api-reference/layer":"/docs/api-reference/layer","../layer":"/docs/api-reference/layer","docs/api-reference/linear-interpolator":"/docs/api-reference/linear-interpolator","../linear-interpolator":"/docs/api-reference/linear-interpolator","docs/api-reference/map-context":"/docs/api-reference/map-context","../map-context":"/docs/api-reference/map-context","docs/api-reference/map-controller":"/docs/api-reference/map-controller","../map-controller":"/docs/api-reference/map-controller","docs/api-reference/marker":"/docs/api-reference/marker","../marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/pointer-event":"/docs/api-reference/pointer-event","../pointer-event":"/docs/api-reference/pointer-event","docs/api-reference/popup":"/docs/api-reference/popup","../popup":"/docs/api-reference/popup","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/static-map":"/docs/api-reference/static-map","../static-map":"/docs/api-reference/static-map","docs/api-reference/svg-overlay":"/docs/api-reference/svg-overlay","../svg-overlay":"/docs/api-reference/svg-overlay","docs/api-reference/web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","../web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","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/faq":"/docs/get-started/faq","../../get-started/faq":"/docs/get-started/faq","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"},"title":"Layer","slug":"docs/api-reference/layer","toc":"docs"}},"staticQueryHashes":["484347790"]}
Reference in New Issue View Git Blame Copy Permalink