WIP: update map and netcdf feature

pages/01_dcascade.py

@@ -3,144 +3,93 @@ from pathlib import Path
 import shutil
 from typing import Callable, Optional, Union, cast
 # import leafmap
-import textwrap
-import leafmap.kepler as leafmap
+from ipyleaflet import Map, GeoData, basemaps, LayersControl, ScaleControl, FullScreenControl, WidgetControl, TileLayer, Marker
+import geopandas as gpd
 import solara
+from solara import FigureEcharts, display
 from leafmap.toolbar import change_basemap
 from solara.components.file_drop import FileInfo
 from dcascade_py import dcascade_py
+import xarray as xr
+
+# Define a callback function for the click event
+def on_feature_click(feature, **kwargs):
+    properties = feature['properties']
+    print("Clicked on:", properties)
+    # ds_disk = xr.open_dataset(os.getcwd()+'/public/deposito.nc')
+    # with xr.open_dataset(os.getcwd()+'/public/deposito.nc') as ds:
+    #     print(ds.keys())
+    filename = os.getcwd()+'/public/deposito.nc'
+    ds = xr.open_dataset(filename, decode_times=False)
+    print("-----")
+    print(ds.keys())
+    print(ds["Qout"].values)
+    # print(ds)
+    ds_dec = xr.decode_cf(ds,decode_timedelta=False)
+    print("-----")
+    print(ds_dec.keys())
+    # print(ds_dec)
+
+
+
 
 zoom = solara.reactive(2)
 center = solara.reactive((20, 0))
-config = {'version': 'v1',
- 'config': {'visState': {'filters': [{'dataId': ['Discharge'],
-     'id': '58woufh3',
-     'name': ['ts'],
-     'type': 'range',
-     'value': [0, 1.68], ###time change here
-     'enlarged': False,
-     'plotType': 'histogram',
-     'animationWindow': 'free',
-     'yAxis': None,
-     'speed': 1}],
-   'layers': [{'id': 'lqz57i8',
-     'type': 'geojson',
-     'config': {'dataId': 'Discharge',
-      'label': 'Discharge',
-      'color': [18, 147, 154],
-      'highlightColor': [252, 242, 26, 255],
-      'columns': {'geojson': '_geojson'},
-      'isVisible': True,
-      'visConfig': {'opacity': 0.8,
-       'strokeOpacity': 0.3,
-       'thickness': 1,
-       'strokeColor': [210, 0, 0],
-       'colorRange': {'name': 'Global Warming',
-        'type': 'sequential',
-        'category': 'Uber',
-        'colors': ['#5A1846',
-         '#900C3F',
-         '#C70039',
-         '#E3611C',
-         '#F1920E',
-         '#FFC300']},
-       'strokeColorRange': {'name': 'Ice And Fire',
-        'type': 'diverging',
-        'category': 'Uber',
-        'colors': ['#0198BD',
-         '#49E3CE',
-         '#E8FEB5',
-         '#FEEDB1',
-         '#FEAD54',
-         '#D50255']},
-       'radius': 10,
-       'sizeRange': [0, 10],
-       'radiusRange': [0, 50],
-       'heightRange': [0, 500],
-       'elevationScale': 5,
-       'enableElevationZoomFactor': True,
-       'stroked': True,
-       'filled': False,
-       'enable3d': False,
-       'wireframe': False},
-      'hidden': False,
-      'textLabel': [{'field': None,
-        'color': [255, 255, 255],
-        'size': 18,
-        'offset': [0, 0],
-        'anchor': 'start',
-        'alignment': 'center'}]},
-     'visualChannels': {'colorField': None,
-      'colorScale': 'quantile',
-      'strokeColorField': {'name': 'Discharge', 'type': 'real'},
-      'strokeColorScale': 'quantize',
-      'sizeField': None,
-      'sizeScale': 'linear',
-      'heightField': None,
-      'heightScale': 'linear',
-      'radiusField': None,
-      'radiusScale': 'linear'}}],
-   'interactionConfig': {'tooltip': {'fieldsToShow': {'Discharge': [{'name': 'ts',
-        'format': None},
-       {'name': 'Discharge', 'format': None}]},
-     'compareMode': False,
-     'compareType': 'absolute',
-     'enabled': True},
-    'brush': {'size': 0.5, 'enabled': False},
-    'geocoder': {'enabled': False},
-    'coordinate': {'enabled': False}},
-   'layerBlending': 'additive',
-   'splitMaps': [],
-   'animationConfig': {'currentTime': None, 'speed': 1}},
-  'mapState': {'bearing': 0,
-   'dragRotate': False,
-   'latitude': 40.24060796334474,
-   'longitude': 20.565835594966174,
-   'pitch': 0,
-   'zoom': 8.776177236597563,
-   'isSplit': False},
-  'mapStyle': {'styleType': 'dark',
-   'topLayerGroups': {},
-   'visibleLayerGroups': {'label': True,
-    'road': True,
-    'border': False,
-    'building': True,
-    'water': True,
-    'land': True,
-    '3d building': False},
-   'threeDBuildingColor': [9.665468314072013,
-    17.18305478057247,
-    31.1442867897876],
-   'mapStyles': {}}}}
-
-class Map(leafmap.Map):
-    def __init__(self, **kwargs):
-        super().__init__(**kwargs)
-        self.updateMap()
-        # Add what you want below
-        # self.add_basemap("OpenTopoMap")
-        # change_basemap(self)
-        # self.add_shp()
-    def updateMap(self):
-        self.add_shp("public/deposito.shp", "Discharge")
-        self.config = config
-        # self.add_basemap("OpenTopoMap")
-        # change_basemap(self)
 
+maps = {
+    "OpenStreetMap.Mapnik": basemaps.OpenStreetMap.Mapnik,
+    "OpenTopoMap": basemaps.OpenTopoMap,
+    "Esri.WorldTopoMap": basemaps.Esri.WorldTopoMap,
+}
+
+map_name = solara.reactive(list(maps)[0])
 
 @solara.component
 def MapComponent():
-    m = Map()
-    m.element(  # type: ignore
-        zoom=zoom.value,
-        on_zoom=zoom.set,
-        center=center.value,
-        on_center=center.set,
-        scroll_wheel_zoom=True,
-        toolbar_ctrl=False,
-        data_ctrl=False,
-    )
-    m.config = config
+    # Isolation is required to prevent the map from overlapping navigation (when screen width < 960px)
+        with solara.Column(style={"isolation": "isolate"}):
+            m = Map(center=center.value, zoom = zoom.value, basemap= basemaps.Esri.WorldTopoMap)
+            map_type = maps[map_name.value]
+            url = map_type.build_url()
+
+            sel_df = gpd.read_file(os.getcwd()+'/public/deposito.shp')
+            geo_df = sel_df.to_crs(4326) #32634
+            geo_data = GeoData(geo_dataframe=geo_df, style={'color': 'black', 'fillColor': '#3366cc', 'opacity':0.5, 'weight':3.9, 'dashArray':'2', 'fillOpacity':0.1},
+                           hover_style={'fillColor': 'red' , 'fillOpacity': 5.2}, name="deposito")
+            geo_data.on_click(on_feature_click)
+            m.add(geo_data)
+            m.add(LayersControl())
+            m.element(  # type: ignore
+                zoom=zoom.value,
+                on_zoom=zoom.set,
+                center=center.value,
+                on_center=center.set,
+                scroll_wheel_zoom=True,
+                layers=[
+                    TileLayer.element(url=url),
+                    # Marker.element(location=marker_location.value, draggable=True, on_location=location_changed),
+                    geo_data
+                ]
+            )
+            options = {
+                    "line": {
+                        "title": {"text": "EAD"},
+                        "tooltip": {},
+                        "legend": {"data": ["EAD"]},
+                        "xAxis": {"data":[1,2,3,4,5,6,7,8]},  # {"type": "category"},
+                        "yAxis": {"name": "€/year","nameLocation": "middle","nameGap": 40},
+                        "emphasis": {"itemStyle": {"shadowBlur":10}},
+                        "series": [{
+                            "type": "line",
+                            "universalTransition": True,
+                            "data":[
+                                0,1,4,6
+                            ]
+                        }]
+                    }
+                }
+            FigureEcharts(option=options["line"])
+            
 
 
 @solara.component
@@ -165,7 +114,7 @@ def Page():
         partitionings = ["Direct", "Bed material fraction (BMF)", "Transport capacity function (TCF)", "Shear stress correction approach"]
         partitioning = solara.reactive("Shear stress correction approach")
         timescale = solara.reactive("20")
-        sed_range = solara.reactive("-8,4")
+        sed_range = solara.reactive("-8,5")
         class_size = solara.reactive(2.5)
         deposit = solara.reactive(50.0)
         continuous_update = solara.reactive(True)
@@ -234,9 +183,9 @@ def Page():
                 river = river_filename
                 q = q_filename
                 out = os.getcwd()+"/public/deposito"
-                out_shp = out+".shp"
-                out_prj = out+".prj"
-                shutil.copyfile(river,out_prj)
+                out_shp = out+".nc"    #".shp"
+                # out_prj = out+".prj"
+                # shutil.copyfile(river,out_prj)
                 dcascade_py(river, q, sed_range=sed_range.value, class_size=class_size.value, deposit=deposit.value, timescale=sel_timescale, formula=sel_form, partitioning=sel_part, out=out_shp, version=False, verbose=False, debug=False, credits=False)
                 set_map_loaded(True)
 
@@ -349,3 +298,5 @@ def Page():
                     #             dense=True,
                     #             icon=True,
                     #         )
+
+