{"id":13426218,"url":"https://github.com/urbica/react-map-gl","last_synced_at":"2025-09-07T14:16:54.609Z","repository":{"id":23160873,"uuid":"98309758","full_name":"urbica/react-map-gl","owner":"urbica","description":"React Component Library for Mapbox GL JS","archived":false,"fork":false,"pushed_at":"2025-06-27T08:16:28.000Z","size":27953,"stargazers_count":418,"open_issues_count":39,"forks_count":51,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-08-23T19:35:49.867Z","etag":null,"topics":["data-visualization","map","mapbox","mapbox-gl","mapbox-gl-js","maps","react","webgl"],"latest_commit_sha":null,"homepage":"https://urbica.github.io/react-map-gl/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/urbica.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-07-25T13:34:20.000Z","updated_at":"2025-08-01T13:55:41.000Z","dependencies_parsed_at":"2024-01-13T19:25:12.779Z","dependency_job_id":"e5901d4b-7029-4299-a62c-dde7d88ff5f2","html_url":"https://github.com/urbica/react-map-gl","commit_stats":null,"previous_names":[],"tags_count":76,"template":false,"template_full_name":null,"purl":"pkg:github/urbica/react-map-gl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/urbica%2Freact-map-gl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/urbica%2Freact-map-gl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/urbica%2Freact-map-gl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/urbica%2Freact-map-gl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/urbica","download_url":"https://codeload.github.com/urbica/react-map-gl/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/urbica%2Freact-map-gl/sbom","scorecard":{"id":911871,"data":{"date":"2025-08-11","repo":{"name":"github.com/urbica/react-map-gl","commit":"e87ff7da51e4ce05fdfa9954c884609fbc5bde4d"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.8,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/3 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":10,"reason":"16 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: topLevel permissions set to 'write-all': .github/workflows/dependabot.yml:4"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: third-party GitHubAction not pinned by hash: .github/workflows/dependabot.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/urbica/react-map-gl/dependabot.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/urbica/react-map-gl/nodejs.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/urbica/react-map-gl/nodejs.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size-limit.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/urbica/react-map-gl/size-limit.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-limit.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/urbica/react-map-gl/size-limit.yml/main?enable=pin","Info:   0 out of   3 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   2 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 27 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"42 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-q8pj-2vqx-8ggc","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx","Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-f9xv-q969-pqx4"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-24T19:30:37.313Z","repository_id":23160873,"created_at":"2025-08-24T19:30:37.313Z","updated_at":"2025-08-24T19:30:37.313Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274046016,"owners_count":25212985,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-07T02:00:09.463Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-visualization","map","mapbox","mapbox-gl","mapbox-gl-js","maps","react","webgl"],"created_at":"2024-07-31T00:01:29.260Z","updated_at":"2025-09-07T14:16:54.570Z","avatar_url":"https://github.com/urbica.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Urbica React Mapbox GL JS\n\n[![Node CI](https://github.com/urbica/react-map-gl/workflows/Node%20CI/badge.svg)](https://github.com/urbica/react-map-gl/actions)\n[![codecov](https://codecov.io/gh/urbica/react-map-gl/branch/main/graph/badge.svg)](https://codecov.io/gh/urbica/react-map-gl)\n[![npm](https://img.shields.io/npm/dt/@urbica/react-map-gl.svg?style=popout)](https://www.npmjs.com/package/@urbica/react-map-gl)\n[![npm](https://img.shields.io/npm/v/@urbica/react-map-gl.svg?style=popout)](https://www.npmjs.com/package/@urbica/react-map-gl)\n![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@urbica/react-map-gl.svg)\n\nReact Component Library for [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js). Mapbox GL JS is a JavaScript library that renders interactive maps from vector tiles and Mapbox styles using WebGL. This project is intended to be as close as possible to the [Mapbox GL JS API](https://docs.mapbox.com/mapbox-gl-js/api/).\n\nThis project is heavily inspired by [uber/react-map-gl](https://github.com/uber/react-map-gl).\n\n- [Installation](#installation)\n- [Components](#components)\n- [Usage](#usage)\n  - [Static Map](#static-map)\n  - [Interactive Map](#interactive-map)\n  - [MapGL with Source and Layer](#mapgl-with-source-and-layer)\n  - [MapGL with GeoJSON Source](#mapgl-with-geojson-source)\n  - [Custom Layers support](#custom-layers-support)\n- [Documentation](#documentation)\n- [Changelog](#changelog)\n- [License](#license)\n- [Contributing](#contributing)\n- [Team](#team)\n\n![Gallery](https://raw.githubusercontent.com/urbica/react-map-gl/main/docs/gallery.jpg)\n\n## Installation\n\n```shell\nnpm install --save mapbox-gl @urbica/react-map-gl\n```\n\n...or if you are using yarn:\n\n```shell\nyarn add mapbox-gl @urbica/react-map-gl\n```\n\n### Optional Dependencies\n\nIf you want to use the `LanguageControl`:\n\n```shell\nnpm install --save @mapbox/mapbox-gl-language\n```\n\n...or if you are using yarn:\n\n```shell\nyarn add @mapbox/mapbox-gl-language\n```\n\n## Components\n\n| Component                                                 | Description                                                                                                            |\n| --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |\n| [MapGL](src/components/MapGL)                             | Represents map on the page                                                                                             |\n| [MapContext](src/components/MapContext)                   | React Context API for the map instance                                                                                 |\n| [Source](src/components/Source)                           | [Sources](https://docs.mapbox.com/mapbox-gl-js/api/#sources) specify the geographic features to be rendered on the map |\n| [Layer](src/components/Layer)                             | [Layers](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers) specify the `Sources` style                          |\n| [Filter](src/components/Filter)                           | Set filter to existing layer                                                                                           |\n| [CustomLayer](src/components/CustomLayer)                 | Allow a user to render directly into the map's GL context                                                              |\n| [Image](src/components/Image)                             | Adds an image to the map style                                                                                         |\n| [Popup](src/components/Popup)                             | React Component for [Mapbox GL JS Popup](https://docs.mapbox.com/mapbox-gl-js/api/#popup)                              |\n| [Marker](src/components/Marker)                           | React Component for [Mapbox GL JS Marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker)                            |\n| [FeatureState](src/components/FeatureState)               | Sets the state of a geographic feature rendered on the map                                                             |\n| [AttributionControl](src/components/AttributionControl)   | Represents the map's attribution information                                                                           |\n| [LanguageControl](src/components/LanguageControl)         | Adds support for switching the language of the map style                                                               |\n| [FullscreenControl](src/components/FullscreenControl)     | Contains a button for toggling the map in and out of fullscreen mode                                                   |\n| [GeolocateControl](src/components/GeolocateControl)       | Geolocate the user and then track their current location on the map                                                    |\n| [NavigationControl](src/components/NavigationControl)     | Contains zoom buttons and a compass                                                                                    |\n| [ScaleControl](src/components/ScaleControl)               | Displays the ratio of a distance on the map to the corresponding distance on the ground                                |\n| [Cluster](https://github.com/urbica/react-map-gl-cluster) | Cluster [Markers](src/components/Marker) with [supercluster](https://github.com/mapbox/supercluster)                   |\n| [Draw](https://github.com/urbica/react-map-gl-draw)       | Support for drawing and editing features                                                                               |\n\n## Usage\n\nTo use any of Mapbox’s tools, APIs, or SDKs, you’ll need a Mapbox [access token](https://www.mapbox.com/help/define-access-token/). Mapbox uses access tokens to associate requests to API resources with your account. You can find all your access tokens, create new ones, or delete existing ones on your [API access tokens page](https://www.mapbox.com/studio/account/tokens/).\n\nSee [**Documentation**](https://urbica.github.io/react-map-gl/) for more examples.\n\n### Static Map\n\nBy default, `MapGL` component renders in a static mode. That means that the user cannot interact with the map.\n\n```jsx\nimport React from 'react';\nimport MapGL from '@urbica/react-map-gl';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\n\u003cMapGL\n  style={{ width: '100%', height: '400px' }}\n  mapStyle='mapbox://styles/mapbox/light-v9'\n  accessToken={MAPBOX_ACCESS_TOKEN}\n  latitude={37.78}\n  longitude={-122.41}\n  zoom={11}\n/\u003e;\n```\n\n### Interactive Map\n\nIn most cases, you will want the user to interact with the map. To do this, you need to provide `onViewportChange` handler, that will update map viewport state.\n\n```jsx\nimport React, { useState } from 'react';\nimport MapGL from '@urbica/react-map-gl';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\nconst [viewport, setViewport] = useState({\n  latitude: 37.78,\n  longitude: -122.41,\n  zoom: 11\n});\n\n\u003cMapGL\n  style={{ width: '100%', height: '400px' }}\n  mapStyle='mapbox://styles/mapbox/light-v9'\n  accessToken={MAPBOX_ACCESS_TOKEN}\n  latitude={viewport.latitude}\n  longitude={viewport.longitude}\n  zoom={viewport.zoom}\n  onViewportChange={setViewport}\n/\u003e;\n```\n\n### MapGL with Source and Layer\n\n[Sources](https://docs.mapbox.com/mapbox-gl-js/api/#sources) specify the geographic features to be rendered on the map.\n\n[Layers](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers) specify the Sources styles. The type of layer is specified by the `\"type\"` property, and must be one of `background`, `fill`, `line`, `symbol`, `raster`, `circle`, `fill-extrusion`, `heatmap`, `hillshade`.\n\nExcept for layers of the `background` type, each layer needs to refer to a source. Layers take the data that they get from a source, optionally filter features, and then define how those features are styled.\n\n```jsx\nimport React from 'react';\nimport MapGL, { Source, Layer } from '@urbica/react-map-gl';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\n\u003cMapGL\n  style={{ width: '100%', height: '400px' }}\n  mapStyle='mapbox://styles/mapbox/light-v9'\n  accessToken={MAPBOX_ACCESS_TOKEN}\n\u003e\n  \u003cSource id='contours' type='vector' url='mapbox://mapbox.mapbox-terrain-v2' /\u003e\n  \u003cLayer\n    id='contours'\n    type='line'\n    source='contours'\n    source-layer='contour'\n    paint={{\n      'line-color': '#877b59',\n      'line-width': 1\n    }}\n  /\u003e\n\u003c/MapGL\u003e;\n```\n\n### MapGL with GeoJSON Source\n\nTo draw a GeoJSON on a map, add `Source` with the `type` property set to `geojson` and `data` property set to a URL or inline [GeoJSON](http://geojson.org/).\n\n```jsx\nimport React, { useState } from 'react';\nimport MapGL, { Source, Layer } from '@urbica/react-map-gl';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\nconst [viewport, setViewport] = useState({\n  latitude: 37.830348,\n  longitude: -122.486052,\n  zoom: 15\n});\n\nconst data = {\n  type: 'Feature',\n  geometry: {\n    type: 'LineString',\n    coordinates: [\n      [-122.48369693756104, 37.83381888486939],\n      [-122.48348236083984, 37.83317489144141],\n      [-122.48339653015138, 37.83270036637107],\n      [-122.48356819152832, 37.832056363179625],\n      [-122.48404026031496, 37.83114119107971],\n      [-122.48404026031496, 37.83049717427869],\n      [-122.48348236083984, 37.829920943955045],\n      [-122.48356819152832, 37.82954808664175],\n      [-122.48507022857666, 37.82944639795659],\n      [-122.48610019683838, 37.82880236636284],\n      [-122.48695850372314, 37.82931081282506],\n      [-122.48700141906738, 37.83080223556934],\n      [-122.48751640319824, 37.83168351665737],\n      [-122.48803138732912, 37.832158048267786],\n      [-122.48888969421387, 37.83297152392784],\n      [-122.48987674713133, 37.83263257682617],\n      [-122.49043464660643, 37.832937629287755],\n      [-122.49125003814696, 37.832429207817725],\n      [-122.49163627624512, 37.832564787218985],\n      [-122.49223709106445, 37.83337825839438],\n      [-122.49378204345702, 37.83368330777276]\n    ]\n  }\n};\n\n\u003cMapGL\n  style={{ width: '100%', height: '400px' }}\n  mapStyle='mapbox://styles/mapbox/light-v9'\n  accessToken={MAPBOX_ACCESS_TOKEN}\n  onViewportChange={setViewport}\n  {...viewport}\n\u003e\n  \u003cSource id='route' type='geojson' data={data} /\u003e\n  \u003cLayer\n    id='route'\n    type='line'\n    source='route'\n    layout={{\n      'line-join': 'round',\n      'line-cap': 'round'\n    }}\n    paint={{\n      'line-color': '#888',\n      'line-width': 8\n    }}\n  /\u003e\n\u003c/MapGL\u003e;\n```\n\n### Custom Layers support\n\n[Custom layers](https://docs.mapbox.com/mapbox-gl-js/api/#customlayerinterface) allow a user to render directly into the map's GL context using the map's camera.\n\nHere is an Uber [deck.gl](https://github.com/uber/deck.gl) usage example.\n\n```jsx\nimport React from 'react';\nimport MapGL, { CustomLayer } from '@urbica/react-map-gl';\nimport { MapboxLayer } from '@deck.gl/mapbox';\nimport { ScatterplotLayer } from '@deck.gl/layers';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\nconst myDeckLayer = new MapboxLayer({\n  id: 'my-scatterplot',\n  type: ScatterplotLayer,\n  data: [{ position: [-74.5, 40], size: 1000 }],\n  getPosition: (d) =\u003e d.position,\n  getRadius: (d) =\u003e d.size,\n  getColor: [255, 0, 0]\n});\n\n\u003cMapGL\n  style={{ width: '100%', height: '400px' }}\n  mapStyle='mapbox://styles/mapbox/light-v9'\n  accessToken={MAPBOX_ACCESS_TOKEN}\n  latitude={40}\n  longitude={-74.5}\n  zoom={9}\n\u003e\n  \u003cCustomLayer layer={myDeckLayer} /\u003e\n\u003c/MapGL\u003e;\n```\n\n## Documentation\n\nCheck out [documentation website](https://urbica.github.io/react-map-gl/).\n\n## Changelog\n\nCheck out [CHANGELOG.md](CHANGELOG.md) and [releases](https://github.com/urbica/react-map-gl/releases) page.\n\n## License\n\nThis project is licensed under the terms of the [MIT license](LICENSE).\n\n## Contributing\n\nClone and install dependencies\n\n```shell\ngit clone https://github.com/urbica/react-map-gl.git\ncd react-map-gl\nnpm install\n```\n\nStart `react-styleguidist` server\n\n```shell\nMAPBOX_ACCESS_TOKEN=\u003cTOKEN\u003e npm start\n```\n\nwhere `\u003cTOKEN\u003e` is a valid Mapbox [access token](https://www.mapbox.com/help/define-access-token/).\n\nRun tests with\n\n```shell\nnpm test\n```\n\n## Team\n\n| [![Stepan Kuzmin](https://github.com/stepankuzmin.png?size=144)](https://github.com/stepankuzmin) | [![Artem Boyur](https://github.com/boyur.png?size=144)](https://github.com/boyur) | [![Andrey Bakhvalov](https://github.com/device25.png?size=144)](https://github.com/device25) |\n| ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |\n| [Stepan Kuzmin](https://github.com/stepankuzmin)                                                  | [Artem Boyur](https://github.com/boyur)                                           | [Andrey Bakhvalov](https://github.com/device25)                                              |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Furbica%2Freact-map-gl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Furbica%2Freact-map-gl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Furbica%2Freact-map-gl/lists"}