Comparative maps

[IndigoWizard]

Find a way to create comparative maps where each displays the NDVI from a date period specified by user input. Explore;

• Dual map
• [ ] Map slider

[IndigoWizard]

I first explored the possibility of a split panel slider with geemap but it turned out it's only compatible with a pre-hardcoded list of basemaps and doesn't hook new raster layers. There may be a way but so far it's too time consuming trying to figure it out the geemap way.

Opted for folium's DualMap plugin, I managed to setup a dual map as the main map, since the whole gist of this project is to be able to compare bewteen the NDVI of the same geographic area on two different periods. So far I was able to figure out how to add which layer to which side of the map, it was a bit tricky but it worked for the prototyping phase, here's a preview:

I still have to properly configure the map and attach the appropriate layers and basemaps to the right side of the map.

[IndigoWizard]

Layers order bug

It seems that DualMap has a weird bug where the order of layers is not the same on both maps when adding WmsTileLayer layers to both maps using layerVariable.add_to(m).
I tried experementing with the layers order, adding the layers twice (created separate variables using the same list of wms tiles); once to the right map, once to the left map using add_to(m.m1) & add_to(m.m2) but still, the result is always messedup order, in different ways.

    m = folium.plugins.DualMap(location=[36.40, 2.80], tiles='Open Street Map', zoom_start=10, control_scale=True)


    ### BASEMAPS START
    ## Primary basemaps
    # CartoDB Dark Matter basemap
    b1 = folium.TileLayer('cartodbdark_matter', name='Dark Matter Basemap')
    b1.add_to(m)

    ## WMS tiles basemaps
    # OSM CyclOSM basemap 
    b2 = WmsTileLayer(
        url=('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png'),
        layers=None,
        name='Topography Basemap', # layer name to display on layer panel
        attr='Topography Map',
        show=False
    )
    b2.add_to(m)
    
    # ##### ESRI sattelite imagery service
    b3 = WmsTileLayer(
    url=('http://services.arcgisonline.com/arcgis/rest/services/World_Imagery' + '/MapServer/tile/{z}/{y}/{x}'),
    layers=None,
    name='ESRI Sattelite Imagery',
    attr='ESRI World Imagery',
    show=False
    )
    b3.add_to(m)

    # ##### Google sattelite imagery service
    b4 = WmsTileLayer(
    url=('https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}'),
    layers=None,
    name='Google Sattelite Imagery',
    attr='Google',
    show=False
    )
    b4.add_to(m)

[IndigoWizard]

cyclosm wms tile used as topography map doesn't render tiles beyond zoom level 9 in dual map mode.

[IndigoWizard]

DualMap lacks responsivity (unresizable width according to screen) even with injected css (unresizable height)

[IndigoWizard]

This is a nightmare. ⚠️ 🐞 ☢️ 😵 (this feature alone has taken two week to build, test, solve, break multiple times and it keeps going)

• DualMap won't work through folium.plugins.DualMap.add_ee_layer = add_ee_layer alone due to AttributeError: 'Map' object has no attribute 'add_ee_layer' error unless folium.Map.add_ee_layer = add_ee_layer is added.
• Using st_folium() cayse the DualMap to not render, same for the LayerControl (bug)
• DualMap only renders with folium_static()
• Map not responsive: Can't resize map with folium_static(): height is preset and makes it a ngithmare for screen responsivity
• Unable to target specific generated div element with injected custom CSS through st.markdown() and through JavaScript

Gonna switch back to single map for now untill I figure out a fix with folium-streamlit.

See: Error with st_folium and not with folium_static #139