Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-mapbox-gl-typingfix

2.5.1 • Public • Published

Logo

React-mapbox-gl Doc

Greenkeeper badge Build Status npm version npm downloads



London cycle example gif

React wrapper for mapbox-gl-js. Expose a bunch of component meant to be simple to use for React. It is important to understand the difference between the components Map, Layer, GeoJsonLayer, Source, Feature (proxy between React and Mapbox API) and the components Marker, Popup, Cluster, ZoomControl, ScaleControl, RotationControl which are real React components.

Include the following elements:

  • ReactMapboxGl
  • Layer
  • Source
  • Feature
    • Layer type properties symbol display a mapbox symbol.
    • Layer type properties line display a lineString.
    • Layer type properties fill display a polygon.
    • Layer type properties circle display a mapbox circle.
  • GeoJSONLayer
  • ZoomControl
  • ScaleControl
  • RotationControl
  • Marker (Projected component)
  • Popup (Projected component)
  • Cluster

This repository include the Typescript type definition files

How to start

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

Example:

// ES6
import ReactMapboxGl, { Layer, Feature } from "react-mapbox-gl";
 
// ES5
var ReactMapboxGl = require("react-mapbox-gl");
var Layer = ReactMapboxGl.Layer;
var Feature = ReactMapboxGl.Feature;
 
const Map = ReactMapboxGl({
  accessToken: "pk.eyJ1IjoiZmFicmljOCIsImEiOiJjaWc5aTV1ZzUwMDJwdzJrb2w0dXRmc2d0In0.p6GGlfyV-WksaDV_KdN27A"
});
 
<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 is zoom an array

The zoom property is an array on purpose. With a float as a value we can't tell whether the zoom has changed when checking for value equality 7 === 7 // true. We changed it to an array so that between 2 render it check for a reference equality [7] === [7] // false, this way we can reliably update the zoom value without having to keep the viewport in the state of the Map component.

Version 2.0 Documentation

Version 1.12 documentation

Contributions

Built with react-mapbox-gl

monumap.org

mapbox-gl-draw compatibility

Try react-mapbox-gl-draw

Install

npm i react-mapbox-gl-typingfix

DownloadsWeekly Downloads

0

Version

2.5.1

License

MIT

Last publish

Collaborators

  • avatar