Mapbox Navigation Control Zoom in and out

3
votes

I have successfully added Navigation Control to my map, however the buttons are blank, no '+' or '-' on either of them. Is there another option I can use to place the '+' or '-' on them. Here is the code I used to create the Navigation controls.

this.map = new MapboxGL.Map(mapOptions);

var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-right');

I have seen similar examples using Mapbox Leaflet's zoomInText and zoomInTitle. Is there something similar I can use in Mapbox GL?

3
mapboxmapbox-glmapbox-gl-js
Have you included the mapbox-gl.css CSS file on the page? – Lucas Wojciechowski
A link to a functional demo will us help you debug. – Lucas Wojciechowski
I'm having the same problem. I'm using mapbox gj js as part of a React app. I have a css file that I'm referencing in the component where I make the map and navigation buttons, but it doesn't seem to impact the buttons. – Alex

3 Answers

2
votes

Can you provide any errors, or additional code that will help us figure out what exactly is the problem.

Navigation control is usually very straight forward as outlined here

When you inspect the element do you see a class?

.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in

That class should have a background image of the "+".

If you don't see it, you must not have included the css.

0
votes

I was facing similar kind of issue while implementing in Angular2 but as lucas-wojciechowski has pointed out including the mapbox-gl.css will fix the issue. 

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
0
votes

In my case the navigation controls and the North arrow button were blank and the fullscreen button only partially visible in the wrong color. The problem was an old css file. Through changing the version number from 1.4.1. to 1.7.0 everything was corrected!

<link href="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css" rel="stylesheet" />