visgl / react-map-gl Goto Github PK

Could the react version be updated in the package.json. It seems to work with forced install.

Replace the existing style diff mechanism with diffStyles from mapbox-gl-style-spec. This should improve style update performance and prevent the "flicker" that can sometimes happen.

Hi, I'm using the ChoroplethOverlay I need to use an ordinal scale, I made a fake domain (1 = 'my first label', 2 = 'my second label', etc) but it doesn't look right.
I would rather be able to add my own scale or have a flag to use an ordinal instead of a linear scale.

This should instead be derived from the viewport in other ways so that it can be used before rendering the <MapGL> component.

Right now the preferred attributes are numeric (width = { 100 }). Would be really awesome, if they could also be set in strings like "100vw" or "100%". Should be easy to implement.

Even though the original intent of this library was to create a React friendly wrapper around MapboxGL-js, it's more or less just the bits of mapboxGL-js that handle the UI and viewport changes but in a React friendly (stateless) way as well as a few built in overlays and examples. The overlays themselves don't have a direct dependence on MapboxGL-js. They only require the necessary viewport state information. There could eventually be an independent <MapboxGLOverlay> instead.

At the moment the map viewport only supports the jumpTo transition as far as I can tell. Would it be possible to change this to support an option to use easeTo, flyTo or other transitions perhaps? I'd be happy to create a PR for this if it was alright.

If mapbox-gl-js's optionalDependency gl fails to install, npm3 will remove its dependencies, even if they are already deduped and placed in the root node_modules tree.

These erroneously removed dependencies are frequentry required by react-map-gl, and other dependencies of the root module.

To reproduce, just install react-map-gl with npm3.5.2 on a system where gl will fail to install:

$ npm i --save react-map-gl
WARN engine [email protected]: wanted: {"node":"0.10.x","npm":"2.x"} (current: {"node":"0.10.32","npm":"3.5.2"})

...

> [email protected] install /home/udocker/allen-key/node_modules/gl
> prebuild --download

prebuild WARN install libX11.so.6: cannot open shared object file: No such file or directory
gyp: angle/build/standalone.gypi not found (cwd: /home/udocker/allen-key/node_modules/gl) while reading includes of angle/src/angle.gyp while loading dependencies of binding.gyp while trying to load binding.gyp
prebuild ERR! configure error
prebuild ERR! stack Error: `gyp` failed with exit code: 1
prebuild ERR! stack     at ChildProcess.onCpExit (/home/udocker/allen-key/node_modules/node-gyp/lib/configure.js:305:16)
prebuild ERR! stack     at ChildProcess.emit (events.js:98:17)
prebuild ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:810:12)
prebuild ERR! not ok
prebuild ERR! build Error: `gyp` failed with exit code: 1
prebuild ERR! build     at ChildProcess.onCpExit (/home/udocker/allen-key/node_modules/node-gyp/lib/configure.js:305:16)
prebuild ERR! build     at ChildProcess.emit (events.js:98:17)
prebuild ERR! build     at Process.ChildProcess._handle.onexit (child_process.js:810:12)
npm WARN install:[email protected] [email protected] install: `prebuild --download`
npm WARN install:[email protected] Exit status 2

Then verify your tree:

$ npm ls

npm ERR! missing: core-util-is@~1.0.0, required by [email protected]
npm ERR! missing: string_decoder@~0.10.x, required by [email protected]
npm ERR! missing: core-util-is@~1.0.0, required by [email protected]
npm ERR! missing: string_decoder@~0.10.x, required by [email protected]
npm ERR! missing: core-util-is@~1.0.0, required by [email protected]
npm ERR! missing: string_decoder@~0.10.x, required by [email protected]
npm ERR! missing: once@^1.3.0, required by [email protected]
npm ERR! missing: core-util-is@~1.0.0, required by [email protected]
npm ERR! missing: string_decoder@~0.10.x, required by [email protected]

Hi Guys,

While the current implementation wrappers some of the interactions of 'onHoverFeatures' and 'onClickFeatures' as prop functions as convenience and to handle encapsulation around access to map, it won't be able to support the types of interactions that mapbox provides effectively.

Currently, in recent commits, there hit box for clicks has increased from '5' to '15', a hardcoded value to determine the bounding box to pass to 'queryRenderedFeatures'.

The problem is that the query rendered features function is a very powerful part of the mapbox-gl-js API, and largely the gateway to accessing features of the GIS platform. You may want to identify features that are currently drawn on the screen, or based on specifying a limited set of target layers.

Is there an effective way of exposing functions of the API that are not mutators that allow more leveraging of the mapbox API? Could it be possible that some of the functions of the API not affecting mapbox state can be exposed?

Would it be possible to expose wrapper functions of the component (e.g. provide a component ref and access this.refs.etc) to expose some API? Maybe like this.refs.map.queryRenderedFeatures()? It could be available in addition to the current supported API of the component props?

In combination with exposing some of the standard map event behaviour, it could provide a way to be able to interact with the map more effectively and open up easier ways to access the features out of the GIS component of mapbox.

Cheers
Cam

See README
See CHANGELOG

Just to let you know that since Azer removed all his packages from npm the package prova is broke and it fail at npm install :

• https://github.com/azer/prova
• https://medium.com/@azerbike/i-ve-just-liberated-my-modules-9045c06be67c#.akxj99n11

Error:

npm WARN deprecated [email protected]: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.
npm ERR! Darwin 15.4.0
npm ERR! argv "/usr/local/Cellar/node/5.9.1/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v5.9.1
npm ERR! npm  v3.8.3

npm ERR! No compatible version found: prova@^2.1.2
npm ERR! Valid install targets:
npm ERR! 0.0.1-security

see: https://facebook.github.io/react/docs/context.html

Hi, I'm having issues with changing the mapStyle to a mapbox url.

Here's my example with script tags and without React:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src='https://api.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
  <div id='map' style='width: 400px; height: 300px;'></div>
  <script>
    mapboxgl.accessToken = MAPBOX_API_ACCESS_TOKEN;
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v9'
    });
  </script>      
</body>
</html>

it works has intended, but the same-ish basic example with react-map-gl doesn't work properly (they both use the same MAPBOX_API_ACCESS_TOKEN):

const React = require('react')
const ReactDOM = require('react-dom')
const MapGL = require('react-map-gl')

ReactDOM.render(
  <MapGL
      width={400}
      height={400}
      latitude={0}
      longitude={0}
      zoom={4}
      mapStyle='mapbox://styles/mapbox/streets-v9'
      mapboxApiAccessToken={MAPBOX_API_ACCESS_TOKEN}
  />,
  document.querySelector('.root')
)

The map is here and I can interact with it (because I have another layer on top in my real example), but the tiles aren't loading, I just have a grey-ish color which seems to be the background color of the style (because it changes if I change mapStyle).

Any idea why ?

Hi Guys,

I just wanted to know if there is an intention to try and deal with the events that mapbox-gl-js fires internally, or whether there are plans to expose them to subscribers (importantly still in an immutable way).

I am assuming that MapInteractions and MapGL is structured is to protect the 'map' object from being exposed and potentially mutated. I understand and agree with the principle of this as having played a lot with managing state of mapbox and it can get tricky trying to build an application reusing and managing a lot of map states across layers/states etc.

There are a couple of requests that have shown up that I believe are pretty important, something that I would like to consider making a contribution towards as they are things that I also need. Those are 'touch' events and 'dblclick' zoom. More broadly though, I start to think about the way to capture representations of other interactions and expose those to the rest of the React application.

Reviewing the interaction around the MapInteractions class, it is currently taking on some of the responsibilities of the Mapbox "handlers". This is confirmed by things like referencing the scroll_zoom handler of mapbox to provide a scroll zoom behaviour in this class.

The challenge I can see is that the 'handlers' that are involved in mapbox have access to the map to attach themselves to certain events being fired by mapbox. Being able to do this as well will ensure for a consistent behaviour between mapbox and this project.

Considering there is a nice way planned to handle state of the styles configuration, is there a way that we can expose the mapbox 'events' behaviour so we can still protect the mutation of the 'map' object, but allow other classes to access interaction/map events?

Could an implementation be as simple as providing a MapGL prop function that could receive mapbox events as they are fired? Something simple and predictable obviously, maybe just a function that receives an Event style object with type? Developers could then make choices to handle observing those events.

This could allow the application upwards to handle interactions possible a little cleaner (e.g. click event maybe for the user to indicate a position on the map without it being 2 viewport change events) and also downwards to child elements such as the MapInteractions component that could effectively implement a 'dblclick' zoom behaviour.

There will likely still remain the exposure of further parts of the Mapbox GL JS API in an stateless way in order to use these events fully, but maybe this will see more interactions being achievable by the community quicker.

Hoping that I haven't missed something obvious here. If so, I apologise.

Thanks
Cameron

running into a ton of these errors:

quick google search shows that this problem creeped up with the mapbox-gl 0.11.3 update:

mapbox/mapbox-gl-js#1694

which was fixed and should be included in the 0.11.4 version

mapbox/mapbox-gl-js#1696

I think we're version locking to 0.11.3 right now so would be nice to update.

It seems that meta key is hard-coded as a trigger for perspective changing inside <MapInteractions>. It would be nice if this key could be changed to ctrl or alt via a prop of <MapGL>, for instance. Current behaviour triggers windows start menu time and again when a user attempts to see their data from an unusual angle :–)

Or is it possible to replace metaKey with another one already? I could not figure this out from the source code.

see: https://github.com/uber/react-map-gl/blob/master/src/map.react.js#L596

Not sure if it should be a separate module or a function of viewport-mercator-project

There are mixed content errors in Interactive docs, because of HTTP AJAX calls on tiles providers.

Mixed Content: The page at 'https://uber.github.io/react-map-gl/#/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://tile.stamen.com/toner/12/656/1582.png'. This request has been blocked; the content must be served over HTTPS.

I'm getting this error as the transform API is required in the map.react.js file:

var _transform = require('mapbox-gl/js/geo/transform');

But as you say in the the comments of your source file:

NOTE: Transform is not a public API so we should be careful to always lock
down mapbox-gl to a specific major, minor, and patch version.
import Transform from 'mapbox-gl/js/geo/transform';

So why is this included if it's not a public API?

The geo/transform directories don't seem to be included when I install mapbox-gl with npm

How can I resolve this?

Currently, only scroll zoom is supported on the canvas. Double-click (and double-tap) is a useful user experience and accessibility pattern.

https://github.com/uber/react-map-gl/blob/master/src/map-interactions.react.js#L114

What is the rationale behind this?

I wonder if react-map-gl can accept third-party tile layer? I was looking at adding a raster tile layer example on mapbox: https://www.mapbox.com/mapbox-gl-js/example/map-tiles/

so In the react-map-gl place when i configure the map, i have the following:

const rasterStyle = {
      "version": 8,
      "sources": {
          "raster-tiles": {
              "type": "raster",
              "url": "http://webrd02.is.xxxx.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
              "tileSize": 256
          }
      },
      "layers": [{
          "id": "simple-tiles",
          "type": "raster",
          "source": "raster-tiles",
          "minzoom": 0,
          "maxzoom": 22
      }]
    }

and provided this style to the react map gl

<MapGL { ...viewport } mapStyle={rasterStyle} onChangeViewport={ this._onChangeViewport }>
          <SVGOverlay { ...viewport } redraw={ this._redrawSVGOverlay }/>,
          <CanvasOverlay { ...viewport } redraw={ this._redrawCanvasOverlay }/>
        </MapGL>

However, I am getting resource not found error

fit-bounds.js:27 Warning: Failed prop type: Invalid prop `mapStyle` supplied to `MapGL`.
    in MapGL (created by RouteOverlay)
    in RouteOverlay (created by Connect(RouteOverlay))
    in Connect(RouteOverlay) (created by WebglRoute)
    in div (created by WebglRoute)
    in WebglRoute (created by RouterContext)
    in RouterContext (created by Router)
    in Router (created by App)
    in App
    in Provider

Failed to load resource: the server responded with a status of 404 (Not Found)

but this particular tilelayer works fine in my leaflet project.

any help would be appreciated

Maps don't move when dragged on mobile Safari (might affect Android browsers as well). This is because react-map-gl only responds to mouse events; quick fix may be to add listeners for touch events.

Running the full example code in https://uber.github.io/react-map-gl/#/interactivity works fine as is, but doesn't show anything on the map when using:

mapStyle: 'mapbox://styles/mapbox/light-v8'

mapboxApiAccessToken is properly added, and network requests show the at least some of the data jsons actually loading, but nothing is being displayed. Does MapGL not support vector tile sets?

Hi, I keep setting the calculated viewport state during an operation. However the map keeps jumping around between to states.
Do I have to set anything beside the longitude or latitude value?

Thanks for your insight.
Best!

I'm trying to use a custom version of mapbox-gl-shadersin my repo, but this is currently impossible because the source code of the package is linked directly rather than via npm registry. The same applies to mapbox-gl-style-spec, as it can be seen from package.json.

The outcome of the hard-linking is that even if I npm install path/to/my/local/mapbox-gl-shaders or use npm link, mapbox-gl creates an extra instance of this dependency in node_modules/mapbox-gl/node_modules/mapbox-gl-shaders, so all my preparations become vain.

What is the reason for not having mapbox-gl-shaders and mapbox-gl-style-spec packages on npm just like others? Could you please publish them and stop hard-linking?

Currently, the <MapGL> component clones it's children and adds the necessary props. This causes all props to be required as optional since they first get created once without the necessary props. To solve this, we can either:

1.) Use React's context feature.

<MapGL ...mapProps>
    <Overlay locations={locations}/>
</MapGL>

This would require changes to the implementation of existing overlays. It also means we wont be able to use PureRenderMixin since it doesn't know about context. It's also seems to be discouraged to use context in React in general.

2.) Pass the overlays to a callback properly of the <MapGL> component.

<MapGL ...mapProps overlays={(viewport) => {
  <Overlay ...viewport locations={locations} />
}/>

This would cause changes to the usage of overlays but requires no changes to the overlays themselves. It also has the advantage of supporting PureRenderMixin.

instead of the d3 3.0 kitchen sink module.

This issue may not belong here, but it's worth a try. I'm attempting to use react-map-gl inside a Rails project. I'm using this repo as a starting point.

After running npm install react-map-gl --save and including the code snippet from the readme, I get this error:

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

After a ton of Googling, it seems that the problem is that two copies of React are being included on the page. However, I can't seem to find the duplicate dependency inside of react-map-gl. Any help would be much appreciated, and sorry if this is not a relevant issue for this project.

Only React 0.13 is currently supported. This is blocked by the latest version of r-dom being published to npm. see: https://github.com/uber/r-dom/blob/master/package.json#L43

cc: @rtsao, @mlmorg

I'm not sure if this is a react-map-gl, mapbox-gl or webworkify issue, but I'm stuck. In the webworkify repo they say it's a mapbox-gl version issue but I'm not sure: borisirota/webworkify-webpack#18

Is there a reason why you are accepting latLng bounds instead of lngLat bounds in fitBounds? https://github.com/uber/react-map-gl/blob/es6/src/fit-bounds.js#L28

I am confused as to why its breaking the convention of lngLat coordinates.

My use case:

function extent(markers) {
  let extent = [[-Infinity, -Infinity], [Infinity, Infinity]];
  for(let lngLat of markers) {
    if(lngLat[0] > extent[0][0]) {
      extent[0][0] = lngLat[0];
    } else if(lngLat[0] < extent[1][0]) {
      extent[1][0] = lngLat[0];
    }

    if(lngLat[1] > extent[0][1]) {
      extent[0][1] = lngLat[1];
    } else if(lngLat[1] < extent[1][1]) {
      extent[1][1] = lngLat[1];
    }
  }

  // https://github.com/uber/react-map-gl/issues/83
  extent = [extent[0].reverse(), extent[1].reverse()];

  return extent;
};

const MAP_ONLOAD = MapGL.fitBounds(width, height, extent(store.markers), {padding: 50});

Thanks

react-map-gl is only tested using browserify, and unfortunately it appears to be non trivial getting react-map-gl and mapbox-gl-js working with webpack.

While we are not ready to commit to formal support for webpack, it would be great to have an example that could serve as a starting point for webpack users.

This component currently debounces resize events. This makes it hard to synchronize resizing of overlays leading to the overlays temporarily having incorrect offsets during window resizing.
The resizes can be caused by browser window resize, but can also result from the opening/closing of variable width UI components like side bars etc that modify the size of the map component to ensure that the map stays centered.

Hello,

I am running into an issue in that fitBounds is returning an object whose zoom property is NaN. However, the latitude and longitude properties seem to be working correctly, as they are at a location where I would expect the center of the viewport to be. I have looked into the source code a bit, but I am unfamiliar with the Transform library so I am unsure as to where the issue might be. I don't think the issue is with my direct input to fitBounds, as the latitude and longitude are correct, but I could be wrong. Any ideas?

Thanks very much.

Figure out how best to support code coverage reporting, preferably via istanbul. Tests cant run in just node because of dependency on the DOM and can't run in run-browser (which uses PhantomJS) because of dependence on WebGL.

Hi,

i was able to run the basic map in my small webpack react boilerplate code, with the following web pack config:
module: { // Loader required for JSX loaders: [ { test: /\.js$/, exclude: /node_modules/, query:{ plugins: ['transform-decorators-legacy'] }, loader: 'babel' }, { test: /\.js$/, include: path.resolve('node_modules/mapbox-gl-shaders/index.js'), loader: 'transform/cacheable?brfs' }, { test: /\.js$/, include: path.resolve(__dirname, 'node_modules/webworkify/index.js'), loader: 'worker' }, { test: /\.css$/, loader: "style-loader!css-loader" }, { test: /\.json$/, loader: 'json-loader' } ], noParse: [/autoit\.js$/], postLoaders: [ { include: /node_modules\/mapbox-gl-shaders/, loader: 'transform', query: 'brfs' } ] }, resolve: { extensions: ['', '.js', '.jsx'], alias: { 'webworkify': 'webworkify-webpack' } }

with tags in react like this:

<MapGL width={1550} height={600} latitude={20} longitude={110} zoom={11} mapboxApiAccessToken={MAP_BOX_TOKEN} mapStyle={'mapbox://styles/mapbox/basic-v9'} />

however, after I tried to import ScatterplotOverlay into my module, webpack will throw a parsing error like this:

ERROR in ./~/react-map-gl/src/overlays/scatterplot.react.js Module parse failed: /Users/tester/gl-map/node_modules/react-map-gl/src/overlays/scatterplot.react.js Unexpected token (108:6) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (108:6) at Parser.pp$4.raise (/Users/tester/gl-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15) at Parser.pp.unexpected (/Users/tester/gl-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10) at Parser.pp$3.parseExprAtom (/Users/tester/gl-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12) at Parser.pp$3.parseExprSubscripts (/Users/tester/gl-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21) at Parser.pp$3.parseMaybeUnary (/Users/tester/gl-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19) at Parser.pp$3.parseExprOps (/Users/tester/gl-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (/Users/tester/gl-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (/Users/tester/gl-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21) at Parser.pp$3.parseParenAndDistinguishExpression (/Users/tester/gl-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1861:32) at Parser.pp$3.parseExprAtom (/Users/tester/gl-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1796:19) @ ./src/coms/Map2.js 29:19-73

I had a look at the line 108 in the scatterplot module, it is pointing at <canvas..., can anyone please shade some light on this? thanks

Right now, unproject returns a latLng Mapbox object with a lat and lng property. This unintentionally exposes the underlying Mapbox latLng object. It's also not consistent with the project prop which takes an array of [lat, lng]. It's also not consistent with the viewport-mercator-project module.

It would be nice to support mapbox layer (https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/) as well so that we can use the style passed to the map to display a marker, i am thinking at something like this when using the Map :

<MapGL>
<SVGOverlay/> // This is an svg overlay rendered as a DOM Element
<MapboxLayer options={opts}> // This will not render as a DOM Element but will display a mapbox source / layer inside the canvas
</MapGL>

The MapboxLayer component would be filtered in map.react.js from this.props.children.

It would improve compatibility with mapboxgl API.

I can work on something if it does make sense for you guys.