0

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?

  • 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
2

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.

  • You can accept your own answer. – TomazicM Apr 28 at 11:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.