CODEWITHSUNDEEP
javascriptjquerymapbox-gl-js
okieBubba
okieBubba

Reputation: 391

mapbox gl map does not have focus - + signs don't work until i drag the map

I am having trouble finding out how to get the + and - keys to zoom in/out on my Mapbox map.

Single clicking on the map doesn't seem to set focus on the map. If I use the mouse to drag the map, then the + and - keys will zoom in/out.

I couldn't find anyone else complaining about this problem. Even some of the Mapbox examples have this issue.

Upvotes: 0

Views: 877

Answers (1)

okieBubba
okieBubba

Reputation: 391

When the map is finished loading on the page, it appears to not have 'focus'. My map's id is 'map' so I tried

$('#map').focus();

which doesn't fix the problem. Using the 'inspect element' in the browsers debugger, I looked to see what was in the map object. Mapbox uses a canvas for the map 

    <div class="mapboxgl-canvas-container mapboxgl-interactive"> 
<canvas class="mapboxgl-canvas" tabindex="0" aria-label="Map" 
width="1196" height="817" style="position: absolute; 
width: 1088px; height: 743px;"></canvas>...

So using the class selector on the canvas, I used jQuery to set focus onto the canvas after the map is finished loading.

map.on('load', function{
      $('.mapboxgl-canvas').focus();
}

Upvotes: 0

Related Questions