Added center aligned page

pages/00_home.py

@@ -1,25 +1,26 @@
 import solara
 
+
 @solara.component
 def Page():
+    with solara.Column(align="center"):
+        markdown = """
+        ## Solara for Geospatial Applications
+        
+        ### Introduction
 
-    markdown = """
-    ## Solara for Geospatial Applications
-    
-    ### Introduction
-
-    **A collection of [Solara](https://github.com/widgetti/solara) web apps for geospatial applications.**
+        **A collection of [Solara](https://github.com/widgetti/solara) web apps for geospatial applications.**
 
-    Just a proof-of-concept for now. Not all features are working yet. More features will be added in the future. Click on the menu above to see the other pages.
+        Just a proof-of-concept for now. Not all features are working yet. More features will be added in the future. Click on the menu above to see the other pages.
 
-    - Web App: <https://giswqs-solara-geospatial.hf.space>
-    - GitHub: <https://github.com/opengeos/solara-geospatial>
-    - Hugging Face: <https://huggingface.co/spaces/giswqs/solara-geospatial>
+        - Web App: <https://giswqs-solara-geospatial.hf.space>
+        - GitHub: <https://github.com/opengeos/solara-geospatial>
+        - Hugging Face: <https://huggingface.co/spaces/giswqs/solara-geospatial>
 
-    ### Demos
+        ### Demos
 
-    ![](https://i.imgur.com/4uIEnAJ.gif)
+        ![](https://i.imgur.com/4uIEnAJ.gif)
 
-    """
+        """
 
-    solara.Markdown(markdown)
+        solara.Markdown(markdown)

pages/01_leafmap.py

@@ -12,7 +12,7 @@ class Map(leafmap.Map):
         # Add what you want below
         self.add_basemap("OpenTopoMap")
         change_basemap(self)
-        
+
 
 @solara.component
 def Page():
@@ -29,7 +29,6 @@ def Page():
             scroll_wheel_zoom=True,
             toolbar_ctrl=False,
             data_ctrl=False,
-
         )
         solara.Text(f"Zoom: {zoom.value}")
         solara.Text(f"Center: {center.value}")

pages/02_geemap.py

@@ -1,4 +1,3 @@
-
 import ee
 import geemap
 
@@ -14,10 +13,8 @@ class Map(geemap.Map):
         self.add_ee_data()
         self.add_layer_manager()
         self.add_inspector()
-        
 
     def add_ee_data(self):
-
         # Add Earth Engine dataset
         dem = ee.Image('USGS/SRTMGL1_003')
         landsat7 = ee.Image('LANDSAT/LE7_TOA_5YEAR/1999_2003').select(
@@ -37,7 +34,8 @@ class Map(geemap.Map):
         self.addLayer(
             landsat7,
             {'bands': ['B4', 'B3', 'B2'], 'min': 20, 'max': 200, 'gamma': 2.0},
-            'Landsat 7', False
+            'Landsat 7',
+            False,
         )
         self.addLayer(states, {}, "US States")
 
@@ -56,8 +54,7 @@ def Page():
             on_center=center.set,
             scroll_wheel_zoom=True,
             add_google_map=True,
-            height="700px"
-
+            height="700px",
         )
         solara.Text(f"Zoom: {zoom.value}")
         solara.Text(f"Center: {center.value}")

pages/03_mapbox.py

@@ -1,4 +1,3 @@
-
 import mapwidget.mapbox as mapwidget
 
 import solara
@@ -10,16 +9,15 @@ center = solara.reactive((20, 0))
 @solara.component
 def Page():
     with solara.Column(style={"min-width": "500px", "height": "500px"}):
-        solara.Text("Not fully working yet. Try resizing the window to use the full width.")
+        solara.Text(
+            "Not fully working yet. Try resizing the window to use the full width."
+        )
         # solara components support reactive variables
         solara.SliderInt(label="Zoom level", value=zoom, min=1, max=20)
         # using 3rd party widget library require wiring up the events manually
         # using zoom.value and zoom.set
         mapwidget.Map.element(  # type: ignore
-            zoom=zoom.value,
-            center=center.value,
-            height='600px',
-            width="100%"
+            zoom=zoom.value, center=center.value, height='600px', width="100%"
         )
         solara.Text(f"Zoom: {zoom.value}")
         solara.Text(f"Center: {center.value}")

pages/04_cesium.py

@@ -1,4 +1,3 @@
-
 import os
 import mapwidget.cesium as mapwidget
 
@@ -12,6 +11,7 @@ if os.environ.get('CESIUM_TOKEN') is None:
 else:
     token = os.environ.get('CESIUM_TOKEN')
 
+
 @solara.component
 def Page():
     with solara.Column(style={"min-width": "500px", "height": "500px"}):
@@ -20,9 +20,5 @@ def Page():
         # using 3rd party widget library require wiring up the events manually
         # using zoom.value and zoom.set
         mapwidget.Map.element(  # type: ignore
-            center=center.value,
-            altitude=altitude.value,
-            height='600px',
-            width="100%"
+            center=center.value, altitude=altitude.value, height='600px', width="100%"
         )
-

pages/05_maplibre.py

@@ -1,4 +1,3 @@
-
 import mapwidget.maplibre as mapwidget
 
 import solara
@@ -10,17 +9,16 @@ center = solara.reactive((20, 0))
 @solara.component
 def Page():
     with solara.Column(style={"min-width": "500px", "height": "500px"}):
-        solara.Text("Not fully working yet. Try resizing the window to use the full width.")
+        solara.Text(
+            "Not fully working yet. Try resizing the window to use the full width."
+        )
 
         # solara components support reactive variables
         solara.SliderInt(label="Zoom level", value=zoom, min=1, max=20)
         # using 3rd party widget library require wiring up the events manually
         # using zoom.value and zoom.set
         mapwidget.Map.element(  # type: ignore
-            zoom=zoom.value,
-            center=center.value,
-            height='600px',
-            width="100%"
+            zoom=zoom.value, center=center.value, height='600px', width="100%"
         )
         solara.Text(f"Zoom: {zoom.value}")
         solara.Text(f"Center: {center.value}")

pages/06_openlayers.py

@@ -1,4 +1,3 @@
-
 import mapwidget.openlayers as mapwidget
 
 import solara
@@ -15,10 +14,7 @@ def Page():
         # using 3rd party widget library require wiring up the events manually
         # using zoom.value and zoom.set
         mapwidget.Map.element(  # type: ignore
-            zoom=zoom.value,
-            center=center.value,
-            height='600px',
-            width="100%"
+            zoom=zoom.value, center=center.value, height='600px', width="100%"
         )
         # solara.Text(f"Zoom: {zoom.value}")
         # solara.Text(f"Center: {center.value}")

pages/07_ipyleaflet.py

@@ -13,16 +13,16 @@ class Map(ipyleaflet.Map):
         # Add what you want below
 
         label = widgets.Label('Clicked location')
-        output = widgets.Output()
-        widget = widgets.VBox([label, output])
+        widget = widgets.VBox([label])
         control = ipyleaflet.WidgetControl(widget=widget, position='bottomright')
         self.add_control(control)
-        
+
         def handle_interaction(**kwargs):
             latlon = kwargs.get("coordinates")
             if kwargs.get("type") == "click":
+                output = widgets.Output()
+                widget.children = [label, output]
                 with output:
-                    output.clear_output()
                     print(latlon)
 
         self.on_interaction(handle_interaction)
@@ -38,7 +38,6 @@ def Page():
             center=center.value,
             on_center=center.set,
             scroll_wheel_zoom=True,
-
         )
         solara.Text(f"Zoom: {zoom.value}")
         solara.Text(f"Center: {center.value}")