Showing preview only (2,423K chars total). Download the full file or copy to clipboard to get everything.
Repository: visgl/react-map-gl
Branch: master
Commit: c41e00c2d815
Files: 586
Total size: 2.2 MB
Directory structure:
gitextract_r_hkj0e0/
├── .eslintignore
├── .eslintrc.cjs
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug-report.yml
│ │ ├── config.yml
│ │ └── feature-request.yml
│ ├── SECURITY.md
│ └── workflows/
│ ├── release.yml
│ ├── test.yml
│ └── website.yml
├── .gitignore
├── .nvmrc
├── .ocularrc.js
├── .prettierrc
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── TESTING.md
├── docs/
│ ├── .gitignore
│ ├── README.md
│ ├── api-reference/
│ │ ├── mapbox/
│ │ │ ├── attribution-control.md
│ │ │ ├── fullscreen-control.md
│ │ │ ├── geolocate-control.md
│ │ │ ├── layer.md
│ │ │ ├── map-provider.md
│ │ │ ├── map.md
│ │ │ ├── marker.md
│ │ │ ├── navigation-control.md
│ │ │ ├── popup.md
│ │ │ ├── scale-control.md
│ │ │ ├── source.md
│ │ │ ├── types.md
│ │ │ ├── use-control.md
│ │ │ └── use-map.md
│ │ └── maplibre/
│ │ ├── attribution-control.md
│ │ ├── fullscreen-control.md
│ │ ├── geolocate-control.md
│ │ ├── globe-control.md
│ │ ├── layer.md
│ │ ├── logo-control.md
│ │ ├── map-provider.md
│ │ ├── map.md
│ │ ├── marker.md
│ │ ├── navigation-control.md
│ │ ├── popup.md
│ │ ├── scale-control.md
│ │ ├── source.md
│ │ ├── terrain-control.md
│ │ ├── types.md
│ │ ├── use-control.md
│ │ └── use-map.md
│ ├── get-started/
│ │ ├── adding-custom-data.md
│ │ ├── get-started.md
│ │ ├── mapbox-tokens.md
│ │ ├── state-management.md
│ │ └── tips-and-tricks.md
│ ├── table-of-contents.json
│ ├── upgrade-guide.md
│ └── whats-new.md
├── examples/
│ ├── .data/
│ │ ├── bart-station.json
│ │ ├── cities.json
│ │ ├── feature-example-sf.json
│ │ ├── us-election-2016.json
│ │ └── us-income.geojson
│ ├── .eslintrc
│ ├── get-started/
│ │ ├── basic/
│ │ │ ├── README.md
│ │ │ ├── app.jsx
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ └── vite.config.js
│ │ ├── controlled/
│ │ │ ├── README.md
│ │ │ ├── app.jsx
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ └── vite.config.js
│ │ ├── hook/
│ │ │ ├── README.md
│ │ │ ├── app.jsx
│ │ │ ├── controls.jsx
│ │ │ ├── controls2.jsx
│ │ │ ├── index.html
│ │ │ ├── map.jsx
│ │ │ ├── package.json
│ │ │ └── vite.config.js
│ │ ├── maplibre/
│ │ │ ├── README.md
│ │ │ ├── app.jsx
│ │ │ ├── index.html
│ │ │ └── package.json
│ │ ├── nextjs/
│ │ │ ├── .gitignore
│ │ │ ├── README.md
│ │ │ ├── next.config.js
│ │ │ ├── package.json
│ │ │ └── pages/
│ │ │ ├── _app.js
│ │ │ └── index.js
│ │ └── redux/
│ │ ├── README.md
│ │ ├── app.jsx
│ │ ├── controls.jsx
│ │ ├── index.html
│ │ ├── map.jsx
│ │ ├── package.json
│ │ ├── store.js
│ │ └── vite.config.js
│ ├── mapbox/
│ │ ├── clusters/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── layers.ts
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── controls/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── pin.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── custom-cursor/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── custom-overlay/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── custom-overlay.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── deckgl-overlay/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ └── app.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── draggable-markers/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── pin.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── draw-polygon/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── draw-control.ts
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── filter/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── map-style.ts
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── geocoder/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── geocoder-control.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── geojson/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ ├── map-style.ts
│ │ │ │ └── utils.ts
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── geojson-animation/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── heatmap/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── map-style.ts
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── interaction/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── layers/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── map-style-basic-v8.json
│ │ ├── side-by-side/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── terrain/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── viewport-animation/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ └── zoom-to-bounds/
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── app.tsx
│ │ │ ├── control-panel.tsx
│ │ │ └── map-style.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config.js
│ ├── maplibre/
│ │ ├── clusters/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── layers.ts
│ │ │ └── tsconfig.json
│ │ ├── controls/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── pin.tsx
│ │ │ └── tsconfig.json
│ │ ├── custom-cursor/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ └── tsconfig.json
│ │ ├── custom-overlay/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── custom-overlay.tsx
│ │ │ └── tsconfig.json
│ │ ├── deckgl-overlay/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ └── app.tsx
│ │ │ └── tsconfig.json
│ │ ├── draggable-markers/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── pin.tsx
│ │ │ └── tsconfig.json
│ │ ├── draw-polygon/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── draw-control.ts
│ │ │ └── tsconfig.json
│ │ ├── filter/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── map-style.ts
│ │ │ └── tsconfig.json
│ │ ├── geocoder/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── geocoder-control.tsx
│ │ │ └── tsconfig.json
│ │ ├── geojson/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ ├── map-style.ts
│ │ │ │ └── utils.ts
│ │ │ └── tsconfig.json
│ │ ├── geojson-animation/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ └── tsconfig.json
│ │ ├── globe/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ └── tsconfig.json
│ │ ├── heatmap/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── map-style.ts
│ │ │ └── tsconfig.json
│ │ ├── interaction/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ └── tsconfig.json
│ │ ├── layers/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ └── tsconfig.json
│ │ ├── map-style-basic-v8.json
│ │ ├── side-by-side/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ └── tsconfig.json
│ │ ├── terrain/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ └── tsconfig.json
│ │ ├── viewport-animation/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ └── tsconfig.json
│ │ └── zoom-to-bounds/
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── app.tsx
│ │ │ ├── control-panel.tsx
│ │ │ └── map-style.tsx
│ │ └── tsconfig.json
│ └── vite.config.local.js
├── index.html
├── lerna.json
├── modules/
│ ├── main/
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── mapbox-legacy/
│ │ │ │ ├── components/
│ │ │ │ │ ├── attribution-control.ts
│ │ │ │ │ ├── fullscreen-control.ts
│ │ │ │ │ ├── geolocate-control.ts
│ │ │ │ │ ├── layer.ts
│ │ │ │ │ ├── map.tsx
│ │ │ │ │ ├── marker.ts
│ │ │ │ │ ├── navigation-control.ts
│ │ │ │ │ ├── popup.ts
│ │ │ │ │ ├── scale-control.ts
│ │ │ │ │ ├── source.ts
│ │ │ │ │ ├── use-control.ts
│ │ │ │ │ └── use-map.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── mapbox/
│ │ │ │ │ ├── create-ref.ts
│ │ │ │ │ └── mapbox.ts
│ │ │ │ ├── types/
│ │ │ │ │ ├── common.ts
│ │ │ │ │ ├── events.ts
│ │ │ │ │ ├── internal.ts
│ │ │ │ │ ├── lib.ts
│ │ │ │ │ └── style-spec.ts
│ │ │ │ └── utils/
│ │ │ │ ├── apply-react-style.ts
│ │ │ │ ├── assert.ts
│ │ │ │ ├── deep-equal.ts
│ │ │ │ ├── set-globals.ts
│ │ │ │ ├── style-utils.ts
│ │ │ │ ├── transform.ts
│ │ │ │ └── use-isomorphic-layout-effect.ts
│ │ │ ├── mapbox.ts
│ │ │ └── maplibre.ts
│ │ ├── test/
│ │ │ ├── components/
│ │ │ │ ├── controls.spec.jsx
│ │ │ │ ├── index.js
│ │ │ │ ├── layer.spec.jsx
│ │ │ │ ├── map.spec.jsx
│ │ │ │ ├── marker.spec.jsx
│ │ │ │ ├── popup.spec.jsx
│ │ │ │ ├── source.spec.jsx
│ │ │ │ └── use-map.spec.jsx
│ │ │ └── utils/
│ │ │ ├── apply-react-style.spec.js
│ │ │ ├── deep-equal.spec.js
│ │ │ ├── index.js
│ │ │ ├── mapbox-gl-mock/
│ │ │ │ ├── edge_insets.js
│ │ │ │ ├── lng_lat.js
│ │ │ │ ├── lng_lat_bounds.js
│ │ │ │ ├── transform.js
│ │ │ │ └── util.js
│ │ │ ├── style-utils.spec.js
│ │ │ ├── test-utils.jsx
│ │ │ └── transform.spec.js
│ │ └── tsconfig.json
│ ├── react-mapbox/
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── components/
│ │ │ │ ├── attribution-control.ts
│ │ │ │ ├── fullscreen-control.ts
│ │ │ │ ├── geolocate-control.ts
│ │ │ │ ├── layer.ts
│ │ │ │ ├── map.tsx
│ │ │ │ ├── marker.ts
│ │ │ │ ├── navigation-control.ts
│ │ │ │ ├── popup.ts
│ │ │ │ ├── scale-control.ts
│ │ │ │ ├── source.ts
│ │ │ │ ├── use-control.ts
│ │ │ │ └── use-map.tsx
│ │ │ ├── index.ts
│ │ │ ├── mapbox/
│ │ │ │ ├── create-ref.ts
│ │ │ │ ├── mapbox.ts
│ │ │ │ └── proxy-transform.ts
│ │ │ ├── types/
│ │ │ │ ├── common.ts
│ │ │ │ ├── events.ts
│ │ │ │ ├── internal.ts
│ │ │ │ ├── lib.ts
│ │ │ │ └── style-spec.ts
│ │ │ └── utils/
│ │ │ ├── apply-react-style.ts
│ │ │ ├── assert.ts
│ │ │ ├── compare-class-names.ts
│ │ │ ├── deep-equal.ts
│ │ │ ├── set-globals.ts
│ │ │ ├── style-utils.ts
│ │ │ ├── transform.ts
│ │ │ └── use-isomorphic-layout-effect.ts
│ │ ├── test/
│ │ │ ├── components/
│ │ │ │ ├── controls.spec.jsx
│ │ │ │ ├── index.js
│ │ │ │ ├── layer.spec.jsx
│ │ │ │ ├── map.spec.jsx
│ │ │ │ ├── marker.spec.jsx
│ │ │ │ ├── popup.spec.jsx
│ │ │ │ ├── source.spec.jsx
│ │ │ │ └── use-map.spec.jsx
│ │ │ └── utils/
│ │ │ ├── apply-react-style.spec.js
│ │ │ ├── compare-class-names.spec.js
│ │ │ ├── deep-equal.spec.js
│ │ │ ├── index.js
│ │ │ ├── mapbox-gl-mock/
│ │ │ │ ├── edge_insets.js
│ │ │ │ ├── lng_lat.js
│ │ │ │ ├── lng_lat_bounds.js
│ │ │ │ ├── transform.js
│ │ │ │ └── util.js
│ │ │ ├── style-utils.spec.js
│ │ │ ├── test-utils.jsx
│ │ │ ├── token.js
│ │ │ └── transform.spec.js
│ │ └── tsconfig.json
│ └── react-maplibre/
│ ├── package.json
│ ├── src/
│ │ ├── components/
│ │ │ ├── attribution-control.ts
│ │ │ ├── fullscreen-control.ts
│ │ │ ├── geolocate-control.ts
│ │ │ ├── globe-control.ts
│ │ │ ├── layer.ts
│ │ │ ├── logo-control.ts
│ │ │ ├── map.tsx
│ │ │ ├── marker.ts
│ │ │ ├── navigation-control.ts
│ │ │ ├── popup.ts
│ │ │ ├── scale-control.ts
│ │ │ ├── source.ts
│ │ │ ├── terrain-control.ts
│ │ │ ├── use-control.ts
│ │ │ └── use-map.tsx
│ │ ├── index.ts
│ │ ├── maplibre/
│ │ │ ├── create-ref.ts
│ │ │ └── maplibre.ts
│ │ ├── types/
│ │ │ ├── common.ts
│ │ │ ├── events.ts
│ │ │ ├── internal.ts
│ │ │ ├── lib.ts
│ │ │ └── style-spec.ts
│ │ └── utils/
│ │ ├── apply-react-style.ts
│ │ ├── assert.ts
│ │ ├── compare-class-names.ts
│ │ ├── deep-equal.ts
│ │ ├── set-globals.ts
│ │ ├── style-utils.ts
│ │ ├── transform.ts
│ │ └── use-isomorphic-layout-effect.ts
│ ├── test/
│ │ ├── .eslintrc
│ │ ├── components/
│ │ │ ├── controls.spec.jsx
│ │ │ ├── index.js
│ │ │ ├── layer.spec.jsx
│ │ │ ├── map.spec.jsx
│ │ │ ├── marker.spec.jsx
│ │ │ ├── popup.spec.jsx
│ │ │ ├── source.spec.jsx
│ │ │ └── use-map.spec.jsx
│ │ └── utils/
│ │ ├── apply-react-style.spec.js
│ │ ├── compare-class-names.spec.js
│ │ ├── deep-equal.spec.js
│ │ ├── index.js
│ │ ├── style-utils.spec.js
│ │ ├── test-utils.jsx
│ │ └── transform.spec.js
│ └── tsconfig.json
├── package.json
├── scripts/
│ └── update-release-branch.sh
├── test/
│ ├── .eslintrc
│ ├── apps/
│ │ └── reuse-maps/
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── app.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config.js
│ ├── browser.js
│ ├── data/
│ │ ├── glyph/
│ │ │ └── UberMove/
│ │ │ └── 0-255
│ │ ├── sprite/
│ │ │ └── tools/
│ │ │ └── 14/
│ │ │ └── sprites.json
│ │ ├── style.json
│ │ └── tile/
│ │ └── v1/
│ │ └── 12/
│ │ └── 655/
│ │ ├── 1582/
│ │ │ ├── COMPOSITE
│ │ │ └── POI
│ │ └── 1583/
│ │ ├── COMPOSITE
│ │ └── POI
│ ├── node.js
│ ├── render/
│ │ ├── index.jsx
│ │ └── test-cases.jsx
│ ├── size/
│ │ ├── mapbox-legacy.js
│ │ ├── mapbox.js
│ │ └── maplibre.js
│ ├── src/
│ │ └── exports.ts
│ └── test-utils.js
├── tsconfig.json
└── website/
├── .eslintignore
├── .gitignore
├── babel.config.js
├── docusaurus.config.js
├── package.json
└── src/
├── examples/
│ ├── index.mdx
│ ├── mapbox/
│ │ ├── clusters.mdx
│ │ ├── controls.mdx
│ │ ├── custom-cursor.mdx
│ │ ├── draggable-markers.mdx
│ │ ├── draw-polygon.mdx
│ │ ├── filter.mdx
│ │ ├── geocoder.mdx
│ │ ├── geojson-animation.mdx
│ │ ├── geojson.mdx
│ │ ├── heatmap.mdx
│ │ ├── interaction.mdx
│ │ ├── layers.mdx
│ │ ├── side-by-side.mdx
│ │ ├── terrain.mdx
│ │ ├── viewport-animation.mdx
│ │ └── zoom-to-bounds.mdx
│ ├── maplibre/
│ │ ├── clusters.mdx
│ │ ├── controls.mdx
│ │ ├── custom-cursor.mdx
│ │ ├── draggable-markers.mdx
│ │ ├── draw-polygon.mdx
│ │ ├── filter.mdx
│ │ ├── geocoder.mdx
│ │ ├── geojson-animation.mdx
│ │ ├── geojson.mdx
│ │ ├── heatmap.mdx
│ │ ├── interaction.mdx
│ │ ├── layers.mdx
│ │ ├── side-by-side.mdx
│ │ ├── terrain.mdx
│ │ ├── viewport-animation.mdx
│ │ └── zoom-to-bounds.mdx
│ └── table-of-contents.json
├── mapbox-gl.css
├── maplibre-gl.css
├── pages/
│ └── index.jsx
└── styles.css
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintignore
================================================
dist/
node_modules/
test/
modules/**/test/
**/vite.config.js
examples/vite.config.local.js
================================================
FILE: .eslintrc.cjs
================================================
const {getESLintConfig} = require('@vis.gl/dev-tools/configuration');
module.exports = getESLintConfig({
react: '16.8.2',
overrides: {
parserOptions: {
project: ['./tsconfig.json'],
ecmaVersion: 2020
},
rules: {
'max-depth': ['warn', 4],
complexity: ['warn'],
'max-statements': ['warn'],
'callback-return': 0
},
overrides: [
{
files: ['**/*.ts', '**/*.tsx', '**/*.d.ts'],
rules: {
// Gradually enable
'@typescript-eslint/ban-ts-comment': 0,
'@typescript-eslint/ban-types': 0,
'@typescript-eslint/no-unsafe-member-access': 0,
'@typescript-eslint/no-unsafe-assignment': 0,
'import/named': 0,
'@typescript-eslint/explicit-module-boundary-types': 0,
'@typescript-eslint/no-unsafe-return': 0,
'@typescript-eslint/no-unsafe-call': 0,
'@typescript-eslint/restrict-plus-operands': 0,
'@typescript-eslint/no-explicit-any': 0,
'@typescript-eslint/no-unsafe-argument': 0,
'@typescript-eslint/no-shadow': 1,
'@typescript-eslint/no-redundant-type-constituents': 1
}
}
]
}
});
================================================
FILE: .github/ISSUE_TEMPLATE/bug-report.yml
================================================
name: Bug Report
description: Something does not work as expected
title: "[Bug]"
labels: bug
body:
- type: markdown
attributes:
value: |
Thank you for taking the time to report a bug!
You may find answers faster by searching in [the documentation](https://visgl.github.io/react-map-gl/search) and [existing issues](https://github.com/visgl/react-map-gl/issue).
If you are unsure whether it is a bug in your own implementation or the library itself, consider starting a conversation in [Discussions](https://github.com/visgl/react-map-gl/discussions) instead.
- type: textarea
attributes:
label: Description
description: What you're experiencing.
validations:
required: true
- type: textarea
attributes:
label: Expected Behavior
description: What you expect to see.
validations:
required: false
- type: textarea
attributes:
label: Steps to Reproduce
description: |
Providing a Code Sandbox that reproduces the behavior. You can use [this boiler plate](https://codesandbox.io/s/react-map-gl-boiler-plate-717vw) as a starting point.
validations:
required: true
- type: textarea
attributes:
label: Environment
description: |
Example:
- **Framework version**: react-map-gl@7.0.0
- **Map library**: mapbox-gl@2.7.0
- **Browser**: Chrome 98.0
- **OS**: iOS 15.1
value: |
- Framework version:
- Map library:
- Browser:
- OS:
validations:
required: true
- type: textarea
attributes:
label: Logs
description: Check the browser console for any relevant errors or warnings.
validations:
required: false
================================================
FILE: .github/ISSUE_TEMPLATE/config.yml
================================================
blank_issues_enabled: false
contact_links:
- name: I have a question / I need help
url: https://github.com/visgl/react-map-gl/discussions
about: Ask generic questions or request help here
================================================
FILE: .github/ISSUE_TEMPLATE/feature-request.yml
================================================
name: Feature Request
description: Request for a new feature or enhancement
title: "[Feat]"
labels: feature
body:
- type: markdown
attributes:
value: |
Tell us what you are using react-map-gl for and how we can make it better.
This project is maintained by volunteers and sponsoring companies. While we cannot promise a timeline for any specific feature, we try to prioritize those that will benefit the most users.
- type: textarea
attributes:
label: Target Use Case
description: How would this benefit you and other developers?
validations:
required: true
- type: textarea
attributes:
label: Proposal
description: How would this feature work? If it's a new API, use code samples to show how it will be used. If it's visual, link to an image that illustrate the desired effect.
validations:
required: true
================================================
FILE: .github/SECURITY.md
================================================
# Security Policy
## Supported Versions
Security updates are applied only to the latest release.
## Reporting a Vulnerability
If you have discovered a security vulnerability in this project, please report it privately. **Do not disclose it as a public issue.** This gives us time to work with you to fix the issue before public exposure, reducing the chance that the exploit will be used before a patch is released.
Please disclose it at [security advisory](https://github.com/visgl/react-map-gl/security/advisories/new).
This project is maintained by a team of volunteers on a reasonable-effort basis. As such, please give us at least 90 days to work on a fix before public exposure.
================================================
FILE: .github/workflows/release.yml
================================================
name: release
on:
push:
tags:
- v*
jobs:
check_branch:
runs-on: ubuntu-latest
outputs:
should_build: ${{ steps.permitted.outputs.result }}
steps:
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
- name: Fetch remote branches
run: |
git fetch origin --depth=1
- name: Check if on permitted branch
id: permitted
run: |
result=
if git branch -a --contains $GITHUB_SHA | grep -q 'remotes/origin/master$'; then
result=true
elif git branch -a --contains $GITHUB_SHA | grep -q 'remotes/origin/.*-release$'; then
result=true
fi
echo "result=${result}" >> "$GITHUB_OUTPUT"
release:
runs-on: ubuntu-22.04
needs: check_branch
permissions:
contents: write
if: ${{ github.repository_owner == 'visgl' && needs.check_branch.outputs.should_build }}
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_ACCESS_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
steps:
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
- name: Setup Node.js
uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
with:
node-version-file: '.nvmrc'
cache: 'yarn'
- name: Enable Corepack
run: corepack enable yarn
- name: Install dependencies
run: yarn
- name: Build packages
run: yarn build
- name: Run tests from transpiled code
run: npx ocular-test dist
- name: Login to NPM
run: npm config set "//registry.npmjs.org/:_authToken=${NPM_ACCESS_TOKEN}"
- name: Publish to NPM
run: npx ocular-publish from-git
================================================
FILE: .github/workflows/test.yml
================================================
name: test
# On every pull request, but only on push to master
on:
push:
branches:
- master
pull_request:
permissions:
contents: read
jobs:
test-node:
runs-on: ubuntu-22.04
permissions:
checks: write
contents: read
steps:
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
- name: Setup Node.js
uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
with:
node-version-file: '.nvmrc'
cache: 'yarn'
- name: Enable Corepack
run: corepack enable yarn
- name: Install dependencies
run: yarn bootstrap
- name: Run tests
env:
VITE_MAPBOX_TOKEN: ${{ secrets.MAPBOX_ACCESS_TOKEN_CI }}
run: |
yarn lint
yarn test ci
- name: Coveralls
uses: coverallsapp/github-action@648a8eb78e6d50909eff900e4ec85cab4524a45b # v2.3.6
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
================================================
FILE: .github/workflows/website.yml
================================================
name: website
on:
push:
branches:
- '*-release'
jobs:
check_branch:
runs-on: ubuntu-22.04
outputs:
should_deploy: ${{ endsWith(github.ref, steps.get_version.outputs.latest) }}
steps:
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
- name: Get version
id: get_version
run: |
LATEST=$(npm show react-map-gl version | grep -o -E "^[0-9]+\.[0-9]+")
echo "latest=${LATEST}-release" >> "$GITHUB_OUTPUT"
deploy:
runs-on: ubuntu-22.04
needs: check_branch
permissions:
contents: write
if: ${{ github.repository_owner == 'visgl' && needs.check_branch.outputs.should_deploy }}
steps:
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
with:
token: ${{ secrets.WEBSITE_DEPLOY_TOKEN }}
- name: Setup Node.js
uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
with:
node-version-file: '.nvmrc'
cache: 'yarn'
- name: Enable Corepack
run: corepack enable yarn
- name: Install dependencies
run: |
yarn bootstrap
(cd website && yarn)
- name: Build website
env:
MapboxAccessToken: ${{ secrets.MAPBOX_ACCESS_TOKEN }}
run: (cd website && yarn build)
- name: Deploy
uses: JamesIves/github-pages-deploy-action@132898c54c57c7cc6b80eb3a89968de8fc283505 # 3.7.1
with:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
BRANCH: gh-pages
FOLDER: website/build
CLEAN: true
================================================
FILE: .gitignore
================================================
dist/
dist-es6/
node_modules
.nyc_output/
coverage
npm-debug.log
package-lock.json
examples/**/yarn.lock
test/**/yarn.lock
**/package-lock.json
**/tsconfig.tsbuildinfo
yarn-error.log
.DS_Store
.reify-cache
tsconfig.tsbuildinfo
.idea
================================================
FILE: .nvmrc
================================================
18.19.0
================================================
FILE: .ocularrc.js
================================================
/** @typedef {import('@vis.gl/dev-tools').OcularConfig} OcularConfig */
import {resolve} from 'path';
/** @type {OcularConfig} */
export default {
lint: {
paths: ['modules', 'test', 'examples']
},
coverage: {
test: 'browser'
},
aliases: {
},
browserTest: {
server: {wait: 5000}
},
entry: {
test: 'test/node.js',
'test-browser': 'test/browser.js',
size: [
'test/size/mapbox-legacy.js',
'test/size/maplibre.js',
'test/size/mapbox.js'
]
}
};
================================================
FILE: .prettierrc
================================================
printWidth: 100
semi: true
singleQuote: true
trailingComma: none
bracketSpacing: false
arrowParens: avoid
================================================
FILE: CHANGELOG.md
================================================
# CHANGELOG
# Version 8.1
## v8.1.0-alpha.2 (Apr 9, 2025)
- wrap jumpTo as internal update (#2516)
## v8.1.0-alpha.1 (Mar 28, 2025)
- feat(mapbox): Replace shadow transform with proxied approach (#2514)
# Version 8.0
## v8.0.0-beta.1 (Jan 31, 2025)
- feat: remove `RTLTextPlugin` default for MapLibre (#2480)
## v8.0.0-alpha.2 (Jan 27, 2025)
- Migrate to monorepo (#2459)
# Version 7.2
## 7.2.0-beta.1 (Sep 12, 2023)
- Switch to ESM module (#2281)
# Version 7.1
## 7.1.0-beta.3 (Jun 22, 2023)
- Remap event types (#2207)
- Restore fog, light and terrain types on MapProps (#2206)
## 7.1.0-beta.2 (Jun 14, 2023)
- Make source prop of Layer optional (#2200)
- Fix maplibre-gl peerDependencies typo (#2197)
## 7.1.0-beta.1 (Jun 5, 2023)
- Add ref forwarding to Marker and Popup (#2191)
- Split exports into separate endpoints (#2178)
- Make mapbox-gl an optional dependency (#2175)
- Remove defaultProps and displayName (#2173)
# Version 7.0
## 7.0.0 (Feb 4, 2022)
v7 is a complete rewrite of the library. It addresses many long-standing issues in v5 and v6 limited by legacy architecture decisions. The most notable results of this redesign are:
- Performance: minimize the overhead of React, offer the same fast and smooth interaction as the native library
- Lightweight: the ESM build size is reduced from 219k to 57k
- Predictability: Components behave the same as their mapbox counterparts. Props are mapped 1:1 from the native options wherever appropriate. Almost all imperative APIs (`flyTo`, `fitBounds` etc.) can now be called directly without breaking the React binding.
- Compatibility: first and third-party plugins! Directly use [mapbox-gl-draw](https://github.com/visgl/react-map-gl/tree/7.0-release/examples/draw-polygon), [mapbox-gl-geocoder](https://github.com/visgl/react-map-gl/tree/7.0-release/examples/geocoder), to name a few.
- TypeScript compliant: the code base is now entirely written in TypeScript, and all types can be [imported](/docs/api-reference/types.md).
Visit the [upgrade guide](https://visgl.github.io/react-map-gl/docs/upgrade-guide) if you are trying to upgrade from v5 and v6.
## 7.0.0-beta.1 (Jan 26, 2022)
- Add mapLib API (#1703)
- Support inline styling for all components (#1702)
- Refactor Mapbox class (#1701)
## 7.0.0-alpha.7 (Jan 17, 2022)
- Improve typing (#1695)
- [v7] Fix popup className update in mapbox v1/maplibre (#1694)
## 7.0.0-alpha.6 (Jan 9, 2022)
- [v7] Fix double controls in strict mode (#1678)
- [v7] Fix AttributionControl prop typo (#1679)
## 7.0.0-alpha.5 (Jan 6, 2022)
- [v7] Handle unmount order (#1676)
- [v7] Fix synchronization during transition (#1675)
- [v7] Update MapRef (#1674)
- [v7] Bug fixes (#1673)
## 7.0.0-alpha.4 (Jan 4, 2022)
- [v7] Fix resize synchronization (#1670)
- [v7] Add fog, light, terrain props (#1669)
- [v7] support global settings with MapProps (#1668)
## 7.0.0-alpha.3 (Jan 3, 2022)
- [v7] Clean up typings and expose more utility types (#1667)
- Drop flow types support (#1666)
## 7.0.0-alpha.2 (Jan 2, 2022)
- Update `@types/mapbox-gl` dependency
## 7.0.0-alpha.1 (Jan 2, 2022)
- [v7] utility hooks (#1663)
- [v7] Add Layer and Source (#1657)
- [v7] Control components (#1656)
- [v7] Marker and Popup (#1655)
- [v7] Map component (#1652)
- Typescript dev setup
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Code of Conduct
react-map-gl is an [OpenJS Foundation](https://openjsf.org/) project. Please be mindful of and adhere to the OpenJS Foundation's [Code of Conduct](https://github.com/openjs-foundation/cross-project-council/blob/main/CODE_OF_CONDUCT.md) when contributing to react-map-gl.
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing
**Thanks for taking the time to contribute!**
PRs and bug reports are welcome, and we are actively looking for new maintainers.
## Setting Up Dev Environment
The **master** branch is the active development branch.
Building react-map-gl locally from the source requires node.js `>=8`.
We use [yarn](https://yarnpkg.com/en/docs/install) to manage the dependencies.
```bash
git checkout master
yarn bootstrap
yarn test
```
Test:
```bash
$ yarn test
```
Test in Node:
```bash
$ yarn test node
```
Test in browser (can use Chrome dev tools for debugging):
```bash
$ yarn test browser
```
## Pull Requests
Any intended change to the code base must open a [pull request](https://help.github.com/articles/creating-a-pull-request/) and be approved.
Generally speaking, all PRs are open against the `master` branch, unless the feature being affected no longer exists on master.
### PR Checklist
- [ ] Tests
- `yarn test` must be successful.
+ New code should be covered by unit tests whenever possible.
- [ ] Documentation
+ If public APIs are added/modified, update component documentation in `docs/api-reference`.
+ Breaking changes and deprecations must be added to `docs/upgrade-guide.md`.
+ Noteworthy new features should be added to `docs/whats-new.md`.
- [ ] Description on GitHub
+ Link to relevant issue.
+ Label with a milestone (latest release or vNext).
+ If public APIs are added/modified, describe the intended behavior.
+ If visual/interaction is affected, consider attaching a screenshot/GIF.
## Release
react-map-gl follows the [Semantic Versioning](https://semver.org/) guidelines. Steps for publishing releases can be found [here](https://www.github.com/visgl/tsc/tree/master/developer-process).
## Community Governance
vis.gl is part of the [OpenJS Foundation](https://openjsf.org/). See the organization's [Technical Charter](https://github.com/visgl/tsc/blob/master/Technical%20Charter.md).
### Technical Steering Committee
react-map-gl development is governed by the vis.gl Technical Steering Committee (TSC).
### Maintainers
- [Xiaoji Chen](https://github.com/Pessimistress)
- [Xintong Xia](https://github.com/xintongxia)
Maintainers of react-map-gl have commit access to this GitHub repository, and take part in the decision making process.
If you are interested in becoming a maintainer, read the [governance guidelines](https://github.com/visgl/tsc/blob/master/governance.md).
The vis.gl TSC meets monthly and publishes meeting notes via a [mailing list](https://lists.uc.foundation/g/visgl).
This mailing list can also be utilized to reach out to the TSC.
================================================
FILE: LICENSE
================================================
Copyright Vis.gl contributors.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
This contains code from MapboxGL-js
Copyright (c) 2014, Mapbox
All rights reserved.
Redistribution and use in source and binary forms, with or without modification,
are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice,
this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution.
* Neither the name of Mapbox GL JS nor the names of its contributors
may be used to endorse or promote products derived from this software
without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-------------------------------------------------------------------------------
Contains code from Mapbox GL Style JSON
Mapbox Open Styles are copyright (c) 2014, Mapbox, all rights reserved.
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
- Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
================================================
FILE: README.md
================================================
<p align="right">
<a href="https://npmjs.org/package/react-map-gl">
<img src="https://img.shields.io/npm/v/react-map-gl.svg?style=flat-square" alt="version" />
</a>
<a href="https://github.com/visgl/react-map-gl/actions?query=workflow%3Atest+branch%3Amaster">
<img src="https://github.com/visgl/react-map-gl/workflows/test/badge.svg?branch=master" alt="build" />
<a href="https://npmjs.org/package/react-map-gl">
<img src="https://img.shields.io/npm/dm/react-map-gl.svg?style=flat-square" alt="downloads" />
</a>
</p>
<h1 align="center">react-map-gl | <a href="https://visgl.github.io/react-map-gl">Docs</a></h1>
`react-map-gl` is a suite of [React](https://react.dev/) components designed to provide a React API for [mapbox-gl](https://github.com/mapbox/mapbox-gl-js) or [maplibre-gl](https://maplibre.org/maplibre-gl-js/docs/). More information in the online documentation.
See our [Design Philosophy](docs/README.md#design-philosophy).
### Installation
Using `react-map-gl` requires `react >= 16.3`.
```sh
# Using Maplibre
npm install react-map-gl maplibre-gl
```
_or_
```sh
# Using Mapbox
npm install react-map-gl mapbox-gl
```
### Example
```js
// Using Maplibre
import * as React from 'react';
import Map from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
function App() {
return (
<Map
initialViewState={{
longitude: -122.4,
latitude: 37.8,
zoom: 14
}}
style={{width: 600, height: 400}}
mapStyle="https://api.maptiler.com/maps/streets/style.json?key=<Maptiler access token>"
/>
);
}
```
_or_
```js
// Using Mapbox
import * as React from 'react';
import Map from 'react-map-gl/mapbox';
import 'mapbox-gl/dist/mapbox-gl.css';
function App() {
return (
<Map
// https://visgl.github.io/react-map-gl/docs/get-started/mapbox-tokens
mapboxAccessToken="<Mapbox access token>"
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
style={{width: 600, height: 400}}
mapStyle="mapbox://styles/mapbox/streets-v9"
/>
);
}
```
Learn more with in our [Getting Started](https://visgl.github.io/react-map-gl/docs/get-started) guide.
### Contribute
See [contribution guide](/CONTRIBUTING.md).
### Attributions
react-map-gl is part of vis.gl, an [OpenJS Foundation](https://openjsf.org) project.
Development is also supported by
<img src="https://raw.githubusercontent.com/visgl/deck.gl-data/master/images/branding/mapbox.svg" height="40" />
================================================
FILE: TESTING.md
================================================
# Testing
## Unit, Lint
```
npm run test
```
## Browser
```
npm run test-browser
```
**You'll need to specify a valid Mapbox Access Token in the URL** for the tests to pass.
```
http://localhost:8080/?access_token=MAPBOX_ACCESS_TOKEN
```
# Bumping Mapbox Version
Always pin Mapbox to a specific release.
The React controls (`NavigationControl`, `Popup` and `Marker`) are dependent on
the Mapbox stylesheet, and may be broken by Mapbox updates.
Always run `examples/controls` after bumping Mapbox version to make sure they
still work.
================================================
FILE: docs/.gitignore
================================================
api-reference/web-mercator-viewport.md
================================================
FILE: docs/README.md
================================================
# Introduction
> These docs are for v8.0. For v7, see [here](https://github.com/visgl/react-map-gl/tree/7.1-release/docs).
react-map-gl is a suite of [React](http://facebook.github.io/react/) components for
[mapbox-gl](https://www.npmjs.com/package/mapbox-gl), [maplibre-gl](https://www.npmjs.com/package/maplibre-gl) or compatible libraries.
| Library | Description |
| --- | --- |
| [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) | An Open-source TypeScript library for publishing web maps. |
| [Mapbox GL JS](https://www.mapbox.com/mapbox-gljs) | A JavaScript library for interactive, customizable vector maps on the web. |
| [Mapbox GL JS v1](https://github.com/mapbox/mapbox-gl-js/tree/release-v1.13.3) | The last free-open-source version of Mapbox GL JS. This version can be used without a Mapbox token if you do not use Mapbox hosted basemaps. |
| Other compatible forks | It may be possible to use react-map-gl with mapbox-gl/maplibre-gl forks, but this is not a supported use case. Minor PRs to enable other forks to be used may be accepted. |
If you need help choosing a base map library that is right for you:
- Decide where to get your vector map data.
+ `mapbox-gl` is designed to work seamlessly with Mapbox's own data service. You will need a billable Mapbox token to use it.
+ There are a number of [map data providers](./get-started/mapbox-tokens.md#display-maps-without-a-mapbox-token) who support `maplibre-gl`, with a variaty of data quality and price options.
+ You can create and host your own map tiles and use them with `maplibre-gl` for (almost) free, if you are comfortable of using [open source tools](./get-started/mapbox-tokens.md#display-maps-without-a-mapbox-token) and setting up a cloud storage account.
- Visit Mapbox and MapLibre websites for examples and documentation. Each library offer unique features that may not exist in another.
New to react-map-gl? [Get Started](./get-started/get-started.md)
Want to contribute? See our [Developer Guide](./contributing.md)
## Design Philosophy
react-map-gl was first created by Uber's Visualization team, where Mapbox was used as a component to build powerful web tools such as [geospatial analytics](https://kepler.gl) and [self-driving data visualization](https://avs.auto/). To manage the complexity of these applications, we fully embrace React and reactive programming.
The stock mapbox-gl APIs are [imperative](https://en.wikipedia.org/wiki/Imperative_programming). That is, you instruct the map to do something (for example, [map.flyTo](https://docs.mapbox.com/mapbox-gl-js/api/#map#flyto)), and it will execute the command at its own pace.
This does not scale when we have many components that need to synchronize with each other. We sometimes render two maps side by side, and when the user interacts with one, update both cameras. We draw React UI outside of the map container, that moves with the camera. We also render WebGL graphic overlays on top of the map, most notably with [deck.gl](https://deck.gl). In these use cases, in order for all components to synchronize correctly, they must have their shared states managed by React. We might store the **source of truth** in a parent component state, or Redux store, or hooks, and let it propagate down to the map as well as its peers.
Ultimately, in the spirit of the [reactive programming paradigm](https://en.wikipedia.org/wiki/Reactive_programming), data always flows **down**. As long as the map manages its own state, as mapbox-gl is designed to do, we risk the components going out of sync.
react-map-gl creates a fully reactive wrapper for mapbox-gl/maplibre-gl. The [Map](./api-reference/maplibre/map.md) component can be fully [controlled](https://reactjs.org/docs/forms.html#controlled-components), that is, the map's camera would never deviate from the props that it's assigned. Read more about this core behavior in [state management](./get-started/state-management.md).
## Limitations
In v7.0, react-map-gl was fully rewritten to better align its API with the underlying Mapbox GL JS library. Wherever the reactive usage patterns permits, the wrapper's props and methods are 1:1 mappings to their native API equivelants.
It is possible to call the native methods directly from the `Map` instance obtained via [getMap](./api-reference/maplibre/map.md#gemap). However, doing so may result in the map's state to deviate from its props. For example, calling `map.setMaxZoom` directly will cause the map's constraint settings to differ from the value of the `maxZoom` prop. Generally speaking, calling a native method is disencouraged if the same thing can be achieved through the React interface. If a third-party plugin does so, then it may lead to some unexpected behaviors.
================================================
FILE: docs/api-reference/mapbox/attribution-control.md
================================================
# AttributionControl
React component that wraps mapbox-gl's [AttributionControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#attributioncontrol) class.
```tsx
import * as React from 'react';
import Map, {AttributionControl} from 'react-map-gl/mapbox';
import 'mapbox-gl/dist/mapbox-gl.css';
function App() {
return <Map
mapboxAccessToken="<Mapbox access token>"
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
mapStyle="mapbox://styles/mapbox/streets-v9"
// disable the default attribution
attributionControl={false}
>
<AttributionControl customAttribution="Map design by me" />
</Map>;
}
```
## Properties
### Reactive Properties
#### `style`: CSSProperties {#style}
CSS style override that applies to the control's container.
### Other Properties
The properties in this section are not reactive. They are only used when the component first mounts.
Any options supported by the `AttributionControl` class ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/markers/#attributioncontrol) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/AttributionControl/)), such as
- `compact`
- `customAttribution`
Plus the following:
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
Default: `'bottom-right'`
Placement of the control relative to the map.
## Source
[attribution-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-mapbox/src/components/attribution-control.ts)
================================================
FILE: docs/api-reference/mapbox/fullscreen-control.md
================================================
# FullscreenControl
React component that wraps mapbox-gl's [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#fullscreencontrol) class.
```tsx
import * as React from 'react';
import Map, {FullscreenControl} from 'react-map-gl/mapbox';
import 'mapbox-gl/dist/mapbox-gl.css';
function App() {
return <Map
mapboxAccessToken="<Mapbox access token>"
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
mapStyle="mapbox://styles/mapbox/streets-v9"
>
<FullscreenControl />
</Map>;
}
```
## Properties
### Reactive Properties
#### `style`: CSSProperties {#style}
CSS style override that applies to the control's container.
### Other Properties
The properties in this section are not reactive. They are only used when the component first mounts.
#### `containerId`: string {#containerid}
Id of the DOM element which should be made full screen. By default, the map container element will be made full screen.
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
Default: `'top-right'`
Placement of the control relative to the map.
## Source
[fullscreen-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-mapbox/src/components/fullscreen-control.ts)
================================================
FILE: docs/api-reference/mapbox/geolocate-control.md
================================================
# GeolocateControl
React component that wraps mapbox-gl's [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol) class.
```tsx
import * as React from 'react';
import Map, {GeolocateControl} from 'react-map-gl/mapbox';
import 'mapbox-gl/dist/mapbox-gl.css';
function App() {
return <Map
mapboxAccessToken="<Mapbox access token>"
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
mapStyle="mapbox://styles/mapbox/streets-v9"
>
<GeolocateControl />
</Map>;
}
```
## Properties
### Reactive Properties
#### `style`: CSSProperties {#style}
CSS style override that applies to the control's container.
### Callbacks
#### `onGeolocate`: (evt: [GeolocateResultEvent](./types.md#geolocateresultevent)) => void {#ongeolocate}
Called on each Geolocation API position update that returned as success.
#### `onError`: (evt: [GeolocateErrorEvent](./types.md#geolocateerrorevent)) => void {#onerror}
Called on each Geolocation API position update that returned as an error.
#### `onOutOfMaxBounds`: (evt: [GeolocateResultEvent](./types.md#geolocateresultevent)) => void {#onoutofmaxbounds}
Called on each Geolocation API position update that returned as success but user position is out of map `maxBounds`.
#### `onTrackUserLocationStart`: (evt: [GeolocateEvent](./types.md#geolocateevent)) => void {#ontrackuserlocationstart}
Called when the GeolocateControl changes to the active lock state.
#### `onTrackUserLocationEnd`: (evt: [GeolocateEvent](./types.md#geolocateevent)) => void {#ontrackuserlocationend}
Called when the GeolocateControl changes to the background state.
### Other Properties
The properties in this section are not reactive. They are only used when the component first mounts.
Any options supported by the `GeolocateControl` class ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/GeolocateControl/)), such as
- `positionOptions`
- `fitBoundsOptions`
- `trackUserLocation`
- `showAccuracyCircle`
- `showUserLocation`
Plus the following:
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
Default: `'bottom-right'`
Placement of the control relative to the map.
## Methods
The underlying native `GeolocateControl` instance is accessible via a [React ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) hook.
You may use it to call any imperative methods:
```tsx
import * as React from 'react';
import {useRef, useEffect} from 'react';
import Map, {GeolocateControl} from 'react-map-gl/mapbox';
import type mapboxgl from 'mapbox-gl';
function App() {
const geoControlRef = useRef<mapboxgl.GeolocateControl>();
useEffect(() => {
// Activate as soon as the control is loaded
geoControlRef.current?.trigger();
}, [geoControlRef.current]);
return <Map>
<GeolocateControl ref={geoControlRef} />
</Map>;
}
```
## Source
[geolocate-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-mapbox/src/components/geolocate-control.ts)
================================================
FILE: docs/api-reference/mapbox/layer.md
================================================
# Layer
This component allows apps to create a [map layer](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers) using React.
```tsx
import * as React from 'react';
import Map, {Layer} from 'react-map-gl/mapbox';
import type {FillLayer} from 'react-map-gl/mapbox';
import 'mapbox-gl/dist/mapbox-gl.css';
const parkLayer: FillLayer = {
id: 'landuse_park',
type: 'fill',
source: 'mapbox',
'source-layer': 'landuse',
filter: ['==', 'class', 'park'],
paint: {
'fill-color': '#4E3FC8'
}
};
function App() {
return <Map
mapboxAccessToken="<Mapbox access token>"
initialViewState={{
longitude: -122.4,
latitude: 37.8,
zoom: 14
}}
mapStyle="mapbox://styles/mapbox/streets-v9"
>
<Layer {...parkLayer} />
</Map>;
}
```
## Properties
The props provided to this component should be conforming to the [Mapbox layer specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers).
When props change *shallowly*, the component will perform style diffing to update the layer. Avoid defining constant objects/arrays inline may help performance.
### Identity Properties
Once a `<Layer>` is mounted, the following props should not change. If you add/remove multiple JSX layers dynamically, make sure you use React's [key prop](https://reactjs.org/docs/lists-and-keys.html#keys) to give each element a stable identity.
#### `id`: string {#id}
Unique identifier of the layer. If not provided, a default id will be assigned.
#### `type`: string {#type}
Required. Type of the layer.
### Options
#### `beforeId`: string {#beforeid}
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.
Note that layers are added by the order that they mount. They are *NOT* reordered later if their relative positions in the JSX tree change. If dynamic reordering is desired, you should manipulate `beforeId` for consistent behavior.
#### `source`: string {#source}
`source` is required by some layer types in the Mapbox style specification. If `<Layer>` is used as the immediate child of a [Source](./source.md) component, this prop will be overwritten by the id of the parent source. If the `<Layer/>` component is not an immediate descendant of `<Source/>`, e.g wrapped inside a helper component, source property needs to be provided same as the id of the `<Source/>` component for the `<Layer/>` component to show.
## Source
[layer.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-mapbox/src/components/layer.ts)
================================================
FILE: docs/api-reference/mapbox/map-provider.md
================================================
# MapProvider
A [Context.Provider](https://reactjs.org/docs/context.html#contextprovider) that facilitates map operations outside of the component that directly renders a [Map](./map.md).
The component should wrap all nodes in which you may want to access the maps:
```tsx
import {MapProvider} from 'react-map-gl/mapbox';
function Root() {
return (
<MapProvider>
{
// Application tree, somewhere one or more <Map /> component(s) are rendered
}
</MapProvider>
);
}
```
See [useMap](./use-map.md) for more information.
## Source
[use-map.tsx](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-mapbox/src/components/use-map.tsx)
================================================
FILE: docs/api-reference/mapbox/map.md
================================================
# default (Map)
React component that wraps mapbox-gl's [Map](https://docs.mapbox.com/mapbox-gl-js/api/map/) class. This is also the default export from react-map-gl.
```tsx title="app.tsx"
import * as React from 'react';
import Map from 'react-map-gl/mapbox';
import 'mapbox-gl/dist/mapbox-gl.css';
function App() {
return (
<Map
mapboxAccessToken="<Mapbox access token>"
initialViewState={{
longitude: -122.4,
latitude: 37.8,
zoom: 14
}}
style={{width: 600, height: 400}}
mapStyle="mapbox://styles/mapbox/streets-v9"
/>
);
}
```
## Properties
Aside from the props listed below, the `Map` component supports all parameters of the `Map` class constructor ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/map/) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/)). Beware that this is not an exhaustive list of all props. Different base map libraries may offer different options and default values. When in doubt, refer to your base map library's documentation.
### Layout options
#### `id`: string {#id}
Map container id.
Required when [`MapProvider`](./map-provider.md)s are used. Used to reference the map with [`useMap`](./use-map.md).
Make sure to pick a name that has no conflict with other imports (there are no checks or errors in this case).
#### `style`: CSSProperties {#style}
Default: `{position: 'relative', width: '100%', height: '100%'}`
Map container CSS.
#### `cursor`: string {#cursor}
Default: `'auto'`
The current cursor [type](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor).
### Styling options
#### `fog`: [Fog](./types.md#fog) {#fog}
The fog property of the style. Must conform to the [Fog Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/fog/).
If `undefined` is provided, removes the fog from the map.
#### `light`: [Light](./types.md#light) {#light}
Light properties of the style. Must conform to the [Light Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#light).
#### `mapStyle`: [MapStyle](./types.md#mapstyle) | string | Immutable {#mapstyle}
Default: (empty style)
The map's Mapbox style. This must be an a JSON object conforming to the schema described in the [Mapbox Style Specification](https://mapbox.com/mapbox-gl-style-spec/), or a URL to such JSON.
#### `projection`: string | [Projection](./types.md#projection) {#projection}
Default: `'mercator'`
The projection the map should be rendered in. Available projections are Albers (`'albers'`), Equal Earth (`'equalEarth'`), Equirectangular/Plate Carrée/WGS84 (`'equirectangular'`), Lambert (`'lambertConformalConic'`), Mercator (`'mercator'`), Natural Earth (`'naturalEarth'`), and Winkel Tripel (`'winkelTripel'`). Conic projections such as Albers and Lambert have configurable `center` and `parallels` properties that allow developers to define the region in which the projection has minimal distortion; see [example](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setprojection).
#### `renderWorldCopies`: boolean {#renderworldcopies}
Default: `true`
If `true`, multiple copies of the world will be rendered, when zoomed out.
#### `styleDiffing`: boolean {#stylediffing}
Default: `true`
Enable diffing when `mapStyle` changes. If `false`, force a 'full' update, removing the current style and building the given one instead of attempting a diff-based update.
#### `terrain`: [Terrain](./types.md#terrain) {#terrain}
Terrain property of the style. Must conform to the [Terrain Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/terrain/).
If `undefined` is provided, removes terrain from the map.
### Camera options
#### `initialViewState`: object {#initialviewstate}
The initial view state of the map. If specified, `longitude`, `latitude`, `zoom` etc. in props are ignored when constructing the map. Only specify `initialViewState` if `Map` is being used as an **uncontrolled component**. See [state management](../../get-started/state-management.md) for examples.
- `bounds`: [LngLatBoundsLike](./types.md#lnglatboundslike) - The initial bounds of the map. If specified, it overrides the `longitude`, `latitude` and `zoom` options. Default `null`.
- `fitBoundsOptions` - An object to use only when setting the `bounds` option. Default `null`.
+ `fitBoundsOptions.offset`: [PointLike](./types.md#pointlike)
+ `fitBoundsOptions.minZoom`: number
+ `fitBoundsOptions.maxZoom`: number
+ `fitBoundsOptions.padding`: [PaddingOptions](./types.md#paddingoptions)
- `longitude`: number - The initial longitude of the map center. Default `0`.
- `latitude`: number - The initial latitude of the map center. Default `0`.
- `zoom`: number - The initial zoom level. Default `0`.
- `pitch`: number - The initial pitch (tilt) of the map. Default `0`.
- `bearing`: number - The initial bearing (rotation) of the map. Default `0`.
#### `longitude`: number {#longitude}
The longitude of the map center.
#### `latitude`: number {#latitude}
The latitude of the map center.
#### `zoom`: number {#zoom}
The [zoom level](https://docs.mapbox.com/help/glossary/camera/#zoom-level) of the map.
#### `pitch`: number {#pitch}
The initial [pitch](https://docs.mapbox.com/help/glossary/camera/#pitch) (tilt) of the map, measured in degrees away from the plane of the screen (0-85).
#### `bearing`: number {#bearing}
The initial [bearing](https://docs.mapbox.com/help/glossary/camera/#bearing) (rotation) of the map, measured in degrees counter-clockwise from north.
#### `padding`: [PaddingOptions](./types.md#paddingoptions) {#padding}
Default: `null`
The padding in pixels around the viewport.
#### `minZoom`: number {#minzoom}
Default: `0`
The minimum zoom level of the map (0-24).
#### `maxZoom`: number {#maxzoom}
Default: `22`
The maximum zoom level of the map (0-24).
#### `minPitch`: number {#minpitch}
Default: `0`
The minimum pitch of the map (0-85).
#### `maxPitch`: number {#maxpitch}
Default: `60`
The maximum pitch of the map (0-85).
#### `maxBounds`: [LngLatBoundsLike](./types.md#lnglatboundslike) {#maxbounds}
Default: `null`
If set, the map is constrained to the given bounds.
### Input handler options
#### `boxZoom`: boolean {#boxzoom}
Default: `true`
If `true`, the "box zoom" interaction is enabled. See `BoxZoomHandler`
([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#boxzoomhandler) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/BoxZoomHandler/))
#### `doubleClickZoom`: boolean {#doubleclickzoom}
Default: `true`
If `true`, the "double click to zoom" interaction is enabled. See `DoubleClickZoomHandler` ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#doubleclickzoomhandler) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/DoubleClickZoomHandler/)).
#### `dragRotate`: boolean {#dragrotate}
Default: `true`
If `true`, the "drag to rotate" interaction is enabled. See `DragRotateHandler` ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragrotatehandler) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/DragRotateHandler/)).
#### `dragPan`: boolean | Object {#dragpan}
Default: `true`
If `true`, the "drag to pan" interaction is enabled. Optionally accept an object value that is the options to `DragPanHandler.enable` ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#dragpanhandler#enable) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/DragPanHandler/#enable)).
#### `keyboard`: boolean {#keyboard}
Default: `true`
If `true`, keyboard shortcuts are enabled. See `KeyboardHandler` ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#keyboardhandler) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/KeyboardHandler/)).
#### `scrollZoom`: boolean | Object {#scrollzoom}
Default: `true`
If `true`, the "scroll to zoom" interaction is enabled. Optionally accept an object value that is the options to `ScrollZoomHandler.enable` ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#scrollzoomhandler#enable) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/ScrollZoomHandler/#enable))
#### `touchPitch`: boolean | Object {#touchpitch}
Default: `true`
If `true`, the "drag to pitch" interaction is enabled. Optionally accept an object value that is the options to `TouchPitchHandler.enable`([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#touchpitchhandler) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/TwoFingersTouchPitchHandler/#enable)).
#### `touchZoomRotate`: boolean | Object {#touchzoomrotate}
Default: `true`
If `true`, the "pinch to rotate and zoom" interaction is enabled. Optionally accept an object value that is the options to `TouchZoomRotateHandler.enable` ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/handlers/#touchzoomrotatehandler#enable) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/TwoFingersTouchZoomRotateHandler/#enable)).
#### `interactiveLayerIds`: string[] {#interactivelayerids}
Default: `null`
The id(s) of style layer(s).
If specified, pointer event (`mousemove`, `click` etc.) listeners will be triggered only if its location is within a visible feature in these layers, and the event will have a `features` property containing an array of the matching features.
If not specified, pointer event listeners will be triggered by a corresponding event happening anywhere on the map, and the event will not have a `features` property.
See the [Callbacks](#callbacks) section for affected events.
### Callbacks
#### `onResize`: (event: [MapEvent](./types.md#mapevent)) => void {#onresize}
Called when the map has been resized.
#### `onLoad`: (event: [MapEvent](./types.md#mapevent)) => void {#onload}
Called after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred.
#### `onRender`: (event: [MapEvent](./types.md#mapevent))) => void {#onrender}
Called whenever the map is drawn to the screen.
#### `onIdle`: (event: [MapEvent](./types.md#mapevent))) => void {#onidle}
Called after the last frame rendered before the map enters an "idle" state:
- No camera transitions are in progress
- All currently requested tiles have loaded
- All fade/transition animations have completed
#### `onRemove`: (event: [MapEvent](./types.md#mapevent))) => void {#onremove}
Called when the map has been removed.
#### `onError`: (event: [ErrorEvent](./types.md#errorevent)) => void {#onerror}
Default: `evt => console.error(evt.error)`
Called when an error occurs.
#### `onMouseDown`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmousedown}
Called when a pointing device (usually a mouse) is pressed within the map.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layers.
#### `onMouseUp`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseup}
Called when a pointing device (usually a mouse) is released within the map.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layers.
#### `onMouseOver`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseover}
Called when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements.
#### `onMouseEnter`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseenter}
Called when a pointing device (usually a mouse) enters a visible portion of the layer(s) specified by `interactiveLayerIds` from outside that layer or outside the map canvas.
#### `onMouseMove`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmousemove}
Called when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layers.
#### `onMouseLeave`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseleave}
Called when a pointing device (usually a mouse) leaves a visible portion of the layer(s) specified by `interactiveLayerIds` or moves from the layer to outside the map canvas.
#### `onMouseOut`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseout}
Called when a point device (usually a mouse) leaves the map's canvas.
#### `onClick`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onclick}
Called when a pointing device (usually a mouse) is pressed and released at the same point on the map.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layers.
#### `onDblClick`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#ondblclick}
Called when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layers.
#### `onContextMenu`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#oncontextmenu}
Called when the right button of the mouse is clicked or the context menu key is pressed within the map.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layers.
#### `onWheel`: (event: [MapWheelEvent](./types.md#mapwheelevent)) => void {#onwheel}
Called when a wheel event occurs within the map.
#### `onTouchStart`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchstart}
Called when a `touchstart` event occurs within the map.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layers.
#### `onTouchEnd`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchend}
Called when a `touchend` event occurs within the map.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layers.
#### `onTouchMove`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchmove}
Called when a `touchmove` event occurs within the map.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layers.
#### `onTouchCancel`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchcancel}
Called when a `touchcancel` event occurs within the map.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layers.
#### `onMoveStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onmovestart}
Called just before the map begins a transition from one view to another.
#### `onMove`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onmove}
Called repeatedly during an animated transition from one view to another.
When `Map` is used as a controlled component, `event.viewState` reflects the view state that the camera "proposes" to move to, as a result of either user interaction or methods such as [flyTo](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto). The camera does not actually change until the application updates the view state props (`longitude`, `latitude`, `zoom` etc.).
See [state management](../../get-started/state-management.md) for examples.
#### `onMoveEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onmoveend}
Called just after the map completes a transition from one view to another.
#### `onDragStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#ondragstart}
Called when a "drag to pan" interaction starts.
#### `onDrag`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#ondrag}
Called repeatedly during a "drag to pan" interaction.
#### `onDragEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#ondragend}
Called when a "drag to pan" interaction ends.
#### `onZoomStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onzoomstart}
Called just before the map begins a transition from one zoom level to another.
#### `onZoom`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onzoom}
Called repeatedly during an animated transition from one zoom level to another.
When `Map` is used as a controlled component, `event.viewState.zoom` reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as [flyTo](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto). The camera does not actually change until the application updates the `zoom` prop.
#### `onZoomEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onzoomend}
Called just after the map completes a transition from one zoom level to another.
#### `onRotateStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onrotatestart}
Called just before the map begins a transition from one bearing (rotation) to another.
#### `onRotate`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onrotate}
Called repeatedly during an animated transition from one bearing (rotation) to another.
When `Map` is used as a controlled component, `event.viewState.bearing` reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as [flyTo](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto). The camera does not actually change until the application updates the `bearing` prop.
#### `onRotateEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onrotateend}
Called just after the map completes a transition from one bearing (rotation) to another.
#### `onPitchStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onpitchstart}
Called just before the map begins a transition from one pitch (tilt) to another.
#### `onPitch`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onpitch}
Called repeatedly during an animated transition from one pitch (tilt) to another.
When `Map` is used as a controlled component, `event.viewState.pitch` reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as [flyTo](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#flyto). The camera does not actually change until the application updates the `pitch` prop.
#### `onPitchEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onpitchend}
Called just after the map completes a transition from one pitch (tilt) to another.
#### `onBoxZoomStart`: (event: [MapBoxZoomEvent](./types.md#mapboxzoomevent)) => void {#onboxzoomstart}
Called when a "box zoom" interaction starts.
#### `onBoxZoomEnd`: (event: [MapBoxZoomEvent](./types.md#mapboxzoomevent)) => void {#onboxzoomend}
Called when a "box zoom" interaction ends.
#### `onBoxZoomCancel`: (event:[MapBoxZoomEvent](./types.md#mapboxzoomevent)) => void {#onboxzoomcancel}
Called when the user cancels a "box zoom" interaction, or when the bounding box does not meet the minimum size threshold.
#### `onData`: (event: [MapStyleDataEvent](./types.md#mapstyledataevent) | [MapSourceDataEvent](./types.md#mapsourcedataevent)) => void {#ondata}
Called when any map data loads or changes. See [MapDataEvent](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent) for more information.
#### `onStyleData`: (event: [MapStyleDataEvent](./types.md#mapstyledataevent)) => void {#onstyledata}
Called when the map's style loads or changes. See [MapDataEvent](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent) for more information.
#### `onSourceData`: (event: [MapSourceDataEvent](./types.md#mapsourcedataevent)) => void {#onsourcedata}
Called when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes. See [MapDataEvent](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent) for more information.
### Other options
The following props, along with any options of the `Map` class ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/map/) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/)) not listed above, can be specified to construct the underlying `Map` instance.
Note: props in this section are not reactive. They are only used once when the Map instance is constructed.
#### `mapLib`: any {#maplib}
Default:
- `import('mapbox-gl')` if imported from `react-map-gl`
- `import('maplibre-gl')` if imported from `react-map-gl/maplibre`
Specify the underlying base map library for the Map component. The value can be provided with several options:
By module import (and embedding in the final bundle):
```tsx
import * as React from 'react';
import Map from 'react-map-gl/mapbox';
import mapboxgl from 'mapbox-gl';
function App() {
return <Map mapLib={mapboxgl} />;
}
```
By dynamic import (thus enable bundle splitting):
```tsx
import * as React from 'react';
import Map from 'react-map-gl/mapbox';
function App() {
return <Map mapLib={import('mapbox-gl')} />;
}
```
Or to load a pre-bundled version of the library:
```html title="index.html"
<script src="https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js"></script>
```
```tsx title="app.tsx"
import * as React from 'react';
import Map from 'react-map-gl/mapbox';
function App() {
return <Map mapLib={window.mapboxgl} />;
}
```
#### `mapboxAccessToken`: string {#mapboxaccesstoken}
Token used to access the Mapbox data service. See [about map tokens](../../get-started/mapbox-tokens.md).
#### `baseApiUrl`: string {#baseapiurl}
The map's default API URL for requesting tiles, styles, sprites, and glyphs.
#### `maxParallelImageRequests`: number {#maxparallelimagerequests}
Default: `16`
The maximum number of images (raster tiles, sprites, icons) to load in parallel.
#### `reuseMaps`: boolean {#reusemaps}
Default: `false`
By default, every time a map component is unmounted, all internal resources associated with the underlying `Map` instance are released. If the map gets mounted again, a new `Map` instance is constructed.
If `reuseMaps` is set to `true`, when a map component is unmounted, the underlying `Map` instance is retained in memory. The next time a map component gets mounted, the saved instance is reused. This behavior may be desirable if an application frequently mounts/unmounts map(s), for example in a tabbed or collapsable UI, and wants to avoid Mapbox's [billable events](https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0) triggered by initialization.
Note that since some map options cannot be modified after initialization, when reusing maps, only the reactive props and `initialViewState` of the new component are respected.
#### `RTLTextPlugin`: string | false {#rtltextplugin}
Default: `'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js'`
Sets the map's [RTL text plugin](https://www.mapbox.com/mapbox-gl-js/plugins/#mapbox-gl-rtl-text). Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left.
Setting this prop is the equivalent of calling [mapboxgl.setRTLTextPlugin](https://docs.mapbox.com/mapbox-gl-js/api/properties/#setrtltextplugin) with `lazy: true`. Set to `false` to disable loading the RTL text plugin.
#### `workerClass`: object {#workerclass}
Default: `null`
Provides an interface for external module bundlers such as Webpack or Rollup to package mapbox-gl's WebWorker into a separate class and integrate it with the library.
Takes precedence over `workerUrl`.
#### `workerCount`: number {#workercount}
Default: `2`
The number of web workers instantiated on a page with mapbox-gl maps.
#### `workerUrl`: string {#workerurl}
Provides an interface for loading mapbox-gl's WebWorker bundle from a self-hosted URL. This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior.
## Methods
Imperative methods are accessible via a [React ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) or the [useMap](./use-map.md) hook.
```tsx
import * as React from 'react';
import {useRef, useCallback} from 'react';
import Map from 'react-map-gl/mapbox';
import type {MapRef} from 'react-map-gl/mapbox';
function App() {
const mapRef = useRef<MapRef>(null);
const onMapLoad = useCallback(() => {
mapRef.current.on('move', () => {
// do something
});
}, []);
return <Map ref={mapRef} onLoad={onMapLoad} ... />;
}
```
The [MapRef](./types.md#mapref) object exposes Map methods ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-instance-members) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#methods)) that **are safe to call without breaking the React bindings**. For example, `setStyle()` is hidden from the ref object, because the style is supposed to be changed by updating the `mapStyle` prop. Calling the method directly may cause the the React prop to mismatch with the underlying state, and lead to unexpected behaviors.
You can still access the hidden members via `getMap()`:
#### `getMap()` {#getmap}
Returns the native `Map` ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/map/) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/)) instance associated with this component.
## Source
[map.tsx](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-mapbox/src/components/map.tsx)
================================================
FILE: docs/api-reference/mapbox/marker.md
================================================
# Marker
React component that wraps mapbox-gl's [Marker](https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker) class.
```tsx
import * as React from 'react';
import Map, {Marker} from 'react-map-gl/mapbox';
import 'mapbox-gl/dist/mapbox-gl.css';
function App() {
return <Map
mapboxAccessToken="<Mapbox access token>"
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
mapStyle="mapbox://styles/mapbox/streets-v9"
>
<Marker longitude={-100} latitude={40} anchor="bottom" >
<img src="./pin.png" />
</Marker>
</Map>;
}
```
If `Marker` is mounted with child components, then its content will be rendered to the specified location. If it is mounted with no content, then a default marker will be used.
## Properties
### Reactive Properties
#### `draggable`: boolean {#draggable}
Default: `false`
If `true`, the marker is able to be dragged to a new position on the map.
#### `latitude`: number {#latitude}
Required. The latitude of the anchor location.
#### `longitude`: number {#longitude}
Required. The longitude of the anchor location.
#### `offset`: [PointLike](./types.md#pointlike) {#offset}
Default: `null`
The offset in pixels as a [PointLike](https://docs.mapbox.com/mapbox-gl-js/api/geography/#pointlike) object to apply relative to the element's center. Negatives indicate left and up.
#### `pitchAlignment`: 'map' | 'viewport' | 'auto' {#pitchalignment}
Default: `'auto'`
- `map` aligns the `Marker` to the plane of the map.
- `viewport` aligns the `Marker` to the plane of the viewport.
- `auto` automatically matches the value of `rotationAlignment`.
#### `popup`: Popup | null {#popup}
An instance of the `Popup` class ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/classes/Popup/)) to attach to this marker. If undefined or null, any popup set on this Marker instance is unset.
#### `rotation`: number {#rotation}
Default: `0`
The rotation angle of the marker in degrees, relative to its `rotationAlignment` setting. A positive value will rotate the marker clockwise.
#### `rotationAlignment`: 'map' | 'viewport' | 'auto' {#rotationalignment}
Default: `'auto'`
- `map` aligns the `Marker`'s rotation relative to the map, maintaining a bearing as the map rotates.
- `viewport` aligns the `Marker`'s rotation relative to the viewport, agnostic to map rotations.
- `auto` is equivalent to `viewport`.
#### `style`: CSSProperties {#style}
CSS style override that applies to the marker's container.
### Callbacks
#### `onClick`: (evt: [MapEvent](./types.md#mapevent)) => void {#onclick}
Called when the marker is clicked on.
#### `onDragStart`: (evt: [MarkerDragEvent](./types.md#markerdragevent)) => void {#ondragstart}
Called when dragging starts, if `draggable` is `true`.
#### `onDrag`: (evt: [MarkerDragEvent](./types.md#markerdragevent)) => void {#ondrag}
Called while dragging, if `draggable` is `true`.
#### `onDragEnd`: (evt: [MarkerDragEvent](./types.md#markerdragevent)) => void {#ondragend}
Called when dragging ends, if `draggable` is `true`.
### Other Properties
The properties in this section are not reactive. They are only used when the component first mounts.
Any options supported by the `Marker` class ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MarkerOptions/)), such as
- `anchor`
- `color`
- `scale`
- `clickTolerance`
## Methods
The underlying native `Marker` instance is accessible via a [React ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) hook.
You may use it to call any imperative methods:
```tsx
import * as React from 'react';
import {useRef, useMemo, useCallback} from 'react';
import Map, {Marker} from 'react-map-gl/mapbox';
import mapboxgl from 'mapbox-gl';
function App() {
const markerRef = useRef<mapboxgl.Marker>();
const popup = useMemo(() => {
return mapboxgl.Popup().setText('Hello world!');
}, [])
const togglePopup = useCallback(() => {
markerRef.current?.togglePopup();
}, []);
return <>
<Map>
<Marker longitude={-122.4} latitude={37.8} color="red" popup={popup} ref={markerRef} />
</Map>
<button onClick={togglePopup}>Toggle popup</button>
</>;
}
```
## Source
[marker.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-mapbox/src/components/marker.ts)
================================================
FILE: docs/api-reference/mapbox/navigation-control.md
================================================
# NavigationControl
React component that wraps mapbox-gl's [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#navigationcontrol) class.
```tsx
import * as React from 'react';
import Map, {NavigationControl} from 'react-map-gl/mapbox';
import 'mapbox-gl/dist/mapbox-gl.css';
function App() {
return <Map
mapboxAccessToken="<Mapbox access token>"
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
mapStyle="mapbox://styles/mapbox/streets-v9"
>
<NavigationControl />
</Map>;
}
```
## Properties
### Reactive Properties
#### `style`: CSSProperties {#style}
CSS style override that applies to the control's container.
### Other Properties
The properties in this section are not reactive. They are only used when the component first mounts.
Any options supported by the `NavigationControl` class ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/markers/#navigationcontrol) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/NavigationControlOptions/)), such as
- `showCompass`
- `showZoom`
- `visualizePitch`
Plus the following:
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
Default: `'top-right'`
Placement of the control relative to the map.
## Source
[navigation-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-mapbox/src/components/navigation-control.ts)
================================================
FILE: docs/api-reference/mapbox/popup.md
================================================
# Popup
React component that wraps mapbox-gl's [Popup](https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup) class.
```tsx
import * as React from 'react';
import {useState} from 'react';
import Map, {Popup} from 'react-map-gl/mapbox';
import 'mapbox-gl/dist/mapbox-gl.css';
function App() {
const [showPopup, setShowPopup] = useState<boolean>(true);
return <Map
mapboxAccessToken="<Mapbox access token>"
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
mapStyle="mapbox://styles/mapbox/streets-v9"
>
{showPopup && (
<Popup longitude={-100} latitude={40}
anchor="bottom"
onClose={() => setShowPopup(false)}>
You are here
</Popup>)}
</Map>;
}
```
## Properties
### Reactive Properties
#### `anchor`: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined {#anchor}
A string indicating the part of the popup that should be positioned closest to the coordinate, set via `longitude` and `latitude`.
If unset, the anchor will be dynamically set to ensure the popup falls within the map container with a preference for `'bottom'`.
#### `className`: string {#classname}
Space-separated CSS class names to add to popup container.
#### `offset`: number | [PointLike](./types.md#pointlike) | Record\<string, [PointLike](./types.md#pointlike)\> {#offset}
Default: `null`
A pixel offset applied to the popup's location specified as:
- a single number specifying a distance from the popup's location
- a PointLike specifying a constant offset
- an object of Points specifing an offset for each anchor position.
Negative offsets indicate left and up.
#### `maxWidth`: string {#maxwidth}
Default: `240px`
A string that sets the CSS property of the popup's maximum width.
#### `style`: CSSProperties {#style}
CSS style override that applies to the popup's container.
### Callbacks
#### `onOpen`: (evt: [PopupEvent](./types.md#popupevent)) => void {#onopen}
Called when the popup is opened.
#### `onClose`: (evt: [PopupEvent](./types.md#popupevent)) => void {#onclose}
Called when the popup is closed by the user clicking on the close button or outside (if `closeOnClick: true`).
### Other Properties
The properties in this section are not reactive. They are only used when the component first mounts.
Any options supported by the `Popup` class ([Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup) | [Maplibre](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/PopupOptions/)), such as
- `closeButton`
- `closeOnClick`
- `closeOnMove`
- `focusAfterOpen`
## Methods
The underlying native `Popup` instance is accessible via a [React ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) hook.
You may use it to call any imperative methods:
```tsx
import * as React from 'react';
import {useRef, useEffect} from 'react';
import Map, {Popup} from 'react-map-gl/mapbox';
import mapboxgl from 'mapbox-gl';
function App() {
const popupRef = useRef<mapboxgl.Popup>();
useEffect(() => {
popupRef.current?.trackPointer();
}, [popupRef.current])
return <Map>
<Popup longitude={-122.4} latitude={37.8} ref={popupRef} >
Tooltip
</Popup>
</Map>;
}
```
## Source
[popup.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-mapbox/src/components/popup.ts)
================================================
FILE: docs/api-reference/mapbox/scale-control.md
================================================
# ScaleControl
React component that wraps mapbox-gl's [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#scalecontrol) class.
```tsx
import * as React from 'react';
import Map, {ScaleControl} from 'react-map-gl/mapbox';
import 'mapbox-gl/dist/mapbox-gl.css';
function App() {
return <Map
mapboxAccessToken="<Mapbox access token>"
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
mapStyle="mapbox://styles/mapbox/streets-v9"
>
<ScaleControl />
</Map>;
}
```
## Properties
### Reactive Properties
#### `maxWidth`: string {#maxwidth}
Default: `100`
The maximum length of the scale control in pixels.
#### `style`: CSSProperties {#style}
CSS style override that applies to the control's container.
#### `unit`: 'imperial' | 'metric' | 'nautical' {#unit}
Default: `'metric'`
Unit of the distance.
### Other Properties
The properties in this section are not reactive. They are only used when the component first mounts.
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
Default: `'top-right'`
Placement of the control relative to the map.
## Source
[scale-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-mapbox/src/components/scale-control.ts)
================================================
FILE: docs/api-reference/mapbox/source.md
================================================
# Source
This component allows apps to create a [map source](https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources) using React. It may contain [Layer](./layer.md) components as children.
```tsx
import * as React from 'react';
import Map, {Source, Layer} from 'react-map-gl/mapbox';
import type {CircleLayer} from 'react-map-gl/mapbox';
import type {FeatureCollection} from 'geojson';
import 'mapbox-gl/dist/mapbox-gl.css';
const geojson: FeatureCollection = {
type: 'FeatureCollection',
features: [
{type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}}
]
};
const layerStyle: CircleLayer = {
id: 'point',
type: 'circle',
paint: {
'circle-radius': 10,
'circle-color': '#007cbf'
}
};
function App() {
return <Map
mapLib={import('mapbox-gl')}
initialViewState={{
longitude: -122.4,
latitude: 37.8,
zoom: 14
}}
mapStyle="mapbox://styles/mapbox/streets-v9"
>
<Source id="my-data" type="geojson" data={geojson}>
<Layer {...layerStyle} />
</Source>
</Map>;
}
```
## Properties
The props provided to this component should be conforming to the [Mapbox source specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources) or [CanvasSourceOptions](https://docs.mapbox.com/mapbox-gl-js/api/#canvassourceoptions).
When props change _shallowly_, the component will attempt to update the source. Do not define objects/arrays inline to avoid perf hit.
Once a `<Source>` is mounted, the following props should not change. If add/remove multiple JSX sources dynamically, make sure you use React's [key prop](https://reactjs.org/docs/lists-and-keys.html#keys) to give each element a stable identity.
#### `id`: string {#id}
Unique identifier of the source. If not provided, a default id will be assigned.
#### `type`: string {#type}
Required. Type of the source.
## Source
[source.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-mapbox/src/components/source.ts)
================================================
FILE: docs/api-reference/mapbox/types.md
================================================
# Types
The following types can be imported from `react-map-gl/mapbox` when using TypeScript.
## Components
#### IControl
A [custom control implementation](https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol).
#### CustomLayerInterface
A [custom layer implementation](https://docs.mapbox.com/mapbox-gl-js/api/#customlayerinterface).
#### MapRef
Instance [ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) of a `Map` component. See [Map documentation](./map.md#methods) for details.
## Styling
#### StyleSpecification
An object conforming to the [Mapbox Style Specification](https://mapbox.com/mapbox-gl-style-spec/).
#### FogSpecification
An object conforming to the [Fog Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/fog/).
#### LightSpecification
An object conforming to the [Light Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#light).
#### TerrainSpecification
An object conforming to the [Terrain Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/terrain/).
#### ProjectionSpecification
An object conforming to the [Projection Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/projection/).
#### BackgroundLayerSpecification
A JSON object that defines a `background` layer according to the [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#background).
#### CircleLayerSpecification
A JSON object that defines a `circle` layer according to the [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#circle).
#### FillExtrusionLayerSpecification
A JSON object that defines a `fill-extrusion` layer according to the [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill-extrusion).
#### FillLayerSpecification
A JSON object that defines a `fill` layer according to the [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill).
#### HeatmapLayerSpecification
A JSON object that defines a `heatmap` layer according to the [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#heatmap).
#### HillshadeLayerSpecification
A JSON object that defines a `hillshade` layer according to the [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#hillshade).
#### LineLayerSpecification
A JSON object that defines a `line` layer according to the [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#line).
#### RasterLayerSpecification
A JSON object that defines a `raster` layer according to the [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#raster).
#### SymbolLayerSpecification
A JSON object that defines a `symbol` layer according to the [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol).
#### SkyLayerSpecification
A JSON object that defines a `sky` layer according to the [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#sky).
#### GeoJSONSourceSpecification
A JSON object that defines a `geojson` source according to the [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#geojson).
#### VideoSourceSpecification
A JSON object that defines a `video` source according to the [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#video).
#### ImageSourceSpecification
A JSON object that defines a `image` source according to the [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#image).
#### VectorSourceSpecification
A JSON object that defines a `vector` source according to the [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#vector).
#### RasterSourceSpecification
A JSON object that defines a `raster` source according to the [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#raster).
#### RasterDEMSourceSpecification
A JSON object that defines a `raster-dem` source according to the [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#raster-dem).
#### CanvasSourceSpecification
A JSON object that defines a `canvas` source type. See [CanvasSourceOptions](https://docs.mapbox.com/mapbox-gl-js/api/sources/#canvassourceoptions).
## Configurations
#### ControlPosition
One of `'top-right'`, `'top-left'`, `'bottom-right'` and `'bottom-left'`.
#### PaddingOptions
An object with the following fields:
- `left`: number - in pixels.
- `top`: number - in pixels.
- `right`: number - in pixels.
- `bottom`: number - in pixels.
## Data Types
#### LngLat
A Mapbox [LngLat](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglat) object.
#### LngLatLike
A Mapbox [LngLatLike](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatlike) object.
#### LngLatBounds
A Mapbox [LngLatBounds](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatbounds) object.
#### LngLatBoundsLike
A Mapbox [LngLatBoundsLike](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatboundslike) object.
#### Point
A Mapbox [Point](https://docs.mapbox.com/mapbox-gl-js/api/geography/#point) object.
#### PointLike
A Mapbox [PointLike](https://docs.mapbox.com/mapbox-gl-js/api/geography/#pointlike) object.
#### MapGeoJSONFeature
A [GeoJSON](http://geojson.org/) feature that also contains the following library-specific fields:
- `layer`: Layer
- `source`: string
- `sourceLayer`: string
- `state`: `{ [key: string]: any }`
#### ViewState
An object with the following fields:
- `longitude`: number - The longitude of the map center.
- `latitude`: number - The latitude of the map center.
- `zoom`: number - The zoom level.
- `pitch`: number - The pitch (tilt) of the map, in degrees.
- `bearing`: number - The bearing (rotation) of the map, in degrees.
- `elevation`: number|undefined - The map center elevation from sea leavel on terrain surface, if any
## Events
#### MapEvent
An object with the following fields:
- `type`: string - Event type
- `target`: [Map](https://docs.mapbox.com/mapbox-gl-js/api/map/)
- `originalEvent?`: [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event)
#### MapLayerMouseEvent
An object with the following fields:
- `type`: string
- `target`: [Map](https://docs.mapbox.com/mapbox-gl-js/api/map/)
- `originalEvent?`: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
- `point`: [Point](#point)
- `lngLat`: [LngLat](#lnglat)
- `preventDefault`: () => void
- `defaultPrevented`: boolean
- `features?`: [MapGeoJSONFeature](#mapgeojsonfeature)[]
#### MapWheelEvent
An object with the following fields:
- `type`: string
- `target`: [Map](https://docs.mapbox.com/mapbox-gl-js/api/map/)
- `originalEvent?`: [WheelEvent](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent)
- `preventDefault`: () => void
- `defaultPrevented`: boolean
#### MapLayerTouchEvent
An object with the following fields:
- `type`: string
- `target`: [Map](https://docs.mapbox.com/mapbox-gl-js/api/map/)
- `originalEvent?`: [TouchEvent](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent)
- `point`: [Point](#point)
- `lngLat`: [LngLat](#lnglat)
- `points`: [Point](#point)[]
- `lngLats`: [LngLat](#lnglat)[]
- `preventDefault`: () => void
- `defaultPrevented`: boolean
- `features?`: [MapGeoJSONFeature](#mapgeojsonfeature)[]
#### ViewStateChangeEvent
An object with the following fields:
- `type`: string - Event type
- `target`: [Map](https://docs.mapbox.com/mapbox-gl-js/api/map/)
- `viewState`: [ViewState](#viewstate) - the next view state that the camera wants to change to based on user input or transition.
#### MapBoxZoomEvent
An object with the following fields:
- `type`: string
- `target`: [Map](https://docs.mapbox.com/mapbox-gl-js/api/map/)
- `originalEvent?`: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
- `boxZoomBounds`: [LngLatBounds](#lnglatbounds)
#### MapStyleDataEvent
An object with the following fields:
- `type`: string
- `target`: [Map](https://docs.mapbox.com/mapbox-gl-js/api/map/)
- `dataType`: 'style'
#### MapSourceDataEvent
An object with the following fields:
- `type`: string
- `target`: [Map](https://docs.mapbox.com/mapbox-gl-js/api/map/)
- `dataType`: 'source'
- `isSourceLoaded`: boolean
- `source`: string
- `sourceId`: string
- `sourceDataType`: 'metadata' | 'content'
- `tile`: any
- `coord`: Coordinate
See [MapDataEvent](https://docs.mapbox.com/mapbox-gl-js/api/events/#mapdataevent).
#### ErrorEvent
An object with the following fields:
- `type`: 'error'
- `target`: [Map](https://docs.mapbox.com/mapbox-gl-js/api/map/)
- `error`: [Error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error)
#### GeolocateEvent
An object with the following fields:
- `type`: string
- `target`: [Map](https://docs.mapbox.com/mapbox-gl-js/api/map/)
- `target`: [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol)
#### GeolocateResultEvent
An object with the following fields:
- `type`: string
- `target`: [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol)
- `coords`: [GeolocationCoordinates](https://developer.mozilla.org/en-US/docs/Web/API/GeolocationCoordinates) - the current location.
- `timestamp`: number - the time at which the location was retrieved.
#### GeolocateErrorEvent
An object with the following fields:
- `type`: string
- `target`: [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol)
- `code`: PERMISSION_DENIED | POSITION_UNAVAILABLE | TIMEOUT - see [GeolocationPositionError](https://developer.mozilla.org/en-US/docs/Web/API/GeolocationPositionError)
- `message`: string - the details of the error. Specifications note that this is primarily intended for debugging use and not to be shown directly in a user interface.
#### MarkerEvent
An object with the following fields:
- `type`: string
- `target`: [Marker](https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker)
#### MarkerDragEvent
An object with the following fields:
- `type`: string
- `target`: [Marker](https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker)
- `lngLat`: [LngLat](#lnglat) - the new location of the marker
#### PopupEvent
An object with the following fields:
- `type`: string
- `target`: [Popup](https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup)
================================================
FILE: docs/api-reference/mapbox/use-control.md
================================================
# useControl
The `useControl` hook is used to create React wrappers for custom map controls.
```tsx
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import Map, {useControl} from 'react-map-gl/mapbox';
function DrawControl(props: DrawControlProps) {
useControl(() => new MapboxDraw(props), {
position: props.position
});
return null;
}
function App() {
return (
<Map
mapLib={import('mapbox-gl')}
initialViewState={{
longitude: -122.4,
latitude: 37.8,
zoom: 14
}}
mapStyle="mapbox://styles/mapbox/satellite-v9"
>
<DrawControl
position="top-left"
displayControlsDefault={false}
controls={{
polygon: true,
trash: true
}}
/>
</Map>
);
}
```
See a full example [here](/examples/mapbox/draw-polygon).
## Signature
```js
useControl<T extends IControl>(
onCreate: ({map: MapRef, mapLib: mapboxgl}) => IControl,
options?: {
position?: ControlPosition;
}
): T
useControl<T extends IControl>(
onCreate: ({map: MapRef, mapLib: mapboxgl}) => IControl,
onRemove: ({map: MapRef, mapLib: mapboxgl}) => void,
options?: {
position?: ControlPosition;
}
): T
useControl<T extends IControl>(
onCreate: ({map: MapRef, mapLib: mapboxgl}) => IControl,
onAdd: ({map: MapRef, mapLib: mapboxgl}) => void,
onRemove: ({map: MapRef, mapLib: mapboxgl}) => void,
options?: {
position?: ControlPosition;
}
): T
```
The hook creates an [IControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol) instance, adds it to the map when it's available, and removes it upon unmount.
Parameters:
- `onCreate`: (`{map: MapRef, mapLib: mapboxgl}`) => [IControl](./types.md#icontrol) - called to create an instance of the control.
- `onAdd`: (`{map: MapRef, mapLib: mapboxgl}`) => void - called when the control has been added to the map.
- `onRemove`: (`{map: MapRef, mapLib: mapboxgl}`) => void - called when the control is about to be removed from the map.
- `options`: object
+ `position`: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' - control position relative to the map
Returns:
[IControl](./types.md#icontrol) - the control instance from `onCreate`.
## Source
[use-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-mapbox/src/components/use-control.ts)
================================================
FILE: docs/api-reference/mapbox/use-map.md
================================================
# useMap
The `useMap` hook allows a component to reference the [Map](./map.md) that contains it.
When used with [MapProvider](./map-provider.md), this hook can also reference maps that are rendered outside of the current map component's direct render tree.
```tsx
import {Map, useMap} from 'react-map-gl/mapbox';
function Root() {
return (
<Map ... >
<NavigationButton />
</Map>
);
}
function NavigateButton() {
const {current: map} = useMap();
const onClick = () => {
map.flyTo({center: [-122.4, 37.8]});
};
return <button onClick={onClick}>Go</button>;
}
```
When used with the [MapProvider](./map-provider.md), this hook can also reference maps that are rendered outside of the current component's direct render tree as long as both trees are part of the current `<MapProvider>`.
```tsx
import {MapProvider, Map, useMap} from 'react-map-gl/mapbox';
function Root() {
// Note: `useMap` will not work in <Root>, only children of <MapProvider> can use `useMap`
return (
<MapProvider>
<Map id="myMapA" ... />
<Map id="myMapB" ... />
<NavigateButton />
</MapProvider>
);
}
function NavigateButton() {
const {myMapA, myMapB} = useMap();
const onClick = () => {
myMapA.flyTo({center: [-122.4, 37.8]});
myMapB.flyTo({center: [-74, 40.7]});
};
return <button onClick={onClick}>Go</button>;
}
```
See a full example [here](https://github.com/visgl/react-map-gl/tree/8.0-release/examples/get-started/hook).
## Signature
`useMap(): {current?: MapRef, [id: string]: MapRef}`
The hook returns an object that contains all mounted maps under the closest `MapProvider`. The keys are each map's [id](./map.md#id) and the values are the [MapRef](./types.md#mapref).
If the hook is used inside a decendent of a `Map` component, the returned object additionally contains a `current` field that references the containing map.
## Source
[use-map.tsx](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-mapbox/src/components/use-map.tsx)
================================================
FILE: docs/api-reference/maplibre/attribution-control.md
================================================
# AttributionControl
React component that wraps maplibre-gl's [AttributionControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/AttributionControl/) class.
```tsx
import * as React from 'react';
import {Map, AttributionControl} from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
function App() {
return <Map
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
mapStyle="https://demotiles.maplibre.org/style.json"
// disable the default attribution
attributionControl={false}
>
<AttributionControl customAttribution="Map design by me" />
</Map>;
}
```
## Properties
### Reactive Properties
#### `style`: CSSProperties {#style}
CSS style override that applies to the control's container.
### Other Properties
The properties in this section are not reactive. They are only used when the component first mounts.
Any [options](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/AttributionControlOptions/) supported by the `AttributionControl` class, such as
- `compact`
- `customAttribution`
Plus the following:
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
Default: `'bottom-right'`
Placement of the control relative to the map.
## Source
[attribution-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/attribution-control.ts)
================================================
FILE: docs/api-reference/maplibre/fullscreen-control.md
================================================
# FullscreenControl
React component that wraps maplibre-gl's [FullscreenControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/FullscreenControl/) class.
```tsx
import * as React from 'react';
import {Map, FullscreenControl} from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
function App() {
return <Map
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
mapStyle="https://demotiles.maplibre.org/style.json"
>
<FullscreenControl />
</Map>;
}
```
## Properties
### Reactive Properties
#### `style`: CSSProperties {#style}
CSS style override that applies to the control's container.
### Other Properties
The properties in this section are not reactive. They are only used when the component first mounts.
#### `containerId`: string {#containerid}
Id of the DOM element which should be made full screen. By default, the map container element will be made full screen.
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
Default: `'top-right'`
Placement of the control relative to the map.
## Source
[fullscreen-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/fullscreen-control.ts)
================================================
FILE: docs/api-reference/maplibre/geolocate-control.md
================================================
# GeolocateControl
React component that wraps maplibre-gl's [GeolocateControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/GeolocateControl/) class.
```tsx
import * as React from 'react';
import {Map, GeolocateControl} from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
function App() {
return <Map
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
mapStyle="https://demotiles.maplibre.org/style.json"
>
<GeolocateControl />
</Map>;
}
```
## Properties
### Reactive Properties
#### `style`: CSSProperties {#style}
CSS style override that applies to the control's container.
### Callbacks
#### `onGeolocate`: (evt: [GeolocateResultEvent](./types.md#geolocateresultevent)) => void {#ongeolocate}
Called on each Geolocation API position update that returned as success.
#### `onError`: (evt: [GeolocateErrorEvent](./types.md#geolocateerrorevent)) => void {#onerror}
Called on each Geolocation API position update that returned as an error.
#### `onOutOfMaxBounds`: (evt: [GeolocateResultEvent](./types.md#geolocateresultevent)) => void {#onoutofmaxbounds}
Called on each Geolocation API position update that returned as success but user position is out of map `maxBounds`.
#### `onTrackUserLocationStart`: (evt: [GeolocateEvent](./types.md#geolocateevent)) => void {#ontrackuserlocationstart}
Called when the GeolocateControl changes to the active lock state.
#### `onTrackUserLocationEnd`: (evt: [GeolocateEvent](./types.md#geolocateevent)) => void {#ontrackuserlocationend}
Called when the GeolocateControl changes to the background state.
### Other Properties
The properties in this section are not reactive. They are only used when the component first mounts.
Any [options](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/GeolocateControlOptions/) supported by the `GeolocateControl` class, such as
- `positionOptions`
- `fitBoundsOptions`
- `trackUserLocation`
- `showAccuracyCircle`
- `showUserLocation`
Plus the following:
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
Default: `'bottom-right'`
Placement of the control relative to the map.
## Methods
The underlying native `GeolocateControl` instance is accessible via a [React ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) hook.
You may use it to call any imperative methods:
```tsx
import * as React from 'react';
import {useRef, useEffect} from 'react';
import {Map, GeolocateControl} from 'react-map-gl/maplibre';
import type maplibregl from 'maplibre-gl';
function App() {
const geoControlRef = useRef<maplibregl.GeolocateControl>();
useEffect(() => {
// Activate as soon as the control is loaded
geoControlRef.current?.trigger();
}, [geoControlRef.current]);
return <Map>
<GeolocateControl ref={geoControlRef} />
</Map>;
}
```
## Source
[geolocate-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/geolocate-control.ts)
================================================
FILE: docs/api-reference/maplibre/globe-control.md
================================================
# GlobeControl
React component that wraps maplibre-gl's [GlobeControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/GlobeControl/) class.
```tsx
import * as React from 'react';
import {Map, GlobeControl} from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
function App() {
return <Map
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
mapStyle="https://demotiles.maplibre.org/style.json"
>
<GlobeControl />
</Map>;
}
```
## Properties
### Reactive Properties
#### `style`: CSSProperties {#style}
CSS style override that applies to the control's container.
### Other Properties
The properties in this section are not reactive. They are only used when the component first mounts.
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
Default: `'top-right'`
Placement of the control relative to the map.
## Source
[globe-control.ts](https://github.com/visgl/react-map-gl/tree/9.0-release/modules/react-maplibre/src/components/globe-control.ts)
================================================
FILE: docs/api-reference/maplibre/layer.md
================================================
# Layer
This component allows apps to create a [map layer](https://maplibre.org/maplibre-style-spec/layers/) using React.
```tsx
import * as React from 'react';
import {Map, Layer} from 'react-map-gl/maplibre';
import type {FillLayer} from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
const parkLayer: FillLayer = {
id: 'landuse_park',
type: 'fill',
source: 'vector',
'source-layer': 'landuse',
filter: ['==', 'class', 'park'],
paint: {
'fill-color': '#4E3FC8'
}
};
function App() {
return <Map
initialViewState={{
longitude: -122.4,
latitude: 37.8,
zoom: 14
}}
mapStyle="https://demotiles.maplibre.org/style.json"
>
<Layer {...parkLayer} />
</Map>;
}
```
## Properties
The props provided to this component should be conforming to the [Maplibre layer specification](https://maplibre.org/maplibre-style-spec/layers/).
When props change *shallowly*, the component will perform style diffing to update the layer. Avoid defining constant objects/arrays inline may help performance.
### Identity Properties
Once a `<Layer>` is mounted, the following props should not change. If you add/remove multiple JSX layers dynamically, make sure you use React's [key prop](https://reactjs.org/docs/lists-and-keys.html#keys) to give each element a stable identity.
#### `id`: string {#id}
Unique identifier of the layer. If not provided, a default id will be assigned.
#### `type`: string {#type}
Required. Type of the layer.
### Options
#### `beforeId`: string {#beforeid}
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.
Note that layers are added by the order that they mount. They are *NOT* reordered later if their relative positions in the JSX tree change. If dynamic reordering is desired, you should manipulate `beforeId` for consistent behavior.
#### `source`: string {#source}
`source` is required by some layer types in the Mapbox style specification. If `<Layer>` is used as the immediate child of a [Source](./source.md) component, this prop will be overwritten by the id of the parent source. If the `<Layer/>` component is not an immediate descendant of `<Source/>`, e.g wrapped inside a helper component, source property needs to be provided same as the id of the `<Source/>` component for the `<Layer/>` component to show.
## Source
[layer.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/layer.ts)
================================================
FILE: docs/api-reference/maplibre/logo-control.md
================================================
# LogoControl
React component that wraps maplibre-gl's [LogoControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/LogoControl/) class.
```tsx
import * as React from 'react';
import {Map, LogoControl} from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
function App() {
return <Map
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
mapStyle="https://demotiles.maplibre.org/style.json"
>
<LogoControl />
</Map>;
}
```
## Properties
### Reactive Properties
#### `style`: CSSProperties {#style}
CSS style override that applies to the control's container.
### Other Properties
The properties in this section are not reactive. They are only used when the component first mounts.
Any [options](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/LogoControlOptions/) supported by the `LogoControl` class, such as
- `compact`
Plus the following:
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
Default: `'top-right'`
Placement of the control relative to the map.
## Source
[logo-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/logo-control.ts)
================================================
FILE: docs/api-reference/maplibre/map-provider.md
================================================
# MapProvider
A [Context.Provider](https://reactjs.org/docs/context.html#contextprovider) that facilitates map operations outside of the component that directly renders a [Map](./map.md).
The component should wrap all nodes in which you may want to access the maps:
```tsx
import {MapProvider} from 'react-map-gl/maplibre';
function Root() {
return (
<MapProvider>
{
// Application tree, somewhere one or more <Map /> component(s) are rendered
}
</MapProvider>
);
}
```
See [useMap](./use-map.md) for more information.
## Source
[use-map.tsx](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/use-map.tsx)
================================================
FILE: docs/api-reference/maplibre/map.md
================================================
# default (Map)
React component that wraps maplibre-gl's [Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/) class. This is also the default export from `react-map-gl/maplibre`.
```tsx
import * as React from 'react';
import {Map} from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
function App() {
return (
<Map
initialViewState={{
longitude: -122.4,
latitude: 37.8,
zoom: 14
}}
style={{width: 600, height: 400}}
mapStyle="https://demotiles.maplibre.org/style.json"
/>
);
}
```
## Properties
Aside from the props listed below, the `Map` component supports all [options](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/) of the `Map` class constructor. Beware that this is not an exhaustive list of all props. Different base map libraries may offer different options and default values. When in doubt, refer to your base map library's documentation.
### Layout options
#### `id`: string {#id}
Map container id.
#### `style`: CSSProperties {#style}
Default: `{position: 'relative', width: '100%', height: '100%'}`
Map container CSS.
#### `cursor`: string {#cursor}
Default: `'auto'`
The current cursor [type](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor).
### Styling options
#### `light`: [Light](./types.md#light) {#light}
Light properties of the style. Must conform to the [Light Style Specification](https://maplibre.org/maplibre-style-spec/light/).
#### `mapStyle`: [MapStyle](./types.md#mapstyle) | string | Immutable {#mapstyle}
Default: (empty style)
The map's Maplibre style. This must be an a JSON object conforming to the schema described in the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/), or a URL to such JSON.
#### `projection`: string | [Projection](./types.md#projection) {#projection}
Default: `'mercator'`
The projection the map should be rendered in. See [Projection Specification](https://maplibre.org/maplibre-style-spec/projection/).
#### `renderWorldCopies`: boolean {#renderworldcopies}
Default: `true`
If `true`, multiple copies of the world will be rendered, when zoomed out.
#### `sky`: [Sky](./types.md#sky) {#sky}
The sky property of the style. Must conform to the [Sky Style Specification](https://maplibre.org/maplibre-style-spec/sky/).
#### `styleDiffing`: boolean {#stylediffing}
Default: `true`
Enable diffing when `mapStyle` changes. If `false`, force a 'full' update, removing the current style and building the given one instead of attempting a diff-based update.
#### `terrain`: [Terrain](./types.md#terrain)|null {#terrain}
Terrain property of the style. Must conform to the [Terrain Style Specification](https://maplibre.org/maplibre-style-spec/terrain/).
If `null` is provided, removes terrain from the map.
### Camera options
#### `initialViewState`: object {#initialviewstate}
The initial view state of the map. If specified, `longitude`, `latitude`, `zoom` etc. in props are ignored when constructing the map. Only specify `initialViewState` if `Map` is being used as an **uncontrolled component**. See [state management](../../get-started/state-management.md) for examples.
- `bounds`: [LngLatBoundsLike](./types.md#lnglatboundslike) - The initial bounds of the map. If specified, it overrides the `longitude`, `latitude` and `zoom` options. Default `null`.
- `fitBoundsOptions` - An object to use only when setting the `bounds` option. Default `null`.
+ `fitBoundsOptions.offset`: [PointLike](./types.md#pointlike)
+ `fitBoundsOptions.minZoom`: number
+ `fitBoundsOptions.maxZoom`: number
+ `fitBoundsOptions.padding`: [PaddingOptions](./types.md#paddingoptions)
- `longitude`: number - The initial longitude of the map center. Default `0`.
- `latitude`: number - The initial latitude of the map center. Default `0`.
- `zoom`: number - The initial zoom level. Default `0`.
- `pitch`: number - The initial pitch (tilt) of the map. Default `0`.
- `bearing`: number - The initial bearing (rotation) of the map. Default `0`.
#### `longitude`: number {#longitude}
The longitude of the map center.
#### `latitude`: number {#latitude}
The latitude of the map center.
#### `zoom`: number {#zoom}
The [zoom level](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/#zoom) of the map.
#### `pitch`: number {#pitch}
The initial [pitch](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/#pitch) (tilt) of the map, measured in degrees away from the plane of the screen (0-85).
#### `bearing`: number {#bearing}
The initial [bearing](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/#bearing) (rotation) of the map, measured in degrees counter-clockwise from north.
#### `padding`: [PaddingOptions](./types.md#paddingoptions) {#padding}
Default: `null`
The padding in pixels around the viewport.
#### `minZoom`: number {#minzoom}
Default: `0`
The minimum zoom level of the map (0-24).
#### `maxZoom`: number {#maxzoom}
Default: `22`
The maximum zoom level of the map (0-24).
#### `minPitch`: number {#minpitch}
Default: `0`
The minimum pitch of the map (0-85).
#### `maxPitch`: number {#maxpitch}
Default: `60`
The maximum pitch of the map (0-85).
#### `maxBounds`: [LngLatBoundsLike](./types.md#lnglatboundslike) {#maxbounds}
Default: `null`
If set, the map is constrained to the given bounds.
### Input handler options
#### `boxZoom`: boolean {#boxzoom}
Default: `true`
If `true`, the "box zoom" interaction is enabled. See [BoxZoomHandler](https://maplibre.org/maplibre-gl-js/docs/API/classes/BoxZoomHandler/).
#### `doubleClickZoom`: boolean {#doubleclickzoom}
Default: `true`
If `true`, the "double click to zoom" interaction is enabled. See [DoubleClickZoomHandler](https://maplibre.org/maplibre-gl-js/docs/API/classes/DoubleClickZoomHandler/).
#### `dragRotate`: boolean {#dragrotate}
Default: `true`
If `true`, the "drag to rotate" interaction is enabled. See [DragRotateHandler](https://maplibre.org/maplibre-gl-js/docs/API/classes/DragRotateHandler/).
#### `dragPan`: boolean | Object {#dragpan}
Default: `true`
If `true`, the "drag to pan" interaction is enabled. Optionally accept an object value that is the options to [DragPanHandler](https://maplibre.org/maplibre-gl-js/docs/API/classes/DragPanHandler/).
#### `keyboard`: boolean {#keyboard}
Default: `true`
If `true`, keyboard shortcuts are enabled. See [KeyboardHandler](https://maplibre.org/maplibre-gl-js/docs/API/classes/KeyboardHandler/).
#### `scrollZoom`: boolean | Object {#scrollzoom}
Default: `true`
If `true`, the "scroll to zoom" interaction is enabled. Optionally accept an object value that is the options to [ScrollZoomHandler](https://maplibre.org/maplibre-gl-js/docs/API/classes/ScrollZoomHandler/).
#### `touchPitch`: boolean | Object {#touchpitch}
Default: `true`
If `true`, the "drag to pitch" interaction is enabled. Optionally accept an object value that is the options to [TwoFingersTouchPitchHandler](https://maplibre.org/maplibre-gl-js/docs/API/classes/TwoFingersTouchPitchHandler/).
#### `touchZoomRotate`: boolean | Object {#touchzoomrotate}
Default: `true`
If `true`, the "pinch to rotate and zoom" interaction is enabled. Optionally accept an object value that is the options to [TwoFingersTouchZoomRotateHandler](https://maplibre.org/maplibre-gl-js/docs/API/classes/TwoFingersTouchZoomRotateHandler/).
#### `interactiveLayerIds`: string[] {#interactivelayerids}
Default: `null`
The id(s) of style layer(s).
If specified, pointer event (`mousemove`, `click` etc.) listeners will be triggered only if its location is within a visible feature in these layers, and the event will have a `features` property containing an array of the matching features.
If not specified, pointer event listeners will be triggered by a corresponding event happening anywhere on the map, and the event will not have a `features` property.
See the [Callbacks](#callbacks) section for affected events.
### Callbacks
#### `onResize`: (event: [MapEvent](./types.md#mapevent)) => void {#onresize}
Called when the map has been resized.
#### `onLoad`: (event: [MapEvent](./types.md#mapevent)) => void {#onload}
Called after all necessary resources have been downloaded and the first visually complete rendering of the map has occurred.
#### `onRender`: (event: [MapEvent](./types.md#mapevent))) => void {#onrender}
Called whenever the map is drawn to the screen.
#### `onIdle`: (event: [MapEvent](./types.md#mapevent))) => void {#onidle}
Called after the last frame rendered before the map enters an "idle" state:
- No camera transitions are in progress
- All currently requested tiles have loaded
- All fade/transition animations have completed
#### `onRemove`: (event: [MapEvent](./types.md#mapevent))) => void {#onremove}
Called when the map has been removed.
#### `onError`: (event: [ErrorEvent](./types.md#errorevent)) => void {#onerror}
Default: `evt => console.error(evt.error)`
Called when an error occurs.
#### `onMouseDown`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmousedown}
Called when a pointing device (usually a mouse) is pressed within the map.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
#### `onMouseUp`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseup}
Called when a pointing device (usually a mouse) is released within the map.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
#### `onMouseOver`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseover}
Called when a pointing device (usually a mouse) is moved within the map. As you move the cursor across a web page containing a map, the event will fire each time it enters the map or any child elements.
#### `onMouseEnter`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseenter}
Called when a pointing device (usually a mouse) enters a visible portion of the layer(s) specified by `interactiveLayerIds` from outside that layer or outside the map canvas.
#### `onMouseMove`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmousemove}
Called when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the map, the event will fire every time the cursor changes position within the map.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
#### `onMouseLeave`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseleave}
Called when a pointing device (usually a mouse) leaves a visible portion of the layer(s) specified by `interactiveLayerIds` or moves from the layer to outside the map canvas.
#### `onMouseOut`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onmouseout}
Called when a point device (usually a mouse) leaves the map's canvas.
#### `onClick`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#onclick}
Called when a pointing device (usually a mouse) is pressed and released at the same point on the map.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
#### `onDblClick`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#ondblclick}
Called when a pointing device (usually a mouse) is pressed and released twice at the same point on the map in rapid succession.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
#### `onContextMenu`: (event: [MapLayerMouseEvent](./types.md#maplayermouseevent)) => void {#oncontextmenu}
Called when the right button of the mouse is clicked or the context menu key is pressed within the map.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
#### `onWheel`: (event: [MapWheelEvent](./types.md#mapwheelevent)) => void {#onwheel}
Called when a wheel event occurs within the map.
#### `onTouchStart`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchstart}
Called when a `touchstart` event occurs within the map.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
#### `onTouchEnd`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchend}
Called when a `touchend` event occurs within the map.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
#### `onTouchMove`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchmove}
Called when a `touchmove` event occurs within the map.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
#### `onTouchCancel`: (event: [MapLayerTouchEvent](./types.md#maplayertouchevent)) => void {#ontouchcancel}
Called when a `touchcancel` event occurs within the map.
If `interactiveLayerIds` is specified, the event will contain an additional `features` field that contains features under the cursor from the specified layer.
#### `onMoveStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onmovestart}
Called just before the map begins a transition from one view to another.
#### `onMove`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onmove}
Called repeatedly during an animated transition from one view to another.
When `Map` is used as a controlled component, `event.viewState` reflects the view state that the camera "proposes" to move to, as a result of either user interaction or methods such as [flyTo](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#flyto). The camera does not actually change until the application updates the view state props (`longitude`, `latitude`, `zoom` etc.).
See [state management](../../get-started/state-management.md) for examples.
#### `onMoveEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onmoveend}
Called just after the map completes a transition from one view to another.
#### `onDragStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#ondragstart}
Called when a "drag to pan" interaction starts.
#### `onDrag`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#ondrag}
Called repeatedly during a "drag to pan" interaction.
#### `onDragEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#ondragend}
Called when a "drag to pan" interaction ends.
#### `onZoomStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onzoomstart}
Called just before the map begins a transition from one zoom level to another.
#### `onZoom`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onzoom}
Called repeatedly during an animated transition from one zoom level to another.
When `Map` is used as a controlled component, `event.viewState.zoom` reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as [flyTo](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#flyto). The camera does not actually change until the application updates the `zoom` prop.
#### `onZoomEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onzoomend}
Called just after the map completes a transition from one zoom level to another.
#### `onRotateStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onrotatestart}
Called just before the map begins a transition from one bearing (rotation) to another.
#### `onRotate`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onrotate}
Called repeatedly during an animated transition from one bearing (rotation) to another.
When `Map` is used as a controlled component, `event.viewState.bearing` reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as [flyTo](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#flyto). The camera does not actually change until the application updates the `bearing` prop.
#### `onRotateEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onrotateend}
Called just after the map completes a transition from one bearing (rotation) to another.
#### `onPitchStart`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onpitchstart}
Called just before the map begins a transition from one pitch (tilt) to another.
#### `onPitch`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onpitch}
Called repeatedly during an animated transition from one pitch (tilt) to another.
When `Map` is used as a controlled component, `event.viewState.pitch` reflects the zoom that the camera "proposes" to change to, as a result of either user interaction or methods such as [flyTo](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#flyto). The camera does not actually change until the application updates the `pitch` prop.
#### `onPitchEnd`: (event: [ViewStateChangeEvent](./types.md#viewstatechangeevent)) => void {#onpitchend}
Called just after the map completes a transition from one pitch (tilt) to another.
#### `onBoxZoomStart`: (event: [MapBoxZoomEvent](./types.md#mapboxzoomevent)) => void {#onboxzoomstart}
Called when a "box zoom" interaction starts.
#### `onBoxZoomEnd`: (event: [MapBoxZoomEvent](./types.md#mapboxzoomevent)) => void {#onboxzoomend}
Called when a "box zoom" interaction ends.
#### `onBoxZoomCancel`: (event:[MapBoxZoomEvent](./types.md#mapboxzoomevent)) => void {#onboxzoomcancel}
Called when the user cancels a "box zoom" interaction, or when the bounding box does not meet the minimum size threshold.
#### `onData`: (event: [MapStyleDataEvent](./types.md#mapstyledataevent) | [MapSourceDataEvent](./types.md#mapsourcedataevent)) => void {#ondata}
Called when any map data loads or changes. See [MapDataEvent](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapDataEvent/) for more information.
#### `onStyleData`: (event: [MapStyleDataEvent](./types.md#mapstyledataevent)) => void {#onstyledata}
Called when the map's style loads or changes. See [MapDataEvent](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapDataEvent/) for more information.
#### `onSourceData`: (event: [MapSourceDataEvent](./types.md#mapsourcedataevent)) => void {#onsourcedata}
Called when one of the map's sources loads or changes, including if a tile belonging to a source loads or changes. See [MapDataEvent](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapDataEvent/) for more information.
### Other options
The following props, along with any [options](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/) of the `Map` class not listed above, can be specified to construct the underlying `Map` instance.
Note: props in this section are not reactive. They are only used once when the Map instance is constructed.
#### `mapLib`: any {#maplib}
Default:
- `import('maplibre-gl')`
Specify the underlying base map library for the Map component. The value can be provided with several options:
By module import (and embedding in the final bundle):
```tsx
import * as React from 'react';
import {Map} from 'react-map-gl/maplibre';
import maplibregl from 'maplibre-gl';
function App() {
return <Map mapLib={maplibregl} />;
}
```
By dynamic import (thus enable bundle splitting):
```tsx
import * as React from 'react';
import {Map} from 'react-map-gl/maplibre';
function App() {
return <Map mapLib={import('maplibre-gl')} />;
}
```
Or to load a pre-bundled version of the library:
```html title="index.html"
<script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js" ></script>
```
```tsx title="app.tsx"
import * as React from 'react';
import {Map} from 'react-map-gl/maplibre';
function App() {
return <Map mapLib={window.maplibregl} />;
}
```
#### `maxParallelImageRequests`: number {#maxparallelimagerequests}
Default: `16`
The maximum number of images (raster tiles, sprites, icons) to load in parallel.
#### `reuseMaps`: boolean {#reusemaps}
Default: `false`
By default, every time a map component is unmounted, all internal resources associated with the underlying `Map` instance are released. If the map gets mounted again, a new `Map` instance is constructed.
If `reuseMaps` is set to `true`, when a map component is unmounted, the underlying `Map` instance is retained in memory. The next time a map component gets mounted, the saved instance is reused. This behavior may be desirable if an application frequently mounts/unmounts map(s), for example in a tabbed or collapsable UI, and wants to avoid recreating the Map and its data cache triggered by initialization.
Note that since some map options cannot be modified after initialization, when reusing maps, only the reactive props and `initialViewState` of the new component are respected.
#### `RTLTextPlugin`: string | object {#rtltextplugin}
- `pluginUrl`: `string` URL to the plugin JS file.
- `lazy`: `boolean` When true, the plugin is only loaded when the map first encounters Hebrew or Arabic text. Default `true`.
Sets the map's RTL text plugin via [setRTLTextPlugin](https://maplibre.org/maplibre-gl-js/docs/API/functions/setRTLTextPlugin/). Can be used with [mapbox-gl-rtl-text](https://github.com/mapbox/mapbox-gl-rtl-text). Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left.
#### `workerCount`: number {#workercount}
Default: `2`
The number of web workers instantiated on a page with maplibre-gl maps.
#### `workerUrl`: string {#workerurl}
Provides an interface for loading maplibre-gl's WebWorker bundle from a self-hosted URL. This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior.
## Methods
Imperative methods are accessible via a [React ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) or the [useMap](./use-map.md) hook.
```tsx
import * as React from 'react';
import {useRef, useCallback} from 'react';
import {Map} from 'react-map-gl/maplibre';
import type {MapRef} from 'react-map-gl/maplibre';
function App() {
const mapRef = useRef<MapRef>();
const onMapLoad = useCallback(() => {
mapRef.current.on('move', () => {
// do something
});
}, []);
return <Map ref={mapRef} onLoad={onMapLoad} ... />;
}
```
The [MapRef](./types.md#mapref) object exposes [Map methods](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#methods) that **are safe to call without breaking the React bindings**. For example, `setStyle()` is hidden from the ref object, because the style is supposed to be changed by updating the `mapStyle` prop. Calling the method directly may cause the the React prop to mismatch with the underlying state, and lead to unexpected behaviors.
You can still access the hidden members via `getMap()`:
#### `getMap()` {#getmap}
Returns the native [Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/) instance associated with this component.
## Source
[map.tsx](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/map.tsx)
================================================
FILE: docs/api-reference/maplibre/marker.md
================================================
# Marker
React component that wraps maplibre-gl's [Marker](https://maplibre.org/maplibre-gl-js/docs/API/classes/Marker/) class.
```tsx
import * as React from 'react';
import {Map, Marker} from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
function App() {
return <Map
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
mapStyle="https://demotiles.maplibre.org/style.json"
>
<Marker longitude={-100} latitude={40} anchor="bottom" >
<img src="./pin.png" />
</Marker>
</Map>;
}
```
If `Marker` is mounted with child components, then its content will be rendered to the specified location. If it is mounted with no content, then a default marker will be used.
## Properties
### Reactive Properties
#### `draggable`: boolean {#draggable}
Default: `false`
If `true`, the marker is able to be dragged to a new position on the map.
#### `latitude`: number {#latitude}
Required. The latitude of the anchor location.
#### `longitude`: number {#longitude}
Required. The longitude of the anchor location.
#### `offset`: [PointLike](./types.md#pointlike) {#offset}
Default: `null`
The offset in pixels as a [PointLike](./types.md#pointlike) object to apply relative to the element's center. Negatives indicate left and up.
#### `pitchAlignment`: 'map' | 'viewport' | 'auto' {#pitchalignment}
Default: `'auto'`
- `map` aligns the `Marker` to the plane of the map.
- `viewport` aligns the `Marker` to the plane of the viewport.
- `auto` automatically matches the value of `rotationAlignment`.
#### `popup`: Popup | null {#popup}
An instance of the [Popup](https://maplibre.org/maplibre-gl-js/docs/API/classes/Popup/) class to attach to this marker. If undefined or null, any popup set on this Marker instance is unset.
#### `rotation`: number {#rotation}
Default: `0`
The rotation angle of the marker in degrees, relative to its `rotationAlignment` setting. A positive value will rotate the marker clockwise.
#### `rotationAlignment`: 'map' | 'viewport' | 'auto' {#rotationalignment}
Default: `'auto'`
- `map` aligns the `Marker`'s rotation relative to the map, maintaining a bearing as the map rotates.
- `viewport` aligns the `Marker`'s rotation relative to the viewport, agnostic to map rotations.
- `auto` is equivalent to `viewport`.
#### `style`: CSSProperties {#style}
CSS style override that applies to the marker's container.
### Callbacks
#### `onClick`: (evt: [MapEvent](./types.md#mapevent)) => void {#onclick}
Called when the marker is clicked on.
#### `onDragStart`: (evt: [MarkerDragEvent](./types.md#markerdragevent)) => void {#ondragstart}
Called when dragging starts, if `draggable` is `true`.
#### `onDrag`: (evt: [MarkerDragEvent](./types.md#markerdragevent)) => void {#ondrag}
Called while dragging, if `draggable` is `true`.
#### `onDragEnd`: (evt: [MarkerDragEvent](./types.md#markerdragevent)) => void {#ondragend}
Called when dragging ends, if `draggable` is `true`.
### Other Properties
The properties in this section are not reactive. They are only used when the component first mounts.
Any [options](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MarkerOptions/) supported by the `Marker` class, such as
- `anchor`
- `color`
- `scale`
- `clickTolerance`
## Methods
The underlying native `Marker` instance is accessible via a [React ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) hook.
You may use it to call any imperative methods:
```tsx
import * as React from 'react';
import {useRef, useMemo, useCallback} from 'react';
import {Map, Marker} from 'react-map-gl/maplibre';
import maplibregl from 'maplibre-gl';
function App() {
const markerRef = useRef<maplibregl.Marker>();
const popup = useMemo(() => {
return maplibregl.Popup().setText('Hello world!');
}, [])
const togglePopup = useCallback(() => {
markerRef.current?.togglePopup();
}, []);
return <>
<Map>
<Marker longitude={-122.4} latitude={37.8} color="red" popup={popup} ref={markerRef} />
</Map>
<button onClick={togglePopup}>Toggle popup</button>
</>;
}
```
## Source
[marker.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/marker.ts)
================================================
FILE: docs/api-reference/maplibre/navigation-control.md
================================================
# NavigationControl
React component that wraps maplibre-gl's [NavigationControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/NavigationControl/) class.
```tsx
import * as React from 'react';
import {Map, NavigationControl} from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
function App() {
return <Map
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
mapStyle="https://demotiles.maplibre.org/style.json"
>
<NavigationControl />
</Map>;
}
```
## Properties
### Reactive Properties
#### `style`: CSSProperties {#style}
CSS style override that applies to the control's container.
### Other Properties
The properties in this section are not reactive. They are only used when the component first mounts.
Any [options](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/NavigationControlOptions/) supported by the `NavigationControl` class, such as
- `showCompass`
- `showZoom`
- `visualizePitch`
Plus the following:
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
Default: `'top-right'`
Placement of the control relative to the map.
## Source
[navigation-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/navigation-control.ts)
================================================
FILE: docs/api-reference/maplibre/popup.md
================================================
# Popup
React component that wraps maplibre-gl's [Popup](https://maplibre.org/maplibre-gl-js/docs/API/classes/Popup/) class.
```tsx
import * as React from 'react';
import {useState} from 'react';
import {Map, Popup} from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
function App() {
const [showPopup, setShowPopup] = useState<boolean>(true);
return <Map
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
mapStyle="https://demotiles.maplibre.org/style.json"
>
{showPopup && (
<Popup longitude={-100} latitude={40}
anchor="bottom"
onClose={() => setShowPopup(false)}>
You are here
</Popup>)}
</Map>;
}
```
## Properties
### Reactive Properties
#### `anchor`: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined {#anchor}
A string indicating the part of the popup that should be positioned closest to the coordinate, set via `longitude` and `latitude`.
If unset, the anchor will be dynamically set to ensure the popup falls within the map container with a preference for `'bottom'`.
#### `className`: string {#classname}
Space-separated CSS class names to add to popup container.
#### `offset`: number | [PointLike](./types.md#pointlike) | Record\<string, [PointLike](./types.md#pointlike)\> {#offset}
Default: `null`
A pixel offset applied to the popup's location specified as:
- a single number specifying a distance from the popup's location
- a PointLike specifying a constant offset
- an object of Points specifing an offset for each anchor position.
Negative offsets indicate left and up.
#### `maxWidth`: string {#maxwidth}
Default: `240px`
A string that sets the CSS property of the popup's maximum width.
#### `style`: CSSProperties {#style}
CSS style override that applies to the popup's container.
### Callbacks
#### `onOpen`: (evt: [PopupEvent](./types.md#popupevent)) => void {#onopen}
Called when the popup is opened.
#### `onClose`: (evt: [PopupEvent](./types.md#popupevent)) => void {#onclose}
Called when the popup is closed by the user clicking on the close button or outside (if `closeOnClick: true`).
### Other Properties
The properties in this section are not reactive. They are only used when the component first mounts.
Any [options](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/PopupOptions/) supported by the `Popup` class, such as
- `closeButton`
- `closeOnClick`
- `closeOnMove`
- `focusAfterOpen`
## Methods
The underlying native `Popup` instance is accessible via a [React ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) hook.
You may use it to call any imperative methods:
```tsx
import * as React from 'react';
import {useRef, useEffect} from 'react';
import {Map, Popup} from 'react-map-gl/maplibre';
import maplibregl from 'maplibre-gl';
function App() {
const popupRef = useRef<maplibregl.Popup>();
useEffect(() => {
popupRef.current?.trackPointer();
}, [popupRef.current])
return <Map>
<Popup longitude={-122.4} latitude={37.8} ref={popupRef} >
Tooltip
</Popup>
</Map>;
}
```
## Source
[popup.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/popup.ts)
================================================
FILE: docs/api-reference/maplibre/scale-control.md
================================================
# ScaleControl
React component that wraps maplibre-gl's [ScaleControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/ScaleControl/) class.
```tsx
import * as React from 'react';
import {Map, ScaleControl} from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
function App() {
return <Map
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
mapStyle="https://demotiles.maplibre.org/style.json"
>
<ScaleControl />
</Map>;
}
```
## Properties
### Reactive Properties
#### `maxWidth`: string {#maxwidth}
Default: `100`
The maximum length of the scale control in pixels.
#### `style`: CSSProperties {#style}
CSS style override that applies to the control's container.
#### `unit`: 'imperial' | 'metric' | 'nautical' {#unit}
Default: `'metric'`
Unit of the distance.
### Other Properties
The properties in this section are not reactive. They are only used when the component first mounts.
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
Default: `'top-right'`
Placement of the control relative to the map.
## Source
[scale-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/scale-control.ts)
================================================
FILE: docs/api-reference/maplibre/source.md
================================================
# Source
This component allows apps to create a [map source](https://maplibre.org/maplibre-style-spec/sources/) using React. It may contain [Layer](./layer.md) components as children.
```tsx
import * as React from 'react';
import {Map, Source, Layer} from 'react-map-gl/maplibre';
import type {CircleLayer} from 'react-map-gl/maplibre';
import type {FeatureCollection} from 'geojson';
import 'maplibre-gl/dist/maplibre-gl.css';
const geojson: FeatureCollection = {
type: 'FeatureCollection',
features: [
{type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}}
]
};
const layerStyle: CircleLayer = {
id: 'point',
type: 'circle',
paint: {
'circle-radius': 10,
'circle-color': '#007cbf'
}
};
function App() {
return <Map
initialViewState={{
longitude: -122.4,
latitude: 37.8,
zoom: 14
}}
mapStyle="https://demotiles.maplibre.org/style.json"
>
<Source id="my-data" type="geojson" data={geojson}>
<Layer {...layerStyle} />
</Source>
</Map>;
}
```
## Properties
The props provided to this component should be conforming to the [Mapbox source specification](https://maplibre.org/maplibre-style-spec/sources/) or [CanvasSourceSpecification](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/CanvasSourceSpecification/).
When props change _shallowly_, the component will attempt to update the source. Do not define objects/arrays inline to avoid perf hit.
Once a `<Source>` is mounted, the following props should not change. If add/remove multiple JSX sources dynamically, make sure you use React's [key prop](https://reactjs.org/docs/lists-and-keys.html#keys) to give each element a stable identity.
#### `id`: string {#id}
Unique identifier of the source. If not provided, a default id will be assigned.
#### `type`: string {#type}
Required. Type of the source.
## Source
[source.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/source.ts)
================================================
FILE: docs/api-reference/maplibre/terrain-control.md
================================================
# TerrainControl
React component that wraps maplibre-gl's [TerrainControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/TerrainControl/) class.
```tsx
import * as React from 'react';
import {Map, MapStyle, TerrainControl} from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
// https://maplibre.org/maplibre-gl-js/docs/examples/3d-terrain/
const MAP_STYLE: MapStyle = {
version: 8,
sources: {
osm: {
type: 'raster',
tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
tileSize: 256,
attribution: '© OpenStreetMap Contributors',
maxzoom: 19
},
terrainSource: {
type: 'raster-dem',
url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
tileSize: 256
}
},
layers: [
{
id: 'osm',
type: 'raster',
source: 'osm'
}
],
terrain: {
source: 'terrainSource',
exaggeration: 1
},
sky: {}
};
function App() {
return <Map
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
mapStyle={MAP_STYLE}
>
<TerrainControl />
</Map>;
}
```
## Properties
### Reactive Properties
#### `style`: CSSProperties {#style}
CSS style override that applies to the control's container.
### Other Properties
The properties in this section are not reactive. They are only used when the component first mounts.
Any [options](https://maplibre.org/maplibre-style-spec/terrain/) supported by the `TerrainControl` class, such as
- `source`
- `exageration`
Plus the following:
#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
Default: `'top-right'`
Placement of the control relative to the map.
## Source
[terrain-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/terrain-control.ts)
================================================
FILE: docs/api-reference/maplibre/types.md
================================================
# Types
The following types can be imported from `react-map-gl/maplibre` when using TypeScript.
## Components
#### IControl
A [custom control implementation](https://maplibre.org/maplibre-gl-js/docs/API/interfaces/IControl/).
#### CustomLayerInterface
A [custom layer implementation](https://maplibre.org/maplibre-gl-js/docs/API/interfaces/CustomLayerInterface/).
#### MapRef
Instance [ref](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) of a `Map` component. See [Map documentation](./map.md#methods) for details.
## Styling
#### StyleSpecification
An object conforming to the [Maplibre Style Specification](https://maplibre.org/maplibre-style-spec/).
#### SkySpecification
An object conforming to the [Sky Style Specification](https://maplibre.org/maplibre-style-spec/sky/).
#### LightSpecification
An object conforming to the [Light Style Specification](https://maplibre.org/maplibre-style-spec/light/).
#### TerrainSpecification
An object conforming to the [Terrain Style Specification](https://maplibre.org/maplibre-style-spec/terrain/).
#### ProjectionSpecification
An object conforming to the [Projection Style Specification](https://maplibre.org/maplibre-style-spec/projection/).
#### BackgroundLayerSpecification
A JSON object that defines a `background` layer according to the [Maplibre Style Specification](https://maplibre.org/maplibre-style-spec/layers/#background).
#### CircleLayerSpecification
A JSON object that defines a `circle` layer according to the [Maplibre Style Specification](https://maplibre.org/maplibre-style-spec/layers//#circle).
#### FillExtrusionLayerSpecification
A JSON object that defines a `fill-extrusion` layer according to the [Maplibre Style Specification](https://maplibre.org/maplibre-style-spec/layers/#fill-extrusion).
#### FillLayerSpecification
A JSON object that defines a `fill` layer according to the [Maplibre Style Specification](https://maplibre.org/maplibre-style-spec/layers/#fill).
#### HeatmapLayerSpecification
A JSON object that defines a `heatmap` layer according to the [Maplibre Style Specification](https://maplibre.org/maplibre-style-spec/layers/#heatmap).
#### HillshadeLayerSpecification
A JSON object that defines a `hillshade` layer according to the [Maplibre Style Specification](https://maplibre.org/maplibre-style-spec/layers/#hillshade).
#### LineLayerSpecification
A JSON object that defines a `line` layer according to the [Maplibre Style Specification](https://maplibre.org/maplibre-style-spec/layers/#line).
#### RasterLayerSpecification
A JSON object that defines a `raster` layer according to the [Maplibre Style Specification](https://maplibre.org/maplibre-style-spec/layers/#raster).
#### SymbolLayerSpecification
A JSON object that defines a `symbol` layer according to the [Maplibre Style Specification](https://maplibre.org/maplibre-style-spec/layers/#symbol).
#### GeoJSONSourceSpecification
A JSON object that defines a `geojson` source according to the [Maplibre Style Specification](https://maplibre.org/maplibre-style-spec/sources/#geojson).
#### VideoSourceSpecification
A JSON object that defines a `video` source according to the [Maplibre Style Specification](https://maplibre.org/maplibre-style-spec/sources/#video).
#### ImageSourceSpecification
A JSON object that defines a `image` source according to the [Maplibre Style Specification](https://maplibre.org/maplibre-style-spec/sources/#image).
#### VectorSourceSpecification
A JSON object that defines a `vector` source according to the [Maplibre Style Specification](https://maplibre.org/maplibre-style-spec/sources/#vector).
#### RasterSourceSpecification
A JSON object that defines a `raster` source according to the [Maplibre Style Specification](https://maplibre.org/maplibre-style-spec/sources/#raster).
#### RasterDEMSourceSpecification
A JSON object that defines a `raster-dem` source according to the [Maplibre Style Specification](https://maplibre.org/maplibre-style-spec/sources/#raster-dem).
#### CanvasSourceSpecification
A JSON object that defines a `canvas` source type. See [CanvasSourceSpecification](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/CanvasSourceSpecification/).
## Configurations
#### ControlPosition
One of `'top-right'`, `'top-left'`, `'bottom-right'` and `'bottom-left'`.
#### PaddingOptions
An object with the following fields:
- `left`: number - in pixels.
- `top`: number - in pixels.
- `right`: number - in pixels.
- `bottom`: number - in pixels.
## Data Types
#### LngLat
A Maplibre [LngLat](https://maplibre.org/maplibre-gl-js/docs/API/classes/LngLat/) object.
#### LngLatLike
A Maplibre [LngLatLike](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/LngLatLike/) object.
#### LngLatBounds
A Maplibre [LngLatBounds](https://maplibre.org/maplibre-gl-js/docs/API/classes/LngLatBounds/) object.
#### LngLatBoundsLike
A Maplibre [LngLatBoundsLike](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/LngLatBoundsLike/) object.
#### Point
A Maplibre [Point](https://github.com/mapbox/point-geometry) object.
#### PointLike
A Maplibre [PointLike](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/PointLike/) object.
#### MapGeoJSONFeature
A [GeoJSON](http://geojson.org/) feature that also contains the following library-specific fields:
- `layer`: Layer
- `source`: string
- `sourceLayer`: string
- `state`: `{ [key: string]: any }`
#### ViewState
An object with the following fields:
- `longitude`: number - The longitude of the map center.
- `latitude`: number - The latitude of the map center.
- `zoom`: number - The zoom level.
- `pitch`: number - The pitch (tilt) of the map, in degrees.
- `bearing`: number - The bearing (rotation) of the map, in degrees.
## Events
#### MapEvent
An object with the following fields:
- `type`: string - Event type
- `target`: [Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/)
- `originalEvent?`: [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event)
#### MapLayerMouseEvent
An object with the following fields:
- `type`: string
- `target`: [Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/)
- `originalEvent?`: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
- `point`: [Point](#point)
- `lngLat`: [LngLat](#lnglat)
- `preventDefault`: () => void
- `defaultPrevented`: boolean
- `features?`: [MapGeoJSONFeature](#mapgeojsonfeature)[]
#### MapWheelEvent
An object with the following fields:
- `type`: string
- `target`: [Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/)
- `originalEvent?`: [WheelEvent](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent)
- `preventDefault`: () => void
- `defaultPrevented`: boolean
#### MapLayerTouchEvent
An object with the following fields:
- `type`: string
- `target`: [Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/)
- `originalEvent?`: [TouchEvent](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent)
- `point`: [Point](#point)
- `lngLat`: [LngLat](#lnglat)
- `points`: [Point](#point)[]
- `lngLats`: [LngLat](#lnglat)[]
- `preventDefault`: () => void
- `defaultPrevented`: boolean
- `features?`: [MapGeoJSONFeature](#mapgeojsonfeature)[]
#### ViewStateChangeEvent
An object with the following fields:
- `type`: string - Event type
- `target`: [Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/)
- `viewState`: [ViewState](#viewstate) - the next view state that the camera wants to change to based on user input or transition.
#### MapBoxZoomEvent
An object with the following fields:
- `type`: string
- `target`: [Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/)
- `originalEvent?`: [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
- `boxZoomBounds`: [LngLatBounds](#lnglatbounds)
#### MapStyleDataEvent
An object with the following fields:
- `type`: string
- `target`: [Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/)
- `dataType`: 'style'
#### MapSourceDataEvent
An object with the following fields:
- `type`: string
- `target`: [Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/)
- `dataType`: 'source'
- `isSourceLoaded`: boolean
- `source`: string
- `sourceId`: string
- `sourceDataType`: 'metadata' | 'content'
- `tile`: any
- `coord`: Coordinate
See [MapDataEvent](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapDataEvent/).
#### ErrorEvent
An object with the following fields:
- `type`: 'error'
- `target`: [Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/)
- `error`: [Error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error)
#### GeolocateEvent
An object with the following fields:
- `type`: string
- `target`: [GeolocateControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/GeolocateControl/)
#### GeolocateResultEvent
An object with the following fields:
- `type`: string
- `target`: [GeolocateControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/GeolocateControl/)
- `coords`: [GeolocationCoordinates](https://developer.mozilla.org/en-US/docs/Web/API/GeolocationCoordinates) - the current location.
- `timestamp`: number - the time at which the location was retrieved.
#### GeolocateErrorEvent
An object with the following fields:
- `type`: string
- `target`: [GeolocateControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/GeolocateControl/)
- `code`: PERMISSION_DENIED | POSITION_UNAVAILABLE | TIMEOUT - see [GeolocationPositionError](https://developer.mozilla.org/en-US/docs/Web/API/GeolocationPositionError)
- `message`: string - the details of the error. Specifications note that this is primarily intended for debugging use and not to be shown directly in a user interface.
#### MarkerEvent
An object with the following fields:
- `type`: string
- `target`: [Marker](https://maplibre.org/maplibre-gl-js/docs/API/classes/Marker/)
#### MarkerDragEvent
An object with the following fields:
- `type`: string
- `target`: [Marker](https://maplibre.org/maplibre-gl-js/docs/API/classes/Marker/)
- `lngLat`: [LngLat](#lnglat) - the new location of the marker
#### PopupEvent
An object with the following fields:
- `type`: string
- `target`: [Popup](https://maplibre.org/maplibre-gl-js/docs/API/classes/Popup/)
================================================
FILE: docs/api-reference/maplibre/use-control.md
================================================
# useControl
The `useControl` hook is used to create React wrappers for custom map controls.
```tsx
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import {Map, useControl} from 'react-map-gl/maplibre';
function DrawControl(props: DrawControlProps) {
useControl(() => new MapboxDraw(props), {
position: props.position
});
return null;
}
function App() {
return (
<Map
initialViewState={{
longitude: -122.4,
latitude: 37.8,
zoom: 14
}}
mapStyle="https://demotiles.maplibre.org/style.json"
>
<DrawControl
position="top-left"
displayControlsDefault={false}
controls={{
polygon: true,
trash: true
}}
/>
</Map>
);
}
```
See a full example [here](/examples/maplibre/draw-polygon).
## Signature
```js
useControl<T extends IControl>(
onCreate: ({map: MapRef, mapLib: maplibregl}) => IControl,
options?: {
position?: ControlPosition;
}
): T
useControl<T extends IControl>(
onCreate: ({map: MapRef, mapLib: maplibregl}) => IControl,
onRemove: ({map: MapRef, mapLib: maplibregl}) => void,
options?: {
position?: ControlPosition;
}
): T
useControl<T extends IControl>(
onCreate: ({map: MapRef, mapLib: maplibregl}) => IControl,
onAdd: ({map: MapRef, mapLib: maplibregl}) => void,
onRemove: ({map: MapRef, mapLib: maplibregl}) => void,
options?: {
position?: ControlPosition;
}
): T
```
The hook creates an [IControl](https://maplibre.org/maplibre-gl-js/docs/API/interfaces/IControl/) instance, adds it to the map when it's available, and removes it upon unmount.
Parameters:
- `onCreate`: `({map: MapRef, mapLib: maplibregl}) => IControl` - called to create an instance of the control.
- `onAdd`: `({map: MapRef, mapLib: maplibregl}) => void` - called when the control has been added to the map.
- `onRemove`: `({map: MapRef, mapLib: maplibregl}) => void` - called when the control is about to be removed from the map.
- `options`: object
+ `position`: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' - control position relative to the map
Returns:
[IControl](./types.md#icontrol) - the control instance from `onCreate`.
## Source
[use-control.ts](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/use-control.ts)
================================================
FILE: docs/api-reference/maplibre/use-map.md
================================================
# useMap
The `useMap` hook allows a custom component to reference the [Map](./map.md) that contains it.
```tsx
import {Map, useMap} from 'react-map-gl/maplibre';
function Root() {
return (
<Map ... >
<NavigateButton />
</Map>
);
}
function NavigateButton() {
const {current: map} = useMap();
const onClick = () => {
map.flyTo({center: [-122.4, 37.8]});
};
return <button onClick={onClick}>Go</button>;
}
```
When used with the [MapProvider](./map-provider.md), this hook can also reference maps that are rendered outside of the current component's direct render tree.
```tsx
import {MapProvider, Map, useMap} from 'react-map-gl/maplibre';
function Root() {
return (
<MapProvider>
<Map id="myMapA" ... />
<Map id="myMapB" ... />
<NavigateButton />
</MapProvider>
);
}
function NavigateButton() {
const {myMapA, myMapB} = useMap();
const onClick = () => {
myMapA.flyTo({center: [-122.4, 37.8]});
myMapB.flyTo({center: [-74, 40.7]});
};
return <button onClick={onClick}>Go</button>;
}
```
See a full example [here](https://github.com/visgl/react-map-gl/tree/8.0-release/examples/get-started/hook).
## Signature
`useMap(): {current?: MapRef, [id: string]: MapRef}`
The hook returns an object that contains all mounted maps under the closest `MapProvider`. The keys are each map's [id](./map.md#id) and the values are the [MapRef](./types.md#mapref).
If the hook is used inside a decendent of a `Map` component, the returned object also contains a `current` field that references the containing map.
## Source
[use-map.tsx](https://github.com/visgl/react-map-gl/tree/8.0-release/modules/react-maplibre/src/components/use-map.tsx)
================================================
FILE: docs/get-started/adding-custom-data.md
================================================
# Adding Custom Data
## Native Mapbox Layers
You can inject data and mapbox native layers using the [Source](../api-reference/mapbox/source.md) and [Layer](../api-reference/mapbox/layer.md) components:
```tsx
import * as React from 'react';
import Map, {Source, Layer} from 'react-map-gl/maplibre';
import type {CircleLayer} from 'react-map-gl/maplibre';
import type {FeatureCollection} from 'geojson';
const geojson: FeatureCollection = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [-122.4, 37.8]
},
properties: {title: '915 Front Street, San Francisco, California'}
}
]
};
const layerStyle: CircleLayer = {
id: 'point',
type: 'circle',
paint: {
'circle-radius': 10,
'circle-color': '#007cbf'
}
};
function App() {
return (
<Map
initialViewState={{
longitude: -122.45,
latitude: 37.78,
zoom: 14
}}>
<Source id="my-data" type="geojson" data={geojson}>
<Layer {...layerStyle} />
</Source>
</Map>
);
}
```
For details about data sources and layer configuration, check out the [Mapbox style specification](https://www.mapbox.com/mapbox-gl-js/style-spec).
For dynamically updating data sources and layers, check out the [GeoJSON](https://visgl.github.io/react-map-gl/examples/maplibre/geojson) and [GeoJSON animation](http://visgl.github.io/react-map-gl/examples/maplibre/geojson-animation) examples.
## Custom Overlays
You can implement a custom HTML or SVG overlay on top of the map that redraws whenever the camera changes. By calling `map.project()` you can adjust the DOM or CSS properties so that the customly-drawn features are always aligned with the map. See a full example [here](https://github.com/visgl/react-map-gl/tree/8.0-release/examples/maplibre/custom-overlay).
## Other vis.gl Libraries
For more feature rich and performant data visualization overlay use cases, you may consider using other visualization libraries. react-map-gl is part of the [vis.gl](https://www.github.com/visgl) ecosystem, a suite of high-performance data visualization tools for the Web.
- [deck.gl](https://deck.gl) - WebGL-powered framework for the visualization of large datasets.
- [loaders.gl](https://loaders.gl) - loaders for file formats focused on visualization of big data, including point clouds, 3D geometries, images, geospatial formats as well as tabular data.
- [nebula.gl](https://nebula.gl) - 3D-enabled GeoJSON editing based on deck.gl and React.
================================================
FILE: docs/get-started/get-started.md
================================================
# Get Started
You may find complete project setups in [get-started examples](https://github.com/visgl/react-map-gl/tree/8.0-release/examples/get-started).
## Installation
Using `react-map-gl` requires `node >= 12` and `react >= 16.3`.
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs groupId="map-library">
<TabItem value="mapbox" label="Mapbox">
```bash
npm install react-map-gl mapbox-gl @types/mapbox-gl
```
</TabItem>
<TabItem value="maplibre" label="Maplibre">
```bash
npm install react-map-gl maplibre-gl
```
</TabItem>
</Tabs>
## Example
<Tabs groupId="map-library">
<TabItem value="mapbox" label="Mapbox">
```tsx title="app.tsx"
import * as React from 'react';
import Map from 'react-map-gl/mapbox';
// If using with mapbox-gl v1:
// import Map from 'react-map-gl/mapbox-legacy';
import 'mapbox-gl/dist/mapbox-gl.css';
function App() {
return (
<Map
mapboxAccessToken="<Mapbox access token>"
initialViewState={{
longitude: -122.4,
latitude: 37.8,
zoom: 14
}}
style={{width: 600, height: 400}}
mapStyle="mapbox://styles/mapbox/streets-v9"
/>
);
}
```
See [about Mapbox tokens](./mapbox-tokens.md) for alternatives to providing a Mapbox token.
</TabItem>
<TabItem value="maplibre" label="Maplibre">
```tsx title="app.tsx"
import * as React from 'react';
import Map from 'react-map-gl/maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
function App() {
return (
<Map
initialViewState={{
longitude: -122.4,
latitude: 37.8,
zoom: 14
}}
style={{width: 600, height: 400}}
mapStyle="https://api.maptiler.com/maps/streets/style.json?key=get_your_own_key"
/>
);
}
```
</TabItem>
</Tabs>
## Styling
The base map library 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.
The above example code imports the CSS file directly into the app. Most bundlers support this syntax out-of-the-box or with an official plugin.
Alternatively, you may add the stylesheet to the head of your page:
<Tabs groupId="map-library">
<TabItem value="mapbox" label="Mapbox">
```html title="index.html"
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v<YOUR_MAPBOX_VERSION>/mapbox-gl.css' rel='stylesheet' />
```
Find out your mapbox version by running `yarn list mapbox-gl` or `npm ls mapbox-gl`.
</TabItem>
<TabItem value="maplibre" label="Maplibre">
```html title="index.html"
<link href='https://unpkg.com/maplibre-gl@<YOUR_MAPLIBRE_VERSION>/dist/maplibre-gl.css' rel='stylesheet' />
```
Find out your maplibre version by running `yarn list maplibre-gl` or `npm ls maplibre-gl`.
</TabItem>
</Tabs>
================================================
FILE: docs/get-started/mapbox-tokens.md
================================================
# About Mapbox Tokens
`react-map-gl` itself is open source and free. It provides a React wrapper for `mapbox-gl`, `maplibre-gl` or compatible projects.
Depending on which base map library you use, you may need a Mapbox token. You will need a Mapbox token if you use:
- [mapbox-gl@>=2.0.0](https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0) - requires a mapbox access token in order to access the map renderer, and generates billable events regardlesss of whether you are displaying your own maps.
- `mapbox-gl@1.x` - requires an access token only if you load the map styles and tiles from Mapbox's data service. See "Display Maps Without A Mapbox Token" section below for using non-Mapbox tiles.
To get a Mapbox token, you will need to register on [the Mapbox website](https://www.mapbox.com). The token will be used to identify you and start serving up map tiles. The service is free until a certain level of traffic is exceeded.
There are several ways to provide a token to your app, as showcased in some of the example folders:
* Provide a `mapboxAccessToken` prop to the map component
* Set the `MapboxAccessToken` environment variable (or set `REACT_APP_MAPBOX_ACCESS_TOKEN` if you are using Create React App)
* Provide it in the URL, e.g `?access_token=TOKEN`
We recommend using an environment variable to minimize leaking risks. See [securing Mapbox token](./tips-and-tricks.md#securing-mapbox-token) for examples.
## Display Maps Without A Mapbox Token
It is possible to use the map component without the Mapbox service, if you use another tile source (for example, if you host your own map tiles). Note that this is no longer allowed using `mapbox-gl` v2.0 and above. The options are:
- Use [maplibre-gl](https://maplibre.org/maplibre-gl-js/docs/). See [Get Started](./get-started.md) for how to configure your project.
- Stay on `mapbox-gl@1.x`. react-map-gl plans to continue supporting this release in the foreseeable future, however, this version will not include any of the latest features of the map renderer, nor get any future updates from Mapbox.
To use your own map service, you will need a custom map style that points to your own [tile source](https://maplibre.org/maplibre-style-spec/sources/), and pass it to `Map` using the `mapStyle` prop.
Some alternative map data providers include:
- [MapTiler](https://www.maptiler.com)
- [Amazon Location Service](https://docs.aws.amazon.com/location/latest/developerguide/map-concepts.html)
Useful resources for creating your own map tiles and service:
- [Martin Tile Server](https://maplibre.org/martin/introduction.html)
- [OpenMapTiles](https://openmaptiles.org)
- [Mapbox Vector Tile Spec](https://github.com/mapbox/vector-tile-spec)
- [PMTiles](https://github.com/protomaps/PMTiles)
- [List of open source tools](https://github.com/mapbox/awesome-vector-tiles)
If you are using a third party service that requires header based authentication, you can do this by defining a function to pass to `Map` using the `transformRequest` prop.
An example function:
```ts
const transformRequest = (url, resourceType) => {
if (resourceType === 'Tile' && url.match('yourTileSource.com')) {
return {
url: url,
headers: { 'Authorization': 'Bearer ' + yourAuthToken }
}
}
}
```
================================================
FILE: docs/get-started/state-management.md
================================================
# State Management
There are two ways to use a [Map](../api-reference/maplibre/map.md):
- [Uncontrolled](https://reactjs.org/docs/uncontrolled-components.html): The application sets the initial view state (Camera options) when the map is mounted, and the component automatically makes changes to the view states afterwards. This mode works very similarly to the mapbox-gl `Map` class.
- [Controlled](https://reactjs.org/docs/forms.html#controlled-components): The application manages the view state, and pass it to the map via props. The map invokes a callback with a new view state during user interaction transition, and the application can decide what to do with it. This mode is the most powerful when an application has other components that need to interact with the map, or implements its own user input and data handling logic.
## Uncontrolled Map
You may clone a full app configuration for this example [here](https://github.com/visgl/react-map-gl/tree/8.0-release/examples/get-started/basic).
```tsx
import * as React from 'react';
import Map from 'react-map-gl/maplibre';
function App() {
return <Map
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5
}}
mapStyle="mapbox://styles/mapbox/streets-v9"
/>;
}
```
## Controlled Map
You may clone a full app configuration for this example [here](https://github.com/visgl/react-map-gl/tree/8.0-release/examples/get-started/controlled).
```tsx
import * as React from 'react';
import Map from 'react-map-gl/maplibre';
function App() {
const [viewState, setViewState] = React.useState({
longitude: -100,
latitude: 40,
zoom: 3.5
});
return <Map
{...viewState}
onMove={evt => setViewState(evt.viewState)}
mapStyle="mapbox://styles/mapbox/streets-v9"
/>;
}
```
A real-world application likely uses more complicated state flows:
- Using map with a state store (Redux) [example](https://github.com/visgl/react-map-gl/tree/8.0-release/examples/get-started/redux)
- Using map with SSR (Next.js) [example](https://github.com/visgl/react-map-gl/tree/8.0-release/examples/get-started/nextjs)
## Custom Camera Constraints
`Map` offers props that set basic constraints for the camera, e.g. `maxBounds`, `minZoom`, `maxPitch`. If you need more complicated logic to constrain the camera, you may use it as a controlled component. The following example restricts the map center inside a GeoJSON geofence:
```tsx
import * as React from 'react';
import Map from 'react-map-gl/maplibre';
// npm install @turf/turf
import * as turf from '@turf/turf';
// A circle of 5 mile radius of the Empire State Building
const GEOFENCE = turf.circle([-74.0122106, 40.7467898], 5, {units: 'miles'});
function App() {
const [viewState, setViewState] = React.useState({
longitude: -100,
latitude: 40,
zoom: 3.5
});
const onMove = React.useCallback(({viewState}) => {
const newCenter = [viewState.longitude, viewState.latitude];
// Only update the view state if the center is inside the geofence
if (turf.booleanPointInPolygon(newCenter, GEOFENCE)) {
setViewState(viewState);
}
}, [])
return <Map
{...viewState}
onMove={onMove}
mapStyle="mapbox://styles/mapbox/streets-v9"
/>;
}
```
================================================
FILE: docs/get-started/tips-and-tricks.md
================================================
# Tips and Tricks
## Securing Mapbox Token
Because Mapbox tokens are required for the client application to make requests to Mapbox servers, you have to distribute it with your app. It is not possible to stop a visitor to your site from scraping the token. The practice outlined below can help you protect your token from being abused.
- Never commit your token in clear text into GitHub or other source control.
- In your local dev environment, define the token in an environment variable e.g. `MapboxAccessTokenDev=...` in the command line, or use something like [dotenv](https://github.com/motdotla/dotenv) and put `MapboxAccessTokenDev=...` in a `.env` file. Add `.env` to `.gitignore` so it's never tracked. If your app is deployed by a continuous integration pipeline, follow its documentation and set a secret environment variable.
- Create separate tokens for development (often times on `http://localhost`), public code snippet (Gist, Codepen etc.) and production (deployed to `https://mycompany.com`). The public token should be rotated regularly. The production token should have strict [scope and URL restrictions](https://docs.mapbox.com/help/troubleshooting/how-to-use-mapbox-securely/#access-tokens) that only allows it to be used on a domain that you own.
- Add the following to your bundler config:
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs>
<TabItem value="webpack" label="Webpack">
```js
/// webpack.config.js
const {DefinePlugin} = require('webpack');
module.exports = {
...
plugins: [
new DefinePlugin({
'process.env.MapboxAccessToken': JSON.stringify(process.env.NODE_ENV == 'production' ? process.env.MapboxAccessTokenProd : process.env.MapboxAccessTokenDev)
})
]
};
```
</TabItem>
<TabItem value="rollup" label="Rollup">
```js
/// rollup.config.js
const replace = require('@rollup/plugin-replace').default;
module.exports = {
...
plugins: [
replace({
'process.env.MapboxAccessToken': JSON.stringify(process.env.NODE_ENV == 'production' ? process.env.MapboxAccessTokenProd : process.env.MapboxAccessTokenDev)
})
]
};
```
</TabItem>
</Tabs>
react-map-gl automatically picks up `process.env.MapboxAccessToken` or `process.env.REACT_APP_MAPBOX_ACCESS_TOKEN` if they are defined. Alternatively, you can use your own variable name (e.g. `__SUPER_SECRET_TOKEN__`) and pass it in manually with `mapboxAccessToken={__SUPER_SECRET_TOKEN__}`.
## Minimize Cost from Frequent Re-mounting
In a moderately complex single-page app, as the user navigates through the UI, a map component may unmount and mount again many times during a session. Consider the following layout:
```tsx
/// Example using Tabs from Material UI
<TabContext value={selectedTab}>
<TabList onChange={handleTabChange}>
<Tab label="Map" value="map" />
<Tab label="List" value="table" />
</TabList>
<TabPanel value="map">
<Map mapStyle="mapbox://styles/mapbox/streets-v9" >
{items.map(renderMarker)}
</Map>
</TabPanel>
<TabPanel value="table">
<Table>
{items.map(renderRow)}
</Table>
</TabPanel>
</TabContext>
```
Every time the user clicks the "table" tab, the map is unmounted. When they click the "map" tab, the map is mounted again. As of v2.0, mapbox-gl generates a [billable event](https://www.mapbox.com/pricing#maploads) every time a Map object is initialized. It is obviously not ideal to get billed for just collapsing and expanding part of the UI.
In this case, it is recommended that you set the [reuseMaps](../api-reference/mapbox/map.md#reuseMaps) prop to `true`:
```tsx
<TabPanel value="map">
<Map reuseMaps mapStyle="mapbox://styles/mapbox/streets-v9" >
{items.map(renderMarker)}
</Map>
</TabPanel>
```
This bypasses the initialization when a map is removed then added back.
## Performance with Many Markers
If your application uses externally managed camera state, like with Redux, the number of React rerenders may be very high when the user is interacting with the map. Consider the following setup:
```tsx
import {useSelector, useDispatch} from 'react-redux';
import Map, {Marker} from 'react-map-gl/maplibre';
function MapView() {
const viewState = useSelector((s: RootState) => s.viewState);
const vehicles = useSelector((s: RootState) => s.vehicles);
const dispatch = useDispatch();
const onMove = useCallback(evt => {
dispatch({type: 'setViewState', payload: evt.viewState});
}, []);
return (
<Map
{...viewState}
onMove={onMove}
mapStyle="mapbox://styles/mapbox/streets-v9" >
>
{vehicles.map(vehicle => (
<Marker key={vehicle.id}
longitude={vehicle.coordinates[0]}
latitude={vehicle.coordinates[1]}>
<svg>
// vehicle icon
</svg>
</Marker>)
)}
</Map>
);
}
```
This component is rerendered on every animation frame when the user is dragging the map. If it's trying to render hundreds of markers, the performance lag will become quite visible.
One way to improve the performance is `useMemo`:
```tsx
const markers = useMemo(() => vehicles.map(vehicle => (
<Marker key={vehicle.id}
longitude={vehicle.coordinates[0]}
latitude={vehicle.coordinates[1]}>
<svg>
// vehicle icon
</svg>
</Marker>)
), [vehicles]);
return (
<Map
{...viewState}
onMove={onMove}
mapStyle="mapbox://styles/mapbox/streets-v9" >
>
{markers}
</Map>
);
}
```
This prevents React from rerendering the markers unless they have changed.
If your application can do without complicated DOM objects and CSS styling, consider switching to a [symbol layer](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#symbol). Layers are rendered in WebGL and are much more performant than markers:
```tsx
const vehiclesGeoJSON = useMemo(() => {
return {
type: 'FeatureCollection',
features: vehicles.map(vehicle => turf.point(vehicle.coordinates, vehicle))
};
}, [vehicles]);
return (
<Map
{...viewState}
onMove={onMove}
mapStyle="mapbox://styles/mapbox/streets-v9" >
>
<Source id="vehicles" type="geojson" data={vehiclesGeoJSON}>
<Layer type="symbol"
layout={{
'icon-image': 'vehicle-icon',
'icon-size': 1,
'text-field': ['get', 'id']
}}
/>
</Source>
</Map>
);
```
## Finding out if a point is within the current viewport
There are some situations where you want to know if a point is currently visible on the map.
Checking this is simple and can be done like so:
```tsx
const mapRef = useRef<MapRef>();
const checkIfPositionInViewport = (lat, lng) => {
const bounds = mapRef.current.getBounds();
return bounds.contains([lng, lat]);
}
return <Map ref={mapRef} ... />
```
================================================
FILE: docs/table-of-contents.json
================================================
[
{
"type": "category",
"label": "Overview",
"items": [
"README",
"whats-new",
"upgrade-guide",
"contributing"
]
},
{
"type": "category",
"label": "Developer Guide",
"items": [
"get-started/get-started",
"get-started/mapbox-tokens",
"get-started/state-management",
"get-started/adding-custom-data",
"get-started/tips-and-tricks"
]
},
{
"type": "category",
"label": "API Reference",
"items": [
{
"type": "category",
"label": "Mapbox",
"items": [
"api-reference/mapbox/map",
"api-reference/mapbox/attribution-control",
"api-reference/mapbox/fullscreen-control",
"api-reference/mapbox/geolocate-control",
"api-reference/mapbox/layer",
"api-reference/mapbox/map-provider",
"api-reference/mapbox/marker",
"api-reference/mapbox/navigation-control",
"api-reference/mapbox/popup",
"api-reference/mapbox/scale-control",
"api-reference/mapbox/source",
"api-reference/mapbox/use-control",
"api-reference/mapbox/use-map",
"api-reference/mapbox/types"
]
},
{
"type": "category",
"label": "Maplibre",
"items": [
"api-reference/maplibre/map",
"api-reference/maplibre/attribution-control",
"api-reference/maplibre/fullscreen-control",
"api-reference/maplibre/geolocate-control",
"api-reference/maplibre/layer",
"api-reference/maplibre/logo-control",
"api-reference/maplibre/map-provider",
"api-reference/maplibre/marker",
"api-reference/maplibre/navigation-control",
"api-reference/maplibre/popup",
"api-reference/maplibre/scale-control",
"api-reference/maplibre/source",
"api-reference/maplibre/terrain-control",
"api-reference/maplibre/use-control",
"api-reference/maplibre/use-map",
"api-reference/maplibre/types"
]
}
]
}
]
================================================
FILE: docs/upgrade-guide.md
================================================
# Upgrade Guide
## Upgrading to v8.0
- All imports from `react-map-gl` should be replaced with one of the following endpoints:
+ If using with `mapbox-gl@>=3.5.0`: import from `react-map-gl/mapbox`
+ If using with `mapbox-gl@<3.5.0`: import from `react-map-gl/mapbox-legacy`
- `maplibre-gl@<=3` is no longer supported.
- Some TypeScript types have been renamed to align with the official types from the base map libraries:
| Old name | New name |
|----------|----------|
| `MapStyle` | `StyleSpecification` |
| `Fog` | `FogSpecification` |
| `Light` | `LightSpecification` |
| `Terrain` | `TerrainSpecification` |
| `Projection` | `ProjectionSpecification` |
| `*Layer` | `*LayerSpecification` |
| `*SourceRaw` | `*SourceSpecification` |
### MapLibre
#### Removed default for `RTLTextPlugin`
The default `RTLTextPlugin` loaded from mapbox.com has been removed to align with the default behavior of MapLibre.
To keep the previous behavior, specify the `pluginUrl` which was previously used or supply the plugin from any other source:
```tsx
<Map RTLTextPlugin="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js" />
```
## Upgrading to v7.1
- `maplibre-gl` users no longer need to install `mapbox-gl` or a placeholder package as dependency. Change your imports to the new endpoint `react-map-gl/maplibre`. Components imported from here do not require setting the `mapLib` prop, and use the types defined by `maplibre-gl`.
```tsx title="map-v7.0.tsx"
import Map from 'react-map-gl';
import maplibregl from 'maplibre-gl';
function App() {
return <Map
mapLib={maplibregl}
style={MAP_STYLE}
maplibreLogo // This will generate a TypeScript error because it's not defined in Mapbox options
/>;
}
```
```tsx title="map-v7.1.tsx"
import Map from 'react-map-gl/maplibre'; // <- mind the updated import
function App() {
return <Map
// mapLib is default to `import('maplibre-gl')`
style={MAP_STYLE}
maplibreLogo
/>
}
```
If you installed `mapbox-gl` from a placeholder such as `npm:empty-npm-package@^1.0.0` as suggested by the previous version's documentation, it should be removed from your package.json.
- The `@types/mapbox-gl` dependency has relaxed its version constraint. If you use `mapbox-gl` as the base map library, it's recommended to explicitly list `@types/mapbox-gl` in your package.json with a version matching that of `mapbox-gl` (v1 or v2). This package is no longer required by the non-mapbox code path, and may be further demoted to an optional peer dependency in a future release.
- If you use the `Map` component as a child of the `DeckGL` component from `deck.gl`, upgrade `deck.gl` to `>=8.9.18`.
## Upgrading to v7.0
v7 is a complete rewrite of the library. It is redesigned to be fast, lightweight, fully typed, to behave the same and expose the same APIs as the wrapped map library, and to provide the maximum compatibility with third-party plugins. To take advantages of these new features, you need to make some changes to your code that was previously depending on react-map-gl v5 and v6.
> If you are using react-map-gl controls (`Marker`, `Popup`, `NavigationControl` etc.) with deck.gl's `ContextProvider`, do not upgrade to this version. The old approach no longer works with v7. We are moving the support for this use case to a new project that does not depend on mapbox.
### Dependencies
- Add `mapbox-gl` (or a compatible fork) to your package.json. `react-map-gl` no longer lists a specific map renderer in its dependencies, so you are free to use it with Mapbox v1, v2 or Maplibre.
- `viewport-mercator-project` (an alias of `@math.gl/web-mercator`) is no longer a dependency. You can still install the library on the side as a utility for viewport-related math, but it's no longer required.
### Module exports
- `InteractiveMap` and `StaticMap` are removed. Instead, import `Map`.
- `setRTLTextPlugin` is removed. Use the `Map` component's `RTLTextPlugin` prop (default enabled).
- `MapController` is removed. v7.0 has removed its own implementation of user input handling in favor of the [native handlers](https://docs.mapbox.com/mapbox-gl-js/api/handlers/). If you are using a custom implementation of `MapController`, check if the native handlers offer options to address your application's needs.
- `MapContext` and `useMapControl` are removed. Check out the new API [useMap](./api-reference/mapbox/use-map.md) and [useControl](./api-reference/mapbox/use-control.md).
- The overlay components (`HTMLOverlay`, `CanvasOverlay` and `SVGOverlay`) are removed. Check out [this example](https://github.com/visgl/react-map-gl/tree/7.0-release/examples/custom-overlay) for implementing similar controls in your own application.
- `LinearInterpolator` and `FlyToInterpolator` are removed. Use `map.easeTo()` and `map.flyTo()` instead, see [this example](https://github.com/visgl/react-map-gl/tree/7.0-release/examples/viewport-animation).
### Map
[documentation](./api-reference/mapbox/map.md)
- Renamed props for better consistency with the wrapped library:
+ `mapboxApiAccessToken` is now `mapboxAccessToken`
+ `mapboxApiUrl` is now `baseApiUrl`
+ `preventStyleDiffing` (default `false`) is replaced with `styleDiffing` (default `true`)
- `mapStyle` should be explicitly specified. The default value has changed from `"mapbox://styles/mapbox/light-v9"` to an empty style.
- The following props are removed and apps should use `style` instead:
+ `width`
+ `height`
+ `visible`
- `onViewportChange`, `onViewStateChange` and `onInteractionStateChange` are removed. You can either use `Map` as an uncontrolled component with the new `initialViewState` prop, or if you need to manage the camera state externally (e.g. in Redux), use the `onMove` callback instead. See examples in [state management](./get-started/state-management.md).
- `transition*` props are removed. Use `map.easeTo()` and `map.flyTo()` instead, see [this example](https://github.com/visgl/react-map-gl/tree/7.0-release/examples/viewport-animation).
- `mapOptions` is removed. Almost all of the options for the native `Map` class are exposed as props.
- `onHover` is removed. Use `onMouseMove` or `onMouseEnter`.
- The event argument is changed for all interaction callbacks. See documentation for details.
- `getCursor` is removed as part of the effort to get `Map` behave the same as the native component. To set the cursor, use the `cursor` prop. Follow [this example](https://github.com/visgl/react-map-gl/tree/7.0-release/examples/custom-cursor) to change cursor on hover.
- `touchAction` and `eventRecognizerOptions` are removed. Check out the `cooperativeGestures` prop.
### Other components
- `capture*` props are removed.
- `*label` props are removed. Use `Map`'s `locale` prop.
- All map controls' props are now strictly aligned with their mapbox-gl counterparts. In heading this direction, we are able to remove a significant amount of custom code and have the components behave more predictably for developers switching from the native library. If your application is relying on an old feature that is no longer supported, please open a topic on [Discussion](https://github.com/visgl/react-map-gl/discussions) so we can review on a case-by-case basis.
## Upgrading to v5.3/v6.1
- `MapContext` is now an official API. The experimental `_MapContext` export will be removed in a future release.
- `react-virtualized-auto-sizer` is no longer a dependency.
- Inertia has been enabled by default on the map controller. To revert to the behavior in previous versions, set the [interaction options](https://github.com/visgl/react-map-gl/tree/6.1-release/docs/api-reference/interactive-map.md#interaction-options):
```js
const CONTROLLER_OPTS = {
dragPan: {inertia: 0},
dragRotate: {inertia: 0},
touchZoom: {inertia: 0}
};
<MapGL {...CONTROLLER_OPTS} ... />
```
- `Source` and `Layer` components no longer expose imperative methods via `ref` as part of the migration to functional components. This is to comply with the pattern recommended by the latest React.
+ If you used to call `sourceRef.getSource()`, it can be replaced with `mapRef().getMap().getSource(sourceId)`.
+ If you used to call `layerRef.getLayer()`, it can be replaced with `mapRef().getMap().getLayer(layerId)`.
## Upgrading to v6
- A valid Mapbox access token is always required.
- The default value of `InteractiveMap`'s `maxPitch` prop is changed to `85` from `60`.
- `mapbox-gl` v2 introduced a breaking change to the build system. Transpiling it may result in a crash in the production build with the message `m is not defined`. Find solutions in [this thread](https://github.com/mapbox/mapbox-gl-js/issues/10173).
## Upgrading to v4
- `onChangeViewport` is removed, use `onViewportChange` instead
- `Immutable.js` is no longer a dependency
- Export `experimental.MapControls` is removed, use `MapController` instead
- `InteractiveMap`'s `mapControls` prop is renamed to `controller`
- Removed support for the deprecated `interactive` property on the layer styles. Use the `interactiveLayerIds` prop to specify which layers are clickable.
## Upgrading to v3.2
- The latest mapbox-gl release requires stylesheet to be included at all times. See [Get Started](./get-started/get-started.md) for information about styling.
- Immutable.js is no longer a hard dependency and will be removed in the next major release. If you are importing immutable in your application, it is recommended that you explicitly list it in the application's dependencies.
## Upgrading to v3
v3 is a major upgrade of react-map-gl. While we have tried to gently deprecated any changed or removed features, a few breaking changes could not be avoided.
### Version Requirements
- The **Node Version Requirement** for **building** react-map-gl is now **>=v6.4.0**. Using prebuilt react-map-gl does **NOT** has this limitation. This is introduced by [Mapbox GL JS v0.38.0](https://github.com/mapbox/mapbox-gl-js/releases/tag/v0.38.0)
### MapGL Component
* **Two Map Components** - v3 now splits the Map component into two React components: `StaticMap` and `InteractiveMap`. `InteractiveMap` is the default export, and designed to be as compatible as possible with the v2 default component.
#### `onChangeViewport` callback now includes `width` and `height`.
The `viewport` parameter passed to the `onChangeViewport` callback now includes `width` and `height`. Application code that composed the `viewport` with `width` and `height` may have to be updated. Please double check your render code if you relied on this behavior.
```js
// BAD: 'width' and 'height' below will be overridden by what's in the 'viewport' object
<ReactMapGL width={500} height={400} {...viewport} />
// GOOD: 'width' and 'height' below will override the values in 'viewport'
<ReactMapGL {...viewport} width={500} height={400} />
```
### Overlays
* **Some Overlays Moved to Examples** - Some less frequently used overlays (`DraggablePointsOverlay`, `ChoroplethOverlay`, `ScatterplotOverlay`), have been moved to examples. Most users are now using mapbox styles or deck.gl layers and removing these overlays reduces the size of the react-map-gl library for the majority of users that don't need them. If you still use them, simply copy the overlay source file(s) into your application.
* **Overlays must be Children of the Map** - Overlays **must** now be rendered as children of the main `react-map-gl` component to automatically sync with the map viewport.
### `fitBounds` utility function
The `fitBounds` utility has been moved to the [math.gl](https://github.com/uber-web/math.gl) library. The function can now be called as follows:
```js
import WebMercatorViewport from 'viewport-mercator-project';
const viewport = new WebMercatorViewport({width: 600, height: 400});
const bound = viewport.fitBounds(
[[-73.9876, 40.7661], [-72.9876, 41.7661]],
{padding: 20, offset: [0, -40]}
);
// => bounds: instance of WebMercatorViewport
// {longitude: -
gitextract_r_hkj0e0/
├── .eslintignore
├── .eslintrc.cjs
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug-report.yml
│ │ ├── config.yml
│ │ └── feature-request.yml
│ ├── SECURITY.md
│ └── workflows/
│ ├── release.yml
│ ├── test.yml
│ └── website.yml
├── .gitignore
├── .nvmrc
├── .ocularrc.js
├── .prettierrc
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── TESTING.md
├── docs/
│ ├── .gitignore
│ ├── README.md
│ ├── api-reference/
│ │ ├── mapbox/
│ │ │ ├── attribution-control.md
│ │ │ ├── fullscreen-control.md
│ │ │ ├── geolocate-control.md
│ │ │ ├── layer.md
│ │ │ ├── map-provider.md
│ │ │ ├── map.md
│ │ │ ├── marker.md
│ │ │ ├── navigation-control.md
│ │ │ ├── popup.md
│ │ │ ├── scale-control.md
│ │ │ ├── source.md
│ │ │ ├── types.md
│ │ │ ├── use-control.md
│ │ │ └── use-map.md
│ │ └── maplibre/
│ │ ├── attribution-control.md
│ │ ├── fullscreen-control.md
│ │ ├── geolocate-control.md
│ │ ├── globe-control.md
│ │ ├── layer.md
│ │ ├── logo-control.md
│ │ ├── map-provider.md
│ │ ├── map.md
│ │ ├── marker.md
│ │ ├── navigation-control.md
│ │ ├── popup.md
│ │ ├── scale-control.md
│ │ ├── source.md
│ │ ├── terrain-control.md
│ │ ├── types.md
│ │ ├── use-control.md
│ │ └── use-map.md
│ ├── get-started/
│ │ ├── adding-custom-data.md
│ │ ├── get-started.md
│ │ ├── mapbox-tokens.md
│ │ ├── state-management.md
│ │ └── tips-and-tricks.md
│ ├── table-of-contents.json
│ ├── upgrade-guide.md
│ └── whats-new.md
├── examples/
│ ├── .data/
│ │ ├── bart-station.json
│ │ ├── cities.json
│ │ ├── feature-example-sf.json
│ │ ├── us-election-2016.json
│ │ └── us-income.geojson
│ ├── .eslintrc
│ ├── get-started/
│ │ ├── basic/
│ │ │ ├── README.md
│ │ │ ├── app.jsx
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ └── vite.config.js
│ │ ├── controlled/
│ │ │ ├── README.md
│ │ │ ├── app.jsx
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ └── vite.config.js
│ │ ├── hook/
│ │ │ ├── README.md
│ │ │ ├── app.jsx
│ │ │ ├── controls.jsx
│ │ │ ├── controls2.jsx
│ │ │ ├── index.html
│ │ │ ├── map.jsx
│ │ │ ├── package.json
│ │ │ └── vite.config.js
│ │ ├── maplibre/
│ │ │ ├── README.md
│ │ │ ├── app.jsx
│ │ │ ├── index.html
│ │ │ └── package.json
│ │ ├── nextjs/
│ │ │ ├── .gitignore
│ │ │ ├── README.md
│ │ │ ├── next.config.js
│ │ │ ├── package.json
│ │ │ └── pages/
│ │ │ ├── _app.js
│ │ │ └── index.js
│ │ └── redux/
│ │ ├── README.md
│ │ ├── app.jsx
│ │ ├── controls.jsx
│ │ ├── index.html
│ │ ├── map.jsx
│ │ ├── package.json
│ │ ├── store.js
│ │ └── vite.config.js
│ ├── mapbox/
│ │ ├── clusters/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── layers.ts
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── controls/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── pin.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── custom-cursor/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── custom-overlay/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── custom-overlay.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── deckgl-overlay/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ └── app.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── draggable-markers/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── pin.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── draw-polygon/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── draw-control.ts
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── filter/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── map-style.ts
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── geocoder/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── geocoder-control.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── geojson/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ ├── map-style.ts
│ │ │ │ └── utils.ts
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── geojson-animation/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── heatmap/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── map-style.ts
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── interaction/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── layers/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── map-style-basic-v8.json
│ │ ├── side-by-side/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── terrain/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ ├── viewport-animation/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ ├── tsconfig.json
│ │ │ └── vite.config.js
│ │ └── zoom-to-bounds/
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── app.tsx
│ │ │ ├── control-panel.tsx
│ │ │ └── map-style.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config.js
│ ├── maplibre/
│ │ ├── clusters/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── layers.ts
│ │ │ └── tsconfig.json
│ │ ├── controls/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── pin.tsx
│ │ │ └── tsconfig.json
│ │ ├── custom-cursor/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ └── tsconfig.json
│ │ ├── custom-overlay/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── custom-overlay.tsx
│ │ │ └── tsconfig.json
│ │ ├── deckgl-overlay/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ └── app.tsx
│ │ │ └── tsconfig.json
│ │ ├── draggable-markers/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── pin.tsx
│ │ │ └── tsconfig.json
│ │ ├── draw-polygon/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── draw-control.ts
│ │ │ └── tsconfig.json
│ │ ├── filter/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── map-style.ts
│ │ │ └── tsconfig.json
│ │ ├── geocoder/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── geocoder-control.tsx
│ │ │ └── tsconfig.json
│ │ ├── geojson/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ ├── map-style.ts
│ │ │ │ └── utils.ts
│ │ │ └── tsconfig.json
│ │ ├── geojson-animation/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ └── tsconfig.json
│ │ ├── globe/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ └── tsconfig.json
│ │ ├── heatmap/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ ├── control-panel.tsx
│ │ │ │ └── map-style.ts
│ │ │ └── tsconfig.json
│ │ ├── interaction/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ └── tsconfig.json
│ │ ├── layers/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ └── tsconfig.json
│ │ ├── map-style-basic-v8.json
│ │ ├── side-by-side/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ └── tsconfig.json
│ │ ├── terrain/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ └── tsconfig.json
│ │ ├── viewport-animation/
│ │ │ ├── README.md
│ │ │ ├── index.html
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── app.tsx
│ │ │ │ └── control-panel.tsx
│ │ │ └── tsconfig.json
│ │ └── zoom-to-bounds/
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── app.tsx
│ │ │ ├── control-panel.tsx
│ │ │ └── map-style.tsx
│ │ └── tsconfig.json
│ └── vite.config.local.js
├── index.html
├── lerna.json
├── modules/
│ ├── main/
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── mapbox-legacy/
│ │ │ │ ├── components/
│ │ │ │ │ ├── attribution-control.ts
│ │ │ │ │ ├── fullscreen-control.ts
│ │ │ │ │ ├── geolocate-control.ts
│ │ │ │ │ ├── layer.ts
│ │ │ │ │ ├── map.tsx
│ │ │ │ │ ├── marker.ts
│ │ │ │ │ ├── navigation-control.ts
│ │ │ │ │ ├── popup.ts
│ │ │ │ │ ├── scale-control.ts
│ │ │ │ │ ├── source.ts
│ │ │ │ │ ├── use-control.ts
│ │ │ │ │ └── use-map.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── mapbox/
│ │ │ │ │ ├── create-ref.ts
│ │ │ │ │ └── mapbox.ts
│ │ │ │ ├── types/
│ │ │ │ │ ├── common.ts
│ │ │ │ │ ├── events.ts
│ │ │ │ │ ├── internal.ts
│ │ │ │ │ ├── lib.ts
│ │ │ │ │ └── style-spec.ts
│ │ │ │ └── utils/
│ │ │ │ ├── apply-react-style.ts
│ │ │ │ ├── assert.ts
│ │ │ │ ├── deep-equal.ts
│ │ │ │ ├── set-globals.ts
│ │ │ │ ├── style-utils.ts
│ │ │ │ ├── transform.ts
│ │ │ │ └── use-isomorphic-layout-effect.ts
│ │ │ ├── mapbox.ts
│ │ │ └── maplibre.ts
│ │ ├── test/
│ │ │ ├── components/
│ │ │ │ ├── controls.spec.jsx
│ │ │ │ ├── index.js
│ │ │ │ ├── layer.spec.jsx
│ │ │ │ ├── map.spec.jsx
│ │ │ │ ├── marker.spec.jsx
│ │ │ │ ├── popup.spec.jsx
│ │ │ │ ├── source.spec.jsx
│ │ │ │ └── use-map.spec.jsx
│ │ │ └── utils/
│ │ │ ├── apply-react-style.spec.js
│ │ │ ├── deep-equal.spec.js
│ │ │ ├── index.js
│ │ │ ├── mapbox-gl-mock/
│ │ │ │ ├── edge_insets.js
│ │ │ │ ├── lng_lat.js
│ │ │ │ ├── lng_lat_bounds.js
│ │ │ │ ├── transform.js
│ │ │ │ └── util.js
│ │ │ ├── style-utils.spec.js
│ │ │ ├── test-utils.jsx
│ │ │ └── transform.spec.js
│ │ └── tsconfig.json
│ ├── react-mapbox/
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── components/
│ │ │ │ ├── attribution-control.ts
│ │ │ │ ├── fullscreen-control.ts
│ │ │ │ ├── geolocate-control.ts
│ │ │ │ ├── layer.ts
│ │ │ │ ├── map.tsx
│ │ │ │ ├── marker.ts
│ │ │ │ ├── navigation-control.ts
│ │ │ │ ├── popup.ts
│ │ │ │ ├── scale-control.ts
│ │ │ │ ├── source.ts
│ │ │ │ ├── use-control.ts
│ │ │ │ └── use-map.tsx
│ │ │ ├── index.ts
│ │ │ ├── mapbox/
│ │ │ │ ├── create-ref.ts
│ │ │ │ ├── mapbox.ts
│ │ │ │ └── proxy-transform.ts
│ │ │ ├── types/
│ │ │ │ ├── common.ts
│ │ │ │ ├── events.ts
│ │ │ │ ├── internal.ts
│ │ │ │ ├── lib.ts
│ │ │ │ └── style-spec.ts
│ │ │ └── utils/
│ │ │ ├── apply-react-style.ts
│ │ │ ├── assert.ts
│ │ │ ├── compare-class-names.ts
│ │ │ ├── deep-equal.ts
│ │ │ ├── set-globals.ts
│ │ │ ├── style-utils.ts
│ │ │ ├── transform.ts
│ │ │ └── use-isomorphic-layout-effect.ts
│ │ ├── test/
│ │ │ ├── components/
│ │ │ │ ├── controls.spec.jsx
│ │ │ │ ├── index.js
│ │ │ │ ├── layer.spec.jsx
│ │ │ │ ├── map.spec.jsx
│ │ │ │ ├── marker.spec.jsx
│ │ │ │ ├── popup.spec.jsx
│ │ │ │ ├── source.spec.jsx
│ │ │ │ └── use-map.spec.jsx
│ │ │ └── utils/
│ │ │ ├── apply-react-style.spec.js
│ │ │ ├── compare-class-names.spec.js
│ │ │ ├── deep-equal.spec.js
│ │ │ ├── index.js
│ │ │ ├── mapbox-gl-mock/
│ │ │ │ ├── edge_insets.js
│ │ │ │ ├── lng_lat.js
│ │ │ │ ├── lng_lat_bounds.js
│ │ │ │ ├── transform.js
│ │ │ │ └── util.js
│ │ │ ├── style-utils.spec.js
│ │ │ ├── test-utils.jsx
│ │ │ ├── token.js
│ │ │ └── transform.spec.js
│ │ └── tsconfig.json
│ └── react-maplibre/
│ ├── package.json
│ ├── src/
│ │ ├── components/
│ │ │ ├── attribution-control.ts
│ │ │ ├── fullscreen-control.ts
│ │ │ ├── geolocate-control.ts
│ │ │ ├── globe-control.ts
│ │ │ ├── layer.ts
│ │ │ ├── logo-control.ts
│ │ │ ├── map.tsx
│ │ │ ├── marker.ts
│ │ │ ├── navigation-control.ts
│ │ │ ├── popup.ts
│ │ │ ├── scale-control.ts
│ │ │ ├── source.ts
│ │ │ ├── terrain-control.ts
│ │ │ ├── use-control.ts
│ │ │ └── use-map.tsx
│ │ ├── index.ts
│ │ ├── maplibre/
│ │ │ ├── create-ref.ts
│ │ │ └── maplibre.ts
│ │ ├── types/
│ │ │ ├── common.ts
│ │ │ ├── events.ts
│ │ │ ├── internal.ts
│ │ │ ├── lib.ts
│ │ │ └── style-spec.ts
│ │ └── utils/
│ │ ├── apply-react-style.ts
│ │ ├── assert.ts
│ │ ├── compare-class-names.ts
│ │ ├── deep-equal.ts
│ │ ├── set-globals.ts
│ │ ├── style-utils.ts
│ │ ├── transform.ts
│ │ └── use-isomorphic-layout-effect.ts
│ ├── test/
│ │ ├── .eslintrc
│ │ ├── components/
│ │ │ ├── controls.spec.jsx
│ │ │ ├── index.js
│ │ │ ├── layer.spec.jsx
│ │ │ ├── map.spec.jsx
│ │ │ ├── marker.spec.jsx
│ │ │ ├── popup.spec.jsx
│ │ │ ├── source.spec.jsx
│ │ │ └── use-map.spec.jsx
│ │ └── utils/
│ │ ├── apply-react-style.spec.js
│ │ ├── compare-class-names.spec.js
│ │ ├── deep-equal.spec.js
│ │ ├── index.js
│ │ ├── style-utils.spec.js
│ │ ├── test-utils.jsx
│ │ └── transform.spec.js
│ └── tsconfig.json
├── package.json
├── scripts/
│ └── update-release-branch.sh
├── test/
│ ├── .eslintrc
│ ├── apps/
│ │ └── reuse-maps/
│ │ ├── index.html
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── app.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config.js
│ ├── browser.js
│ ├── data/
│ │ ├── glyph/
│ │ │ └── UberMove/
│ │ │ └── 0-255
│ │ ├── sprite/
│ │ │ └── tools/
│ │ │ └── 14/
│ │ │ └── sprites.json
│ │ ├── style.json
│ │ └── tile/
│ │ └── v1/
│ │ └── 12/
│ │ └── 655/
│ │ ├── 1582/
│ │ │ ├── COMPOSITE
│ │ │ └── POI
│ │ └── 1583/
│ │ ├── COMPOSITE
│ │ └── POI
│ ├── node.js
│ ├── render/
│ │ ├── index.jsx
│ │ └── test-cases.jsx
│ ├── size/
│ │ ├── mapbox-legacy.js
│ │ ├── mapbox.js
│ │ └── maplibre.js
│ ├── src/
│ │ └── exports.ts
│ └── test-utils.js
├── tsconfig.json
└── website/
├── .eslintignore
├── .gitignore
├── babel.config.js
├── docusaurus.config.js
├── package.json
└── src/
├── examples/
│ ├── index.mdx
│ ├── mapbox/
│ │ ├── clusters.mdx
│ │ ├── controls.mdx
│ │ ├── custom-cursor.mdx
│ │ ├── draggable-markers.mdx
│ │ ├── draw-polygon.mdx
│ │ ├── filter.mdx
│ │ ├── geocoder.mdx
│ │ ├── geojson-animation.mdx
│ │ ├── geojson.mdx
│ │ ├── heatmap.mdx
│ │ ├── interaction.mdx
│ │ ├── layers.mdx
│ │ ├── side-by-side.mdx
│ │ ├── terrain.mdx
│ │ ├── viewport-animation.mdx
│ │ └── zoom-to-bounds.mdx
│ ├── maplibre/
│ │ ├── clusters.mdx
│ │ ├── controls.mdx
│ │ ├── custom-cursor.mdx
│ │ ├── draggable-markers.mdx
│ │ ├── draw-polygon.mdx
│ │ ├── filter.mdx
│ │ ├── geocoder.mdx
│ │ ├── geojson-animation.mdx
│ │ ├── geojson.mdx
│ │ ├── heatmap.mdx
│ │ ├── interaction.mdx
│ │ ├── layers.mdx
│ │ ├── side-by-side.mdx
│ │ ├── terrain.mdx
│ │ ├── viewport-animation.mdx
│ │ └── zoom-to-bounds.mdx
│ └── table-of-contents.json
├── mapbox-gl.css
├── maplibre-gl.css
├── pages/
│ └── index.jsx
└── styles.css
SYMBOL INDEX (663 symbols across 206 files)
FILE: examples/get-started/basic/app.jsx
constant MAPBOX_TOKEN (line 8) | const MAPBOX_TOKEN = '';
function Root (line 10) | function Root() {
FILE: examples/get-started/controlled/app.jsx
constant MAPBOX_TOKEN (line 8) | const MAPBOX_TOKEN = '';
function Root (line 10) | function Root() {
FILE: examples/get-started/hook/app.jsx
function Root (line 9) | function Root() {
FILE: examples/get-started/hook/controls.jsx
function Controls (line 6) | function Controls() {
FILE: examples/get-started/hook/controls2.jsx
function Controls2 (line 3) | function Controls2() {
FILE: examples/get-started/hook/map.jsx
constant MAPBOX_TOKEN (line 8) | const MAPBOX_TOKEN = '';
function MapView (line 10) | function MapView() {
FILE: examples/get-started/maplibre/app.jsx
function Root (line 8) | function Root() {
FILE: examples/get-started/nextjs/pages/_app.js
function MyApp (line 3) | function MyApp({Component, pageProps}) {
FILE: examples/get-started/nextjs/pages/index.js
constant MAPBOX_TOKEN (line 7) | const MAPBOX_TOKEN = '';
function Home (line 9) | function Home() {
FILE: examples/get-started/redux/app.jsx
function Root (line 10) | function Root() {
FILE: examples/get-started/redux/controls.jsx
function Controls (line 6) | function Controls() {
FILE: examples/get-started/redux/map.jsx
constant MAPBOX_TOKEN (line 9) | const MAPBOX_TOKEN = '';
function MapView (line 11) | function MapView() {
FILE: examples/get-started/redux/store.js
function mapStateReducer (line 3) | function mapStateReducer(state, action) {
FILE: examples/mapbox/clusters/src/app.tsx
constant MAPBOX_TOKEN (line 12) | const MAPBOX_TOKEN = '';
function App (line 14) | function App() {
function renderToDom (line 68) | function renderToDom(container) {
FILE: examples/mapbox/clusters/src/control-panel.tsx
function ControlPanel (line 3) | function ControlPanel() {
FILE: examples/mapbox/controls/src/app.tsx
constant TOKEN (line 18) | const TOKEN = '';
function App (line 20) | function App() {
function renderToDom (line 90) | function renderToDom(container) {
FILE: examples/mapbox/controls/src/control-panel.tsx
function ControlPanel (line 3) | function ControlPanel() {
FILE: examples/mapbox/controls/src/pin.tsx
constant ICON (line 3) | const ICON = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-...
function Pin (line 13) | function Pin({size = 20}) {
FILE: examples/mapbox/custom-cursor/src/app.tsx
constant MAPBOX_TOKEN (line 9) | const MAPBOX_TOKEN = '';
function App (line 19) | function App() {
function renderToDom (line 55) | function renderToDom(container) {
FILE: examples/mapbox/custom-cursor/src/control-panel.tsx
function getLayerFilter (line 12) | function getLayerFilter(categories, layerId) {
function Checkbox (line 21) | function Checkbox({name, value, onChange}) {
function StyleControls (line 30) | function StyleControls(props) {
FILE: examples/mapbox/custom-overlay/src/app.tsx
constant TOKEN (line 14) | const TOKEN = '';
type CountyElectionData (line 17) | type CountyElectionData = {
function App (line 25) | function App() {
function PieCharts (line 47) | function PieCharts({map, data}: {map?: MapboxMap; data: any[]}) {
function makePieChart (line 109) | function makePieChart(datum: CountyElectionData, onHover: (target: Count...
function renderToDom (line 139) | function renderToDom(container) {
FILE: examples/mapbox/custom-overlay/src/control-panel.tsx
constant COLORS (line 3) | const COLORS = ['#2b83ba', '#c7191c', '#c8c8cf'];
function ControlPanel (line 12) | function ControlPanel() {
FILE: examples/mapbox/custom-overlay/src/custom-overlay.tsx
class OverlayControl (line 9) | class OverlayControl implements IControl {
method constructor (line 14) | constructor(redraw: () => void) {
method onAdd (line 18) | onAdd(map) {
method onRemove (line 27) | onRemove() {
method getMap (line 33) | getMap() {
method getElement (line 37) | getElement() {
function CustomOverlay (line 45) | function CustomOverlay(props: {children: React.ReactElement}) {
FILE: examples/mapbox/deckgl-overlay/src/app.tsx
constant TOKEN (line 8) | const TOKEN = '';
function DeckGLOverlay (line 17) | function DeckGLOverlay(props: DeckProps) {
type DataT (line 25) | type DataT = {
function App (line 38) | function App() {
function getTooltip (line 62) | function getTooltip(info: PickingInfo) {
function renderToDom (line 67) | function renderToDom(container) {
FILE: examples/mapbox/draggable-markers/src/app.tsx
constant TOKEN (line 11) | const TOKEN = '';
function App (line 19) | function App() {
function renderToDom (line 69) | function renderToDom(container) {
FILE: examples/mapbox/draggable-markers/src/control-panel.tsx
function round5 (line 6) | function round5(value) {
function ControlPanel (line 10) | function ControlPanel(props: {events: Record<string, LngLat>}) {
FILE: examples/mapbox/draggable-markers/src/pin.tsx
constant ICON (line 3) | const ICON = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-...
function Pin (line 12) | function Pin(props) {
FILE: examples/mapbox/draw-polygon/src/app.tsx
constant TOKEN (line 9) | const TOKEN = '';
function App (line 11) | function App() {
function renderToDom (line 63) | function renderToDom(container) {
FILE: examples/mapbox/draw-polygon/src/control-panel.tsx
function ControlPanel (line 4) | function ControlPanel(props) {
FILE: examples/mapbox/draw-polygon/src/draw-control.ts
type DrawControlProps (line 6) | type DrawControlProps = ConstructorParameters<typeof MapboxDraw>[0] & {
function DrawControl (line 14) | function DrawControl(props: DrawControlProps) {
FILE: examples/mapbox/filter/src/app.tsx
constant MAPBOX_TOKEN (line 9) | const MAPBOX_TOKEN = '';
function App (line 11) | function App() {
function renderToDom (line 64) | function renderToDom(container) {
FILE: examples/mapbox/filter/src/control-panel.tsx
function ControlPanel (line 3) | function ControlPanel() {
FILE: examples/mapbox/geocoder/src/app.tsx
constant TOKEN (line 9) | const TOKEN = process.env.MapboxAccessToken;
function App (line 11) | function App() {
function renderToDom (line 30) | function renderToDom(container) {
FILE: examples/mapbox/geocoder/src/control-panel.tsx
function ControlPanel (line 3) | function ControlPanel() {
FILE: examples/mapbox/geocoder/src/geocoder-control.tsx
type GeocoderControlProps (line 8) | type GeocoderControlProps = Omit<GeocoderOptions, 'accessToken' | 'mapbo...
function GeocoderControl (line 21) | function GeocoderControl(props: GeocoderControlProps) {
FILE: examples/mapbox/geojson-animation/src/app.tsx
constant MAPBOX_TOKEN (line 10) | const MAPBOX_TOKEN = '';
function pointOnCircle (line 21) | function pointOnCircle({center, angle, radius}) {
function App (line 28) | function App() {
function renderToDom (line 60) | function renderToDom(container) {
FILE: examples/mapbox/geojson-animation/src/control-panel.tsx
function ControlPanel (line 3) | function ControlPanel() {
FILE: examples/mapbox/geojson/src/app.tsx
constant MAPBOX_TOKEN (line 10) | const MAPBOX_TOKEN = '';
function App (line 12) | function App() {
function renderToDom (line 72) | function renderToDom(container) {
FILE: examples/mapbox/geojson/src/control-panel.tsx
function ControlPanel (line 3) | function ControlPanel(props) {
FILE: examples/mapbox/geojson/src/utils.ts
function updatePercentiles (line 6) | function updatePercentiles(
FILE: examples/mapbox/heatmap/src/app.tsx
constant MAPBOX_TOKEN (line 8) | const MAPBOX_TOKEN = '';
function filterFeaturesByDay (line 10) | function filterFeaturesByDay(featureCollection, time) {
function App (line 26) | function App() {
function renderToDom (line 83) | function renderToDom(container) {
FILE: examples/mapbox/heatmap/src/control-panel.tsx
function formatTime (line 3) | function formatTime(time) {
function ControlPanel (line 8) | function ControlPanel(props) {
FILE: examples/mapbox/heatmap/src/map-style.ts
constant MAX_ZOOM_LEVEL (line 3) | const MAX_ZOOM_LEVEL = 9;
FILE: examples/mapbox/interaction/src/app.tsx
constant MAPBOX_TOKEN (line 7) | const MAPBOX_TOKEN = '';
function App (line 17) | function App() {
function renderToDom (line 55) | function renderToDom(container) {
FILE: examples/mapbox/interaction/src/control-panel.tsx
function formatSettingName (line 4) | function formatSettingName(name) {
function Checkbox (line 8) | function Checkbox({name, value, onChange}) {
function NumericInput (line 17) | function NumericInput({name, value, onChange}) {
function ControlPanel (line 30) | function ControlPanel(props) {
FILE: examples/mapbox/layers/src/app.tsx
constant MAPBOX_TOKEN (line 7) | const MAPBOX_TOKEN = '';
function App (line 9) | function App() {
function renderToDom (line 30) | function renderToDom(container) {
FILE: examples/mapbox/layers/src/control-panel.tsx
function getMapStyle (line 29) | function getMapStyle({visibility, color}) {
function StyleControls (line 48) | function StyleControls(props) {
FILE: examples/mapbox/side-by-side/src/app.tsx
constant TOKEN (line 9) | const TOKEN = '';
function App (line 23) | function App() {
function renderToDom (line 79) | function renderToDom(container) {
FILE: examples/mapbox/side-by-side/src/control-panel.tsx
type Mode (line 4) | type Mode = 'side-by-side' | 'split-screen';
function ControlPanel (line 6) | function ControlPanel(props: {mode: Mode; onModeChange: (newMode: Mode) ...
FILE: examples/mapbox/terrain/src/app.tsx
constant TOKEN (line 9) | const TOKEN = '';
function App (line 21) | function App() {
function renderToDom (line 51) | function renderToDom(container) {
FILE: examples/mapbox/terrain/src/control-panel.tsx
function ControlPanel (line 3) | function ControlPanel() {
FILE: examples/mapbox/viewport-animation/src/app.tsx
constant MAPBOX_TOKEN (line 8) | const MAPBOX_TOKEN = '';
function App (line 18) | function App() {
function renderToDom (line 38) | function renderToDom(container) {
FILE: examples/mapbox/viewport-animation/src/control-panel.tsx
function ControlPanel (line 5) | function ControlPanel(props) {
FILE: examples/mapbox/zoom-to-bounds/src/app.tsx
constant TOKEN (line 12) | const TOKEN = '';
function App (line 14) | function App() {
function renderToDom (line 52) | function renderToDom(container) {
FILE: examples/mapbox/zoom-to-bounds/src/control-panel.tsx
function ControlPanel (line 3) | function ControlPanel() {
FILE: examples/maplibre/clusters/src/app.tsx
function App (line 12) | function App() {
function renderToDom (line 65) | function renderToDom(container) {
FILE: examples/maplibre/clusters/src/control-panel.tsx
function ControlPanel (line 3) | function ControlPanel() {
FILE: examples/maplibre/controls/src/app.tsx
function App (line 19) | function App() {
function renderToDom (line 88) | function renderToDom(container) {
FILE: examples/maplibre/controls/src/control-panel.tsx
function ControlPanel (line 3) | function ControlPanel() {
FILE: examples/maplibre/controls/src/pin.tsx
constant ICON (line 3) | const ICON = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-...
function Pin (line 13) | function Pin({size = 20}) {
FILE: examples/maplibre/custom-cursor/src/app.tsx
function App (line 17) | function App() {
function renderToDom (line 52) | function renderToDom(container) {
FILE: examples/maplibre/custom-cursor/src/control-panel.tsx
function getLayerFilter (line 12) | function getLayerFilter(categories, layerId) {
function Checkbox (line 21) | function Checkbox({name, value, onChange}) {
function StyleControls (line 30) | function StyleControls(props) {
FILE: examples/maplibre/custom-overlay/src/app.tsx
type CountyElectionData (line 15) | type CountyElectionData = {
function App (line 23) | function App() {
function PieCharts (line 44) | function PieCharts({map, data}: {map?: MaplibreMap; data: any[]}) {
function makePieChart (line 106) | function makePieChart(datum: CountyElectionData, onHover: (target: Count...
function renderToDom (line 136) | function renderToDom(container) {
FILE: examples/maplibre/custom-overlay/src/control-panel.tsx
constant COLORS (line 3) | const COLORS = ['#2b83ba', '#c7191c', '#c8c8cf'];
function ControlPanel (line 12) | function ControlPanel() {
FILE: examples/maplibre/custom-overlay/src/custom-overlay.tsx
class OverlayControl (line 8) | class OverlayControl implements IControl {
method constructor (line 13) | constructor(redraw: () => void) {
method onAdd (line 17) | onAdd(map) {
method onRemove (line 26) | onRemove() {
method getMap (line 32) | getMap() {
method getElement (line 36) | getElement() {
function CustomOverlay (line 44) | function CustomOverlay(props: {children: React.ReactElement}) {
FILE: examples/maplibre/deckgl-overlay/src/app.tsx
function DeckGLOverlay (line 15) | function DeckGLOverlay(props: DeckProps) {
type DataT (line 23) | type DataT = {
function App (line 36) | function App() {
function getTooltip (line 59) | function getTooltip(info: PickingInfo) {
function renderToDom (line 64) | function renderToDom(container) {
FILE: examples/maplibre/draggable-markers/src/app.tsx
function App (line 17) | function App() {
function renderToDom (line 66) | function renderToDom(container) {
FILE: examples/maplibre/draggable-markers/src/control-panel.tsx
function round5 (line 6) | function round5(value) {
function ControlPanel (line 10) | function ControlPanel(props: {events: Record<string, LngLat>}) {
FILE: examples/maplibre/draggable-markers/src/pin.tsx
constant ICON (line 3) | const ICON = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-...
function Pin (line 12) | function Pin(props) {
FILE: examples/maplibre/draw-polygon/src/app.tsx
function App (line 11) | function App() {
function renderToDom (line 62) | function renderToDom(container) {
FILE: examples/maplibre/draw-polygon/src/control-panel.tsx
function ControlPanel (line 4) | function ControlPanel(props) {
FILE: examples/maplibre/draw-polygon/src/draw-control.ts
type DrawControlProps (line 6) | type DrawControlProps = ConstructorParameters<typeof MapboxDraw>[0] & {
function DrawControl (line 14) | function DrawControl(props: DrawControlProps) {
FILE: examples/maplibre/filter/src/app.tsx
function App (line 9) | function App() {
function renderToDom (line 64) | function renderToDom(container) {
FILE: examples/maplibre/filter/src/control-panel.tsx
function ControlPanel (line 3) | function ControlPanel() {
FILE: examples/maplibre/geocoder/src/app.tsx
function App (line 10) | function App() {
function renderToDom (line 28) | function renderToDom(container) {
FILE: examples/maplibre/geocoder/src/control-panel.tsx
function ControlPanel (line 3) | function ControlPanel() {
FILE: examples/maplibre/geocoder/src/geocoder-control.tsx
type GeocoderControlProps (line 10) | type GeocoderControlProps = Omit<MaplibreGeocoderOptions, 'maplibregl' |...
function GeocoderControl (line 59) | function GeocoderControl(props: GeocoderControlProps) {
FILE: examples/maplibre/geojson-animation/src/app.tsx
function pointOnCircle (line 19) | function pointOnCircle({center, angle, radius}) {
function App (line 26) | function App() {
function renderToDom (line 57) | function renderToDom(container) {
FILE: examples/maplibre/geojson-animation/src/control-panel.tsx
function ControlPanel (line 3) | function ControlPanel() {
FILE: examples/maplibre/geojson/src/app.tsx
function App (line 10) | function App() {
function renderToDom (line 69) | function renderToDom(container) {
FILE: examples/maplibre/geojson/src/control-panel.tsx
function ControlPanel (line 3) | function ControlPanel(props) {
FILE: examples/maplibre/geojson/src/utils.ts
function updatePercentiles (line 6) | function updatePercentiles(
FILE: examples/maplibre/globe/src/app.tsx
function App (line 7) | function App() {
function renderToDom (line 25) | function renderToDom(container) {
FILE: examples/maplibre/globe/src/control-panel.tsx
function ControlPanel (line 3) | function ControlPanel() {
FILE: examples/maplibre/heatmap/src/app.tsx
function filterFeaturesByDay (line 8) | function filterFeaturesByDay(featureCollection, time) {
function App (line 24) | function App() {
function renderToDom (line 80) | function renderToDom(container) {
FILE: examples/maplibre/heatmap/src/control-panel.tsx
function formatTime (line 3) | function formatTime(time) {
function ControlPanel (line 8) | function ControlPanel(props) {
FILE: examples/maplibre/heatmap/src/map-style.ts
constant MAX_ZOOM_LEVEL (line 3) | const MAX_ZOOM_LEVEL = 9;
FILE: examples/maplibre/interaction/src/app.tsx
function App (line 15) | function App() {
function renderToDom (line 52) | function renderToDom(container) {
FILE: examples/maplibre/interaction/src/control-panel.tsx
function formatSettingName (line 4) | function formatSettingName(name) {
function Checkbox (line 8) | function Checkbox({name, value, onChange}) {
function NumericInput (line 17) | function NumericInput({name, value, onChange}) {
function ControlPanel (line 30) | function ControlPanel(props) {
FILE: examples/maplibre/layers/src/app.tsx
function App (line 7) | function App() {
function renderToDom (line 27) | function renderToDom(container) {
FILE: examples/maplibre/layers/src/control-panel.tsx
function getMapStyle (line 29) | function getMapStyle({visibility, color}) {
function StyleControls (line 48) | function StyleControls(props) {
FILE: examples/maplibre/side-by-side/src/app.tsx
function App (line 21) | function App() {
function renderToDom (line 65) | function renderToDom(container) {
FILE: examples/maplibre/side-by-side/src/control-panel.tsx
type Mode (line 4) | type Mode = 'side-by-side' | 'split-screen';
function ControlPanel (line 6) | function ControlPanel(props: {mode: Mode; onModeChange: (newMode: Mode) ...
FILE: examples/maplibre/terrain/src/app.tsx
function App (line 20) | function App() {
function renderToDom (line 61) | function renderToDom(container) {
FILE: examples/maplibre/terrain/src/control-panel.tsx
function ControlPanel (line 3) | function ControlPanel() {
FILE: examples/maplibre/viewport-animation/src/app.tsx
function App (line 16) | function App() {
function renderToDom (line 35) | function renderToDom(container) {
FILE: examples/maplibre/viewport-animation/src/control-panel.tsx
function ControlPanel (line 5) | function ControlPanel(props) {
FILE: examples/maplibre/zoom-to-bounds/src/app.tsx
function App (line 12) | function App() {
function renderToDom (line 49) | function renderToDom(container) {
FILE: examples/maplibre/zoom-to-bounds/src/control-panel.tsx
function ControlPanel (line 3) | function ControlPanel() {
FILE: modules/main/src/mapbox-legacy/components/attribution-control.ts
type AttributionControlProps (line 8) | type AttributionControlProps = AttributionControlOptions & {
function _AttributionControl (line 15) | function _AttributionControl(props: AttributionControlProps) {
FILE: modules/main/src/mapbox-legacy/components/fullscreen-control.ts
type FullscreenControlProps (line 9) | type FullscreenControlProps = Omit<FullscreenControlOptions, 'container'...
function _FullscreenControl (line 19) | function _FullscreenControl(props: FullscreenControlProps) {
FILE: modules/main/src/mapbox-legacy/components/geolocate-control.ts
type GeolocateControlProps (line 13) | type GeolocateControlProps = GeolocateControlOptions & {
function _GeolocateControl (line 32) | function _GeolocateControl(props: GeolocateControlProps, ref: React.Ref<...
FILE: modules/main/src/mapbox-legacy/components/layer.ts
type OptionalId (line 11) | type OptionalId<T> = T extends {id: string} ? Omit<T, 'id'> & {id?: stri...
type OptionalSource (line 12) | type OptionalSource<T> = T extends {source: string} ? Omit<T, 'source'> ...
type LayerProps (line 14) | type LayerProps = (OptionalSource<OptionalId<LayerSpecification>> | Cust...
function updateLayer (line 20) | function updateLayer(map: MapInstance, id: string, props: LayerProps, pr...
function createLayer (line 70) | function createLayer(map: MapInstance, id: string, props: LayerProps) {
function Layer (line 85) | function Layer(props: LayerProps) {
FILE: modules/main/src/mapbox-legacy/components/map.tsx
type MapContextValue (line 13) | type MapContextValue = {
type MapInitOptions (line 20) | type MapInitOptions = Omit<
type MapProps (line 25) | type MapProps = MapInitOptions &
function _Map (line 37) | function _Map(props: MapProps, ref: React.Ref<MapRef>) {
FILE: modules/main/src/mapbox-legacy/components/marker.ts
type MarkerProps (line 13) | type MarkerProps = MarkerOptions & {
FILE: modules/main/src/mapbox-legacy/components/navigation-control.ts
type NavigationControlProps (line 8) | type NavigationControlProps = NavigationControlOptions & {
function _NavigationControl (line 15) | function _NavigationControl(props: NavigationControlProps) {
FILE: modules/main/src/mapbox-legacy/components/popup.ts
type PopupProps (line 13) | type PopupProps = PopupOptions & {
function getClassList (line 28) | function getClassList(className: string) {
type PopupInstance (line 32) | type PopupInstance = _PopupInstance & {
FILE: modules/main/src/mapbox-legacy/components/scale-control.ts
type ScaleControlProps (line 8) | type ScaleControlProps = ScaleControlOptions & {
function _ScaleControl (line 15) | function _ScaleControl(props: ScaleControlProps) {
FILE: modules/main/src/mapbox-legacy/components/source.ts
type SourceProps (line 19) | type SourceProps = SourceSpecification & {
function createSource (line 26) | function createSource(map: MapInstance, id: string, props: SourceProps) {
function updateSource (line 40) | function updateSource(source: AnySourceImplementation, props: SourceProp...
function Source (line 80) | function Source(props: SourceProps) {
FILE: modules/main/src/mapbox-legacy/components/use-control.ts
type ControlOptions (line 6) | type ControlOptions = {
function useControl (line 28) | function useControl<T extends IControl>(
FILE: modules/main/src/mapbox-legacy/components/use-map.tsx
type MountedMapsContextValue (line 7) | type MountedMapsContextValue = {
type MapCollection (line 54) | type MapCollection = {
function useMap (line 59) | function useMap(): MapCollection {
FILE: modules/main/src/mapbox-legacy/mapbox/create-ref.ts
type MapRef (line 31) | type MapRef = {
function createRef (line 35) | function createRef(mapInstance: Mapbox): MapRef | null {
function getMethodNames (line 92) | function getMethodNames(obj: Object) {
FILE: modules/main/src/mapbox-legacy/mapbox/mapbox.ts
type MapboxProps (line 36) | type MapboxProps = Partial<ViewState> &
constant DEFAULT_STYLE (line 90) | const DEFAULT_STYLE = {version: 8, sources: {}, layers: []} as StyleSpec...
class Mapbox (line 163) | class Mapbox {
method constructor (line 196) | constructor(
method map (line 206) | get map(): MapInstance {
method transform (line 210) | get transform(): Transform {
method setProps (line 214) | setProps(props: MapboxProps) {
method reuse (line 236) | static reuse(props: MapboxProps, container: HTMLDivElement): Mapbox {
method _initialize (line 281) | _initialize(container: HTMLDivElement) {
method recycle (line 367) | recycle() {
method destroy (line 376) | destroy() {
method redraw (line 383) | redraw() {
method _createShadowTransform (line 399) | _createShadowTransform(map: any) {
method _updateSize (line 410) | _updateSize(nextProps: MapboxProps): boolean {
method _updateViewState (line 429) | _updateViewState(nextProps: MapboxProps, triggerEvents: boolean): bool...
method _updateSettings (line 476) | _updateSettings(nextProps: MapboxProps, currProps: MapboxProps): boole...
method _updateStyle (line 494) | _updateStyle(nextProps: MapboxProps, currProps: MapboxProps): boolean {
method _updateStyleComponents (line 518) | _updateStyleComponents(nextProps: MapboxProps, currProps: MapboxProps)...
method _updateHandlers (line 549) | _updateHandlers(nextProps: MapboxProps, currProps: MapboxProps): boole...
method _queryRenderedFeatures (line 577) | private _queryRenderedFeatures(point: Point) {
method _updateHover (line 594) | _updateHover(e: MapMouseEvent) {
method _fireEvent (line 649) | _fireEvent(baseFire: Function, event: string | MapEvent, properties?: ...
method _onBeforeRepaint (line 676) | _onBeforeRepaint() {
function getAccessTokenFromEnv (line 712) | function getAccessTokenFromEnv(): string {
FILE: modules/main/src/mapbox-legacy/types/common.ts
type ViewState (line 17) | type ViewState = {
type ImmutableLike (line 32) | interface ImmutableLike<T> {
FILE: modules/main/src/mapbox-legacy/types/events.ts
type MapCallbacks (line 16) | type MapCallbacks = {
type IMapEvent (line 75) | interface IMapEvent<SourceT, OriginalEventT = undefined> {
type ViewStateChangeEvent (line 81) | type ViewStateChangeEvent = MapEvent<MouseEvent | TouchEvent | WheelEven...
type PopupEvent (line 101) | type PopupEvent = {
type MarkerEvent (line 106) | type MarkerEvent<OriginalEventT = undefined> = IMapEvent<Marker, Origina...
type MarkerDragEvent (line 108) | type MarkerDragEvent = MarkerEvent & {
type GeolocateEvent (line 113) | type GeolocateEvent = IMapEvent<GeolocateControl>;
type GeolocateResultEvent (line 115) | type GeolocateResultEvent = GeolocateEvent & GeolocationPosition;
type GeolocateErrorEvent (line 117) | type GeolocateErrorEvent = GeolocateEvent & GeolocationPositionError;
FILE: modules/main/src/mapbox-legacy/types/internal.ts
type Transform (line 18) | type Transform = {
type MapInstanceInternal (line 42) | type MapInstanceInternal = Map & {
FILE: modules/main/src/mapbox-legacy/types/lib.ts
type AttributionControlOptions (line 16) | type AttributionControlOptions = ConstructorParameters<typeof Attributio...
type GeolocateControlOptions (line 17) | type GeolocateControlOptions = ConstructorParameters<typeof GeolocateCon...
type NavigationControlOptions (line 18) | type NavigationControlOptions = ConstructorParameters<typeof NavigationC...
type ScaleControlOptions (line 19) | type ScaleControlOptions = ConstructorParameters<typeof ScaleControlInst...
type ControlPosition (line 42) | type ControlPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bott...
type MapLib (line 49) | interface MapLib {
FILE: modules/main/src/mapbox-legacy/utils/apply-react-style.ts
function applyReactStyle (line 6) | function applyReactStyle(element: HTMLElement, styles: React.CSSProperti...
FILE: modules/main/src/mapbox-legacy/utils/assert.ts
function assert (line 1) | function assert(condition: any, message: string) {
FILE: modules/main/src/mapbox-legacy/utils/deep-equal.ts
function arePointsEqual (line 9) | function arePointsEqual(a?: PointLike, b?: PointLike): boolean {
function deepEqual (line 24) | function deepEqual(a: any, b: any): boolean {
FILE: modules/main/src/mapbox-legacy/utils/set-globals.ts
type GlobalSettings (line 1) | type GlobalSettings = {
function setGlobals (line 31) | function setGlobals(mapLib: any, props: GlobalSettings) {
FILE: modules/main/src/mapbox-legacy/utils/style-utils.ts
function normalizeStyle (line 9) | function normalizeStyle(
FILE: modules/main/src/mapbox-legacy/utils/transform.ts
function cloneTransform (line 10) | function cloneTransform(tr: Transform): Transform {
function syncProjection (line 22) | function syncProjection(src: Transform, dest: Transform): void {
function transformToViewState (line 39) | function transformToViewState(tr: Transform): ViewState {
function applyViewStateToTransform (line 57) | function applyViewStateToTransform(tr: Transform, props: MapboxProps): b...
FILE: modules/main/test/components/map.spec.jsx
function onLoad (line 61) | function onLoad() {
function onRender (line 65) | function onRender() {
function onMoveEnd (line 72) | function onMoveEnd() {
function onLoad (line 93) | function onLoad() {
function onRender (line 96) | function onRender() {
function onMoveEnd (line 100) | function onMoveEnd() {
function onLoad (line 123) | function onLoad() {
function onRender (line 126) | function onRender(vs) {
function onMoveEnd (line 133) | function onMoveEnd() {
function App (line 138) | function App() {
function onLoad (line 165) | function onLoad() {
function onRender (line 168) | function onRender(vs) {
function onMoveEnd (line 175) | function onMoveEnd() {
function App (line 180) | function App() {
FILE: modules/main/test/components/use-map.spec.jsx
function TestControl (line 12) | function TestControl() {
FILE: modules/main/test/utils/mapbox-gl-mock/edge_insets.js
class EdgeInsets (line 7) | class EdgeInsets {
method constructor (line 8) | constructor(top = 0, bottom = 0, left = 0, right = 0) {
method interpolate (line 30) | interpolate(start, target, t) {
method getCenter (line 41) | getCenter(width, height) {
method equals (line 49) | equals(other) {
method clone (line 58) | clone() {
method toJSON (line 62) | toJSON() {
FILE: modules/main/test/utils/mapbox-gl-mock/lng_lat.js
class LngLat (line 9) | class LngLat {
method constructor (line 13) | constructor(lng, lat) {
method wrap (line 24) | wrap() {
method toArray (line 28) | toArray() {
method toString (line 32) | toString() {
method distanceTo (line 36) | distanceTo(lngLat) {
method toBounds (line 48) | toBounds(radius = 0) {
method convert (line 59) | static convert(input) {
FILE: modules/main/test/utils/mapbox-gl-mock/lng_lat_bounds.js
class LngLatBounds (line 6) | class LngLatBounds {
method constructor (line 11) | constructor(sw, ne) {
method setNorthEast (line 23) | setNorthEast(ne) {
method setSouthWest (line 28) | setSouthWest(sw) {
method extend (line 33) | extend(obj) {
method getCenter (line 72) | getCenter() {
method getSouthWest (line 76) | getSouthWest() {
method getNorthEast (line 80) | getNorthEast() {
method getNorthWest (line 84) | getNorthWest() {
method getSouthEast (line 88) | getSouthEast() {
method getWest (line 92) | getWest() {
method getSouth (line 96) | getSouth() {
method getEast (line 100) | getEast() {
method getNorth (line 104) | getNorth() {
method toArray (line 108) | toArray() {
method toString (line 112) | toString() {
method isEmpty (line 116) | isEmpty() {
method contains (line 120) | contains(lnglat) {
method convert (line 133) | static convert(input) {
FILE: modules/main/test/utils/mapbox-gl-mock/transform.js
class Transform (line 6) | class Transform {
method constructor (line 7) | constructor() {
method bearing (line 25) | get bearing() {
method bearing (line 29) | set bearing(bearing) {
method rotation (line 33) | get rotation() {
method rotation (line 37) | set rotation(rotation) {
method pitch (line 43) | get pitch() {
method pitch (line 46) | set pitch(pitch) {
method zoom (line 52) | get zoom() {
method zoom (line 55) | set zoom(zoom) {
method center (line 61) | get center() {
method center (line 64) | set center(center) {
method padding (line 69) | get padding() {
method padding (line 72) | set padding(padding) {
method clone (line 78) | clone() {
method isPaddingEqual (line 88) | isPaddingEqual(padding) {
FILE: modules/main/test/utils/mapbox-gl-mock/util.js
function clamp (line 4) | function clamp(n, min, max) {
function wrap (line 8) | function wrap(n, min, max) {
function extend (line 14) | function extend(dest, ...sources) {
function number (line 23) | function number(a, b, t) {
FILE: modules/main/test/utils/style-utils.spec.js
function freezeRecursive (line 199) | function freezeRecursive(obj) {
FILE: modules/main/test/utils/test-utils.jsx
function sleep (line 2) | function sleep(milliseconds) {
function waitForMapLoad (line 6) | function waitForMapLoad(mapRef) {
FILE: modules/react-mapbox/src/components/attribution-control.ts
type AttributionControlProps (line 8) | type AttributionControlProps = AttributionControlOptions & {
function _AttributionControl (line 15) | function _AttributionControl(props: AttributionControlProps) {
FILE: modules/react-mapbox/src/components/fullscreen-control.ts
type FullscreenControlProps (line 9) | type FullscreenControlProps = Omit<FullscreenControlOptions, 'container'...
function _FullscreenControl (line 19) | function _FullscreenControl(props: FullscreenControlProps) {
FILE: modules/react-mapbox/src/components/geolocate-control.ts
type GeolocateControlProps (line 13) | type GeolocateControlProps = GeolocateControlOptions & {
function _GeolocateControl (line 32) | function _GeolocateControl(props: GeolocateControlProps, ref: React.Ref<...
FILE: modules/react-mapbox/src/components/layer.ts
type OptionalId (line 11) | type OptionalId<T> = T extends {id: string} ? Omit<T, 'id'> & {id?: stri...
type OptionalSource (line 12) | type OptionalSource<T> = T extends {source: string} ? Omit<T, 'source'> ...
type LayerProps (line 14) | type LayerProps = (OptionalSource<OptionalId<LayerSpecification>> | Cust...
function updateLayer (line 20) | function updateLayer(map: MapInstance, id: string, props: LayerProps, pr...
function createLayer (line 70) | function createLayer(map: MapInstance, id: string, props: LayerProps) {
function Layer (line 85) | function Layer(props: LayerProps) {
FILE: modules/react-mapbox/src/components/map.tsx
type MapContextValue (line 13) | type MapContextValue = {
type MapInitOptions (line 20) | type MapInitOptions = Omit<
type MapProps (line 25) | type MapProps = MapInitOptions &
function _Map (line 37) | function _Map(props: MapProps, ref: React.Ref<MapRef>) {
FILE: modules/react-mapbox/src/components/marker.ts
type MarkerProps (line 14) | type MarkerProps = MarkerOptions & {
FILE: modules/react-mapbox/src/components/navigation-control.ts
type NavigationControlProps (line 8) | type NavigationControlProps = NavigationControlOptions & {
function _NavigationControl (line 15) | function _NavigationControl(props: NavigationControlProps) {
FILE: modules/react-mapbox/src/components/popup.ts
type PopupProps (line 14) | type PopupProps = PopupOptions & {
FILE: modules/react-mapbox/src/components/scale-control.ts
type ScaleControlProps (line 8) | type ScaleControlProps = ScaleControlOptions & {
function _ScaleControl (line 19) | function _ScaleControl(props: ScaleControlProps) {
FILE: modules/react-mapbox/src/components/source.ts
type SourceProps (line 20) | type SourceProps = (SourceSpecification | CanvasSourceSpecification) & {
function createSource (line 27) | function createSource(map: MapInstance, id: string, props: SourceProps) {
function updateSource (line 41) | function updateSource(source: AnySourceImplementation, props: SourceProp...
function Source (line 81) | function Source(props: SourceProps) {
FILE: modules/react-mapbox/src/components/use-control.ts
type ControlOptions (line 6) | type ControlOptions = {
function useControl (line 28) | function useControl<T extends IControl>(
FILE: modules/react-mapbox/src/components/use-map.tsx
type MountedMapsContextValue (line 7) | type MountedMapsContextValue = {
type MapCollection (line 54) | type MapCollection = {
function useMap (line 59) | function useMap(): MapCollection {
FILE: modules/react-mapbox/src/mapbox/create-ref.ts
type MapRef (line 30) | type MapRef = {
function createRef (line 34) | function createRef(mapInstance: Mapbox): MapRef | null {
function getMethodNames (line 91) | function getMethodNames(obj: Object) {
FILE: modules/react-mapbox/src/mapbox/mapbox.ts
type MapboxProps (line 32) | type MapboxProps = Partial<ViewState> &
constant DEFAULT_STYLE (line 86) | const DEFAULT_STYLE = {version: 8, sources: {}, layers: []} as StyleSpec...
constant DEFAULT_SETTINGS (line 88) | const DEFAULT_SETTINGS = {
class Mapbox (line 169) | class Mapbox {
method constructor (line 206) | constructor(
method map (line 216) | get map(): MapInstance {
method transform (line 220) | get transform(): Transform {
method setProps (line 224) | setProps(props: MapboxProps) {
method reuse (line 243) | static reuse(props: MapboxProps, container: HTMLDivElement): Mapbox {
method _initialize (line 288) | _initialize(container: HTMLDivElement) {
method recycle (line 384) | recycle() {
method destroy (line 393) | destroy() {
method redraw (line 400) | redraw() {
method _createProxyTransform (line 416) | _createProxyTransform(map: any) {
method _updateSize (line 427) | _updateSize(nextProps: MapboxProps): boolean {
method _updateViewState (line 446) | _updateViewState(nextProps: MapboxProps, triggerEvents: boolean): bool...
method _updateSettings (line 470) | _updateSettings(nextProps: MapboxProps, currProps: MapboxProps): boole...
method _updateStyle (line 491) | _updateStyle(nextProps: MapboxProps, currProps: MapboxProps): boolean {
method _updateStyleComponents (line 515) | _updateStyleComponents(nextProps: MapboxProps, currProps: MapboxProps)...
method _updateHandlers (line 546) | _updateHandlers(nextProps: MapboxProps, currProps: MapboxProps): boole...
method _queryRenderedFeatures (line 574) | private _queryRenderedFeatures(point: Point) {
method _updateHover (line 587) | _updateHover(e: MapMouseEvent) {
method _fireEvent (line 647) | _fireEvent(baseFire: Function, event: string | MapEvent, properties?: ...
method _fireDefferedEvents (line 664) | _fireDefferedEvents() {
function getAccessTokenFromEnv (line 684) | function getAccessTokenFromEnv(): string {
FILE: modules/react-mapbox/src/mapbox/proxy-transform.ts
type ProxyTransform (line 11) | type ProxyTransform = Transform & {
function createProxyTransform (line 28) | function createProxyTransform(tr: Transform): ProxyTransform {
FILE: modules/react-mapbox/src/types/common.ts
type ViewState (line 17) | type ViewState = {
type ImmutableLike (line 34) | interface ImmutableLike<T> {
FILE: modules/react-mapbox/src/types/events.ts
type MapBoxZoomEvent (line 26) | type MapBoxZoomEvent =
type MapCallbacks (line 31) | type MapCallbacks = {
type IMapEvent (line 79) | interface IMapEvent<SourceT, OriginalEventT = undefined> {
type Callbacks (line 85) | interface Callbacks {
type ViewStateChangeEvent (line 89) | type ViewStateChangeEvent = MapEventOf<
type PopupEvent (line 109) | type PopupEvent = {
type MarkerEvent (line 114) | type MarkerEvent<OriginalEventT = undefined> = IMapEvent<Marker, Origina...
type MarkerDragEvent (line 116) | type MarkerDragEvent = MarkerEvent & {
type GeolocateEvent (line 121) | type GeolocateEvent = IMapEvent<GeolocateControl>;
type GeolocateResultEvent (line 123) | type GeolocateResultEvent = GeolocateEvent & GeolocationPosition;
type GeolocateErrorEvent (line 125) | type GeolocateErrorEvent = GeolocateEvent & GeolocationPositionError;
FILE: modules/react-mapbox/src/types/internal.ts
type Transform (line 4) | type Transform = Map['transform'];
FILE: modules/react-mapbox/src/types/lib.ts
type MapLib (line 47) | interface MapLib {
FILE: modules/react-mapbox/src/types/style-spec.ts
type CanvasSourceSpecification (line 4) | type CanvasSourceSpecification = {
FILE: modules/react-mapbox/src/utils/apply-react-style.ts
function applyReactStyle (line 6) | function applyReactStyle(element: HTMLElement, styles: React.CSSProperti...
FILE: modules/react-mapbox/src/utils/assert.ts
function assert (line 1) | function assert(condition: any, message: string) {
FILE: modules/react-mapbox/src/utils/compare-class-names.ts
function compareClassNames (line 2) | function compareClassNames(
function getClassList (line 27) | function getClassList(className: string | undefined) {
FILE: modules/react-mapbox/src/utils/deep-equal.ts
function arePointsEqual (line 9) | function arePointsEqual(a?: PointLike, b?: PointLike): boolean {
function deepEqual (line 24) | function deepEqual(a: any, b: any): boolean {
FILE: modules/react-mapbox/src/utils/set-globals.ts
type GlobalSettings (line 1) | type GlobalSettings = {
function setGlobals (line 31) | function setGlobals(mapLib: any, props: GlobalSettings) {
FILE: modules/react-mapbox/src/utils/style-utils.ts
function normalizeStyle (line 9) | function normalizeStyle(
FILE: modules/react-mapbox/src/utils/transform.ts
function transformToViewState (line 9) | function transformToViewState(tr: Transform): ViewState {
function isViewStateControlled (line 22) | function isViewStateControlled(v: Partial<ViewState>): boolean {
function compareViewStateWithTransform (line 35) | function compareViewStateWithTransform(tr: Transform, v: Partial<ViewSta...
function noOp (line 57) | function noOp() {}
function applyViewStateToTransform (line 65) | function applyViewStateToTransform(tr: Transform, v: Partial<ViewState>) {
FILE: modules/react-mapbox/test/components/map.spec.jsx
function onLoad (line 88) | function onLoad() {
function onRender (line 92) | function onRender() {
function onMoveEnd (line 100) | function onMoveEnd() {
function onLoad (line 122) | function onLoad() {
function onRender (line 125) | function onRender() {
function onMoveEnd (line 130) | function onMoveEnd() {
function App (line 154) | function App() {
function onLoad (line 188) | function onLoad() {
function onRender (line 191) | function onRender(vs) {
function onMoveEnd (line 199) | function onMoveEnd() {
function App (line 204) | function App() {
function onLoad (line 232) | function onLoad() {
function onRender (line 235) | function onRender(vs) {
function onMoveEnd (line 243) | function onMoveEnd() {
function App (line 248) | function App() {
FILE: modules/react-mapbox/test/components/use-map.spec.jsx
function TestControl (line 13) | function TestControl() {
FILE: modules/react-mapbox/test/utils/mapbox-gl-mock/edge_insets.js
class EdgeInsets (line 7) | class EdgeInsets {
method constructor (line 8) | constructor(top = 0, bottom = 0, left = 0, right = 0) {
method interpolate (line 30) | interpolate(start, target, t) {
method getCenter (line 41) | getCenter(width, height) {
method equals (line 49) | equals(other) {
method clone (line 58) | clone() {
method toJSON (line 62) | toJSON() {
FILE: modules/react-mapbox/test/utils/mapbox-gl-mock/lng_lat.js
class LngLat (line 9) | class LngLat {
method constructor (line 13) | constructor(lng, lat) {
method wrap (line 24) | wrap() {
method toArray (line 28) | toArray() {
method toString (line 32) | toString() {
method distanceTo (line 36) | distanceTo(lngLat) {
method toBounds (line 48) | toBounds(radius = 0) {
method convert (line 59) | static convert(input) {
FILE: modules/react-mapbox/test/utils/mapbox-gl-mock/lng_lat_bounds.js
class LngLatBounds (line 6) | class LngLatBounds {
method constructor (line 11) | constructor(sw, ne) {
method setNorthEast (line 23) | setNorthEast(ne) {
method setSouthWest (line 28) | setSouthWest(sw) {
method extend (line 33) | extend(obj) {
method getCenter (line 72) | getCenter() {
method getSouthWest (line 76) | getSouthWest() {
method getNorthEast (line 80) | getNorthEast() {
method getNorthWest (line 84) | getNorthWest() {
method getSouthEast (line 88) | getSouthEast() {
method getWest (line 92) | getWest() {
method getSouth (line 96) | getSouth() {
method getEast (line 100) | getEast() {
method getNorth (line 104) | getNorth() {
method toArray (line 108) | toArray() {
method toString (line 112) | toString() {
method isEmpty (line 116) | isEmpty() {
method contains (line 120) | contains(lnglat) {
method convert (line 133) | static convert(input) {
FILE: modules/react-mapbox/test/utils/mapbox-gl-mock/transform.js
class Transform (line 6) | class Transform {
method constructor (line 7) | constructor() {
method bearing (line 26) | get bearing() {
method bearing (line 30) | set bearing(bearing) {
method rotation (line 34) | get rotation() {
method rotation (line 38) | set rotation(rotation) {
method pitch (line 44) | get pitch() {
method pitch (line 47) | set pitch(pitch) {
method zoom (line 53) | get zoom() {
method zoom (line 56) | set zoom(zoom) {
method center (line 62) | get center() {
method center (line 65) | set center(center) {
method padding (line 70) | get padding() {
method padding (line 73) | set padding(padding) {
method clone (line 79) | clone() {
method isPaddingEqual (line 89) | isPaddingEqual(padding) {
method _constrain (line 93) | _constrain() {}
method _calcMatrices (line 95) | _calcMatrices() {}
FILE: modules/react-mapbox/test/utils/mapbox-gl-mock/util.js
function clamp (line 4) | function clamp(n, min, max) {
function wrap (line 8) | function wrap(n, min, max) {
function extend (line 14) | function extend(dest, ...sources) {
function number (line 23) | function number(a, b, t) {
FILE: modules/react-mapbox/test/utils/style-utils.spec.js
function freezeRecursive (line 199) | function freezeRecursive(obj) {
FILE: modules/react-mapbox/test/utils/test-utils.jsx
function sleep (line 2) | function sleep(milliseconds) {
function waitForMapLoad (line 6) | function waitForMapLoad(mapRef) {
FILE: modules/react-maplibre/src/components/attribution-control.ts
type AttributionControlProps (line 8) | type AttributionControlProps = AttributionControlOptions & {
function _AttributionControl (line 15) | function _AttributionControl(props: AttributionControlProps) {
FILE: modules/react-maplibre/src/components/fullscreen-control.ts
type FullscreenControlProps (line 9) | type FullscreenControlProps = Omit<FullscreenControlOptions, 'container'...
function _FullscreenControl (line 19) | function _FullscreenControl(props: FullscreenControlProps) {
FILE: modules/react-maplibre/src/components/geolocate-control.ts
type GeolocateControlProps (line 13) | type GeolocateControlProps = GeolocateControlOptions & {
function _GeolocateControl (line 32) | function _GeolocateControl(props: GeolocateControlProps, ref: React.Ref<...
FILE: modules/react-maplibre/src/components/globe-control.ts
type GlobeControlProps (line 7) | type GlobeControlProps = {
function _GlobeControl (line 14) | function _GlobeControl(props: GlobeControlProps) {
FILE: modules/react-maplibre/src/components/layer.ts
type OptionalId (line 11) | type OptionalId<T> = T extends {id: string} ? Omit<T, 'id'> & {id?: stri...
type OptionalSource (line 12) | type OptionalSource<T> = T extends {source: string} ? Omit<T, 'source'> ...
type LayerProps (line 14) | type LayerProps = (OptionalSource<OptionalId<LayerSpecification>> | Cust...
function updateLayer (line 20) | function updateLayer(map: MapInstance, id: string, props: LayerProps, pr...
function createLayer (line 70) | function createLayer(map: MapInstance, id: string, props: LayerProps) {
function Layer (line 85) | function Layer(props: LayerProps) {
FILE: modules/react-maplibre/src/components/logo-control.ts
type LogoControlProps (line 8) | type LogoControlProps = LogoControlOptions & {
function _LogoControl (line 15) | function _LogoControl(props: LogoControlProps) {
FILE: modules/react-maplibre/src/components/map.tsx
type MapContextValue (line 13) | type MapContextValue = {
type MapInitOptions (line 20) | type MapInitOptions = Omit<
type MapProps (line 25) | type MapProps = MapInitOptions &
function _Map (line 37) | function _Map(props: MapProps, ref: React.Ref<MapRef>) {
FILE: modules/react-maplibre/src/components/marker.ts
type MarkerProps (line 14) | type MarkerProps = MarkerOptions & {
FILE: modules/react-maplibre/src/components/navigation-control.ts
type NavigationControlProps (line 8) | type NavigationControlProps = NavigationControlOptions & {
function _NavigationControl (line 15) | function _NavigationControl(props: NavigationControlProps) {
FILE: modules/react-maplibre/src/components/popup.ts
type PopupProps (line 14) | type PopupProps = PopupOptions & {
FILE: modules/react-maplibre/src/components/scale-control.ts
type ScaleControlProps (line 8) | type ScaleControlProps = ScaleControlOptions & {
function _ScaleControl (line 19) | function _ScaleControl(props: ScaleControlProps) {
FILE: modules/react-maplibre/src/components/source.ts
type SourceProps (line 15) | type SourceProps = SourceSpecification & {
function createSource (line 22) | function createSource(map: MapInstance, id: string, props: SourceProps) {
function updateSource (line 36) | function updateSource(source: AnySourceImplementation, props: SourceProp...
function Source (line 85) | function Source(props: SourceProps) {
FILE: modules/react-maplibre/src/components/terrain-control.ts
type TerrainControlProps (line 9) | type TerrainControlProps = TerrainSpecification & {
function _TerrainControl (line 16) | function _TerrainControl(props: TerrainControlProps) {
FILE: modules/react-maplibre/src/components/use-control.ts
type ControlOptions (line 6) | type ControlOptions = {
function useControl (line 28) | function useControl<T extends IControl>(
FILE: modules/react-maplibre/src/components/use-map.tsx
type MountedMapsContextValue (line 7) | type MountedMapsContextValue = {
type MapCollection (line 54) | type MapCollection = {
function useMap (line 59) | function useMap(): MapCollection {
FILE: modules/react-maplibre/src/maplibre/create-ref.ts
type MapRef (line 28) | type MapRef = {
function createRef (line 32) | function createRef(mapInstance: Maplibre): MapRef | null {
function getMethodNames (line 52) | function getMethodNames(obj: Object) {
FILE: modules/react-maplibre/src/maplibre/maplibre.ts
type MaplibreProps (line 31) | type MaplibreProps = Partial<ViewState> &
constant DEFAULT_STYLE (line 81) | const DEFAULT_STYLE = {version: 8, sources: {}, layers: []} as StyleSpec...
constant DEFAULT_SETTINGS (line 83) | const DEFAULT_SETTINGS = {
class Maplibre (line 164) | class Maplibre {
method constructor (line 184) | constructor(
method map (line 194) | get map(): MapInstance {
method setProps (line 198) | setProps(props: MaplibreProps) {
method reuse (line 217) | static reuse(props: MaplibreProps, container: HTMLDivElement): Maplibre {
method _initialize (line 272) | private _initialize(container: HTMLDivElement) {
method recycle (line 342) | recycle() {
method destroy (line 351) | destroy() {
method redraw (line 358) | redraw() {
method _updateSize (line 378) | private _updateSize(nextProps: MaplibreProps): boolean {
method _updateViewState (line 397) | private _updateViewState(nextProps: MaplibreProps): boolean {
method _updateSettings (line 422) | private _updateSettings(nextProps: MaplibreProps, currProps: MaplibreP...
method _updateStyle (line 439) | private _updateStyle(nextProps: MaplibreProps, currProps: MaplibreProp...
method _updateStyleComponents (line 461) | private _updateStyleComponents({light, projection, sky, terrain}: Mapl...
method _updateHandlers (line 493) | private _updateHandlers(nextProps: MaplibreProps, currProps: MaplibreP...
method _queryRenderedFeatures (line 538) | private _queryRenderedFeatures(point: Point) {
method _updateHover (line 551) | private _updateHover(e: MapMouseEvent) {
FILE: modules/react-maplibre/src/types/common.ts
type ViewState (line 17) | type ViewState = {
type ImmutableLike (line 32) | interface ImmutableLike<T> {
FILE: modules/react-maplibre/src/types/events.ts
type MapCallbacks (line 30) | type MapCallbacks = {
type MapEvent (line 78) | interface MapEvent<SourceT, OriginalEventT = undefined> {
type ErrorEvent (line 84) | type ErrorEvent = MapEvent<Map> & {
type MapMouseEvent (line 89) | type MapMouseEvent = _MapMouseEvent & {
type ViewStateChangeEvent (line 95) | type ViewStateChangeEvent =
type PopupEvent (line 114) | type PopupEvent = {
type MarkerEvent (line 119) | type MarkerEvent<OriginalEventT = undefined> = MapEvent<Marker, Original...
type MarkerDragEvent (line 121) | type MarkerDragEvent = MarkerEvent & {
type GeolocateEvent (line 126) | type GeolocateEvent = MapEvent<GeolocateControl>;
type GeolocateResultEvent (line 128) | type GeolocateResultEvent = GeolocateEvent & GeolocationPosition;
type GeolocateErrorEvent (line 130) | type GeolocateErrorEvent = GeolocateEvent & GeolocationPositionError;
FILE: modules/react-maplibre/src/types/internal.ts
type TransformLike (line 7) | type TransformLike = {
FILE: modules/react-maplibre/src/types/lib.ts
type MapLib (line 56) | interface MapLib {
FILE: modules/react-maplibre/src/utils/apply-react-style.ts
function applyReactStyle (line 6) | function applyReactStyle(element: HTMLElement, styles: React.CSSProperti...
FILE: modules/react-maplibre/src/utils/assert.ts
function assert (line 1) | function assert(condition: any, message: string) {
FILE: modules/react-maplibre/src/utils/compare-class-names.ts
function compareClassNames (line 2) | function compareClassNames(
function getClassList (line 27) | function getClassList(className: string | undefined) {
FILE: modules/react-maplibre/src/utils/deep-equal.ts
function arePointsEqual (line 9) | function arePointsEqual(a?: PointLike, b?: PointLike): boolean {
function deepEqual (line 24) | function deepEqual(a: any, b: any): boolean {
FILE: modules/react-maplibre/src/utils/set-globals.ts
type GlobalSettings (line 1) | type GlobalSettings = {
function setGlobals (line 18) | function setGlobals(mapLib: any, props: GlobalSettings) {
FILE: modules/react-maplibre/src/utils/style-utils.ts
function normalizeStyle (line 9) | function normalizeStyle(
FILE: modules/react-maplibre/src/utils/transform.ts
function transformToViewState (line 11) | function transformToViewState(tr: TransformLike): ViewState {
function applyViewStateToTransform (line 27) | function applyViewStateToTransform(
FILE: modules/react-maplibre/test/components/map.spec.jsx
function onLoad (line 45) | function onLoad(e) {
function onRender (line 49) | function onRender(e) {
function onMoveEnd (line 56) | function onMoveEnd() {
function onLoad (line 74) | function onLoad(e) {
function onRender (line 77) | function onRender(e) {
function onMoveEnd (line 81) | function onMoveEnd() {
function onLoad (line 101) | function onLoad(e) {
function onRender (line 104) | function onRender(vs, e) {
function onMoveEnd (line 111) | function onMoveEnd() {
function App (line 116) | function App() {
function onLoad (line 140) | function onLoad(e) {
function onRender (line 143) | function onRender(vs, e) {
function onMoveEnd (line 150) | function onMoveEnd() {
function App (line 155) | function App() {
FILE: modules/react-maplibre/test/components/use-map.spec.jsx
function TestControl (line 13) | function TestControl() {
FILE: modules/react-maplibre/test/utils/style-utils.spec.js
function freezeRecursive (line 199) | function freezeRecursive(obj) {
FILE: modules/react-maplibre/test/utils/test-utils.jsx
function sleep (line 2) | function sleep(milliseconds) {
function waitForMapLoad (line 6) | function waitForMapLoad(mapRef) {
FILE: test/apps/reuse-maps/src/app.tsx
constant TOKEN (line 6) | const TOKEN = '';
constant CONFIGS (line 8) | const CONFIGS: MapProps[] = [
function App (line 37) | function App() {
function renderToDom (line 58) | function renderToDom(container) {
FILE: test/render/index.jsx
constant WIDTH (line 10) | const WIDTH = 400;
constant HEIGHT (line 11) | const HEIGHT = 300;
function getBoundingBoxInPage (line 13) | function getBoundingBoxInPage(domElement) {
function runTestCase (line 23) | async function runTestCase({Component = Map, props}) {
function loadStyles (line 64) | async function loadStyles() {
FILE: test/render/test-cases.jsx
constant ALT_EMPTY_MAP_STYLE (line 13) | const ALT_EMPTY_MAP_STYLE = {
FILE: test/src/exports.ts
function getMissingExports (line 21) | function getMissingExports(module: any): null | string[] {
FILE: test/test-utils.js
constant EPSILON (line 1) | const EPSILON = 1e-9;
function toLowPrecision (line 4) | function toLowPrecision(input, precision = 11) {
function isSameLocation (line 20) | function isSameLocation(lngLat1, lngLat2) {
function equals (line 28) | function equals(a, b, epsilon = EPSILON) {
FILE: website/src/pages/index.jsx
function IndexPage (line 51) | function IndexPage() {
Condensed preview — 586 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (2,515K chars).
[
{
"path": ".eslintignore",
"chars": 91,
"preview": "dist/\nnode_modules/\ntest/\nmodules/**/test/\n**/vite.config.js\nexamples/vite.config.local.js\n"
},
{
"path": ".eslintrc.cjs",
"chars": 1208,
"preview": "const {getESLintConfig} = require('@vis.gl/dev-tools/configuration');\n\nmodule.exports = getESLintConfig({\n react: '16.8"
},
{
"path": ".github/ISSUE_TEMPLATE/bug-report.yml",
"chars": 1675,
"preview": "name: Bug Report\ndescription: Something does not work as expected\ntitle: \"[Bug]\"\nlabels: bug\nbody:\n- type: markdown\n at"
},
{
"path": ".github/ISSUE_TEMPLATE/config.yml",
"chars": 198,
"preview": "blank_issues_enabled: false\ncontact_links:\n - name: I have a question / I need help\n url: https://github.com/visgl/r"
},
{
"path": ".github/ISSUE_TEMPLATE/feature-request.yml",
"chars": 861,
"preview": "name: Feature Request\ndescription: Request for a new feature or enhancement\ntitle: \"[Feat]\"\nlabels: feature\nbody:\n- type"
},
{
"path": ".github/SECURITY.md",
"chars": 691,
"preview": "# Security Policy\n\n## Supported Versions\n\nSecurity updates are applied only to the latest release.\n\n## Reporting a Vulne"
},
{
"path": ".github/workflows/release.yml",
"chars": 1784,
"preview": "name: release\n\non:\n push:\n tags:\n - v*\n\njobs:\n check_branch:\n runs-on: ubuntu-latest\n outputs:\n sho"
},
{
"path": ".github/workflows/test.yml",
"chars": 1009,
"preview": "name: test\n\n# On every pull request, but only on push to master\non:\n push:\n branches:\n - master\n pull_request:\n\n"
},
{
"path": ".github/workflows/website.yml",
"chars": 1643,
"preview": "name: website\n\non:\n push:\n branches:\n - '*-release'\n\njobs:\n check_branch:\n runs-on: ubuntu-22.04\n output"
},
{
"path": ".gitignore",
"chars": 236,
"preview": "dist/\ndist-es6/\n\nnode_modules\n.nyc_output/\ncoverage\nnpm-debug.log\n\npackage-lock.json\nexamples/**/yarn.lock\ntest/**/yarn."
},
{
"path": ".nvmrc",
"chars": 8,
"preview": "18.19.0\n"
},
{
"path": ".ocularrc.js",
"chars": 510,
"preview": "/** @typedef {import('@vis.gl/dev-tools').OcularConfig} OcularConfig */\nimport {resolve} from 'path';\n\n/** @type {Ocular"
},
{
"path": ".prettierrc",
"chars": 106,
"preview": "printWidth: 100\nsemi: true\nsingleQuote: true\ntrailingComma: none\nbracketSpacing: false\narrowParens: avoid\n"
},
{
"path": "CHANGELOG.md",
"chars": 3303,
"preview": "# CHANGELOG\n\n# Version 8.1\n\n## v8.1.0-alpha.2 (Apr 9, 2025)\n\n- wrap jumpTo as internal update (#2516)\n\n## v8.1.0-alpha.1"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 290,
"preview": "# Code of Conduct\n\nreact-map-gl is an [OpenJS Foundation](https://openjsf.org/) project. Please be mindful of and adhere"
},
{
"path": "CONTRIBUTING.md",
"chars": 2639,
"preview": "# Contributing\n\n**Thanks for taking the time to contribute!**\n\nPRs and bug reports are welcome, and we are actively look"
},
{
"path": "LICENSE",
"chars": 3821,
"preview": "Copyright Vis.gl contributors.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this sof"
},
{
"path": "README.md",
"chars": 2537,
"preview": "<p align=\"right\">\n <a href=\"https://npmjs.org/package/react-map-gl\">\n <img src=\"https://img.shields.io/npm/v/react-m"
},
{
"path": "TESTING.md",
"chars": 543,
"preview": "# Testing\n\n## Unit, Lint\n\n```\nnpm run test\n```\n\n## Browser\n\n```\nnpm run test-browser\n```\n\n**You'll need to specify a val"
},
{
"path": "docs/.gitignore",
"chars": 39,
"preview": "api-reference/web-mercator-viewport.md\n"
},
{
"path": "docs/README.md",
"chars": 4768,
"preview": "\n# Introduction\n\n> These docs are for v8.0. For v7, see [here](https://github.com/visgl/react-map-gl/tree/7.1-release/do"
},
{
"path": "docs/api-reference/mapbox/attribution-control.md",
"chars": 1593,
"preview": "# AttributionControl\r\n\r\nReact component that wraps mapbox-gl's [AttributionControl](https://docs.mapbox.com/mapbox-gl-js"
},
{
"path": "docs/api-reference/mapbox/fullscreen-control.md",
"chars": 1351,
"preview": "# FullscreenControl\r\n\r\nReact component that wraps mapbox-gl's [FullscreenControl](https://docs.mapbox.com/mapbox-gl-js/a"
},
{
"path": "docs/api-reference/mapbox/geolocate-control.md",
"chars": 3251,
"preview": "# GeolocateControl\r\n\r\nReact component that wraps mapbox-gl's [GeolocateControl](https://docs.mapbox.com/mapbox-gl-js/api"
},
{
"path": "docs/api-reference/mapbox/layer.md",
"chars": 2725,
"preview": "# Layer\r\n\r\nThis component allows apps to create a [map layer](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers) u"
},
{
"path": "docs/api-reference/mapbox/map-provider.md",
"chars": 685,
"preview": "# MapProvider\n\nA [Context.Provider](https://reactjs.org/docs/context.html#contextprovider) that facilitates map operatio"
},
{
"path": "docs/api-reference/mapbox/map.md",
"chars": 27156,
"preview": "# default (Map)\r\n\r\nReact component that wraps mapbox-gl's [Map](https://docs.mapbox.com/mapbox-gl-js/api/map/) class. Th"
},
{
"path": "docs/api-reference/mapbox/marker.md",
"chars": 4639,
"preview": "# Marker\r\n\r\nReact component that wraps mapbox-gl's [Marker](https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker) cl"
},
{
"path": "docs/api-reference/mapbox/navigation-control.md",
"chars": 1500,
"preview": "# NavigationControl\r\n\r\nReact component that wraps mapbox-gl's [NavigationControl](https://docs.mapbox.com/mapbox-gl-js/a"
},
{
"path": "docs/api-reference/mapbox/popup.md",
"chars": 3532,
"preview": "# Popup\r\n\r\nReact component that wraps mapbox-gl's [Popup](https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup) class"
},
{
"path": "docs/api-reference/mapbox/scale-control.md",
"chars": 1366,
"preview": "# ScaleControl\r\n\r\nReact component that wraps mapbox-gl's [ScaleControl](https://docs.mapbox.com/mapbox-gl-js/api/markers"
},
{
"path": "docs/api-reference/mapbox/source.md",
"chars": 2065,
"preview": "# Source\r\n\r\nThis component allows apps to create a [map source](https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources"
},
{
"path": "docs/api-reference/mapbox/types.md",
"chars": 10892,
"preview": "# Types\r\n\r\nThe following types can be imported from `react-map-gl/mapbox` when using TypeScript.\r\n\r\n## Components\r\n\r\n###"
},
{
"path": "docs/api-reference/mapbox/use-control.md",
"chars": 2365,
"preview": "# useControl\n\nThe `useControl` hook is used to create React wrappers for custom map controls.\n\n```tsx\nimport MapboxDraw "
},
{
"path": "docs/api-reference/mapbox/use-map.md",
"chars": 2036,
"preview": "# useMap\n\nThe `useMap` hook allows a component to reference the [Map](./map.md) that contains it.\n\nWhen used with [MapPr"
},
{
"path": "docs/api-reference/maplibre/attribution-control.md",
"chars": 1492,
"preview": "# AttributionControl\r\n\r\nReact component that wraps maplibre-gl's [AttributionControl](https://maplibre.org/maplibre-gl-j"
},
{
"path": "docs/api-reference/maplibre/fullscreen-control.md",
"chars": 1326,
"preview": "# FullscreenControl\r\n\r\nReact component that wraps maplibre-gl's [FullscreenControl](https://maplibre.org/maplibre-gl-js/"
},
{
"path": "docs/api-reference/maplibre/geolocate-control.md",
"chars": 3160,
"preview": "# GeolocateControl\r\n\r\nReact component that wraps maplibre-gl's [GeolocateControl](https://maplibre.org/maplibre-gl-js/do"
},
{
"path": "docs/api-reference/maplibre/globe-control.md",
"chars": 1071,
"preview": "# GlobeControl\n\nReact component that wraps maplibre-gl's [GlobeControl](https://maplibre.org/maplibre-gl-js/docs/API/cla"
},
{
"path": "docs/api-reference/maplibre/layer.md",
"chars": 2686,
"preview": "# Layer\r\n\r\nThis component allows apps to create a [map layer](https://maplibre.org/maplibre-style-spec/layers/) using Re"
},
{
"path": "docs/api-reference/maplibre/logo-control.md",
"chars": 1296,
"preview": "# LogoControl\r\n\r\nReact component that wraps maplibre-gl's [LogoControl](https://maplibre.org/maplibre-gl-js/docs/API/cla"
},
{
"path": "docs/api-reference/maplibre/map-provider.md",
"chars": 689,
"preview": "# MapProvider\n\nA [Context.Provider](https://reactjs.org/docs/context.html#contextprovider) that facilitates map operatio"
},
{
"path": "docs/api-reference/maplibre/map.md",
"chars": 24682,
"preview": "# default (Map)\r\n\r\nReact component that wraps maplibre-gl's [Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/M"
},
{
"path": "docs/api-reference/maplibre/marker.md",
"chars": 4420,
"preview": "# Marker\r\n\r\nReact component that wraps maplibre-gl's [Marker](https://maplibre.org/maplibre-gl-js/docs/API/classes/Marke"
},
{
"path": "docs/api-reference/maplibre/navigation-control.md",
"chars": 1386,
"preview": "# NavigationControl\r\n\r\nReact component that wraps maplibre-gl's [NavigationControl](https://maplibre.org/maplibre-gl-js/"
},
{
"path": "docs/api-reference/maplibre/popup.md",
"chars": 3440,
"preview": "# Popup\r\n\r\nReact component that wraps maplibre-gl's [Popup](https://maplibre.org/maplibre-gl-js/docs/API/classes/Popup/)"
},
{
"path": "docs/api-reference/maplibre/scale-control.md",
"chars": 1341,
"preview": "# ScaleControl\r\n\r\nReact component that wraps maplibre-gl's [ScaleControl](https://maplibre.org/maplibre-gl-js/docs/API/c"
},
{
"path": "docs/api-reference/maplibre/source.md",
"chars": 2064,
"preview": "# Source\r\n\r\nThis component allows apps to create a [map source](https://maplibre.org/maplibre-style-spec/sources/) using"
},
{
"path": "docs/api-reference/maplibre/terrain-control.md",
"chars": 1958,
"preview": "# TerrainControl\r\n\r\nReact component that wraps maplibre-gl's [TerrainControl](https://maplibre.org/maplibre-gl-js/docs/A"
},
{
"path": "docs/api-reference/maplibre/types.md",
"chars": 10655,
"preview": "# Types\r\n\r\nThe following types can be imported from `react-map-gl/maplibre` when using TypeScript.\r\n\r\n## Components\r\n\r\n#"
},
{
"path": "docs/api-reference/maplibre/use-control.md",
"chars": 2344,
"preview": "# useControl\n\nThe `useControl` hook is used to create React wrappers for custom map controls.\n\n```tsx\nimport MapboxDraw "
},
{
"path": "docs/api-reference/maplibre/use-map.md",
"chars": 1724,
"preview": "# useMap\n\nThe `useMap` hook allows a custom component to reference the [Map](./map.md) that contains it.\n\n\n```tsx\nimport"
},
{
"path": "docs/get-started/adding-custom-data.md",
"chars": 2560,
"preview": "# Adding Custom Data\n\n## Native Mapbox Layers\n\nYou can inject data and mapbox native layers using the [Source](../api-re"
},
{
"path": "docs/get-started/get-started.md",
"chars": 2794,
"preview": "# Get Started\n\nYou may find complete project setups in [get-started examples](https://github.com/visgl/react-map-gl/tree"
},
{
"path": "docs/get-started/mapbox-tokens.md",
"chars": 3283,
"preview": "# About Mapbox Tokens\n\n`react-map-gl` itself is open source and free. It provides a React wrapper for `mapbox-gl`, `mapl"
},
{
"path": "docs/get-started/state-management.md",
"chars": 3257,
"preview": "# State Management\n\nThere are two ways to use a [Map](../api-reference/maplibre/map.md):\n\n- [Uncontrolled](https://react"
},
{
"path": "docs/get-started/tips-and-tricks.md",
"chars": 6929,
"preview": "# Tips and Tricks\n\n## Securing Mapbox Token\n\nBecause Mapbox tokens are required for the client application to make reque"
},
{
"path": "docs/table-of-contents.json",
"chars": 2112,
"preview": "[\n {\n \"type\": \"category\",\n \"label\": \"Overview\",\n \"items\": [\n \"README\",\n \"whats-new\",\n \"upgrade-"
},
{
"path": "docs/upgrade-guide.md",
"chars": 14120,
"preview": "# Upgrade Guide\n\n## Upgrading to v8.0\n\n- All imports from `react-map-gl` should be replaced with one of the following en"
},
{
"path": "docs/whats-new.md",
"chars": 15155,
"preview": "# What's new\n\n## react-map-gl v8.1\n\nRelease date: Oct 2025\n\nThe core logic in the Mapbox GL JS wrapper has been rewritte"
},
{
"path": "examples/.data/bart-station.json",
"chars": 3234,
"preview": "[\n {\"name\":\"Lafayette (LAFY)\",\"coordinates\":[-122.123801,37.893394]},\n {\"name\":\"12th St. Oakland City Center (12TH)\",\""
},
{
"path": "examples/.data/cities.json",
"chars": 5115,
"preview": "[\n {\"city\":\"New York\",\"population\":\"8,175,133\",\"image\":\"http://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Above_"
},
{
"path": "examples/.data/feature-example-sf.json",
"chars": 80468,
"preview": "{\n \"type\": \"FeatureCollection\",\n \"features\": [\n {\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinat"
},
{
"path": "examples/.data/us-election-2016.json",
"chars": 314336,
"preview": "[{\"dem\":2464364,\"rep\":769743,\"total\":3434308,\"name\":\"Los Angeles, California\",\"coordinates\":[-118.26186,34.19639]},\n{\"de"
},
{
"path": "examples/.data/us-income.geojson",
"chars": 381826,
"preview": "{\n \"type\": \"FeatureCollection\",\n \"features\": [\n{\"type\":\"Feature\",\"properties\":{\"name\":\"Maine\",\"income\":{\"1995\":31189,\""
},
{
"path": "examples/.eslintrc",
"chars": 95,
"preview": "{\n \"rules\": {\n \"import/no-unresolved\": 0,\n \"import/no-extraneous-dependencies\": 0\n }\n}\n"
},
{
"path": "examples/get-started/basic/README.md",
"chars": 608,
"preview": "# react-map-gl Example: Using Map as a stateful component\n\nThis example shows a minimal app configuration to use react-m"
},
{
"path": "examples/get-started/basic/app.jsx",
"chars": 711,
"preview": "/* global document */\nimport * as React from 'react';\nimport {createRoot} from 'react-dom/client';\nimport Map, {Marker} "
},
{
"path": "examples/get-started/basic/index.html",
"chars": 190,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset='UTF-8' />\n <title>react-map-gl Example</title>\n </head>\n <body>\n"
},
{
"path": "examples/get-started/basic/package.json",
"chars": 287,
"preview": "{\n \"scripts\": {\n \"start\": \"vite --open\",\n \"build\": \"vite build\"\n },\n \"dependencies\": {\n \"react\": \"^18.0.0\",\n"
},
{
"path": "examples/get-started/basic/vite.config.js",
"chars": 119,
"preview": "export default {\n define: {\n 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)\n }\n};\n"
},
{
"path": "examples/get-started/controlled/README.md",
"chars": 758,
"preview": "# react-map-gl Example: Using Map as a controlled component\n\nThis example shows a minimal app configuration to use react"
},
{
"path": "examples/get-started/controlled/app.jsx",
"chars": 795,
"preview": "/* global document */\nimport * as React from 'react';\nimport {createRoot} from 'react-dom/client';\nimport Map, {Marker} "
},
{
"path": "examples/get-started/controlled/index.html",
"chars": 190,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset='UTF-8' />\n <title>react-map-gl Example</title>\n </head>\n <body>\n"
},
{
"path": "examples/get-started/controlled/package.json",
"chars": 287,
"preview": "{\n \"scripts\": {\n \"start\": \"vite --open\",\n \"build\": \"vite build\"\n },\n \"dependencies\": {\n \"react\": \"^18.0.0\",\n"
},
{
"path": "examples/get-started/controlled/vite.config.js",
"chars": 119,
"preview": "export default {\n define: {\n 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)\n }\n};\n"
},
{
"path": "examples/get-started/hook/README.md",
"chars": 726,
"preview": "# react-map-gl Example: Using Map with a State Management System\n\nThis example shows how to use react-map-gl's Map compo"
},
{
"path": "examples/get-started/hook/app.jsx",
"chars": 529,
"preview": "/* global document */\nimport * as React from 'react';\nimport {createRoot} from 'react-dom/client';\nimport {MapProvider} "
},
{
"path": "examples/get-started/hook/controls.jsx",
"chars": 1822,
"preview": "import * as React from 'react';\n\nimport {useCallback, useState, useEffect} from 'react';\nimport {useMap} from 'react-map"
},
{
"path": "examples/get-started/hook/controls2.jsx",
"chars": 712,
"preview": "// import {useMap} from 'react-map-gl/mapbox';\n\nexport default function Controls2() {\n /**\n * ## This is how `useMap`"
},
{
"path": "examples/get-started/hook/index.html",
"chars": 190,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset='UTF-8' />\n <title>react-map-gl Example</title>\n </head>\n <body>\n"
},
{
"path": "examples/get-started/hook/map.jsx",
"chars": 1046,
"preview": "import * as React from 'react';\nimport Map from 'react-map-gl/mapbox';\n// import {useMap} from 'react-map-gl/mapbox';\n\ni"
},
{
"path": "examples/get-started/hook/package.json",
"chars": 287,
"preview": "{\n \"scripts\": {\n \"start\": \"vite --open\",\n \"build\": \"vite build\"\n },\n \"dependencies\": {\n \"react\": \"^18.0.0\",\n"
},
{
"path": "examples/get-started/hook/vite.config.js",
"chars": 119,
"preview": "export default {\n define: {\n 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)\n }\n};\n"
},
{
"path": "examples/get-started/maplibre/README.md",
"chars": 377,
"preview": "# react-map-gl Example: Using with Maplibre\n\nThis example shows a minimal app configuration to use react-map-gl with [Ma"
},
{
"path": "examples/get-started/maplibre/app.jsx",
"chars": 650,
"preview": "/* global document */\nimport * as React from 'react';\nimport {createRoot} from 'react-dom/client';\nimport Map, {Marker} "
},
{
"path": "examples/get-started/maplibre/index.html",
"chars": 190,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset='UTF-8' />\n <title>react-map-gl Example</title>\n </head>\n <body>\n"
},
{
"path": "examples/get-started/maplibre/package.json",
"chars": 289,
"preview": "{\n \"scripts\": {\n \"start\": \"vite --open\",\n \"build\": \"vite build\"\n },\n \"dependencies\": {\n \"maplibre-gl\": \"^5.0"
},
{
"path": "examples/get-started/nextjs/.gitignore",
"chars": 386,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "examples/get-started/nextjs/README.md",
"chars": 2126,
"preview": "# react-map-gl Example: Using Map with Server Side Rendering\n\nThis is a [Next.js](https://nextjs.org/) project bootstrap"
},
{
"path": "examples/get-started/nextjs/next.config.js",
"chars": 284,
"preview": "const webpack = require('webpack');\n\nmodule.exports = {\n reactStrictMode: true,\n\n webpack: config => {\n // Optional"
},
{
"path": "examples/get-started/nextjs/package.json",
"chars": 363,
"preview": "{\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\"\n "
},
{
"path": "examples/get-started/nextjs/pages/_app.js",
"chars": 130,
"preview": "import * as React from 'react';\n\nexport default function MyApp({Component, pageProps}) {\n return <Component {...pagePro"
},
{
"path": "examples/get-started/nextjs/pages/index.js",
"chars": 699,
"preview": "import * as React from 'react';\nimport Head from 'next/head';\nimport Map, {Marker} from 'react-map-gl/mapbox';\n\nimport '"
},
{
"path": "examples/get-started/redux/README.md",
"chars": 720,
"preview": "# react-map-gl Example: Using Map with a State Management System\n\nThis example shows how to use react-map-gl's Map compo"
},
{
"path": "examples/get-started/redux/app.jsx",
"chars": 449,
"preview": "/* global document */\nimport * as React from 'react';\nimport {createRoot} from 'react-dom/client';\nimport {Provider} fro"
},
{
"path": "examples/get-started/redux/controls.jsx",
"chars": 1276,
"preview": "import * as React from 'react';\n\nimport {useCallback, useState, useEffect} from 'react';\nimport {useSelector, useDispatc"
},
{
"path": "examples/get-started/redux/index.html",
"chars": 190,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset='UTF-8' />\n <title>react-map-gl Example</title>\n </head>\n <body>\n"
},
{
"path": "examples/get-started/redux/map.jsx",
"chars": 722,
"preview": "import * as React from 'react';\nimport Map from 'react-map-gl/mapbox';\n\nimport {useCallback} from 'react';\nimport {useSe"
},
{
"path": "examples/get-started/redux/package.json",
"chars": 316,
"preview": "{\n \"scripts\": {\n \"start\": \"vite --open\",\n \"build\": \"vite build\"\n },\n \"dependencies\": {\n \"react\": \"^18.0.0\",\n"
},
{
"path": "examples/get-started/redux/store.js",
"chars": 438,
"preview": "import {createStore} from 'redux';\n\nfunction mapStateReducer(state, action) {\n switch (action.type) {\n case 'setView"
},
{
"path": "examples/get-started/redux/vite.config.js",
"chars": 119,
"preview": "export default {\n define: {\n 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)\n }\n};\n"
},
{
"path": "examples/mapbox/clusters/README.md",
"chars": 847,
"preview": "# Example: Supercluster\n\nThis app reproduces Mapbox's [Create and style clusters](https://docs.mapbox.com/mapbox-gl-js/e"
},
{
"path": "examples/mapbox/clusters/index.html",
"chars": 966,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset='UTF-8' />\n <title>react-map-gl Example</title>\n <link href=\"htt"
},
{
"path": "examples/mapbox/clusters/package.json",
"chars": 350,
"preview": "{\n \"scripts\": {\n \"start\": \"vite --open\",\n \"start-local\": \"vite --config ../../vite.config.local.js\",\n \"build\":"
},
{
"path": "examples/mapbox/clusters/src/app.tsx",
"chars": 1829,
"preview": "import * as React from 'react';\nimport {useRef} from 'react';\nimport {createRoot} from 'react-dom/client';\nimport {Map, "
},
{
"path": "examples/mapbox/clusters/src/control-panel.tsx",
"chars": 516,
"preview": "import * as React from 'react';\n\nfunction ControlPanel() {\n return (\n <div className=\"control-panel\">\n <h3>Crea"
},
{
"path": "examples/mapbox/clusters/src/layers.ts",
"chars": 983,
"preview": "import type {LayerProps} from 'react-map-gl/mapbox';\n\nexport const clusterLayer: LayerProps = {\n id: 'clusters',\n type"
},
{
"path": "examples/mapbox/clusters/tsconfig.json",
"chars": 235,
"preview": "{\r\n \"compilerOptions\": {\r\n \"target\": \"es2020\",\r\n \"jsx\": \"react\",\r\n \"allowSyntheticDefaultImports\": true,\r\n "
},
{
"path": "examples/mapbox/clusters/vite.config.js",
"chars": 119,
"preview": "export default {\n define: {\n 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)\n }\n};\n"
},
{
"path": "examples/mapbox/controls/README.md",
"chars": 736,
"preview": "# Example: Controls\n\nDemonstrates how various control components can be used with react-map-gl.\n\n## Usage\n\nTo run this e"
},
{
"path": "examples/mapbox/controls/index.html",
"chars": 966,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset='UTF-8' />\n <title>react-map-gl Example</title>\n <link href=\"htt"
},
{
"path": "examples/mapbox/controls/package.json",
"chars": 350,
"preview": "{\n \"scripts\": {\n \"start\": \"vite --open\",\n \"start-local\": \"vite --config ../../vite.config.local.js\",\n \"build\":"
},
{
"path": "examples/mapbox/controls/src/app.tsx",
"chars": 2301,
"preview": "import * as React from 'react';\nimport {useState, useMemo} from 'react';\nimport {createRoot} from 'react-dom/client';\nim"
},
{
"path": "examples/mapbox/controls/src/control-panel.tsx",
"chars": 768,
"preview": "import * as React from 'react';\n\nfunction ControlPanel() {\n return (\n <div className=\"control-panel\">\n <h3>Mark"
},
{
"path": "examples/mapbox/controls/src/pin.tsx",
"chars": 564,
"preview": "import * as React from 'react';\n\nconst ICON = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,1"
},
{
"path": "examples/mapbox/controls/tsconfig.json",
"chars": 235,
"preview": "{\r\n \"compilerOptions\": {\r\n \"target\": \"es2020\",\r\n \"jsx\": \"react\",\r\n \"allowSyntheticDefaultImports\": true,\r\n "
},
{
"path": "examples/mapbox/controls/vite.config.js",
"chars": 119,
"preview": "export default {\n define: {\n 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)\n }\n};\n"
},
{
"path": "examples/mapbox/custom-cursor/README.md",
"chars": 763,
"preview": "# Example: Custom Cursor\n\nThis example showcases how to dynamically change the cursor over the map based on interactivit"
},
{
"path": "examples/mapbox/custom-cursor/index.html",
"chars": 1094,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset='UTF-8' />\n <title>react-map-gl Example</title>\n <link href=\"htt"
},
{
"path": "examples/mapbox/custom-cursor/package.json",
"chars": 350,
"preview": "{\n \"scripts\": {\n \"start\": \"vite --open\",\n \"start-local\": \"vite --config ../../vite.config.local.js\",\n \"build\":"
},
{
"path": "examples/mapbox/custom-cursor/src/app.tsx",
"chars": 1658,
"preview": "/* global window */\nimport * as React from 'react';\nimport {useState, useCallback} from 'react';\nimport {createRoot} fro"
},
{
"path": "examples/mapbox/custom-cursor/src/control-panel.tsx",
"chars": 1680,
"preview": "import * as React from 'react';\nimport {useState, useEffect} from 'react';\n\n// Layer id patterns by category\nconst layer"
},
{
"path": "examples/mapbox/custom-cursor/tsconfig.json",
"chars": 235,
"preview": "{\r\n \"compilerOptions\": {\r\n \"target\": \"es2020\",\r\n \"jsx\": \"react\",\r\n \"allowSyntheticDefaultImports\": true,\r\n "
},
{
"path": "examples/mapbox/custom-cursor/vite.config.js",
"chars": 119,
"preview": "export default {\n define: {\n 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)\n }\n};\n"
},
{
"path": "examples/mapbox/custom-overlay/README.md",
"chars": 781,
"preview": "# Example: SVG overlay\n\nThis app shows how to implement a custom control that draws arbitrary React content that respond"
},
{
"path": "examples/mapbox/custom-overlay/index.html",
"chars": 1468,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset='UTF-8' />\n <title>react-map-gl Example</title>\n <link href=\"htt"
},
{
"path": "examples/mapbox/custom-overlay/package.json",
"chars": 376,
"preview": "{\n \"scripts\": {\n \"start\": \"vite --open\",\n \"start-local\": \"vite --config ../../vite.config.local.js\",\n \"build\":"
},
{
"path": "examples/mapbox/custom-overlay/src/app.tsx",
"chars": 3541,
"preview": "import * as React from 'react';\nimport {useMemo, useState} from 'react';\nimport {createRoot} from 'react-dom/client';\nim"
},
{
"path": "examples/mapbox/custom-overlay/src/control-panel.tsx",
"chars": 1122,
"preview": "import * as React from 'react';\n\nexport const COLORS = ['#2b83ba', '#c7191c', '#c8c8cf'];\n\nconst legendStyle = {\n displ"
},
{
"path": "examples/mapbox/custom-overlay/src/custom-overlay.tsx",
"chars": 1426,
"preview": "import * as React from 'react';\nimport {useState, cloneElement} from 'react';\nimport {useControl} from 'react-map-gl/map"
},
{
"path": "examples/mapbox/custom-overlay/tsconfig.json",
"chars": 235,
"preview": "{\r\n \"compilerOptions\": {\r\n \"target\": \"es2020\",\r\n \"jsx\": \"react\",\r\n \"allowSyntheticDefaultImports\": true,\r\n "
},
{
"path": "examples/mapbox/custom-overlay/vite.config.js",
"chars": 119,
"preview": "export default {\n define: {\n 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)\n }\n};\n"
},
{
"path": "examples/mapbox/deckgl-overlay/README.md",
"chars": 775,
"preview": "# Example: DeckGL Overlay\n\nThis example demonstrates using [deck.gl](https://deck.gl) to render a data overlay on top of"
},
{
"path": "examples/mapbox/deckgl-overlay/index.html",
"chars": 619,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset='UTF-8' />\n <title>react-map-gl Example</title>\n <link href=\"htt"
},
{
"path": "examples/mapbox/deckgl-overlay/package.json",
"chars": 382,
"preview": "{\n \"scripts\": {\n \"start\": \"vite --open\",\n \"start-local\": \"vite --config ../../vite.config.local.js\",\n \"build\":"
},
{
"path": "examples/mapbox/deckgl-overlay/src/app.tsx",
"chars": 1798,
"preview": "import * as React from 'react';\nimport {createRoot} from 'react-dom/client';\nimport {ArcLayer} from '@deck.gl/layers/typ"
},
{
"path": "examples/mapbox/deckgl-overlay/tsconfig.json",
"chars": 235,
"preview": "{\r\n \"compilerOptions\": {\r\n \"target\": \"es2020\",\r\n \"jsx\": \"react\",\r\n \"allowSyntheticDefaultImports\": true,\r\n "
},
{
"path": "examples/mapbox/deckgl-overlay/vite.config.js",
"chars": 119,
"preview": "export default {\n define: {\n 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)\n }\n};\n"
},
{
"path": "examples/mapbox/draggable-markers/README.md",
"chars": 737,
"preview": "# Example: Draggable Marker\n\nDemonstrates how Marker component can be dragged with react-map-gl.\n\n## Usage\n\nTo run this "
},
{
"path": "examples/mapbox/draggable-markers/index.html",
"chars": 967,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset='UTF-8' />\n <title>react-map-gl Example</title>\n <link href=\"htt"
},
{
"path": "examples/mapbox/draggable-markers/package.json",
"chars": 350,
"preview": "{\n \"scripts\": {\n \"start\": \"vite --open\",\n \"start-local\": \"vite --config ../../vite.config.local.js\",\n \"build\":"
},
{
"path": "examples/mapbox/draggable-markers/src/app.tsx",
"chars": 1824,
"preview": "import * as React from 'react';\nimport {useState, useCallback} from 'react';\nimport {createRoot} from 'react-dom/client'"
},
{
"path": "examples/mapbox/draggable-markers/src/control-panel.tsx",
"chars": 1101,
"preview": "import * as React from 'react';\nimport type {LngLat} from 'react-map-gl/mapbox';\n\nconst eventNames = ['onDragStart', 'on"
},
{
"path": "examples/mapbox/draggable-markers/src/pin.tsx",
"chars": 567,
"preview": "import * as React from 'react';\n\nconst ICON = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,1"
},
{
"path": "examples/mapbox/draggable-markers/tsconfig.json",
"chars": 235,
"preview": "{\r\n \"compilerOptions\": {\r\n \"target\": \"es2020\",\r\n \"jsx\": \"react\",\r\n \"allowSyntheticDefaultImports\": true,\r\n "
},
{
"path": "examples/mapbox/draggable-markers/vite.config.js",
"chars": 119,
"preview": "export default {\n define: {\n 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)\n }\n};\n"
},
{
"path": "examples/mapbox/draw-polygon/README.md",
"chars": 805,
"preview": "# Example: Draw Polygon\n\nThis app reproduces Mapbox's [Draw a polygon and calculate its area](https://docs.mapbox.com/ma"
},
{
"path": "examples/mapbox/draw-polygon/index.html",
"chars": 1102,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset='UTF-8' />\n <title>react-map-gl Example</title>\n <link href=\"htt"
},
{
"path": "examples/mapbox/draw-polygon/package.json",
"chars": 465,
"preview": "{\n \"scripts\": {\n \"start\": \"vite --open\",\n \"start-local\": \"vite --config ../../vite.config.local.js\",\n \"build\":"
},
{
"path": "examples/mapbox/draw-polygon/src/app.tsx",
"chars": 1584,
"preview": "import * as React from 'react';\nimport {useState, useCallback} from 'react';\nimport {createRoot} from 'react-dom/client'"
},
{
"path": "examples/mapbox/draw-polygon/src/control-panel.tsx",
"chars": 705,
"preview": "import * as React from 'react';\nimport area from '@turf/area';\n\nfunction ControlPanel(props) {\n let polygonArea = 0;\n "
},
{
"path": "examples/mapbox/draw-polygon/src/draw-control.ts",
"chars": 1037,
"preview": "import MapboxDraw from '@mapbox/mapbox-gl-draw';\nimport {useControl} from 'react-map-gl/mapbox';\n\nimport type {ControlPo"
},
{
"path": "examples/mapbox/draw-polygon/tsconfig.json",
"chars": 235,
"preview": "{\r\n \"compilerOptions\": {\r\n \"target\": \"es2020\",\r\n \"jsx\": \"react\",\r\n \"allowSyntheticDefaultImports\": true,\r\n "
},
{
"path": "examples/mapbox/draw-polygon/vite.config.js",
"chars": 119,
"preview": "export default {\n define: {\n 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)\n }\n};\n"
},
{
"path": "examples/mapbox/filter/README.md",
"chars": 899,
"preview": "# Example: Highlight By Filter\n\nThis app reproduces Mapbox's [Highlight features containing similar data](https://www.ma"
},
{
"path": "examples/mapbox/filter/index.html",
"chars": 1048,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset='UTF-8' />\n <title>react-map-gl Example</title>\n <link href=\"htt"
},
{
"path": "examples/mapbox/filter/package.json",
"chars": 350,
"preview": "{\n \"scripts\": {\n \"start\": \"vite --open\",\n \"start-local\": \"vite --config ../../vite.config.local.js\",\n \"build\":"
},
{
"path": "examples/mapbox/filter/src/app.tsx",
"chars": 1902,
"preview": "import * as React from 'react';\nimport {useState, useMemo, useCallback} from 'react';\nimport {createRoot} from 'react-do"
},
{
"path": "examples/mapbox/filter/src/control-panel.tsx",
"chars": 529,
"preview": "import * as React from 'react';\n\nfunction ControlPanel() {\n return (\n <div className=\"control-panel\">\n <h3>High"
},
{
"path": "examples/mapbox/filter/src/map-style.ts",
"chars": 592,
"preview": "import type {FillLayerSpecification} from 'react-map-gl/mapbox';\n\nexport const countiesLayer: FillLayerSpecification = {"
},
{
"path": "examples/mapbox/filter/tsconfig.json",
"chars": 235,
"preview": "{\r\n \"compilerOptions\": {\r\n \"target\": \"es2020\",\r\n \"jsx\": \"react\",\r\n \"allowSyntheticDefaultImports\": true,\r\n "
},
{
"path": "examples/mapbox/filter/vite.config.js",
"chars": 119,
"preview": "export default {\n define: {\n 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)\n }\n};\n"
},
{
"path": "examples/mapbox/geocoder/README.md",
"chars": 782,
"preview": "# Example: Geocoder\n\nThis app reproduces Mapbox's [Add a geocoder](https://docs.mapbox.com/mapbox-gl-js/example/mapbox-g"
},
{
"path": "examples/mapbox/geocoder/index.html",
"chars": 1110,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset='UTF-8' />\n <title>react-map-gl Example</title>\n <link href=\"htt"
},
{
"path": "examples/mapbox/geocoder/package.json",
"chars": 445,
"preview": "{\n \"scripts\": {\n \"start\": \"vite --open\",\n \"start-local\": \"vite --config ../../vite.config.local.js\",\n \"build\":"
},
{
"path": "examples/mapbox/geocoder/src/app.tsx",
"chars": 800,
"preview": "import * as React from 'react';\nimport {createRoot} from 'react-dom/client';\nimport Map from 'react-map-gl/mapbox';\n\nimp"
},
{
"path": "examples/mapbox/geocoder/src/control-panel.tsx",
"chars": 416,
"preview": "import * as React from 'react';\n\nfunction ControlPanel() {\n return (\n <div className=\"control-panel\">\n <h3>Geoc"
},
{
"path": "examples/mapbox/geocoder/src/geocoder-control.tsx",
"chars": 4205,
"preview": "import * as React from 'react';\nimport {useState} from 'react';\nimport {useControl, Marker, MarkerProps, ControlPosition"
},
{
"path": "examples/mapbox/geocoder/tsconfig.json",
"chars": 235,
"preview": "{\r\n \"compilerOptions\": {\r\n \"target\": \"es2020\",\r\n \"jsx\": \"react\",\r\n \"allowSyntheticDefaultImports\": true,\r\n "
},
{
"path": "examples/mapbox/geocoder/vite.config.js",
"chars": 119,
"preview": "export default {\n define: {\n 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)\n }\n};\n"
},
{
"path": "examples/mapbox/geojson/README.md",
"chars": 738,
"preview": "# Example: GeoJSON\n\nThis example showcases how to dynamically add and update custom data sources.\n\n## Usage\n\nTo run this"
},
{
"path": "examples/mapbox/geojson/index.html",
"chars": 1380,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset='UTF-8' />\n <title>react-map-gl Example</title>\n <link href=\"htt"
},
{
"path": "examples/mapbox/geojson/package.json",
"chars": 402,
"preview": "{\n \"scripts\": {\n \"start\": \"vite --open\",\n \"start-local\": \"vite --config ../../vite.config.local.js\",\n \"build\":"
},
{
"path": "examples/mapbox/geojson/src/app.tsx",
"chars": 2244,
"preview": "import * as React from 'react';\nimport {useState, useEffect, useMemo, useCallback} from 'react';\nimport {createRoot} fro"
},
{
"path": "examples/mapbox/geojson/src/control-panel.tsx",
"chars": 1031,
"preview": "import * as React from 'react';\n\nfunction ControlPanel(props) {\n const {year} = props;\n\n return (\n <div className=\""
},
{
"path": "examples/mapbox/geojson/src/map-style.ts",
"chars": 575,
"preview": "import type {LayerProps} from 'react-map-gl/mapbox';\n\n// For more information on data-driven styles, see https://www.map"
},
{
"path": "examples/mapbox/geojson/src/utils.ts",
"chars": 706,
"preview": "import {range} from 'd3-array';\nimport {scaleQuantile} from 'd3-scale';\n\nimport type GeoJSON from 'geojson';\n\nexport fun"
},
{
"path": "examples/mapbox/geojson/tsconfig.json",
"chars": 235,
"preview": "{\r\n \"compilerOptions\": {\r\n \"target\": \"es2020\",\r\n \"jsx\": \"react\",\r\n \"allowSyntheticDefaultImports\": true,\r\n "
},
{
"path": "examples/mapbox/geojson/vite.config.js",
"chars": 119,
"preview": "export default {\n define: {\n 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)\n }\n};\n"
},
{
"path": "examples/mapbox/geojson-animation/README.md",
"chars": 884,
"preview": "# Example: Animated GeoJSON\n\nThis app reproduces Mapbox's [Animate point along line](https://www.mapbox.com/mapbox-gl-js"
},
{
"path": "examples/mapbox/geojson-animation/index.html",
"chars": 966,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset='UTF-8' />\n <title>react-map-gl Example</title>\n <link href=\"htt"
},
{
"path": "examples/mapbox/geojson-animation/package.json",
"chars": 350,
"preview": "{\n \"scripts\": {\n \"start\": \"vite --open\",\n \"start-local\": \"vite --config ../../vite.config.local.js\",\n \"build\":"
},
{
"path": "examples/mapbox/geojson-animation/src/app.tsx",
"chars": 1515,
"preview": "/* global window */\nimport * as React from 'react';\nimport {useState, useEffect} from 'react';\nimport {createRoot} from "
},
{
"path": "examples/mapbox/geojson-animation/src/control-panel.tsx",
"chars": 496,
"preview": "import * as React from 'react';\n\nfunction ControlPanel() {\n return (\n <div className=\"control-panel\">\n <h3>Anim"
},
{
"path": "examples/mapbox/geojson-animation/tsconfig.json",
"chars": 235,
"preview": "{\r\n \"compilerOptions\": {\r\n \"target\": \"es2020\",\r\n \"jsx\": \"react\",\r\n \"allowSyntheticDefaultImports\": true,\r\n "
},
{
"path": "examples/mapbox/geojson-animation/vite.config.js",
"chars": 119,
"preview": "export default {\n define: {\n 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)\n }\n};\n"
},
{
"path": "examples/mapbox/heatmap/README.md",
"chars": 790,
"preview": "# Example: Heatmap layer\n\nThis app reproduces Mapbox's [Create a heatmap layer](https://docs.mapbox.com/mapbox-gl-js/exa"
},
{
"path": "examples/mapbox/heatmap/index.html",
"chars": 1175,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset='UTF-8' />\n <title>react-map-gl Example</title>\n <link href=\"htt"
},
{
"path": "examples/mapbox/heatmap/package.json",
"chars": 350,
"preview": "{\n \"scripts\": {\n \"start\": \"vite --open\",\n \"start-local\": \"vite --config ../../vite.config.local.js\",\n \"build\":"
},
{
"path": "examples/mapbox/heatmap/src/app.tsx",
"chars": 2723,
"preview": "import * as React from 'react';\nimport {useState, useEffect, useMemo} from 'react';\nimport {createRoot} from 'react-dom/"
},
{
"path": "examples/mapbox/heatmap/src/control-panel.tsx",
"chars": 1942,
"preview": "import * as React from 'react';\n\nfunction formatTime(time) {\n const date = new Date(time);\n return `${date.getMonth() "
},
{
"path": "examples/mapbox/heatmap/src/map-style.ts",
"chars": 1323,
"preview": "import type {LayerProps} from 'react-map-gl/mapbox';\n\nconst MAX_ZOOM_LEVEL = 9;\n\nexport const heatmapLayer: LayerProps ="
},
{
"path": "examples/mapbox/heatmap/tsconfig.json",
"chars": 235,
"preview": "{\r\n \"compilerOptions\": {\r\n \"target\": \"es2020\",\r\n \"jsx\": \"react\",\r\n \"allowSyntheticDefaultImports\": true,\r\n "
},
{
"path": "examples/mapbox/heatmap/vite.config.js",
"chars": 119,
"preview": "export default {\n define: {\n 'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken)\n }\n};\n"
},
{
"path": "examples/mapbox/interaction/README.md",
"chars": 725,
"preview": "# Example: Interaction\n\nThis example showcases how to toggle/limit user interaction.\n\n## Usage\n\nTo run this example, you"
},
{
"path": "examples/mapbox/interaction/index.html",
"chars": 1119,
"preview": "<!doctype html>\n<html>\n <head>\n <meta charset='UTF-8' />\n <title>react-map-gl Example</title>\n <link href=\"htt"
},
{
"path": "examples/mapbox/interaction/package.json",
"chars": 350,
"preview": "{\n \"scripts\": {\n \"start\": \"vite --open\",\n \"start-local\": \"vite --config ../../vite.config.local.js\",\n \"build\":"
},
{
"path": "examples/mapbox/interaction/src/app.tsx",
"chars": 1211,
"preview": "import * as React from 'react';\nimport {useState, useCallback} from 'react';\nimport {createRoot} from 'react-dom/client'"
},
{
"path": "examples/mapbox/interaction/src/control-panel.tsx",
"chars": 1630,
"preview": "import * as React from 'react';\n\nconst camelPattern = /(^|[A-Z])[a-z]*/g;\nfunction formatSettingName(name) {\n return na"
}
]
// ... and 386 more files (download for full content)
About this extraction
This page contains the full source code of the visgl/react-map-gl GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 586 files (2.2 MB), approximately 609.4k tokens, and a symbol index with 663 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.