{"id":13401179,"url":"https://github.com/alex3165/react-mapbox-gl","last_synced_at":"2025-05-14T02:02:57.040Z","repository":{"id":37444420,"uuid":"56373404","full_name":"alex3165/react-mapbox-gl","owner":"alex3165","description":"A React binding of mapbox-gl-js","archived":false,"fork":false,"pushed_at":"2023-09-25T15:43:58.000Z","size":18635,"stargazers_count":1963,"open_issues_count":265,"forks_count":539,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-05-12T23:54:15.222Z","etag":null,"topics":["map","mapbox-gl","mapbox-gl-js","react","react-mapbox-gl"],"latest_commit_sha":null,"homepage":"http://alex3165.github.io/react-mapbox-gl/","language":"TypeScript","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/alex3165.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-04-16T08:23:57.000Z","updated_at":"2025-05-03T16:24:13.000Z","dependencies_parsed_at":"2023-10-20T16:33:14.882Z","dependency_job_id":null,"html_url":"https://github.com/alex3165/react-mapbox-gl","commit_stats":{"total_commits":894,"total_committers":85,"mean_commits":10.51764705882353,"dds":"0.37695749440715887","last_synced_commit":"6507a2273a6680ae95b5b1379db8f41abc379f61"},"previous_names":[],"tags_count":154,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex3165%2Freact-mapbox-gl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex3165%2Freact-mapbox-gl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex3165%2Freact-mapbox-gl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alex3165%2Freact-mapbox-gl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alex3165","download_url":"https://codeload.github.com/alex3165/react-mapbox-gl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253843190,"owners_count":21972871,"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","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":["map","mapbox-gl","mapbox-gl-js","react","react-mapbox-gl"],"created_at":"2024-07-30T19:00:59.552Z","updated_at":"2025-05-14T02:02:56.986Z","avatar_url":"https://github.com/alex3165.png","language":"TypeScript","funding_links":[],"categories":["UI Components","Uncategorized","TypeScript","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","Bindings","📦 Legacy \u0026 Inactive Projects","React [🔝](#readme)"],"sub_categories":["Map","Uncategorized","Data Visualization","JavaScript"],"readme":"![Logo](/logo.png)\n\n# React-mapbox-gl | [Documentation](docs/API.md) | [Demos](http://alex3165.github.io/react-mapbox-gl/demos)\n\n[![Build Status](https://travis-ci.org/alex3165/react-mapbox-gl.svg?branch=master)](https://travis-ci.org/alex3165/react-mapbox-gl)\n[![npm version](https://img.shields.io/npm/v/react-mapbox-gl.svg?style=flat)](https://www.npmjs.com/package/react-mapbox-gl)\n[![npm downloads](https://img.shields.io/npm/dm/react-mapbox-gl.svg)](https://www.npmjs.com/package/react-mapbox-gl)\n[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-blue.svg)](https://github.com/microsoft/TypeScript)\n\u003cbr/\u003e\n\n#### React wrapper for [mapbox-gl-js](https://www.mapbox.com/mapbox-gl-js/api/).\n\n\u003cbr/\u003e\u003cbr/\u003e\n![London cycle example gif](docs/london-cycle-example.gif 'London cycle example gif')\n\n## Components\n\n### Proxy components (proxy between React and Mapbox API)\n\n- ReactMapboxGL\n- Layer \u0026 Feature\n  - property `symbol` displays a mapbox symbol.\n  - property `line` displays a lineString.\n  - property `fill` displays a polygon.\n  - property `circle` displays a mapbox circle.\n  - property `raster` displays a mapbox raster tiles.\n  - property `fill-extrusion` displays a layer with extruded buildings.\n  - property `background` displays a mapbox background layer.\n  - property `heatmap` displays a mapbox heatmap layer.\n- Source\n- GeoJSONLayer\n\n### DOM components (normal React components)\n\n- ZoomControl\n- ScaleControl\n- RotationControl\n- Marker (Projected component)\n- Popup (Projected component)\n- Cluster\n\n## Getting Started\n\n```\nnpm install react-mapbox-gl mapbox-gl --save\n```\n\nExample:\n\nAdding the css in your index.html:\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    ...\n    \u003clink\n      href=\"https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css\"\n      rel=\"stylesheet\"\n    /\u003e\n  \u003c/head\u003e\n\u003c/html\u003e\n```\n\n```jsx\n// ES6\nimport ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';\nimport 'mapbox-gl/dist/mapbox-gl.css';\n\n// ES5\nvar ReactMapboxGl = require('react-mapbox-gl');\nvar Layer = ReactMapboxGl.Layer;\nvar Feature = ReactMapboxGl.Feature;\nrequire('mapbox-gl/dist/mapbox-gl.css');\n\nconst Map = ReactMapboxGl({\n  accessToken:\n    'pk.eyJ1IjoiZmFicmljOCIsImEiOiJjaWc5aTV1ZzUwMDJwdzJrb2w0dXRmc2d0In0.p6GGlfyV-WksaDV_KdN27A'\n});\n\n// in render()\n\u003cMap\n  style=\"mapbox://styles/mapbox/streets-v9\"\n  containerStyle={{\n    height: '100vh',\n    width: '100vw'\n  }}\n\u003e\n  \u003cLayer type=\"symbol\" id=\"marker\" layout={{ 'icon-image': 'marker-15' }}\u003e\n    \u003cFeature coordinates={[-0.481747846041145, 51.3233379650232]} /\u003e\n  \u003c/Layer\u003e\n\u003c/Map\u003e;\n```\n\n## Why are `zoom`, `bearing` and `pitch` Arrays ?\n\nIf those properties changed at the mapbox-gl-js level and you don't update the value kept in your state, it will be unsynced with the current viewport. At some point you might want to update the viewport value (zoom, pitch or bearing) with the ones in your state but using value equality is not enough. Taking zoom as example, you will still have the unsynced zoom value therefore we can't tell if you want to update the prop or not. In order to explicitly update the current viewport values you can instead break the references of those props and reliably update the current viewport with the one you have in your state to be synced again.\n\n## [Current version documentation](docs/API.md)\n\n## [Version 3.0 documentation](https://github.com/alex3165/react-mapbox-gl/blob/v3.9.2/docs/API.md)\n\n## [Version 2.0 documentation](https://github.com/alex3165/react-mapbox-gl/blob/v2-archive/docs/API.md)\n\n## Contributions\n\nPlease try to reproduce your problem with the [boilerplate](https://github.com/alex3165/react-mapbox-gl-debug) before posting an issue.\n\n## mapbox-gl-draw compatibility\n\nTry [react-mapbox-gl-draw](https://github.com/amaurymartiny/react-mapbox-gl-draw)\n\n## Looking for an Angular alternative?\n\nTry [ngx-mapbox-gl](https://github.com/Wykks/ngx-mapbox-gl)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex3165%2Freact-mapbox-gl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falex3165%2Freact-mapbox-gl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falex3165%2Freact-mapbox-gl/lists"}