frontend for tile layer

HugoIsNotBoss · Feb 8, 2022 · 7e0479d · 7e0479d
1 parent 0c4060f
commit 7e0479d
Show file tree

Hide file tree

Showing 9 changed files with 157 additions and 33 deletions.
diff --git a/frontend/src/components/map-components/LayerControl.vue b/frontend/src/components/map-components/LayerControl.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        v-if="getComponentStatus.baseLayer || getComponentStatus.overlayLayer"
+        v-if="getComponentStatus.baseLayer || getComponentStatus.overlayLayer || getComponentStatus.tileLayer"
         class="block my-5 border-2 rounded"
         :class="collapse ? 'border-white' : 'border-gray-100'"
     >
@@ -42,9 +42,9 @@
                 <div class="block overflow-auto max-h-72">
                     <span class="text-gray-700">Overlay layer control</span>
                     <overlay-layer-control
-                        v-for="vector in getOverlayLayerInfo"
-                        :key="vector.id"
-                        :layerData="vector"
+                        v-for="laterData in getOverlayLayerInfo"
+                        :key="laterData.id"
+                        :layerData="laterData"
                     />
                 </div>
             </div>

diff --git a/frontend/src/components/map-components/MapContainer.vue b/frontend/src/components/map-components/MapContainer.vue
@@ -3,6 +3,13 @@
         <!-- The map container will have the map components and the mail control of the application. -->
         <l-map ref="lmap" :center="center" :zoom="zoom" maxZoom="25">
             <base-layer v-if="getComponentStatus.baseLayer" />
+            <div v-if="getComponentStatus.tileLayer">
+                <tile-layer
+                    v-for="tileData in getTileLayerData"
+                    :key="tileData.id"
+                    :layerData="tileData"
+                />
+            </div>
             <div v-if="getComponentStatus.overlayLayer">
                 <vector-layer
                     v-for="vectorData in getVectorData"
@@ -76,6 +83,7 @@ import { LMap, LControlLayers, LControl } from "vue2-leaflet";
 import "leaflet/dist/leaflet.css";
 import VectorLayer from "./VectorLayer";
 import BaseLayer from "./BaseLayer";
+import TileLayer from "./TileLayer";
 import { mapGetters } from "vuex";
 import DrawFeature from "./DrawFeature.vue";
 import RasterLayer from "./RasterLayer.vue";
@@ -89,6 +97,7 @@ export default {
         LControlLayers,
         LControl,
         BaseLayer,
+        TileLayer,
         VectorLayer,
         DrawFeature,
         RasterLayer,
@@ -119,6 +128,7 @@ export default {
     },
     computed: {
         ...mapGetters([
+            "getTileLayerData",
             "getVectorData",
             "getRasterData",
             "getImageData",
@@ -128,8 +138,9 @@ export default {
     },
     mounted() {
         this.$nextTick(() => {
-            this.$refs.lmap.mapObject.attributionControl
-                .setPosition('bottomleft');
+            this.$refs.lmap.mapObject.attributionControl.setPosition(
+                "bottomleft"
+            );
             this.resetViewHandler();
         });
     },

diff --git a/frontend/src/components/map-components/TileLayer.vue b/frontend/src/components/map-components/TileLayer.vue
@@ -0,0 +1,30 @@
+<template>
+    <l-tile-layer
+        :name="layerData.name"
+        :url="layerData.url"
+        :opcaity="layerData.opcaity"
+        :subdomains="layerData.subdomains"
+        :visible="getLayerVisibility.bind(this, layerData.id)()"
+        layer-type="overlay"
+    >
+    </l-tile-layer>
+</template>
+
+<script>
+import { LTileLayer } from "vue2-leaflet";
+import { mapGetters } from "vuex";
+export default {
+    name: "TileLayer",
+    props: {
+        layerData: Object,
+    },
+    components: {
+        LTileLayer,
+    },
+    computed: {
+        ...mapGetters(["getLayerVisibility"]),
+    },
+};
+</script>
+
+<style></style>
diff --git a/frontend/src/components/map-components/WMSLayer.vue b/frontend/src/components/map-components/WMSLayer.vue
diff --git a/frontend/src/store/modules/backend-api.js b/frontend/src/store/modules/backend-api.js
@@ -12,6 +12,7 @@ const state = {
     Status: 1,
     ComponentStatus: {
         baseLayer: false,
+        tileLayer: false,
         overlayLayer: false,
         rasterLayer: false,
         imageLayer: false,
@@ -30,6 +31,7 @@ const state = {
     },
     VectorData: null,
     BaseLayerInfo: null,
+    TileLayerData: null,
     OverlayLayerInfo: null,
     ViewZoom: [0, 0, 3],
     ChartEventData: null,
@@ -56,6 +58,7 @@ const getters = {
     getComponentStatus: (state) => state.ComponentStatus,
     getVectorData: (state) => state.VectorData,
     getBaseLayerInfo: (state) => state.BaseLayerInfo,
+    getTileLayerData: (state) => state.TileLayerData,
     getOverlayLayerInfo: (state) => state.OverlayLayerInfo,
     getViewZoom: (state) => state.ViewZoom,
     getChartEventData: (state) => state.ChartEventData,
@@ -138,20 +141,19 @@ const actions = {
 
         state.DrawFeatureData.forEach((drawFeature) => {
             if (drawFeature.mutation) {
-                postData[drawFeature.name] = drawFeature.featuresDrawn.map(
-                    mapDrawFeature
-                );
+                postData[drawFeature.name] =
+                    drawFeature.featuresDrawn.map(mapDrawFeature);
             }
         });
 
         axios
             .post(process.env.VUE_APP_API, postData)
-            .then(function(response) {
+            .then(function (response) {
                 dispatch("commitResponseData", response);
                 commit("commitInputMutation", false);
                 eventHub.$emit("reInitializeDrawFeature");
             })
-            .catch(function(error) {
+            .catch(function (error) {
                 // TODO Frontend error logging
                 console.log("Error in posting data.", error);
             });
@@ -162,6 +164,7 @@ const actions = {
 
         console.log(response.data);
         const responseBaseLayerInfo = response.data.base_layer_info;
+        const responseTileLayerData = response.data.tile_layer_info;
         const responseVectorData = response.data.overlay_layer_data;
         const responseComponentInfo = response.data.component_info;
         const responseRasterData = response.data.raster_layer_data;
@@ -191,7 +194,42 @@ const actions = {
             ComponentStatus.rasterLayer = true;
             commit("commitRasterData", responseRasterData);
 
-            responseRasterData.forEach(function(layerData) {
+            responseRasterData.forEach(function (layerData) {
+                overlayLayerInfo.push({
+                    id: layerData.id,
+                    title: layerData.title,
+                    description: layerData.description,
+                    visible: layerData.visible,
+                    bounds: layerData.bounds,
+                    color: "#123123",
+                    type: "raster",
+                });
+            });
+        }
+
+        if (responseTileLayerData.length) {
+            ComponentStatus.tileLayer = true;
+            ComponentStatus.overlayLayer = true;
+            commit("commitTileLayerData", responseTileLayerData);
+
+            responseTileLayerData.forEach(function (layerData) {
+                overlayLayerInfo.push({
+                    id: layerData.id,
+                    title: layerData.name,
+                    description: layerData.description,
+                    visible: true,
+                    bounds: [],
+                    color: "#123123",
+                    type: "tile",
+                });
+            });
+        }
+
+        if (responseRasterData.length) {
+            ComponentStatus.rasterLayer = true;
+            commit("commitRasterData", responseRasterData);
+
+            responseRasterData.forEach(function (layerData) {
                 overlayLayerInfo.push({
                     id: layerData.id,
                     title: layerData.title,
@@ -209,7 +247,7 @@ const actions = {
             ComponentStatus.overlayLayer = true;
             commit("commitImageData", responseImageData);
 
-            responseImageData.forEach(function(layerData) {
+            responseImageData.forEach(function (layerData) {
                 overlayLayerInfo.push({
                     id: layerData.id,
                     title: layerData.title,
@@ -227,7 +265,7 @@ const actions = {
             commit("commitVectorData", responseVectorData);
 
             let viewzoomInfo = [];
-            responseVectorData.forEach(function(layerData) {
+            responseVectorData.forEach(function (layerData) {
                 overlayLayerInfo.push({
                     id: layerData.id,
                     title: layerData.title,
@@ -281,7 +319,9 @@ const actions = {
                         dispatch("setAppInfo", { title: component.value });
                     }
                     if (component.name === "description") {
-                        dispatch("setAppInfo", { description: component.value });
+                        dispatch("setAppInfo", {
+                            description: component.value,
+                        });
                     }
                 }
             });
@@ -294,7 +334,8 @@ const actions = {
         if (
             ComponentStatus.baseLayer ||
             ComponentStatus.overlayLayer ||
-            ComponentStatus.drawFeature
+            ComponentStatus.drawFeature || 
+            ComponentStatus.tileLayer
         ) {
             ComponentStatus.mapComponent = true;
         }
@@ -448,6 +489,9 @@ const mutations = {
     commitBaseLayerInfo: (state, data) => {
         state.BaseLayerInfo = data;
     },
+    commitTileLayerData: (state, data) => {
+        state.TileLayerData = data;
+    },
     commitOverlayLayerInfo: (state, data) => {
         state.OverlayLayerInfo = data;
     },

diff --git a/library/src/greppo/greppo.py b/library/src/greppo/greppo.py
@@ -29,7 +29,7 @@
 from .input_types import Text
 from .input_types import Display
 from .layers.base_layer import BaseLayer
-from .layers.tile_layer import TileLayer
+from .layers.tile_layer import TileLayer, TileLayerComponent
 from .layers.image_layer import ImageLayer
 from .layers.overlay_layer import OverlayLayer
 from .layers.raster_layer import RasterLayer
@@ -82,7 +82,7 @@ def __init__(self):
         # Map component data
         self.base_layers: List[BaseLayer] = []
         self.tile_layers: List[TileLayer] = []
-        self.overlay_layers: List[OverlayLayer] = []        
+        self.overlay_layers: List[OverlayLayer] = []
         self.raster_layers: List[RasterLayer] = []
         self.image_layers: List[ImageLayer] = []
         self.raster_image_reference: List[bytes] = []
@@ -131,11 +131,16 @@ def line_chart(self, **kwargs):
         self.register_input(line_chart)
         return line_chart
 
-    def ee_layer(self,**kwargs):
+    def ee_layer(self, **kwargs):
         ee_layer_component = EarthEngineLayerComponent(**kwargs)
         ee_layer_dataclass = ee_layer_component.convert_to_dataclass()
         self.tile_layers.append(ee_layer_dataclass)
 
+    def tile_layer(self, **kwargs):
+        tile_layer_component = TileLayerComponent(**kwargs)
+        tile_layer_dataclass = tile_layer_component.convert_to_dataclass()
+        self.tile_layers.append(tile_layer_dataclass)
+
     def base_layer(
         self,
         name: str,

diff --git a/library/src/greppo/layers/ee_layer.py b/library/src/greppo/layers/ee_layer.py
@@ -11,7 +11,7 @@ def __init__(
         self,
         ee_object: Union[ee.Image, ee.ImageCollection, ee.FeatureCollection, ee.Feature, ee.Geometry],
         name: str = '',
-        visible: bool = False,
+        visible: bool = True,
         vis_params: Dict = {},
         opacity: float = 1.0,
         min_zoom: int = 0,
@@ -40,16 +40,16 @@ def __init__(
                 **{"color": color, "fillColor": "00000000", "width": width}
             )
 
-            self.ee_image = image_fill.blend(image_outline)
+            self.ee_object_image = image_fill.blend(image_outline)
         elif isinstance(ee_object, ee.image.Image):
-            self.ee_image = ee_object
+            self.ee_object_image = ee_object
         elif isinstance(ee_object, ee.imagecollection.ImageCollection):
-            self.ee_image = ee_object.mosaic()
+            self.ee_object_image = ee_object.mosaic()
 
         self.vis_params = vis_params
 
     def convert_to_dataclass(self):
         id = uuid.uuid4().hex
-        map_id_dict = ee.Image(self.image).getMapId(self.vis_params)
+        map_id_dict = ee.Image(self.ee_object_image).getMapId(self.vis_params)
         url = map_id_dict["tile_fetcher"].url_format
         return TileLayer(id=id, url=url, name=self.name, visible=self.visible, opacity=self.opacity, min_zoom=self.min_zoom, max_zoom=self.max_zoom)
diff --git a/library/src/greppo/layers/tile_layer.py b/library/src/greppo/layers/tile_layer.py
@@ -1,5 +1,30 @@
 from dataclasses import dataclass
 from typing import List
+import uuid
+
+
+@dataclass
+class TileLayerComponent:
+    def __init__(
+        self,
+        url: str = '',
+        name: str = '',
+        visible: bool = True,
+        opacity: float = 1.0,
+        min_zoom: int = 0,
+        max_zoom: int = 24
+    ):
+        self.url = url
+        self.name = name
+        self.visible = visible
+        self.opacity = opacity
+        self.min_zoom = min_zoom
+        self.max_zoom = max_zoom
+
+    def convert_to_dataclass(self):
+        id = uuid.uuid4().hex
+        return TileLayer(id=id, url=self.url, name=self.name, visible=self.visible, opacity=self.opacity, min_zoom=self.min_zoom, max_zoom=self.max_zoom)
+
 
 @dataclass()
 class TileLayer:
@@ -10,5 +35,3 @@ class TileLayer:
     opacity: float
     min_zoom: int
     max_zoom: int
-    subdomains: List[str]
-    attribution: str
diff --git a/library/tests/app_gee.py b/library/tests/app_gee.py
@@ -25,6 +25,7 @@
 # # Compute the trend of night-time lights.
 
 # # Adds a band containing image date as years since 1991.
+
 # def create_time_band(img):
 #     year = ee.Date(img.get('system:time_start')).get('year').subtract(1991)
 #     return ee.Image(year).byte().addBands(img)
@@ -43,10 +44,20 @@
 # map_id_dict = ee.Image(ee_image_object).getMapId(vis_params)
 # ee_url = map_id_dict['tile_fetcher'].url_format
 
-app.base_layer(
-    name="stable lights trend",
-    visible=True,
-    url='https://earthengine.googleapis.com/v1alpha/projects/earthengine-legacy/maps/295c4c884593fb86efc53f1b1fc52ea1-6f0be59a58e33645503ec77b9d4e1a40/tiles/{z}/{x}/{y}',
-    subdomains=None,
-    attribution='Map Data &copy; <a href="https://earthengine.google.com/">Google Earth Engine</a>',
-)
+# app.base_layer(
+#     name="stable lights trend",
+#     visible=True,
+#     url='https://earthengine.googleapis.com/v1alpha/projects/earthengine-legacy/maps/295c4c884593fb86efc53f1b1fc52ea1-6f0be59a58e33645503ec77b9d4e1a40/tiles/{z}/{x}/{y}',
+#     subdomains=None,
+#     attribution='Map Data &copy; <a href="https://earthengine.google.com/">Google Earth Engine</a>',
+# )
+
+dem = ee.Image('USGS/SRTMGL1_003')
+ee_image_object = dem.updateMask(dem.gt(0))
+vis_params = {
+  'min': 0,
+  'max': 4000,
+  'palette': ['006633', 'E5FFCC', '662A00', 'D8D8D8', 'F5F5F5']}
+name = 'DEM'
+print(vis_params)
+app.ee_layer(ee_object=ee_image_object, vis_params=vis_params, name=name)