{"id":16809553,"url":"https://github.com/meilleursagents/react-mapbox-wrapper","last_synced_at":"2025-05-09T01:45:10.089Z","repository":{"id":32977812,"uuid":"148156933","full_name":"MeilleursAgents/react-mapbox-wrapper","owner":"MeilleursAgents","description":"Mapbox GL Javascript wrapper for ReactJS","archived":false,"fork":false,"pushed_at":"2023-10-06T08:42:30.000Z","size":20731,"stargazers_count":64,"open_issues_count":67,"forks_count":16,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-09T01:45:03.018Z","etag":null,"topics":["mapbox","mapbox-gl-js","marker","radius","react","reactjs"],"latest_commit_sha":null,"homepage":"https://meilleursagents.github.io/react-mapbox-wrapper/","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/MeilleursAgents.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-10T13:07:51.000Z","updated_at":"2025-02-25T14:28:23.000Z","dependencies_parsed_at":"2024-06-18T22:37:28.697Z","dependency_job_id":"4b081e2b-30bd-4e54-b48d-f8297cdb2516","html_url":"https://github.com/MeilleursAgents/react-mapbox-wrapper","commit_stats":{"total_commits":347,"total_committers":13,"mean_commits":"26.692307692307693","dds":"0.35734870317002887","last_synced_commit":"5bcb39b5b768c46474136b21c75428da92fbc505"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MeilleursAgents%2Freact-mapbox-wrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MeilleursAgents%2Freact-mapbox-wrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MeilleursAgents%2Freact-mapbox-wrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MeilleursAgents%2Freact-mapbox-wrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MeilleursAgents","download_url":"https://codeload.github.com/MeilleursAgents/react-mapbox-wrapper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253176444,"owners_count":21866142,"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":["mapbox","mapbox-gl-js","marker","radius","react","reactjs"],"created_at":"2024-10-13T10:13:13.131Z","updated_at":"2025-05-09T01:45:10.071Z","avatar_url":"https://github.com/MeilleursAgents.png","language":"JavaScript","readme":"# react-mapbox-wrapper\n\n[![Build Status](https://travis-ci.org/MeilleursAgents/react-mapbox-wrapper.svg?branch=master)](https://travis-ci.org/MeilleursAgents/react-mapbox-wrapper)\n[![npm version](https://badge.fury.io/js/react-mapbox-wrapper.svg)](https://badge.fury.io/js/react-mapbox-wrapper)\n[![codecov](https://codecov.io/gh/MeilleursAgents/react-mapbox-wrapper/branch/master/graph/badge.svg)](https://codecov.io/gh/MeilleursAgents/react-mapbox-wrapper)\n\nReact wrapper for [mapboxgl-js API](https://www.mapbox.com/mapbox-gl-js/api/).\n\nMade with ❤️ by [MeilleursAgents](https://www.meilleursagents.com)\n\n![](sample.png)\n\n## Usage\n\n```js\nimport React from 'react';\nimport MapboxMap from 'react-mapbox-wrapper';\n\nexport default function SimpleMap() {\n    return (\n        \u003cdiv style={{ height: 400, width: 400 }}\u003e\n            \u003cMapboxMap\n                accessToken=\"\u003cyour acess token here\u003e\"\n                coordinates={{ lat: 48.872198, lng: 2.3366308 }}\n            /\u003e\n        \u003c/div\u003e\n    );\n}\n\nSimpleMap.displayName = 'SimpleMap';\n```\n\nSee [examples](examples/src/) folder for more example.\n\n## Getting started\n\nRead carefully the [getting started section](https://www.mapbox.com/mapbox-gl-js/api/) of Mapbox GL API.\n\nIf you use Webpack, you should add the following parameter in order to properly build your app.\n\n```js\nmodule: {\n    noParse: /(mapbox-gl)\\.js$/,\n}\n```\n\n`react-mapbox-wrapper` import the corresponding CSS stylesheet from Javascript, you don't have to do it.\n\n## API\n\n### MapboxMap\n\nReact Component that render a Mapbox Map. Extra props are directly passed to the [Map constructor](https://www.mapbox.com/mapbox-gl-js/api/#map). Following props are handled by wrapper for updating or handling behavior in the React philosophy.\n\nWrapper is CSS flex-ready for _width_ but you **have to set a height** for having visible Mapbox.\n\n| Props                     | Type   | Default            | Description                                                                                                                                                                                                                                                                                                                        |\n| ------------------------- | ------ | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| accessToken               | String | required           | Mapbox Access Token ([find it here](https://www.mapbox.com/account/access-tokens))                                                                                                                                                                                                                                                 |\n| coordinates               | Object | required           | Coordinates of the map center \u003cbr /\u003e According to the [LngLatLike](https://www.mapbox.com/mapbox-gl-js/api/#lnglatlike) model                                                                                                                                                                                                      |\n| className                 | string | `''`               | `className` added to map's wrapper. Your should provide a height in order to render the map (default at 0)                                                                                                                                                                                                                         |\n| children                  | Node   | `null`             | Rendered children, typically a [Marker](#Marker) and/or [Circle](#Circle)                                                                                                                                                                                                                                                          |\n| minZoom                   | number | `undefined`        | The minimum zoom level of the map (0-24).                                                                                                                                                                                                                                                                                          |\n| maxZoom                   | number | `undefined`        | The maximum zoom level of the map (0-24).                                                                                                                                                                                                                                                                                          |\n| zoom                      | number | `15`               | The viewport zoom                                                                                                                                                                                                                                                                                                                  |\n| onChange                  | func   | `undefined`        | Callback function called on every viewport change (`moveend`, `zoomend`) \u003cbr /\u003e\u003cbr /\u003e Callback receives params as first argument with the following shape `{ zoom: 15, coordinates: { lng: 3.4, lat: 1.2 } }` and [Mapbox Map object](https://www.mapbox.com/mapbox-gl-js/api/#map) as second argument                             |\n| onClick                   | func   | `undefined`        | Callback function called on [map's click](https://www.mapbox.com/mapbox-gl-js/api/#map.event:click)                                                                                                                                                                                                                                |\n| onLoad                    | func   | `undefined`        | Callback function called on [map's load](https://www.mapbox.com/mapbox-gl-js/api/#map.event:load) with current Mapbox instance param                                                                                                                                                                                               |\n| onZoomStart               | func   | `undefined`        | Callback function called on [map's zoomstart](https://www.mapbox.com/mapbox-gl-js/api/#map.event:zoomstart)                                                                                                                                                                                                                        |\n| onZoomEnd                 | func   | `undefined`        | Callback function called on [map's zoomend](https://www.mapbox.com/mapbox-gl-js/api/#map.event:zoomend) with a debounce of 300ms in order to avoid too many `render()` call \u003cbr /\u003e\u003cbr /\u003e Callback receives event object as first argument and [Mapbox Map object](https://www.mapbox.com/mapbox-gl-js/api/#map) as second argument |\n| renderNotSupported        | func   | _Simple message_   | Callback function called when [browser does not support mapbox-gl](https://www.mapbox.com/mapbox-gl-js/api/#supported)                                                                                                                                                                                                             |\n| mapboxStyle               | String |                    | [Mapbox style layer](https://www.mapbox.com/mapbox-gl-js/style-spec/)                                                                                                                                                                                                                                                              |\n| withCompass               | bool   | `false`            | Show compass [Navigation Control](https://www.mapbox.com/mapbox-gl-js/api/#navigationcontrol)                                                                                                                                                                                                                                      |\n| withFullscreen            | bool   | `false`            | Show [Fullscreen Control](https://www.mapbox.com/mapbox-gl-js/api/#fullscreencontrol)                                                                                                                                                                                                                                              |\n| withZoom                  | bool   | `false`            | Show zoom [Navigation Control](https://www.mapbox.com/mapbox-gl-js/api/#navigationcontrol)                                                                                                                                                                                                                                         |\n| fullscreenControlPosition | string | `top-right`        | Set [Fullscreen Control](https://www.mapbox.com/mapbox-gl-js/api/#fullscreencontrol) position                                                                                                                                                                                                                                      |\n| navigationControlPosition | string | `bottom-right`     | Set [Navigation Control](https://www.mapbox.com/mapbox-gl-js/api/#navigationcontrol) position                                                                                                                                                                                                                                      |\n| navigationType            | Object | `{type: \"jumpTo\"}` | Set type of navigation when changing coordinates: `flyTo`, `easeTo` or `jumpTo`. You can change speed and curve options for type `flyTo` as follows: `{type: \"flyTo\", options: {curve: 1.42, speed: 1.2}}`                                                                                                                         |\n\n### Marker\n\nReact Component that render a Marker. Extra props are directly passed to the [Marker constructor](https://www.mapbox.com/mapbox-gl-js/api/#marker)\n\n| Props            | Type   | Default  | Description                                                                                                               |\n| ---------------- | ------ | -------- | ------------------------------------------------------------------------------------------------------------------------- |\n| children         | Node   | `null`   | Marker HTML DOM, default marker will be used if not provided                                                              |\n| coordinates      | Object | required | Coordinates of the marker \u003cbr /\u003e According to the [LngLatLike](https://www.mapbox.com/mapbox-gl-js/api/#lnglatlike) model |\n| draggable        | bool   | `false`  | Allow user to drag'n'drop Marker                                                                                          |\n| getRef           | func   |          | Callback function called with marker's ref (useful for calling `#moveToTop()` function)                                   |\n| map              | Object | required | Mapbox Map where marker will be added (can be obtained with MapboxMap#onLoad props fn)                                    |\n| onDragEnd        | func   |          | Callback function called on [marker's dragend](https://www.mapbox.com/mapbox-gl-js/api/#marker.event:dragend)             |\n| onMouseOut       | func   |          | Callback function called on marker or popup mouseOut                                                                      |\n| onMouseOver      | func   |          | Callback function called on marker or popup mouseOver                                                                     |\n| popup            | Node   |          | Popup attached to the marker, displayed on click to marker                                                                |\n| popupAnchor      | string | `bottom` | [Popup anchor param](https://www.mapbox.com/mapbox-gl-js/api/#popup)                                                      |\n| popupCloseButton | bool   | `false`  | [Popup closeButton param](https://www.mapbox.com/mapbox-gl-js/api/#popup)                                                 |\n| popupOffset      | number |          | [Popup offset param](https://www.mapbox.com/mapbox-gl-js/api/#popup)                                                      |\n| popupOnOver      | bool   | `false`  | Trigger popup show on mouse over (only available if **children** are provided, default marker cannot be bind)             |\n\n### Circle\n\nReact Component that render a Circle. Extra props are directly passed to the [Marker constructor](https://www.mapbox.com/mapbox-gl-js/api/#marker)\n\n| Props       | Type   | Default      | Description                                                                                                               |\n| ----------- | ------ | ------------ | ------------------------------------------------------------------------------------------------------------------------- |\n| coordinates | Object | required     | Coordinates of the marker \u003cbr /\u003e According to the [LngLatLike](https://www.mapbox.com/mapbox-gl-js/api/#lnglatlike) model |\n| id          | string | required     | Identifier of circle, used to name the underlying layer                                                                   |\n| map         | Object | required     | Mapbox Map where marker will be added (can be obtained with MapboxMap#onLoad props fn)                                    |\n| onClick     | func   |              | Callback function called on circle's click                                                                                |\n| paint       | Object |              | [Paint option of the layer](https://www.mapbox.com/mapbox-gl-js/style-spec#layer-paint)                                   |\n| radius      | number | required     | Radius of circle, in kilometers                                                                                           |\n| unit        | string | `kilometers` | Unit of the radius. values can be : `kilometers`, `meters`, `miles`, `feet`                                               |\n\n### Helpers\n\nWe provide some [helpers](https://github.com/MeilleursAgents/react-mapbox-wrapper/blob/master/src/Helpers/index.js) for interacting with Mapbox Map object, all in `Helpers` import.\n\n```js\nimport { Helpers } from react-mapbox-wrapper;\n\nHelpers.convertRadiusUnit(580, 'meters');\n// \u003e { radius: 0.58, unit: 'kilometers' }\n\nHelpers.getCircleData({ lat: 48.868526, lng: 2.3434886 }, 800, 'meters')\n// \u003e Coordinates for drawing a circle with a 800meters radius at given coordinates\n\nHelpers.coordinatesAreEqual({ lat: 48.868526, lng: 2.3434886 }, [2.3434886, 48.868526]);\n// \u003e Check if given coordinates are equal, even in different format\n\nHelpers.newBounds(coordinatesSouthWest, coordinatesNorthEast);\n// \u003e Create a new LngLatBounds from Mapbox library\n\nHelpers.newBound(coordinates);\n// \u003e Create a new LngLatLike from Mapbox library\n\nHelpers.drawGeoJSON(map, 'foodTruck', data, { 'fill-opacity': 0.2 }, undefined, 'fill');\n// \u003e Draw a geoJSON with given data and type. Can be used to also update geoJSON if layer already exist\n\nHelpers.removeGeoJSON(map, 'foodTruck');\n// \u003e Remove the layer previously added with #addGeoJSON method\n```\n\n## Development\n\n```bash\nnpm install \u0026\u0026 npm run peers # install both dependencies and peers\n```\n\nYou can use [`npm link`](https://docs.npmjs.com/cli/link) while developing new features on this repo for use in targeted repository.\n\n```bash\nnpm link\n```\n\n### Git hooks\n\nYou can use our `pre-commit` hook for ensuring consistent format and linting before committing by running command:\n\n```bash\n./tools/install_hooks.sh\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeilleursagents%2Freact-mapbox-wrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeilleursagents%2Freact-mapbox-wrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeilleursagents%2Freact-mapbox-wrapper/lists"}