I'm currently developing a Leaflet based map webpage and want to display satellite imagery, specifically from the Himawari 8 satellite. NASA have the GIBS api which appears perfect for my purposes. Using this Leaflet plugin I can get it to work for the MODIS (and all other polar orbitals) fine as here:


However, this plugin predates the geostationary satellite feeds. If I try to use the geostationary satellites (i.e. Himawari 8) it seems to almost work at times but either no images are displayed or I get weird fuzzy/blocky images:


Note the only difference between these two is in the bottom of the JavaScript (sorry I'm new to making a jsfiddle so I wasn't sure how to keep it tidier; this is a stripped down version of my page).


    var GIBS_Polar_Modis = new L.GIBSLayer('MODIS_Terra_CorrectedReflectance_TrueColor', {
    date: new Date(),
    transparent: true


    var H8_B13 = new L.GIBSLayer('Himawari_AHI_Band13_Clean_Infrared', {
    date: new Date(),
    transparent: true

This is the specification of the layers:

      "Himawari_AHI_Band13_Clean_Infrared": {
        "title": "Himawari_AHI_Band13_Clean_Infrared",
        "template": "http://gibs.earthdata.nasa.gov/wmts/epsg3857/best/Himawari_AHI_Band13_Clean_Infrared/default/{Time}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png",
        "zoom": 6,
        "date": true},
      "MODIS_Terra_CorrectedReflectance_TrueColor": {
        "title": "MODIS_Terra_CorrectedReflectance_TrueColor",
        "template": "http://gibs.earthdata.nasa.gov/wmts/epsg3857/best/MODIS_Terra_CorrectedReflectance_TrueColor/default/{Time}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg",
        "zoom": 9,
        "date": true},

Given the plugin predates the geostationary satellite feed, I had to work out what to put in. I can see in the browser console that files are getting obtained from the NASA API as I expect but certainly nothing that looks correct to me.


WMTS service for layer Himawari_AHI_Band13_Clean_Infrared seems to be extremely slow, even so much that request for a tile fails frequently. For example, I tried directly to retrieve tile https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/Himawari_AHI_Band13_Clean_Infrared/default/2020-08-29/GoogleMapsCompatible_Level6/6/39/62.png several times. Sometimes request was successful after more than a minute, sometimes it failed altogether.

As for the blocky tiles, it's a consequence of layer's zoom option having a value of 6, which sets max zoom of the layer to 6. Higher you'll go above this zoom level, more blocky the tiles will be shown on Leaflet map, since they will be extrapolated from zoom level 6.

| improve this answer | |

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.