React-map-gl: Control icons missing with mapbox-gl-js 1.6.0

Created on 6 Dec 2019 · 13Comments · Source: visgl/react-map-gl

The icons for map controls are missing when using react-map-gl 5.1.3 with mapbox-gl-js 1.6.0. I expect this affects most earlier versions of react-map-gl too. The controls are functional but blank.

The 1.6.0 release of mapbox-gl-js changed the CSS and elements used for these controls from:

<button class="mapboxgl-ctrl-icon mapboxgl-ctrl-fullscreen">
</button>

<button class="mapboxgl-ctrl-fullscreen">
  <span class="mapboxgl-ctrl-icon" aria-hidden="true"></span>
</button>

with the icons now rendered into the new <span>s. The relevant commit is https://github.com/mapbox/mapbox-gl-js/commit/d59b3da4.

I'd be happy to submit a patch, but I wasn't sure how you'd like to handle backwards compatibility with older mapbox-gl-js versions. Something like the following combination of the old and new HTML might work, but I haven't tested the extra <span> for adverse effects on older versions.

<button class="mapboxgl-ctrl-icon mapboxgl-ctrl-fullscreen">
  <span class="mapboxgl-ctrl-icon" aria-hidden="true"></span>
</button>

Source

tsibley

👍9 👀6

Most helpful comment

Hi @tsibley - Run into the same issue definitely would be ideal for the library to fix 👍
I've managed to mitigate this by either:
Add link to 1.5.1 css to head tag:

<head>
    <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.1/mapbox-gl.css" type="text/css" />
</head>

Or specifying the version of mapbox-gl to rely on in my app's packages:

"mapbox-gl": "1.5.1",

(Optional) And importing the css file (where I use mapbox):

import MapGL, { NavigationControl } from "react-map-gl";

import "mapbox-gl/dist/mapbox-gl.css";

andycarrell on 11 Dec 2019

👍8

All 13 comments

Hi @tsibley - Run into the same issue definitely would be ideal for the library to fix 👍
I've managed to mitigate this by either:
Add link to 1.5.1 css to head tag:

<head>
    <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.1/mapbox-gl.css" type="text/css" />
</head>

Or specifying the version of mapbox-gl to rely on in my app's packages:

"mapbox-gl": "1.5.1",

(Optional) And importing the css file (where I use mapbox):

import MapGL, { NavigationControl } from "react-map-gl";

import "mapbox-gl/dist/mapbox-gl.css";

andycarrell on 11 Dec 2019

👍8

I can confirm this issue with 1.6.1 as well. I moved back to 1.5.1 per @andycarrell's suggestion and everything returned to fully functioning. The specific controls were Geolocation and NavigationControls although I suspect it would be all of them based on how the CSS was behaving in dev tools.

kjkurtz on 26 Dec 2019

[email protected] should work with both [email protected] and older versions.

Pessimistress on 31 Dec 2019

👍2

rollback to 1.5.1 solved issue

svirins on 8 Jan 2020

It did for me too. But if you upgrade react-map-gl to >1.6.0 then you shouldn't need to rollback. At least that was the case for me.

kjkurtz on 8 Jan 2020

Same issue here, needed to roll back to 1.5.1 to get icons displayed.

jotapee on 20 Feb 2020

@jotapee Please see the previous comment and update your react-map-gl.

Pessimistress on 20 Feb 2020

@Pessimistress I was using mapbox on vue.js not react, I was facing the same issue though. The new 1.8.0 version solved it for me. Thanks.

jotapee on 21 Feb 2020

🎉1

We are using "mapbox-gl": "^1.10.0" and still encounter this issue

contis2908 on 4 May 2020

👍3

Same here, experienced the same problem with the latest ^1.10.0, however, rolling back to 1.5.1 allows me to see all 3 icons. using 1.10.1, I was missing the compass.

tsaiDavid on 5 Jun 2020

👍1

@contis2908 @tsaiDavid This issue was fixed in 5.1.6. Open a new issue if you are still experiencing it with the latest release.

Pessimistress on 5 Jun 2020

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')
}

varun2948 on 17 Jun 2020

The above CSS is missing a period before the first mapboxgl-ctrl. Also made a few linter-fixes:

.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
  background-image: url("#{$image-path}/svg/mapboxgl-ctrl-zoom-out.svg");
}

.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
  background-image: url("#{$image-path}/svg/mapboxgl-ctrl-compass.svg");
}

.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
  background-image: url("#{$image-path}/svg/mapboxgl-ctrl-zoom-in.svg");
}

Otherwise this fixes it. The original css-file gave some "Invalid property value", because it couldn't resolve the svg-load-thing on the background-image for controls. I couldn't find how to fix this, so the above fix was necessary.