Mapbox-gl-js: Mapbox not displaying navigation controls in React

[matheusml]

I'm using React.js 15.3.1 and Mapbox GL 0.23.0.

I want to display navigation controls in my map, but it's not showing up.

Here's my code:

class Home extends Component {
  constructor(props) {
    super(props);

    mapboxgl.accessToken = MAPBOX_TOKEN;
  }

  componentDidMount() {
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v9',
      center: [20, 40],
      zoom: 1.2,
    });

    map.addControl(new mapboxgl.Navigation());
  }

  render() {
    return <div id="map" style={styles} />;
  }
}

[mourner]

Can you set up a minimal JSFiddle that reproduces this?

[matheusml]

@mourner thanks for the reply. Before sending it to JSFiddle, I've noticed something weird.
The button is there (as you can see on the top left corner on the image), but for some weird reason is not showing up:

I'm using Webpack, by the way:

import path from 'path';
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';

module.exports = {
  devtool: 'cheap-source-map',
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/App',
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: 'index.html',
      inject: 'body',
    }),
  ],
  resolve: {
    alias: {
      webworkify: 'webworkify-webpack',
    },
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react'],
        },
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
      },
      {
        test: /\.scss?$/,
        loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
      },
      {
        test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
        loader: 'url-loader?limit=100000',
      },
      {
        test: /\.json$/,
        loader: 'json-loader',
      },
      {
        test: /\.js$/,
        include: path.resolve('node_modules/mapbox-gl-shaders/index.js'),
        loader: 'transform/cacheable?brfs',
      },
    ],
    postLoaders: [{
      include: /node_modules\/mapbox-gl-shaders/,
      loader: 'transform',
      query: 'brfs',
    }],
  },
};

[jfirebaugh]

It looks like the page is not loading the CSS file (mapbox-gl.css).

[matheusml]

Yes it wasn't, @jfirebaugh

I fixed the file:

import 'mapbox-gl/dist/mapbox-gl.css';
import 'mapbox-gl/dist/svg/mapboxgl-ctrl-compass.svg';
import 'mapbox-gl/dist/svg/mapboxgl-ctrl-geolocate.svg';
import 'mapbox-gl/dist/svg/mapboxgl-ctrl-zoom-in.svg';
import 'mapbox-gl/dist/svg/mapboxgl-ctrl-zoom-out.svg';

import React, { Component } from 'react';

import mapboxgl from 'mapbox-gl';
import MAPBOX_TOKEN from '../../config/mapboxToken';

import styles from './styles.js';

class Home extends Component {
  constructor(props) {
    super(props);

    mapboxgl.accessToken = MAPBOX_TOKEN;
  }

  componentDidMount() {
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v9',
      center: [20, 40],
      zoom: 1.2,
    });

    const navigation = new mapboxgl.Navigation();
    map.addControl(navigation);
  }

  render() {
    return <div id="map" style={styles} />;
  }
}

export default Home;

Now I'm importing the css and svgs, but the error is the same =/

[jfirebaugh]

Ok, can you set up the JSFiddle?

[mourner]

Will reopen if given a proper test case.

[shawnmgoulet]

@matheusml - not sure if you resolved or moved on from this, but I was having the same issue attempting to implement in a vueJS project using Webpack. Adding the CSS file as @jfirebaugh mentioned above solved it for me. The difference between your code above and mine, _I believe_, is that I'm pointing directly to the node_modules directory which holds the mapbox-gl.css file.

<template>
  <div id ="map">
    <IntroMap></IntroMap>
  </div>
</template>

<script>
import IntroMap from './components/Map'

export default {
  name: 'map',
  components: {
    IntroMap
  }
}
</script>

<style lang = 'scss'>
@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
@import '../node_modules/mapbox-gl/dist/mapbox-gl.css';
</style>

[varun2948]

Inserting This in your css/scss file does the work Try it Out and Dont Forget To Put Your Node Modules/mapbox-gl/src/svg folders file in somewhere img location To Make it Easily Accessible

.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{
  background-image: url('../img/svg/mapboxgl-ctrl-zoom-out.svg')
}
.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{
  background-image: url('../img/svg/mapboxgl-ctrl-compass.svg')
}
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{
  background-image: url('../img/svg/mapboxgl-ctrl-zoom-in.svg')
}