Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Basic mapbox style example not working #96

Closed
Calvein opened this issue Jul 19, 2016 · 6 comments
Closed

Basic mapbox style example not working #96

Calvein opened this issue Jul 19, 2016 · 6 comments

Comments

@Calvein
Copy link

Calvein commented Jul 19, 2016

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 ?
@kachkaev
Copy link

@Calvein are you using https://github.com/mxstbr/react-boilerplate/issues by a chance? I'm experiencing the same problem with this boilerplate. However, after I build and open a minified version of the app, the map shows up in full. The same applies when instead of defining the style as a string, I use my custom style that is inside Immutable object.

Will work on MWE now.

@kachkaev
Copy link

MWE:
https://github.com/kachkaev/react-boilerplate-react-map-gl-mwe

@kachkaev kachkaev mentioned this issue Jul 25, 2016
Closed
@Calvein
Copy link
Author

Calvein commented Jul 25, 2016

I'm not, we're using our default boilerplate. It's working correctly when we're using an Immutable style though.
FYI, I'm using this right now (it's using mapbox's raster tiles instead of vector, not perfect at all :/):

import Immutable from 'immutable'
import rasterTileStyle from 'raster-tile-style'

const tileSource = 'http://a.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=' + mapboxApiAccessToken
const mapStyle = Immutable.fromJS(rasterTileStyle([tileSource]))

@kachkaev
Copy link

Thanks for the hint @Calvein - raster tiles to seem to work. I'm still investigating what's wrong with the vector data here:
react-boilerplate/react-boilerplate#784

@ibgreen
Copy link
Contributor

ibgreen commented Aug 26, 2016

I am going to close this as slightly off-topic, as no specific react-map-gl bugs are mentioned. FWIW, there are now instructions from Mapbox on how to build with webpack, see README.

@ibgreen ibgreen closed this as completed Aug 26, 2016
@kachkaev
Copy link

Nice! Here's a direct link for those who feel lazy going there in a few hops:
https://github.com/mapbox/mapbox-gl-js#using-mapbox-gl-js-with-webpack

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Calvein @kachkaev @ibgreen