EPSG 4326 Layer Incorrectly Projected in Streamlit

[wjsharpe]

I am trying to use leafmap.foliummap to add a map with EPSG4326 projection into streamlit and then add tile layers from GIBS which use that same projection. When I add this tile layer the imagery looks roughly like I would expect, but the coordinates are incorrectly projected. As an example when I try to search the location of New York City it shows up in Africa. I have attached some small example code I used to create that image below. To recreate one could write that code to a file and do streamlit run example_file.py assuming your python env has leafmap and streamlit installed in it. Has anyone else run into this or found a solution?

import streamlit as st
import leafmap.foliumap as leafmap

st.set_page_config(layout="wide")

def app():
    st.title("Streamlit WMTS Example")
    base_url = 'https://gibs-a.earthdata.nasa.gov/wmts/epsg4326/best/wmts.cgi?TIME=2014-01-01&layer=MODIS_Terra_CorrectedReflectance_TrueColor&style=default&tilematrixset=250m&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpeg&TileMatrix={z}&TileCol={x}&TileRow={y}'
    m = leafmap.Map(width=400,height=200,tiles=None,zoom=2,crs='EPSG4326')
    m.add_tile_layer(base_url,name='True_Color',attribution="GIBS",opacity=0.9)
    m.to_streamlit(height=600)
app()

[giswqs]

Show the OpenStreetMap by removing tiles=None,, you will notice that the satellite imagery does not align with the basemap.

[wjsharpe]

Thanks for the reply! You're correct that they don't align which somewhat adds to my confusion. That makes me believe it may be something tile specific? I'm not sure if this is helpful but I copied the tile layer specifics that most of the GIBS layers are using below. Perhaps there some default values that need to be adjusted?

"maxResolution": 0.5625,
          "resolutions": [
            0.5625,
            0.28125,
            0.140625,
            0.0703125,
            0.03515625,
            0.017578125,
            0.0087890625
          ],
          "tileSize": [
            512,
            512
          ],
          "tileMatrices": [
            {
              "matrixWidth": 2,
              "matrixHeight": 1
            },
            {
              "matrixWidth": 3,
              "matrixHeight": 2
            },
            {
              "matrixWidth": 5,
              "matrixHeight": 3
            },
            {
              "matrixWidth": 10,
              "matrixHeight": 5
            },
            {
              "matrixWidth": 20,
              "matrixHeight": 10
            },
            {
              "matrixWidth": 40,
              "matrixHeight": 20
            },
            {
              "matrixWidth": 80,
              "matrixHeight": 40
            }
]

[giswqs]

Run the code below to see the format of the tile URL.

m = leafmap.Map()
m.add_basemap("NASAGIBS.ModisTerraTrueColorCR")
m
print(m.layers[-1].url)

[wjsharpe]

Using that url, the layer fits with OpenStreeMap. It seems odd to me that two endpoints for tile servers both for the same product in EPSG 4326 projection would be so different.