mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
1 line
35 KiB
JSON
1 line
35 KiB
JSON
{"componentChunkName":"component---node-modules-gatsby-theme-ocular-src-react-templates-documentation-jsx","path":"/docs/get-started/get-started","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\": \"get-started\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#get-started\",\n \"aria-label\": \"get started 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 }))), \"Get Started\"), mdx(\"h2\", {\n \"id\": \"installation\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#installation\",\n \"aria-label\": \"installation 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 }))), \"Installation\"), mdx(\"p\", null, \"Using \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"react-map-gl\"), \" requires \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"node >= v4\"), \" and \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"react >= 16.3\"), \".\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"sh\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-sh\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-sh\"\n }, \"npm install --save react-map-gl\"))), mdx(\"h2\", {\n \"id\": \"example\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#example\",\n \"aria-label\": \"example 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 }))), \"Example\"), 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\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \" useState \", 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'\"), 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 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 }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"Map\"), 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 }, \"=\"), \" \", 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 width\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"400\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n height\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"400\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n latitude\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"37.7577\"), 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.4376\"), 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 }, \"8\"), \"\\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\\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\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"viewport\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n onViewportChange\", 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 parameter\"\n }, \"nextViewport\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"setViewport\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"nextViewport\", 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 operator\"\n }, \"/\"), 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(\"p\", null, \"See full project setup in \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/6.1-release/examples/get-started\"\n }, \"get-started examples\")), mdx(\"h2\", {\n \"id\": \"styling\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#styling\",\n \"aria-label\": \"styling 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 }))), \"Styling\"), mdx(\"p\", null, \"The current mapbox-gl release requires its stylesheet be included at all times. The marker, popup and navigation components in react-map-gl also need the stylesheet to work properly.\"), mdx(\"p\", null, \"You may add the stylesheet to the head of your page:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"html\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-html\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"<!-- index.html -->\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), \"link\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"href\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\"), \"https://api.tiles.mapbox.com/mapbox-gl-js/v<YOUR_MAPBOX_VERSION>/mapbox-gl.css\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"rel\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation attr-equals\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\"), \"stylesheet\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"'\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"/>\"))))), mdx(\"p\", null, \"Find out your mapbox version by running \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"yarn list mapbox-gl\"), \" or \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"npm ls mapbox-gl\"), \".\"), mdx(\"p\", null, \"Or embed it in your app by using - \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.npmjs.com/package/browserify-css\"\n }, \"browserify-css\"), \"\\nwith Browserify or - \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://webpack.github.io/docs/stylesheets.html\"\n }, \"css-loader\"), \" with Webpack:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// app.js\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'mapbox-gl/dist/mapbox-gl.css'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\")))), mdx(\"h2\", {\n \"id\": \"using-with-browserify-webpack-and-other-javascript-bundlers\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#using-with-browserify-webpack-and-other-javascript-bundlers\",\n \"aria-label\": \"using with browserify webpack and other javascript bundlers 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 }))), \"Using with Browserify, Webpack, and other JavaScript Bundlers\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"browserify\"), \" - react-map-gl is extensively tested with \", mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"browserify\"), \" and works without configuration.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"webpack\"), \" - Most of the provided react-map-gl examples use webpack. Look at the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/6.1-release/examples/get-started\"\n }, \"get started examples\"), \" folder for minimalist templates.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"create-react-app\"), \" - react-map-gl is compatible with \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/facebook/create-react-app\"\n }, \"create-react-app\"), \".\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"code\", {\n parentName: \"p\",\n \"className\": \"language-text\"\n }, \"create-react-app-typescript\"), \" - react-map-gl is compatible with \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/wmonk/create-react-app-typescript\"\n }, \"create-react-app-typescript\"), \". You can see an example \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/zackhsi/react-map-gl-typescript\"\n }, \"here\"), \".\"))), mdx(\"p\", null, \"There's many other ready-to-run \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/visgl/react-map-gl/tree/6.1-release/examples\"\n }, \"examples\"), \" you can take a look at if you need more inspiration.\"), mdx(\"h2\", {\n \"id\": \"using-with-a-mapbox-gl-fork\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#using-with-a-mapbox-gl-fork\",\n \"aria-label\": \"using with a mapbox gl fork 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 }))), \"Using with a mapbox-gl Fork\"), mdx(\"p\", null, \"Install your choice of fork along with react-map-gl, for example:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"bash\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-bash\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"npm\"), \" i react-map-gl maplibre-gl\"))), mdx(\"p\", null, \"In your bundler's configuration, set the forked library to replace any reference from mapbox-gl. This can be done in Webpack with something like:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// webpack.config.js\"), \"\\nmodule\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"export \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// ...\"), \"\\n resolve\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n alias\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'mapbox-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'maplibre-gl'\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\")))), mdx(\"p\", null, \"In rollup:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// rollup.config.js\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"import\"), \" alias \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'@rollup/plugin-alias'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\nmodule\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"exports \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// ...\"), \"\\n plugins\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"alias\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n entries\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \" find\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'mapbox-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" replacement\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'maplibre-gl'\"), \" \", 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 }, \"]\"), \"\\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 }, \"]\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\")))), mdx(\"p\", null, \"In Next.js:\"), mdx(\"div\", {\n \"className\": \"gatsby-highlight\",\n \"data-language\": \"js\"\n }, mdx(\"pre\", {\n parentName: \"div\",\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// next.config.js\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" nextConfig \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// ...\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, \"webpack\"), 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 parameter\"\n }, \"config\"), 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 punctuation\"\n }, \"{\"), \"\\n config\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"resolve\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"alias \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"...\"), \"config\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"resolve\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), \"alias\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'mapbox-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'maplibre-gl'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// ...\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\")))));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"excerpt":"Get Started Installation Using react-map-gl requires node >= v4 and react >= 16.3 . Example See full project setup in get-started…","frontmatter":{"title":"Get Started"}}},"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","../../api-reference/attribution-control":"/docs/api-reference/attribution-control","docs/api-reference/canvas-overlay":"/docs/api-reference/canvas-overlay","../../api-reference/canvas-overlay":"/docs/api-reference/canvas-overlay","docs/api-reference/fly-to-interpolator":"/docs/api-reference/fly-to-interpolator","../../api-reference/fly-to-interpolator":"/docs/api-reference/fly-to-interpolator","docs/api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","../../api-reference/fullscreen-control":"/docs/api-reference/fullscreen-control","docs/api-reference/geolocate-control":"/docs/api-reference/geolocate-control","../../api-reference/geolocate-control":"/docs/api-reference/geolocate-control","docs/api-reference/html-overlay":"/docs/api-reference/html-overlay","../../api-reference/html-overlay":"/docs/api-reference/html-overlay","docs/api-reference/interactive-map":"/docs/api-reference/interactive-map","../../api-reference/interactive-map":"/docs/api-reference/interactive-map","docs/api-reference/layer":"/docs/api-reference/layer","../../api-reference/layer":"/docs/api-reference/layer","docs/api-reference/linear-interpolator":"/docs/api-reference/linear-interpolator","../../api-reference/linear-interpolator":"/docs/api-reference/linear-interpolator","docs/api-reference/map-context":"/docs/api-reference/map-context","../../api-reference/map-context":"/docs/api-reference/map-context","docs/api-reference/map-controller":"/docs/api-reference/map-controller","../../api-reference/map-controller":"/docs/api-reference/map-controller","docs/api-reference/marker":"/docs/api-reference/marker","../../api-reference/marker":"/docs/api-reference/marker","docs/api-reference/navigation-control":"/docs/api-reference/navigation-control","../../api-reference/navigation-control":"/docs/api-reference/navigation-control","docs/api-reference/pointer-event":"/docs/api-reference/pointer-event","../../api-reference/pointer-event":"/docs/api-reference/pointer-event","docs/api-reference/popup":"/docs/api-reference/popup","../../api-reference/popup":"/docs/api-reference/popup","docs/api-reference/scale-control":"/docs/api-reference/scale-control","../../api-reference/scale-control":"/docs/api-reference/scale-control","docs/api-reference/source":"/docs/api-reference/source","../../api-reference/source":"/docs/api-reference/source","docs/api-reference/static-map":"/docs/api-reference/static-map","../../api-reference/static-map":"/docs/api-reference/static-map","docs/api-reference/svg-overlay":"/docs/api-reference/svg-overlay","../../api-reference/svg-overlay":"/docs/api-reference/svg-overlay","docs/api-reference/web-mercator-viewport":"/docs/api-reference/web-mercator-viewport","../../api-reference/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","../adding-custom-data":"/docs/get-started/adding-custom-data","docs/get-started/faq":"/docs/get-started/faq","../faq":"/docs/get-started/faq","docs/get-started/get-started":"/docs/get-started/get-started","../get-started":"/docs/get-started/get-started","docs/get-started/mapbox-tokens":"/docs/get-started/mapbox-tokens","../mapbox-tokens":"/docs/get-started/mapbox-tokens","docs/get-started/state-management":"/docs/get-started/state-management","../state-management":"/docs/get-started/state-management"},"title":"Get Started","slug":"docs/get-started/get-started","toc":"docs"}},"staticQueryHashes":["484347790"]} |