MCPcopy
hub / github.com/alex3165/react-mapbox-gl

github.com/alex3165/react-mapbox-gl @v5.0.0 sqlite

repository ↗ · DeepWiki ↗ · release v5.0.0 ↗
225 symbols 415 edges 64 files 0 documented · 0%
README

Logo

React-mapbox-gl | Documentation | Demos

Build Status npm version npm downloads TypeScript

React wrapper for mapbox-gl-js.

London cycle example gif

Components

Proxy components (proxy between React and Mapbox API)

  • ReactMapboxGL
  • Layer & Feature
  • property symbol displays a mapbox symbol.
  • property line displays a lineString.
  • property fill displays a polygon.
  • property circle displays a mapbox circle.
  • property raster displays a mapbox raster tiles.
  • property fill-extrusion displays a layer with extruded buildings.
  • property background displays a mapbox background layer.
  • property heatmap displays a mapbox heatmap layer.
  • Source
  • GeoJSONLayer

DOM components (normal React components)

  • ZoomControl
  • ScaleControl
  • RotationControl
  • Marker (Projected component)
  • Popup (Projected component)
  • Cluster

Getting Started

npm install react-mapbox-gl mapbox-gl --save

Example:

Adding the css in your index.html:

<html>
  <head>
    ...
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css"
      rel="stylesheet"
    />
  </head>
</html>

// ES6
import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

// ES5
var ReactMapboxGl = require('react-mapbox-gl');
var Layer = ReactMapboxGl.Layer;
var Feature = ReactMapboxGl.Feature;
require('mapbox-gl/dist/mapbox-gl.css');

const Map = ReactMapboxGl({
  accessToken:
    'pk.eyJ1IjoiZmFicmljOCIsImEiOiJjaWc5aTV1ZzUwMDJwdzJrb2w0dXRmc2d0In0.p6GGlfyV-WksaDV_KdN27A'
});

// in render()
<Map
  style="mapbox://styles/mapbox/streets-v9"
  containerStyle={{
    height: '100vh',
    width: '100vw'
  }}
>
  <Layer type="symbol" id="marker" layout={{ 'icon-image': 'marker-15' }}>
    <Feature coordinates={[-0.481747846041145, 51.3233379650232]} />
  </Layer>
</Map>;

Why are zoom, bearing and pitch Arrays ?

If those properties changed at the mapbox-gl-js level and you don't update the value kept in your state, it will be unsynced with the current viewport. At some point you might want to update the viewport value (zoom, pitch or bearing) with the ones in your state but using value equality is not enough. Taking zoom as example, you will still have the unsynced zoom value therefore we can't tell if you want to update the prop or not. In order to explicitly update the current viewport values you can instead break the references of those props and reliably update the current viewport with the one you have in your state to be synced again.

Current version documentation

Version 3.0 documentation

Version 2.0 documentation

Contributions

Please try to reproduce your problem with the boilerplate before posting an issue.

mapbox-gl-draw compatibility

Try react-mapbox-gl-draw

Looking for an Angular alternative?

Try ngx-mapbox-gl

Extension points exported contracts — how you extend this code

Props (Interface)
(no doc)
example/src/dropdown.tsx
PaddingOptions (Interface)
(no doc)
src/map.tsx
Props (Interface)
(no doc)
src/cluster.tsx
Props (Interface)
(no doc)
src/scale-control.tsx
Props (Interface)
(no doc)
src/feature.ts
Props (Interface)
(no doc)
src/marker.tsx
Props (Interface)
(no doc)
src/source.ts
EnhancedLayerProps (Interface)
(no doc)
src/layer-events-hoc.tsx

Core symbols most depended-on inside this repo

getMapMock
called by 32
src/jest/util.tsx
mountWithMap
called by 16
src/jest/util.tsx
withMap
called by 10
src/context.tsx
diff
called by 9
src/util/diff.ts
toCamelCase
called by 7
src/geojson-layer.ts
initialize
called by 6
src/geojson-layer.ts
overlayTransform
called by 5
src/util/overlays.ts
_deg2rad
called by 4
src/scale-control.tsx

Shape

Method 75
Interface 65
Class 54
Function 31

Languages

TypeScript100%

Modules by API surface

src/map.tsx16 symbols
src/geojson-layer.ts15 symbols
src/image.tsx11 symbols
src/cluster.tsx11 symbols
src/scale-control.tsx10 symbols
src/layer.ts10 symbols
src/source.ts9 symbols
example/src/demos/allShapes.tsx9 symbols
src/util/overlays.ts8 symbols
src/rotation-control.tsx8 symbols
src/projected-layer.tsx8 symbols
example/src/demos/htmlFeatures.tsx8 symbols

Dependencies from manifests, versioned

@turf/bbox4.7.3 · 1×
@turf/helpers4.7.3 · 1×
@types/core-js0.9.43 · 1×
@types/deep-equal1.0.1 · 1×
@types/enzyme3.1.14 · 1×
@types/enzyme-adapter-react-161.0.3 · 1×
@types/es6-promisify5.0.0 · 1×
@types/geojson7946.0.4 · 1×
@types/jest24.0.19 · 1×
@types/mapbox-gl1.10.2 · 1×
@types/node8.0.29 · 1×
@types/prettier1.10.0 · 1×

For agents

$ claude mcp add react-mapbox-gl \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact