Having issues with Leaflet + GIBS + EPSG4326

Question

I've been having issues getting this to work correctly. Some details:

• I need to use Leaflet 1.0 or higher
• The map is BlueMarble ShadedRelief Bathymetry from NASA GIBS
• The map is EPSG:4326
• The map is loaded via TMS as opposed to WMS

Here's the closest I've gotten so far.

It seems to load and tile everything correctly, but some of the map isn't loading. Everything east of like 180 Longitude, and everything south of like -50 Latitude. I'm basing the code on the example on NASA's site, which works well (I got it working myself), but relies on an older version of Leaflet. After upgrading to a newer version, I've just run into a series of issues. I'm hoping someone can help me finally sort this out.

Answer 1

Your current code looks like:

        map = L.map("map", {
            center: [0, 0],
            zoom: 2,
            maxZoom: 8,
            maxBounds: [
                [-89.9999, -179.9999],
                [89.9999, 179.9999]
            ]
        });
...
        var crs = new L.Proj.CRS(
            "EPSG:4326",
            ....)
....
        var layer = L.tileLayer(template, {
            crs: crs,
            ....}

If you pay attention to the Leaflet API reference, you'll notice that L.TileLayers do not have a crs option, and that L.Maps do have a crs option.

See also the "Notes to GIS users of WMS services" section of the Leaflet tutorial on WMS, as it contains an obvious example of a map with EPSG:4326 CRS.