Leaflet controls not responding to click

Question

Not sure how I have managed this but my leaflet zoom controls are not clickable? They do show up on the screen but there is no mouse change when hovering over them.

Do I need to create another layer for the controls or am I missing something else from my code?

update: The map will also not scroll or zoom in - it appears static

This is my script relating to the map:

var mymap = L.map('mapid');


var Jawg_Streets = L.tileLayer('https://{s}.tile.jawg.io/jawg-streets/{z}/{x}/{y}{r}.png?access-token={accessToken}', {
    attribution: '© JawgMaps © OpenStreetMap contributors',
    minZoom: 0,
    maxZoom: 22,
    subdomains: 'abcd',
    accessToken: foo
}).addTo(mymap);

mymap.zoomControl.setPosition('bottomleft');
mymap.setView([51.505, -0.09], 13);

Also not sure if it might relate to my html:

Or CSS

#mapid {
    height: 100vh;
   z-index: -1;
}

Thanks

jharris711 · Accepted Answer

Remove the z-index: -1 from the css styling and it should work.

WORKING DEMO

MapPanes - Leaflet Docs

Leaflet controls not responding to click

Answers (1)

Related Questions