alex3165 / react-mapbox-gl Goto Github PK

View Code? Open in Web Editor NEW

1.9K 1.9K 536.0 18.2 MB

A React binding of mapbox-gl-js

Home Page: http://alex3165.github.io/react-mapbox-gl/

License: MIT License

HTML 2.54% TypeScript 93.66% Shell 0.14% JavaScript 0.60% CSS 3.06%

map mapbox-gl mapbox-gl-js react react-mapbox-gl

react-mapbox-gl's Introduction

React-mapbox-gl | Documentation | Demos

React wrapper for mapbox-gl-js.

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

react-mapbox-gl's People

Contributors

Stargazers

Watchers

Forkers

growlybear tcandens arnaudmolo terraeclipse alcoheca duataud webruin fphilipe fc-io itjope rlski crokinolemaster jamman-cdn aaronpanch sco daveschumaker ideoma lucacasagrande imclab joshkopecek gustaflindqvist bradparks jerjohn15 joshwcomeau nrako bjorkstam lslangley stevewillard mtauer simacan kmamykin kbuhiire husslehq laznic davidtanluc maxim38 unsplash kayodeadeniyi rafaelalmeida demo3d ypan8240 mollymerp mhink cuulee alseageo ericrwolfe evanfrawley boyur radiodario raphaelyan sabbir daniel5151 scootnetworks mark2685 sohibul z0d14c jensen zaandam cmrtn madeleinejohanson nickhudkins alpha-beta-soup fgkramer gadventures kn0ll nickspeal stereobooster phillipmalboeuf alexmarin davecranwell kikonejacob inactivist emgeee mbalex99 zachlevy trouva mrblenny jenyeeiam liamzebedee nontachaiwebdev jose4gg iwsstuart pcraciunoiu tkayne23 williamcolbert wpf500 pedroeldiablo jpdevries marek-sed sethsamuel guillaume nnnick mspviraj pkanuganti milsiades lkazberova spoobar habx clairethompson jthetzel

react-mapbox-gl's Issues

Isomorphic (server side): window is not defined

Using webpack and starting up in development mode (local), doing

import ReactMapboxGl, { GeoJSONLayer, ScaleControl, ZoomControl } from "react-mapbox-gl";

like from the GeoJSON example leads to the error:

/Users/maxwellrebo/machinecolony/mc-frontend/node_modules/react-mapbox-gl/vendor/mapbox-gl.bundle.js:2730
    exports.window = window;
                     ^

ReferenceError: window is not defined

Tried a few ways to make it work, but then ended up not loading at all on the client. Is there a workaround to this?

Feature onClick handler fires multiple times

Hey again,

A mapbox click event handler is added to the map for each Layer in the map component, which results in the event getting fired as many times as you have Layer components.

Also here, the same Feature onClick handlers are fired for every feature found on the map under the click point.

Combined, the poor handler is fired loads :)

Will post back with how I fix it for my use case. I've got a PoC needing finished and an impending deadline-of-doom, but if I've time in the future I'll reference these issues in PRs. Cheers.

Mapbox Directions API

What is the recommended way to use the the Mapbox Directions API with this project?

Would this work: https://www.mapbox.com/blog/mapbox-gl-directions/

map.addControl(new mapboxgl.Directions());

How to access the underlying map object

I'm trying to add the Geolocate control (https://www.mapbox.com/mapbox-gl-js/api/#GeolocateControl) to my map, but I'm struggling to figure how. The React devtools tell me that ReactMapboxGL's state contains the map object, but it seems improper to poke into the state of a child component from a container component.

What's the best way to use mapbox-gl APIs that aren't encapsulated by the reactified wrapper?

Add setPopup support to Marker

https://www.mapbox.com/mapbox-gl-js/api/#Marker#setPopup

Popup can only have one child?

Is Popup can only one child intentional?

below code will result an error

<Popup>
   <A />
   <B />
</Popup>

to fix this I need to wrap the children in a div

<Popup>
   <div>
        <A />
        <B />
    </div>
</Popup>

Custom components as markers

Hello,

According to the following, https://www.mapbox.com/blog/custom-markers-mapboxgl/, it is now possible to render html markup as a marker.
Are there any plans on implementing this? I am currently hacking my way through; trying to implement is as another Feature component.

Thanks!

Question: How to get new map center on onMapEnd event?

I'm currently catching the onMoveEnd event and would like to then query to see what the new map center is. Is this possible with the current API?

Add prop to enable the TouchZoomRotateHandler

How is it possible to add a pinch to zoom functionality or any other zoom function for mobile?
Right now I can only zoom via mouse wheel.

I can find touch handlers in the source code but there is no documentation how to set them up for zoom.

An other option would be to add a navigation button.
So how can i add the native mapbox-gl zoom controls in a reactive way?

Right now I had to add

map.addControl(new mapboxgl.NavigationControl());

to the source code.
It works but the overlays is off by one zoom level and only update after zoom is finished, so its buggy.

Thank you guys for the awesome work!

Configuring source, source-layer and filter propertites

Hi there,

I can't tell from the examples / documentation if your component supports a tileSet configured like this using the Mapbox GL JS library directly:

map.addLayer({
        "id": "my-id",
        "type": "fill",
        "source": "myMapboxHostedTileSetSource",
        "source-layer": "victoriaAustralia",
        "layout": {},
        "paint": {
            "fill-color": "#81D8D0",
            "fill-opacity": 0.5
        },
         "filter": ["==", "sub_region", "Gippsland"]

});

I'm specifically asking about setting the source, source-layer and filter properties. If this is possible could you provide an example and/or clarify in the documentation.

Thanks
Charlie

Popups don't respond to content changes

Hello, been using this binding for a few days now and have to say, it's fantastic!!!! I have ~50,000 points/polylines displayed and performance is excellent, especially compared to the alternative. 👍

I have a few basic click-handlers inside popup content which toggle classes (tabs). I've found changes within popup content do try to trigger a re-render (componentWillReceiveProps is called) but the content is not updated.

Here's the quick fix I made:

componentWillReceiveProps(nextProps) {
  const { div, popup } = this;
  const {
    children,
    coordinates,
    dangerouslySetInnerHTML,
    text
  } = nextProps;

  if (children) {
    render(children, div);
  } else if (
    this.props.dangerouslySetInnerHTML &&
    dangerouslySetInnerHTML !== this.props.dangerouslySetInnerHTML
  ) {
    popup.setHTML(dangerouslySetInnerHTML);
  } else if (text !== this.props.text) {
    popup.setText(text);
  }

  if (this.props.coordinates !== coordinates) {
    popup.setLngLat(coordinates);
  }
}

Convert the project to typescript

Create and publish a type definition file for react-mapbox-gl.

https://github.com/DefinitelyTyped/DefinitelyTyped

Babel failed with unexpected token

Babel bails on export token:

SyntaxError: src/feature.js: Unexpected token (13:14)
  11 | };
  12 | 
> 13 | export Feature;
     |               ^
  14 | 
...
npm ERR! Failed at the [email protected] build:commonjs script 'BABEL_ENV=commonjssimple babel src --out-dir lib'.

Any idea why it complains? Thanks!

Adding Markers to map

How would I go about adding markers to the map as described here? (https://www.mapbox.com/help/markers/) So far I can only see a way to add symbols, fills, circles, and lines. Is this functionality not included yet or am I just missing something?

Recommended way to accessing mapbox API based on Redux state change?

My map responds to input that filter the layer. So for example when user type foo on another component, only features that have property bar with value foo will be shown.

Right now, to achieve that, I use componentWillReceiveProps for making the update after assigning this.map to map from onStyleLoad.

The code for componentWillReceiveProps:

componentWillReceiveProps = (nextProps) => {
  const { mapFilter } = nextProps

  if (this.map && mapFilter) {
    const map = this.map
    map.setFilter('jb-business', ['==', 'bar', mapFilter])
  }
}

Is there any better way?

Request: polygon

Nice work Alex.
Thinking about making a polygon component aswel?

Fix fill feature

The fill feature is not working on all-shapes example

Add circle shape

Add Navigation component

Hey, would be great to create a Navigation component.

https://www.mapbox.com/mapbox-gl-js/api/#Navigation

Gulp: Cannot find module from /dist using browserify

Hey, trying to get 'hello world' from this package with gulp/browserify. Facing 100s of errors like:

gulp-notify: [Gulp Error] Cannot find module './buffer' from '/xxx/node_modules/react-mapbox-gl/node_modules/mapbox-gl/dist'
gulp-notify: [Gulp Error] Cannot find module '../util/util' from '/xxx/node_modules/react-mapbox-gl/node_modules/mapbox-gl/dist'
gulp-notify: [Gulp Error] Cannot find module '../util/struct_array' from '/xxx/node_modules/react-mapbox-gl/node_modules/mapbox-gl/dist'

index.js:

import React, { Component } from "react";
import ReactMapboxGl from "react-mapbox-gl";
import {render} from "react-dom";

const API_TOKEN = 'xxx';
const MAP_STYLE = 'mapbox://styles/mapbox/streets-v8';

export default class LondonCycle extends Component {

  render() {
    return (
      <ReactMapboxGl
        style={MAP_STYLE}
        accessToken={API_TOKEN}>
      </ReactMapboxGl>
    )
  }
}

render(<LondonCycle/>, document.getElementById('app'));

gulp task:

var b = browserify({
  entries: [srcRoot + '/index.js'],
  debug: true,
  extensions: ['.jsx'],
  transform: [
    ['babelify', {presets: ['es2015', 'stage-0', 'react']}]
  ]
});
gulp.task('js', function() {
  return b.bundle()
    .on('error', handleError)
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(gulp.dest(destRoot));
});

Add Fitbounds support

example: https://www.mapbox.com/mapbox-gl-js/example/fitbounds/
api: https://www.mapbox.com/mapbox-gl-js/api/#Map#fitBounds

In the mapbox example fitbounds only happens on the click of a button, however it would be logical to be able to do this on render when using dynamically generated markers and you want to display all markers on the map wherever they are.

Behavior would be similar to maxBounds but without the constraints in panning. Usage could also be similar by feeding the property and array of all marker coordinates, however it might simply make more sense to have it work with a boolean and having the map calculate the area based on all generated markers.

The difference between this and manually calculating the center based on all markers would be that it's much easier to use and also automatically sets the zoom to the correct value so that all markers fit into the viewable area.

Example's webpack dependencies are out of date

Installation of deps: cd/example && npm install

And on running npm run start

Example of GeoJSONSource

I am having a hard time following your API documentation with regard to drawing polygon features from a geoJSON source.

In your London (multiple markers) example, you seem to store the entire array of markers and their coordinates on state. Would you recommend this when you have tens of thousands of complex polygons? What would be your solution to drawing many polygons from a geoJSON source? Thanks!

I have tried the following:

import React, { Component } from 'react';
import ReactMapboxGl, { Layer, Feature } from "../node_modules/react-mapbox-gl/dist";
import logo from './logo.svg';
import './App.css';

let containerStyle = {
    height: "100vh",
    width: "100vw"
};

const accessToken = [access token removed for safety]

class App extends Component {

    _polygonClicked = ({ feature }) => {
    console.log("Polygon clicked", feature.geometry.coordinates);
    };

    render() {
        return (
        <div className="App">
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h2>Welcome to React</h2>
            </div>
            <ReactMapboxGl
                style={"mapbox://styles/mapbox/streets-v8"}
                center={[11.956511272000057,10.095463399000039]}
                zoom={[11]}
                accessToken={accessToken}
                containerStyle={containerStyle}>
                <Layer
                    type="fill"
                    paint={{ "fill-color": "#3bb2d0", "fill-opacity": .5 }}
                    id="testing"
                    sourceOptions={'religious',{
                        "type": 'geojson',
                        "data":'../small_poly/bridges.geojson'
                        }}
                    sourceId={'religious'}>
                </Layer>

            </ReactMapboxGl>
        </div>
    );
    }
}

export default App;

Thank you in advance!

Uncaught TypeError: Cannot read property '0' of undefined

No matter what I do, I can not get the map to actually render. The box itself renders, but is empty and this error mapbox-gl.js?31ef:295 Uncaught TypeError: Cannot read property '0' of undefined appears every time i move my mouse around where the map should be. The cursor changes, so the map box is there, just empty. Below is the component that renders it:

import React from "react"
import cssModules from "react-css-modules"
import style from "./style.css"
import { connect } from 'react-redux'
import ReactMapboxGl, { Layer, Feature } from "react-mapbox-gl"

const config = {
  containerStyle: {height: "100vh", width: "100vw"},
  accessToken: "....",
  style: "mapbox://styles/mapbox/streets-v9"
};

export class Map extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello</h1>
        <ReactMapboxGl
          style={config.style}
          accessToken={config.accessToken}
          containerStyle={config.containerStyle}
        />
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    user: state.user
  }
}

export default connect(mapStateToProps)(cssModules(Map, style))

Why zoom property is in array? Disabling Moving Method?

I think zoom property should be just primitive float, I don't see any reason to put it in array as it also different from Mapbox GL API
How to disable zoom method? I don't want to use any moving method.

Popup implementation uses ReactDOM.render for children, loosing Context

The popup component I am implementing requires access to React context objects, and therefore must be rendered as children of the component that provides the context. The Popup component uses ReactDOM.render to render children into a div outside of the app hierarchy, and the popup children receive no context.

Is there a way to may be use MapboxGL.Popup.setDOMContent together with using React's ref?

There are other issues related to the Marker/Popup components, is it something you may address in the near future?

Map container resize

How to handle map resize on container size change?
MapBoxMap has "trackResize" option but works only on window resize not on container resize.
Also calling map.resize() on container resize, it does not look really smooth.
Anyone has any ideas how to workaround this?
Cheers

Marker position not updated after modification

Hello,

I placed differents markers on map and when I change their coordinates with a drag bar, their position is not updated after recalling render function. But if I interact with map (drap, zoom), their position is updated (I precise that render is not called during interaction).

I have no problem with symbol layer, but I need an image point.

Thanks

Question: How to trigger manually the mapbox resize() function?

Hello @alex3165,

Is there a way to trigger the mapbox resize() function function?

Thanks!

Unable to implement 3D Buildings example

The current <Layer> element doesn't provide a way to implement the map layer as described in https://www.mapbox.com/mapbox-gl-js/example/3d-buildings/.

For example, there's no way to add type: 'fill-extrusion' to the <Layer /> element as it is not one of the recognized values for the type prop. The source prop also cannot be a string.

Question: Is there a way to render text on the map?

I need to draw some mileage markers on the map for a set of lines that I am drawing. Is there any way to do that using a text overlay on map?

Failing that, it looks like I need to use mapbox studio in order to build icons for all of the mileage markers that I will need (roughly 100-150) - is that right?

PS. Thanks so much for this library - it works great and has been a lifesaver!

Compile mapbox-gl-js using webpack

Compile mapbox-gl-js at build time instead of using the compiled file from mapbox.

Popup component not available when installing from NPM

Hi Alex!

First of all, this binding is awesome!! I'll definitely use it on a project of mine, cheers for building this! 💯

I just noticed that I couldn't import the Popup component => it is not in node_modules/react-mapbox-gl/src nor /dist folders...

I installed it via npm install --save react-mapbox-gl and I'm running on the latest version 0.2.2

Can't test onClick when ReactMapboxGl is wrapped inside a element

I have a component that wrapped ReactMapboxGl inside a div with onClick prop

<div>
        <ReactMapboxGl onClick={this.onClick}
</div>

My testing framework is Mocha with enzyme and expect.
The onClick function is just going to do a simple setState stateA

If I were to run the test:

container.find('ReactMapboxGl').simulate('click')
expect(container.state('stateA')).toEqual(true)

this code would fail but if ReactMapboxGl was not wrapped inside a div, the code would success
I think this is possibly a bug or something

Example not working

I saw some previous issues about the examples not working which were related to webpack version. I am a v2.1.0-beta.27 after npm installing and I receive no errors.

The server says its running on localhost:8080 but I see nothing when I view in the browser, just "The localhost page isn't working"

I tried upgrading webpack-dev-server and webpack to v2.2.0-rc.0 and that didn't help..

Allow to update paint and layout to the layer

Update layout and paint using componentWillReceiveProps, setLayoutProperty and setPaintProperty.

Missing offset property on Popup

I think Popup class is missing offset property. It doesn't work when I put that a value.

Add unit test

@philpl Should we mock mapbox-gl in order to only test the react-mapbox-gl layer so that we don't have to worry about rendering the map on the server side ?

Layer ordering

Hey again,

Do you have a suggested approach to ensure layers are always ordered correctly on z axis?

Here is a paste of my messy map JSX:

const journeyTotal = journeys.length;
return (
  <MapGL style={MAP_STYLE} accessToken={API_TOKEN} {...this.state.viewport}>{
    journeys.map((type, idx) => (
      <Layer key={idx} type="line" {...type.style}>{
        type.segments.map((segment, idx) => (
          <Feature key={'segment-'+idx} coordinates={segment.coordinates}  />
        ))
      }</Layer>
    ))
    }<Layer key={journeyTotal} type="circle" paint={LOCATION_SHAD_STYLE}>{
      this.props.locations.map((location, idx) => (
        <Feature key={'location-shad-'+idx} coordinates={location.lngLat} />
      ))
    }</Layer>
    <Layer key={journeyTotal+1} type="circle" paint={LOCATION_STYLE}>{
      this.props.locations.map((location, idx) => (
        <Feature key={'location-'+idx} coordinates={location.lngLat} />
      ))
    }</Layer>
    <Popup {...this.props} />
  </MapGL>
);

Have a look at the key attribute on my layers. This approach is the only way I found to ensure the layers are ordered as they appear in the JSX. Without the sequential indexes (I tried arbitrary high numbers like 9999 without success), the layer order is unpredictable. Once I filter the data using other functionality, the indexes can become out-of-sequence and breaks ordering.

The order of layers in this array is how mapbox-gl will render the layers. The package doesn't appear to take advantage of this, using componentWillMount and addLayer, which appears to be asynchronous as my most expensive layers are rendered last / on top (the journey polylines).

Any ideas?

Support for initial zoom/center

Correct me if I'm wrong, but I believe right now there's no way to set initial values for zoom or center; You either need to make them controlled values, or stick with the current default.

For a project I need a specific zoom/center on load, but I otherwise don't care about zooming/panning, so I'd just like to update the initial values set to Mapbox.

Let me know if this is a feature that you'd be interested in, I can submit a PR if I don't hit any weird issues.

Warning: bind(): React component methods may only be bound to the component instance

I'm using [email protected], react@^15.4.1, react-dom@^15.4.1 versions.

When adding a ZoomControl which has an onControlClick callback, React gives an error:

The error is coming from this line:

react-mapbox-gl/src/zoom-control.js

Line 103 in 1bd5313

onClick={onControlClick.bind(this, map, zoomDiff)}>

where the component calls .bind for the parent component's (MyMap) method.

MyMap.js:

import React from 'react';
import ReactMapboxGl, { Layer, Feature, Marker, ZoomControl } from 'react-mapbox-gl';

const MyMap = React.createClass({
  getInitialState() {
    return {
      mapCenter: [0, 0],
      zoom: 2,
      style: 'mapbox://styles/mapbox/light-v9',
    };
  },

  render() {
    const { state, props } = this;

    return (
      <div className="MyMap" style={{width: 500, height: 700}}>
          <ReactMapboxGl
            center={state.mapCenter}
            zoom={[state.zoom]}
            style={state.style}
            accessToken="pk.eyJ1IjoiZmFicmljOCIsImEiOiJjaWc5aTV1ZzUwMDJwdzJrb2w0dXRmc2d0In0.p6GGlfyV-WksaDV_KdN27A"
          >
            <ZoomControl
              zoomDiff={1}
              onControlClick={this._onControlClick}
            />
          </ReactMapboxGl>
      </div>
    );
  },

  _onControlClick(map, zoomDiff) {
    const zoom = map.getZoom() + zoomDiff;
    this.setState(() => ({ zoom: zoom }));
  }
});

export default MyMap;

Add image source and video source

https://www.mapbox.com/mapbox-gl-js/api/#ImageSource
https://www.mapbox.com/mapbox-gl-js/api/#VideoSource

ZoomControl doesn't respect movingMethod

When adding a ZoomControl to map without any options, map's movingMethod option is not respected.

Expected:

Animated zooming. Definition in API docs:

movingMethod (Default: flyTo): String define the method used when changing the center or zoom position.

What happens:

Zooming without animation.

MyMap.js:

import React from 'react';
import ReactMapboxGl, { Layer, Feature, Marker, ZoomControl } from 'react-mapbox-gl';

const MyMap = React.createClass({
  getInitialState() {
    return {
      style: 'mapbox://styles/mapbox/light-v9',
    };
  },

  render() {
    const { state, props } = this;

    return (
      <div className="MyMap" style={{width: 500, height: 700}}>
          <ReactMapboxGl
            style={state.style}
            accessToken="pk.eyJ1IjoiZmFicmljOCIsImEiOiJjaWc5aTV1ZzUwMDJwdzJrb2w0dXRmc2d0In0.p6GGlfyV-WksaDV_KdN27A"
          >
            <ZoomControl />
          </ReactMapboxGl>
      </div>
    );
  }
});

export default MyMap;

Package target mapbox-gl@^0.27.0 not found

On npm install, I get the below error.

Update Mapbox-gl-js

Update mapbox-gl-js to version 0.25

The examples are not working ?

1- After following all the steps in the readme file, I tried to run the examples and I got this error :

            `throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
            ^
    WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
     - configuration.resolve.extensions[0] should not be empty.
        at webpack (/Users/Downloads/react-mapbox-gl-  master/example/node_modules/webpack/lib/webpack.js:16:9)
        at Object.<anonymous> (/Users/Downloads/react-mapbox-gl-master/example/server.js:5:16)
        at Module._compile (module.js:409:26)
        at Object.Module._extensions..js (module.js:416:10)
        at Module.load (module.js:343:32)
        at Function.Module._load (module.js:300:12)
        at Function.Module.runMain (module.js:441:10)
        at startup (node.js:139:18)
        at node.js:968:3
    [nodemon] app crashed - waiting for file changes before starting...`

2- After some research I managed to make it work by doing this :

            `npm uninstall webpack --save-dev`
            `npm install [email protected] --save-dev`

3- This resolved the issue but now I'm getting another error :

    ERROR in ./src/all-shapes.js
    Module not found: Error: Can't resolve 'react-mapbox-gl' in '/Users/Downloads/react-mapbox-gl-master/example/src'
     @ ./src/all-shapes.js 8:0-99
     @ ./src/index.js
     @ multi main

    ERROR in ./src/geojson-example.js
    Module not found: Error: Can't resolve 'react-mapbox-gl' in '/Users/Downloads/react-mapbox-gl-master/example/src'
     @ ./src/geojson-example.js 8:0-89
     @ ./src/index.js
     @ multi main

    ERROR in ./src/london-cycle.js
    Module not found: Error: Can't resolve 'react-mapbox-gl' in '/Users/Downloads/react-mapbox-gl-master/example/src'
     @ ./src/london-cycle.js 10:0-84
     @ ./src/index.js
     @ multi main

4- Question:
How can I make the example work ?

Since the zoom prop does not change with scrolling it cannot go back to the original zoom level. Am I missing something here?

Update to mapbox-gl 0.27

Several improvements have been made on mapbox-gl 0.27. https://github.com/mapbox/mapbox-gl-js/releases/tag/v0.27.0