WMS tile overlay displays only after map pan

Question

I am new to Leaflet and OSM. I am trying to overlay a radar layer which is WMS tile layer. The map will load, but the WMS tile layer does not show unless I pan the map and then it displays. It also does not display on mobile devices regardless if I pan the map. I have this same issue with my icons on mobile too. How can I get this tile layer to load when the base map loads?

    var map = L.map('chaserMap', {
    fullscreenControl: true,
})

var gl = L.mapboxGL({
    accessToken: token,
    attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
    style: 'mapbox://styles/mapbox/streets-v11',
    maxZoom: 14,
}).addTo(map);

var pulsingIcon1 = L.icon.pulse({iconSize:[18,18],color:'black'});
    L.marker([33.1712, -96.7039],{icon: pulsingIcon1,title: 'TEST ICON 1'}).addTo(map);

var pulsingIcon2 = L.icon.pulse({iconSize:[18,18],color:'black'});
    L.marker([33.0172, -96.5510],{icon: pulsingIcon2,title: 'TEST ICON 2'}).addTo(map);

var radar_current = L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0q.cgi", {
          layers: 'nexrad-n0q-900913',
          format: 'image/png',
          transparent: true,
          opacity: 0.3,
          attribution: "Weather data © 2016 IEM Nexrad"
}).addTo(map)

map.setView([32.8998, -97.0403], 8);

I have even tried this and still acts with the same behavior.

var map = L.map('chaserMap', {
    fullscreenControl: true,
})

var gl = L.mapboxGL({
    accessToken: token,
    attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
    style: 'mapbox://styles/mapbox/streets-v11',
    maxZoom: 14,
}).addTo(map);

var pulsingIcon1 = L.icon.pulse({iconSize:[18,18],color:'black'});
    L.marker([33.1712, -96.7039],{icon: pulsingIcon1,title: 'TEST ICON 1'}).addTo(map);

var pulsingIcon2 = L.icon.pulse({iconSize:[18,18],color:'black'});
    L.marker([33.0172, -96.5510],{icon: pulsingIcon2,title: 'TEST ICON 2'}).addTo(map);

var radar_current = L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0q.cgi", {
          layers: 'nexrad-n0q-900913',
          format: 'image/png',
          transparent: true,
          opacity: 0.3,
          attribution: "Weather data © 2016 IEM Nexrad"
});

map.addLayer(radar_current);

map.setView([32.8998, -97.0403], 8);

Here is a test link with just the map:

http://media.dfwstormforce.com/test/test.html

If you click the zoom out or zoom out via wheel, you will see it try to load, but never does. Now if you pan the map the layer will load and stay. Once I have had it load after like 30 seconds of not doing anything, but I have sense been able to replicate it. I think it might be something with MapBox maybe? I feel like it might be a z-index issue with the WMS layer being below the MapBox tile layer. Anyway to set the layer order so that WMS layer is above the MapBox tile layer?

Answer 1

The solution to this was z-index related and after finding a thread on the Leaflet Github I came across that mentioned this but was not in the included options was to do this.

Added zIndex: 100,

To my WMS tile layer like so...

var radar_current = L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0q.cgi", {
          layers: 'nexrad-n0q-900913',
          format: 'image/png',
          transparent: true,
          opacity: 0.3,
          zIndex: 100,
          attribution: "Weather data © 2016 IEM Nexrad"
});

Now my WMS tile layer loads when the map loads above the MapBox tile layer.