DeckGL (pydeck) testing.

dash_app/assets/map.css

@@ -0,0 +1,51 @@
+#deck-gl {
+    /* height: 50% !important; */
+    /* width: 50% !important; */
+    left: auto !important;
+    top: auto !important;
+}
+
+#deckgl-wrapper {
+    height: 50% !important;
+    width: 50% !important;
+    left: auto !important;
+    top: auto !important;
+    position: relative !important;
+    /* position: relative !important; */
+    z-index: 1 !important;
+    height: calc(100vh - 85px) !important;
+    width: calc(150vh - 5px) !important;
+    margin-left: -100px !important;
+    /* width: 1300px;
+    /* background-color: white !important; */
+}
+
+#energy-map {
+    margin-top: -5px;
+    height: calc(100vh - 80px);
+    /* margin-left:; */
+/*    margin-bottom: -5px !important;*/
+/*    height: 700px; */
+/*    800*/
+    width: 1300px;
+}
+
+#energy-map2 {
+    margin-top: -5px;
+/*    height: 700px; */
+/*    800*/
+    width: 1300px;
+}
+
+#energy-map3 {
+    margin-top: -50px;
+    height: 1000px !important;
+    margin-right: -50px;
+    margin-left: -50px;
+    /* height: calc(100vh - 80px); */
+    /* margin-left:; */
+/*    margin-bottom: -5px !important;*/
+/*    height: 700px; */
+/*    800*/
+    /* width: 1300px; */
+}

dash_app/assets/page.css

@@ -29,6 +29,14 @@
 
 }
 
+/* #map-select-container {
+    display: none;
+} */
+
+img.leaflet-tile {
+    image-rendering: pixelated;
+}
+
 /* what does this mean? */
 /** { margin: 0; padding: 0 }*/
 
@@ -115,21 +123,10 @@ footer {
 /*    border: 1px solid red;*/
 }
 
-#energy-map {
-    margin-top: -5px;
-    height: calc(100vh - 80px);
-    margin-left:;
-/*    margin-bottom: -5px !important;*/
-/*    height: 700px; */
-/*    800*/
-    width: 1300px;
-}
-
-#energy-map2 {
-    margin-top: -5px;
-/*    height: 700px; */
-/*    800*/
-    width: 1300px;
+.dash-graph {
+    height: calc(100vh - 0px) !important;
+    overflow-y: hidden !important;
+    /* height: 1000px !important; */
 }
 
 #information-tab, #insights-tab, #layers-tab {

dash_app/definitions.py

@@ -1,7 +1,67 @@
-# MSD-LIVE added imports:
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+
+import os
+import matplotlib.colors as mcolors
+
+# client (browser) paths
+PORT = int(os.environ.get("PORT", 8060))
+REQUESETS_PATHNAME_PREFIX = "/"
+
 CONNECT_TO_LAMBDA = False
 
 if CONNECT_TO_LAMBDA:
-    DATASET_ID = "1ffea-emt93" # MSD-LIVE added dataset id that goes to DEV\
+    DATASET_ID = "1ffea-emt93" # MSD-LIVE added dataset id that goes to DEV
+
+REMINDER = "It's coors = (lat, lon) and ... LON = COLS = X ... LAT = ROWS = Y"
+
+
+CMAP_BLACK = mcolors.ListedColormap(['black'])
+# CMAP_BLACK = mcolors.ListedColormap((0,0,0,0.8))
+
+token = open("../../mapbox_token.py").read() # mapbox_api_token = os.getenv("MAPBOX_ACCESS_TOKEN")
+
+plotly_config = {'displaylogo': False,
+                'modeBarButtonsToRemove': ['autoScale', 'resetScale'], # High-level: zoom, pan, select, zoomIn, zoomOut, autoScale, resetScale
+                'toImageButtonOptions': {
+                    'format': 'png', # one of png, svg, jpeg, webp
+                    'filename': 'custom_image',
+                    'height': None,
+                    'width': None,
+                    'scale': 6 # Multiply title/legend/axis/canvas sizes by this factor
+                        }
+                  }
+
+
+# https://medium.com/plotly/introducing-dash-holoviews-6a05c088ebe5
+# https://examples.holoviz.org/gallery/nyc_taxi/nyc_taxi.html
+# https://towardsdatascience.com/displaying-a-gridded-dataset-on-a-web-based-map-ad6bbe90247f
+# https://holoviews.org/getting_started/Customization.html
+# https://holoviews.org/reference/elements/matplotlib/Points.html
+# https://stackoverflow.com/questions/57588857/matplotlib-listedcolormap-transparent-color
+# https://datashader.org/getting_started/Pipeline.html
+# https://holoviews.org/_modules/holoviews/operation/datashader.html
+# https://discourse.holoviz.org/t/how-to-set-geoviews-map-extent-programmatically-in-panel-dashboard/1181
+# https://geog-312.gishub.org/book/geospatial/leafmap.html
+# https://leafmap.org/get-started/
+# https://ai-incubator.pnnl.gov/chat/fy0s5mBnqiTK9YE6C4xB8YrmQv0YMnyLsjA7
+# https://www.google.com/search?q=holoviews+albers+conic&rlz=1C5CHFA_enUS1091US1091&oq=holoviews+albers+conic&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigATIHCAIQIRigATIHCAMQIRigATIHCAQQIRigAdIBCDQ0NTdqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8
+# https://geoviews.org/user_guide/Projections.html
+
+
+# https://plotly.com/python/mapbox-layers/
+# learn Mapbox GL JS: https://docs.mapbox.com/mapbox-gl-js/guides/migrate/
+# layer building in holoviz: https://github.com/holoviz/holoviews/issues/3882
+# remove frame around plot: https://discourse.holoviz.org/t/remove-frame-around-plot/4023/3
+# LINKED SELECTIONS ** https://medium.com/plotly/introducing-dash-holoviews-6a05c088ebe5
+# foreal example:
+#	https://github.com/niowniow/foreal/blob/ea0cb314f3a408f7fd544528ce83e03ca2269b12/foreal/webportal/app.py#L48
+# 	https://github.com/niowniow/foreal/blob/ea0cb314f3a408f7fd544528ce83e03ca2269b12/foreal/webportal/app.py#L48
+#	https://github.com/niowniow/foreal/blob/ea0cb314f3a408f7fd544528ce83e03ca2269b12/foreal/webportal/__init__.py
+#	https://github.com/niowniow/foreal/blob/ea0cb314f3a408f7fd544528ce83e03ca2269b12/foreal/webportal/shared.py
 
-REMINDER = "It's coors = (lat, lon) and ... LON = COLS = X ... LAT = ROWS = Y"
+# stocknews example:
+#	https://github.com/troyscribner/stocknews/tree/6565a854a3469c93b42f2a871301469aa6b9bd04
+# of interest: mapboxgl dash python
+# click event: does dash python support mapboxgl
+#

dash_app/layout.py

@@ -24,17 +24,7 @@
 
 # sourced scripts
 from src.utilities import recur_dictify
-from definitions import CONNECT_TO_LAMBDA
-# if CONNECT_TO_LAMBDA:
-# 	from flask import Flask
-# 	from flask_compress import Compress
-
-
-# sourced scripts
-from src.utilities import recur_dictify
-
-# client (browser) paths
-REQUESETS_PATHNAME_PREFIX = "/"
+from definitions import CONNECT_TO_LAMBDA, REQUESETS_PATHNAME_PREFIX
 
 if CONNECT_TO_LAMBDA:
 
@@ -327,8 +317,8 @@ def tabs_card():
 													dcc.Dropdown(
 				                                        id="map-select",
 				                                        className="dropdown-select",
-				                                        options=["Plotly-imshow", "Plotly-datashader, holoviews", "Leaflet and TiTiler", "Mapbox"],
-				                                        value="Plotly-datashader, holoviews", # "Mapbox", # "Plotly-imshow",
+				                                        options=["Plotly-imshow","Plotly-datashader, mapbox", "Plotly-datashader, holoviews", "Leaflet and TiTiler", "Mapbox", "DeckGL"],
+				                                        value="DeckGL", # "Mapbox", # "Plotly-imshow",
 				                                        clearable=False,
 				                                        searchable=False,
 				                                        multi=False

dash_app/msdlive_utils.py

@@ -25,6 +25,7 @@ def _get_annonomous_credentials() -> dict:
 
 
 def get_bytes(dataset_id: str, file_path: Path) -> bytes:
+    print("Getting data from S3 ... ")
     print(dataset_id, file_path)
     creds_response = _get_annonomous_credentials()
     # TODO see if we can reuse with_session already impl'd in RDM extension

dash_app/run.py

@@ -1,17 +1,18 @@
 #!/usr/bin/env python3
 # -*- coding: utf-8 -*-
 
-import os
 from app import app
+from definitions import PORT
 
 # -----------------------------------------------------------------------------
 # App runs here. Define configurations, proxies, etc.
 # -----------------------------------------------------------------------------
 
+# server = app.server 
 # from app import server as application # in the wsgi.py file -- this targets the Flask server of Dash app
 
 if __name__ == "__main__":
 
 	# app = create_app()
-	port = int(os.environ.get("PORT", 8060))
-	app.run_server(port=port, debug=True)
+	app.run_server(port=PORT, debug=True)
+	# app.run_server(debug=True, use_reloader=False)  # Turn off reloader if inside Jupyter

dash_app/src/datashader_holoviews.py

@@ -0,0 +1,130 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+
+# standard
+import os
+
+# visualization and data manipulation
+import holoviews as hv
+from holoviews import opts
+from holoviews.operation.datashader import datashade
+from holoviews.element.tiles import EsriImagery, CartoDark, CartoLight, EsriStreet, EsriNatGeo, EsriUSATopo, EsriTerrain, OSM, OpenTopoMap, EsriReference
+
+# sourced scripts
+from src.reader import open_as_raster
+from definitions import plotly_config, CMAP_BLACK
+
+
+def plot_ds_holoviews_map(COMPILED_DIR, fpaths):
+
+
+    TIFPATH = os.path.join(COMPILED_DIR, fpaths[0])
+    data_df, array, source_crs, geo_crs, df_coors_long, boundingbox, img = open_as_raster(TIFPATH=TIFPATH, is_reproject=True, is_convert_to_png=False)
+
+    # to use RAPIDS ... need to install drivers, but have no GPUs on Mac
+
+    # ylat = np.arange(0, array.shape[0], 1).tolist()
+    # xlon = np.arange(0, array.shape[1], 1).tolist()
+
+    # data_xr = xr.DataArray(array, 
+    # 	coords={'y': ylat,'x': xlon}, 
+    # dims=["y", "x"])
+    # df = data_xr.to_dataframe(name='value').reset_index()
+    # print(df)
+
+    # this works
+    # fig = df_coors_long.hvplot.scatter(x='LongitudeProj', y='LatitudeProj', by='IsFeasible')
+    # fig = df_coors_long.hvplot(x="LongitudeProj", y="LatitudeProj", kind='scatter', rasterize=True)
+    plot_width = int(5460/1.32)
+    plot_height = int((3229-250)/1.32)
+    # print(int(5460/1.32), int((3229-250)/1.32))
+
+    # map_tiles = gv.tile_sources.OSM() # gv not defined does not work
+    # map_tiles = EsriImagery().opts(alpha=0.5, width=plot_width, height=plot_height, bgcolor='black')
+    # map_tiles = hv.element.tiles.EsriImagery().opts(alpha=0.5, width=plot_width, height=plot_height, show_grid=False)
+    # map_tiles = CartoDark()
+    map_tiles = EsriStreet().opts(alpha=0.5, bgcolor='black', width=plot_width, height=plot_height)
+    # map_tiles = hv.Tiles('https://tile.openstreetmap.org/{Z}/{X}/{Y}.png', name="OSM") #.opts(width=plot_width, height=plot_height)
+    # all of the OSM maps here: https://xyzservices.readthedocs.io/en/stable/gallery.html
+    # map_tiles = hv.Tiles('https://tiles.stadiamaps.com/tiles/stamen_toner_background/{z}/{x}/{y}{r}.{ext}', name="OSM")
+
+    df_coors_long["easting"], df_coors_long["northing"] = hv.Tiles.lon_lat_to_easting_northing(
+    df_coors_long["LongitudeProj"], df_coors_long["LatitudeProj"]
+    )
+    # points = hv.Points(df_coors_long, ['LongitudeProj', 'LatitudeProj'])
+    df_coors_long["alpha"] = 1 # get an error if put 100
+    df_coors_long["color"] = "black"
+    # df_coors_long["marker"] = "circle"
+    # df_coors_long["size"] = 1
+
+    # fig.opts.defaults(opts.Points(size=1, line_color='black'))
+
+    # SHOW
+    # STREAMS****: https://holoviews.org/gallery/apps/bokeh/nytaxi_hover.html
+    points = hv.Points(df_coors_long, ['easting', 'northing'], vdims=['alpha', 'color']).opts(
+                            cmap=CMAP_BLACK, alpha="alpha", 
+                            color="color",
+                            # color='k'
+                            # marker='marker', #size='size'
+                            )
+    # markers = points.opts(
+    # 			opts.Points(
+    # 				color='color',
+    # 				size='size',
+    # 				alpha='alpha',
+    # 				# tools=['hover'],
+    # 				cmap=CMAP_BLACK,  # Or any color map
+    # 				size_index='size'
+    # 			)
+    # 		)
+    # https://holoviews.org/_modules/holoviews/operation/datashader.html
+    feasibility = datashade(points, cmap=CMAP_BLACK,
+                            # color_key="#000000", 
+                            alpha=155, 
+                            min_alpha=255,
+                            width=plot_width, height=plot_height)
+    fig = map_tiles * feasibility * points
+
+    # hv.extension('bokeh', logo=False)
+
+
+    print(fig)
+    print(map_tiles)
+
+    fig.opts(xaxis=None,yaxis=None, title="")
+    setattr(fig, 'plot_width', 1700)
+    setattr(fig, 'plot_height', 900)
+
+    print(opts)
+    # plot_width  = int(750)
+    # plot_height = int(plot_width*4)
+    opts.defaults(
+        opts.Points(size=1, color='blue'),
+        # opts.Overlay(width=plot_width, height=plot_height, xaxis=None, yaxis=None),
+        # opts.RGB(width=plot_width, height=plot_height),
+        # opts.Histogram(responsive=True, min_height=250)
+        )
+
+
+
+    # fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
+
+    # Display the plot
+    # hv.save(fig, 'holoview_plot.html', fmt='html')
+
+    # plot = df_coors_long.hvplot(
+    # 					x='easting',
+    # 					y='northing',
+    # 					kind='scatter',
+    # 					rasterize=True,
+    # 					cmap=cc.fire,
+    # 					cnorm='eq_hist',
+    # 					width=length, 
+    # 					height=length*2
+    # 				)
+    # fig2 = map_tiles * plot
+    # hv.save(fig2, 'holoview_plot2.html', fmt='html')
+
+    # scatter = create_datashaded_scatterplot(df)
+
+    return fig