Merge pull request #38 from openearth/develop

Release

.eslintrc.js

@@ -3,6 +3,7 @@ module.exports = {
   env: {
     node: true,
     browser: true,
+    "vue/setup-compiler-macros": true,
   },
   extends: [
     "plugin:vue/vue3-essential",

.nvmrc

@@ -0,0 +1 @@
+v22

README.md

@@ -1,24 +1,42 @@
 # coclico-static
 
 ## Project setup
+
 ```
 npm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 npm run serve
 ```
 
 ### Compiles and minifies for production
+
 ```
 npm run build
 ```
 
 ### Lints and fixes files
+
 ```
 npm run lint
 ```
 
+## Data structure
+
+To keep supply and consumption of data consistent, a standard for data collections is agreed upon.    
+The `./current` folder in `@openearth/coclicodata` is the considered the data root.    
+Child folders in the root are considered __"Themes"__ or __"Collections"__ and contain a `collection.json` that defines
+the data and visual resources inside that collection, including metadata.  
+The collection points to its children folders in relation to possible variables as defined in the `collection.json`,
+these children are considered __"Items"__.    
+All __Items__ and __Collections__ contain an __"Assets"__ object that defines its resources. These resources are
+standardized internally in the team.
+
+More info on asset types can be found in [ASSETS.md](./docs/ASSETS.md).
+
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).

docs/ASSETS.md

@@ -0,0 +1,101 @@
+# Assets
+Examples of assets used in the frontend as provided by `coclicodata`
+The `type` property of these objects is used to determine the render strategy in the frontend.
+The following mask is defined for the `type` property:  
+
+| Asset Type                                                 	| Render Function              	| Output Type                        	|
+|------------------------------------------------------------	|------------------------------	|------------------------------------	|
+| "application/vnd.apache.parquet"                           	| `buildVectorTileMapboxLayer` 	| Vector Tile Layer                  	|
+| "image/tiff; application=geotiff; profile=cloud-optimized" 	| `buildRasterMapboxLayer`     	| Raster Tile Layer                  	|
+| "image/png"                                                	| `buildRasterMapboxLayer`     	| Raster Tile Layer                  	|
+| "application/png"                                          	| `buildRasterMapboxLayer`     	| Raster Tile Layer                  	|
+| "vector"                                                   	| `buildGeojsonMapboxLayer`    	| Geojson Feature (collection) Layer 	|
+| "geojson"                                                  	| `buildGeojsonMapboxLayer`    	| Geojson Feature (collection) Layer 	|
+```typescript
+const ResourceTypeFunctionMask = {
+    "application/vnd.apache.parquet": buildVectorTileMapboxLayer,
+    "image/tiff; application=geotiff; profile=cloud-optimized": buildRasterMapboxLayer,
+    "image/png": buildRasterMapboxLayer,
+    "application/png": buildRasterMapboxLayer,
+    "vector": buildGeojsonMapboxLayer,
+    "geojson": buildGeojsonMapboxLayer,
+};
+```
+## Collections
+### `geoserver_link`  
+Transparent layer that is used to create clickable polygons on the map.    
+#### Example
+```json
+{
+  "geoserver_link": {
+    "href": "https://<base>/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=<workspace>:<layer>&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}",
+    "type": "application/vnd.apache.parquet",
+    "title": "Geoserver Parquet link"
+  }
+}
+```
+
+## Items
+### `visual`  
+Visual layer from a geoserver, which is displayed on the map when a collection is toggled.
+Can contain Raster tiles or Vector tiles.
+
+#### Vector example
+An item with a vector visual should contain a `"deltares:paint"` property (as seen on mapbox resources).
+It is used to style the vector tiles.
+The following example shows the fallback paint that is used when `"deltares:paint"` is not present.
+```json
+{
+  "properties": {
+    "deltares:paint": {
+      "fill-color": "rgba(0,0,0,0)",
+      "fill-outline-color": "#000000"
+    }
+  }
+}
+```
+```json
+{
+  "visual": {
+    "href": "https://<base>/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=<workspace>:<layer>&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}",
+    "type": "application/vnd.apache.parquet",
+    "title": "Title",
+    "description": "Description",
+    "roles": [ 
+      "visual"
+    ]
+  }
+}
+```
+#### Raster example
+```json
+{
+  "visual": {
+    "href": "https://<base>/wms?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=<workspace>:<layer>",
+    "type": "application/png",
+    "title": "Title",
+    "description": "Description",
+    "roles": [
+      "visual"
+    ]
+  }
+}
+```
+
+### `mapbox`
+Visual layer from the mapbox api, usually containing Geojson features to show information on the map.  
+#### Example
+```json
+{
+  "mapbox": {
+    "href": "mapbox://workspace.layer",
+    "type": "vector",
+    "title": "Title",
+    "description": "Description",
+    "source": "nuts_regions-b1ics1",
+    "roles": [
+      "mapbox"
+    ]
+  }
+}
+```