Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion open-source-ecosystem/creating-your-own-instance/index.qmd
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

broken reference link

Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ The modular VEDA platform architecture provides a blueprint on how prominent ope
3. Cloud computing with your own tailored JupyterHub environment
4. Browser-based visualization and storytelling using the Dashboard's cloud-native tools

See [Software Architecture](open-source-ecosystem/architecture.qmd) for more information on how all of these pieces fit together.
See [Software Architecture](../architecture.qmd) for more information on how all of these pieces fit together.

There are many options for how to use the VEDA software ecosystem, depending on your needs and existing set of tools.

Expand Down
2 changes: 1 addition & 1 deletion open-source-ecosystem/repositories.qmd
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

broken link

Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ Dashboard UI for viewing and analysing VEDA assets. Also the repository for the
Content for the [VEDA Dashboard for NASA EarthData](https://www.earthdata.nasa.gov/dashboard/) and template for other projects

## VEDA JupyterHub
### [2i2c-org/infrastructure](2i2c-org/infrastructure)
### [2i2c-org/infrastructure](https://github.com/NASA-IMPACT/veda-hub-infrastructure)
Infrastructure for configuring and deploying community JupyterHubs by 2i2c

## VEDA Documentation
Expand Down
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unsure why delta-ui was included, but changed all to veda-ui

Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ Dashboard-specific notes that supplement the full [stac-api collection specifica
| **Field &/or Extension** | **Recommendations** |
| --- | --- |
| **id** | If dataset exists in NASA's Earthdata or presumably from some other data provider like ESA, use that ID. If appropriate, add a suffix for any additional processing that has been performed, e.g. "OMSO2PCA_cog". If dataset is not from NASA's Earthdata, we can use a human readable name with underscores like "facebook_population_density". |
| **dashboard extension** | To support the delta-ui we have added two new fields in a proposed dashboard extension. For now we are just adding the fields but after testing things out, we can formalize the extension with a [hosted json schema](https://github.com/stac-extensions/template). **_Dashboard extension properties are only required for collections that will be viewed in the delta-ui dashboard._** |
| **dashboard extension** | To support the veda-ui we have added two new fields in a proposed dashboard extension. For now we are just adding the fields but after testing things out, we can formalize the extension with a [hosted json schema](https://github.com/stac-extensions/template). **_Dashboard extension properties are only required for collections that will be viewed in the veda-ui dashboard._** |
| **dashboard:is_periodic** | `True/False` This boolean is used when summarizing the collection—if the collection is periodic, the temporal range of the items in the collection and the time density are all the front end needs to generate a time picker. If the items in the collection are not periodic, a complete list of the unique item datetimes is needed. |
| **dashboard:time_density** | `year`, `month`, `day`, `hour`, `minute`, or `null`. These time steps should be treated as enum when the extension is formalized. For collections with a single time snapshot this value is null. |
| **item_assets** | [stac-extension/item_assets](https://github.com/stac-extensions/item-assets/blob/main/README.md) is used to explain the assets that are provided for each item in the collection. We’re not providing thumbnails yet, but this example below includes a thumbnail asset to illustrate how the extension will be used. The population of this property is not automated, the creator of the collection writes the item assets documentation. **_Item assets are only required for collections that will be viewed in the delta-ui dashboard._** |
| **summaries**| The implementation of this [core stac-spec](https://github.com/radiantearth/stac-api-spec/blob/master/stac-spec/collection-spec/collection-spec.md#summaries) field is use-case specific. Our implementation is intended to support the dashboard and will supply datetime and raster statistics for the default map layer asset across the entire collection. **_Currently summaries are manually updated with a delta-ui specific [user defined function in pgstac](https://github.com/NASA-IMPACT/veda-backend/issues/31)._** |
| **item_assets** | [stac-extension/item_assets](https://github.com/stac-extensions/item-assets/blob/main/README.md) is used to explain the assets that are provided for each item in the collection. We’re not providing thumbnails yet, but this example below includes a thumbnail asset to illustrate how the extension will be used. The population of this property is not automated, the creator of the collection writes the item assets documentation. **_Item assets are only required for collections that will be viewed in the veda-ui dashboard._** |
| **summaries**| The implementation of this [core stac-spec](https://github.com/radiantearth/stac-api-spec/blob/master/stac-spec/collection-spec/collection-spec.md#summaries) field is use-case specific. Our implementation is intended to support the dashboard and will supply datetime and raster statistics for the default map layer asset across the entire collection. **_Currently summaries are manually updated with a veda-ui specific [user defined function in pgstac](https://github.com/NASA-IMPACT/veda-backend/issues/31)._** |
| **title and description** | Use these properties to provide specific information about the collection to API users and catalog browsers. These properties correspond to [dataset name and info in the covid-api](https://github.com/NASA-IMPACT/covid-api/blob/develop/covid_api/db/static/datasets/no2-diff.json) but the delta dashboard will use delta-config to set these values in the UI so the information in our stac collections will be for data curators and API users. |
| **collection name style choices** | Prefer lower-case kebab-case collection names. Decision: Should names align with underlying data identifiers or should it be an interpreted name? `omi-trno2-dhrm` and `omi-trno2-dhrm-difference` vs `no2-monthly` and `no2-monthly-diff`; `bmhd-30m-monthly` vs `nightlights-hd-monthly` |
| **license** | [SPDX license id](https://spdx.org/licenses/), license is likely available in CMR but we may need to research other sources of data. Default open license: `CC0-1.0` |
Expand Down Expand Up @@ -43,7 +43,7 @@ Dashboard-specific notes that supplement the full [stac-api collection specifica
}
```

**summaries example for periodic collection**
**summaries example for non-periodic collection**
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The examples were incorrectly labelled.

```
"summaries": {
"datetime": ["2016-01-01T00:00:00Z", "2022-01-01T00:00:00Z"],
Expand All @@ -54,7 +54,7 @@ Dashboard-specific notes that supplement the full [stac-api collection specifica
}
```

**summaries example for non-periodic collection**
**summaries example for periodic collection**
```
"summaries": {
"datetime": [
Expand Down
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

grammatical error

Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ The CMR properties question in the table above (how to refer the STAC Item to it
}
```

**stac-spec [scieintific extension](https://github.com/stac-extensions/scientific)**
**stac-spec [scientific extension](https://github.com/stac-extensions/scientific)**
```
"properties": {
"sci:doi": "10.5067/HLS/HLSS30.002",
Expand Down
2 changes: 1 addition & 1 deletion user-guide/notebooks/index.qmd
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There was no file named veda-jh-access.html so I linked it with "Getting access"

Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ The **Quickstarts** examples are further divided into two sections, which you ca

## How to run

Every notebook contains information about how to run it. Some can run on [VEDA Trial Hub](https://binder.openveda.cloud/) and all can run on the [VEDA JupyterHub](https://hub.openveda.cloud/). See [VEDA Analytics JupyterHub Access](https://nasa-impact.github.io/veda-docs/veda-jh-access.html) for information about how to gain access.
Every notebook contains information about how to run it. Some can run on [VEDA Trial Hub](https://binder.openveda.cloud/) and all can run on the [VEDA JupyterHub](https://hub.openveda.cloud/). See [VEDA Analytics JupyterHub Access](/user-guide/scientific-computing/getting-access.qmd) for information about how to gain access.

### Running outside of VEDA JupyterHub

Expand Down
147 changes: 147 additions & 0 deletions user-guide/notebooks/stories/test_sbs.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
<!DOCTYPE html>
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>

<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#map_d3e912f3a42c8ccf3fd73cb784ac925d {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
.leaflet-container { font-size: 1rem; }
</style>

<style>html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>

<style>#map {
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
}
</style>

<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>


<script src="https://cdn.jsdelivr.net/gh/digidem/[email protected]/leaflet-side-by-side.min.js"></script>
</head>
<body>


<div class="folium-map" id="map_d3e912f3a42c8ccf3fd73cb784ac925d" ></div>

</body>
<script>


var map_d3e912f3a42c8ccf3fd73cb784ac925d = L.map(
"map_d3e912f3a42c8ccf3fd73cb784ac925d",
{
center: [40.0, -100.0],
crs: L.CRS.EPSG3857,
...{
"zoom": 4,
"zoomControl": true,
"preferCanvas": false,
}

}
);





var tile_layer_ff8df70f1b5ec58cd1cc6010cb89bc8d = L.tileLayer(
"https://tile.openstreetmap.org/{z}/{x}/{y}.png",
{
"minZoom": 0,
"maxZoom": 19,
"maxNativeZoom": 19,
"noWrap": false,
"attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors",
"subdomains": "abc",
"detectRetina": false,
"tms": false,
"opacity": 1,
}

);


tile_layer_ff8df70f1b5ec58cd1cc6010cb89bc8d.addTo(map_d3e912f3a42c8ccf3fd73cb784ac925d);


var tile_layer_4df42e76a1f42c81b46cca0e2aa2045e = L.tileLayer(
"https://tile.openstreetmap.org/{z}/{x}/{y}.png",
{
"minZoom": 0,
"maxZoom": 19,
"maxNativeZoom": 19,
"noWrap": false,
"attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors",
"subdomains": "abc",
"detectRetina": false,
"tms": false,
"opacity": 1,
}

);


tile_layer_4df42e76a1f42c81b46cca0e2aa2045e.addTo(map_d3e912f3a42c8ccf3fd73cb784ac925d);


var tile_layer_e308300f3c232e205f3fce3fd50a1e5c = L.tileLayer(
"https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
{
"minZoom": 0,
"maxZoom": 20,
"maxNativeZoom": 20,
"noWrap": false,
"attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors \u0026copy; \u003ca href=\"https://carto.com/attributions\"\u003eCARTO\u003c/a\u003e",
"subdomains": "abcd",
"detectRetina": false,
"tms": false,
"opacity": 1,
}

);


tile_layer_e308300f3c232e205f3fce3fd50a1e5c.addTo(map_d3e912f3a42c8ccf3fd73cb784ac925d);


var side_by_side_layers_f237a06e227e03d3672adbe7b5761d3e = L.control.sideBySide(
tile_layer_4df42e76a1f42c81b46cca0e2aa2045e, tile_layer_e308300f3c232e205f3fce3fd50a1e5c
).addTo(map_d3e912f3a42c8ccf3fd73cb784ac925d);

</script>
</html>
35 changes: 35 additions & 0 deletions user-guide/notebooks/stories/test_sidebyside.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import folium
from folium.plugins import SideBySideLayers

# Create map
m = folium.Map(location=[40, -100], zoom_start=4)

# Create two tile layers
layer_left = folium.TileLayer(
tiles='openstreetmap',
name='OpenStreetMap'
)

layer_right = folium.TileLayer(
tiles='cartodbpositron',
name='CartoDB'
)

# IMPORTANT: Add layers to map FIRST
layer_left.add_to(m)
layer_right.add_to(m)

# Then create SideBySideLayers
sbs = SideBySideLayers(layer_left, layer_right)
sbs.add_to(m)

# Save and check
m.save('test_sbs.html')
print("Map saved to test_sbs.html")

# Check if the SideBySide JavaScript is included
html = m._repr_html_()
if 'leaflet-side-by-side' in html or 'sideBySide' in html:
print("✓ SideBySide plugin is included in the HTML")
else:
print("✗ SideBySide plugin NOT found in HTML")
89 changes: 89 additions & 0 deletions user-guide/notebooks/stories/test_sidebyside_function.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
#!/usr/bin/env python3
"""
Test the new create_side_by_side_map function in plotutils.py
"""

import plotutils as putils

def test_create_side_by_side_map():
"""Test the create_side_by_side_map function"""

print("Testing create_side_by_side_map function...")
print("=" * 60)

# Create test tile URLs (these won't load real data but will test the function)
tiles_left = "https://example.com/reflectivity/{z}/{x}/{y}.png"
tiles_right = "https://example.com/velocity/{z}/{x}/{y}.png"

# Test with all parameters
m = putils.create_side_by_side_map(
tiles_url_left=tiles_left,
tiles_url_right=tiles_right,
center_coords=[41.668, -95.372],
zoom_level=14,
title="DOW7 Comparison: Reflectivity vs Velocity — Harlan, IA — April 26, 2024",
label_left="← Reflectivity (-10 to 50 dBZ)",
label_right="Velocity (-75 to 75 m/s) →",
layer_name_left="DOW7 Reflectivity",
layer_name_right="DOW7 Velocity",
opacity=0.8,
basemap_style='esri-satellite-labels',
description="Drag the slider to compare DOW-collected reflectivity and velocity values",
height="800px",
width="100%"
)

# Save to file to check HTML structure
m.save('test_sidebyside_map.html')
print("✓ Map created and saved to test_sidebyside_map.html")

# Check if SideBySide JavaScript is included
html = m._repr_html_()
if 'leaflet-side-by-side' in html or 'sideBySide' in html:
print("✓ SideBySide plugin is included in the HTML")
else:
print("⚠ Warning: SideBySide plugin may not be properly included")

# Test with minimal parameters
print("\nTesting with minimal parameters...")
m2 = putils.create_side_by_side_map(
tiles_url_left=tiles_left,
tiles_url_right=tiles_right,
center_coords=[40, -100]
)
print("✓ Minimal parameter test successful")

# Test without basemap
print("\nTesting without basemap...")
m3 = putils.create_side_by_side_map(
tiles_url_left=tiles_left,
tiles_url_right=tiles_right,
center_coords=[40, -100],
basemap_style=None
)
print("✓ No basemap test successful")

print("\n" + "=" * 60)
print("All tests passed! The function is working correctly.")
print("\nThe function signature is:")
print("create_side_by_side_map(")
print(" tiles_url_left: str,")
print(" tiles_url_right: str,")
print(" center_coords: list,")
print(" zoom_level: int = 14,")
print(" title: str = 'Side-by-Side Comparison',")
print(" label_left: str = 'Left Layer',")
print(" label_right: str = 'Right Layer',")
print(" layer_name_left: str = 'Left Layer',")
print(" layer_name_right: str = 'Right Layer',")
print(" opacity: float = 0.8,")
print(" basemap_style: str = 'esri-satellite-labels',")
print(" description: str = None,")
print(" height: str = '800px',")
print(" width: str = '100%'")
print(")")

return True

if __name__ == "__main__":
test_create_side_by_side_map()
Loading