# WMS tile overlay displays only after map pan

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,
style: 'mapbox://styles/mapbox/streets-v11',
maxZoom: 14,

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);

format: 'image/png',
transparent: true,
opacity: 0.3,

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,
style: 'mapbox://styles/mapbox/streets-v11',
maxZoom: 14,

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);

format: 'image/png',
transparent: true,
opacity: 0.3,
});

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?

• Just an idea (one never knows): try defining map without immediate setView call and put call at the end: map.setView([32.8998, -97.0403], 8); – TomazicM Apr 24 at 20:19
• Hello, thank you for the suggestion. I tried that and still same behavior. I have updated the code above to reflect that change. – Texan78 Apr 24 at 20:42
• The WMS layer works for me on first map load, see plunkr here. – IvanSanchez Apr 25 at 7:06
• Sure, it works and I can replicate that too, but you're leaving out MapBox plugin which I am using so I can use a certain map style. You add that in and then the issue returns. – Texan78 Apr 25 at 16:25
• I have added a test link in my OP and further details. – Texan78 Apr 25 at 16:56

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", {