99 tile layers

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- added option to use tile layers in map with data provided by external url [#103](https://github.com/openkfw/Oscar/pull/103/files)
 - new route for unique featureIds for one attributeId [#86](https://github.com/openkfw/Oscar/pull/86/files)
 - option to store geographical data in database collection [#85](https://github.com/openkfw/Oscar/issues/85) [#94](https://github.com/openkfw/Oscar/pull/94)
 - pdf button for exporting dashboard tab as pdf document

api/src/actions/mapLayersActions.js

@@ -29,6 +29,7 @@ const getMapLayersWithGeoData = async () => {
     $or: [
       ...filterOr,
       { layerType: 'points' }, // layers with all values stored in pointAttributes collection, like disaster response functionality
+      { layerType: 'tile' }, // layers with tile data at external url
     ],
   };
 

doc/data-structures/config-files.md

@@ -119,7 +119,7 @@ _or with geodata file provided in folder './initial-data-load/data/{COUNTRY}/geo
 
 ## mapLayers.yml
 
-This config file is one long array with settings for layers in map. As there are multiple types of layers (regions, points on map, any geometrical objects or even combination of them) and also multiple sources of data for one layer, the structure of items in array may vary greatly.
+This config file is one long array with settings for layers in map. As there are multiple types of layers (regions, points on map, any geometrical objects or even combination of them and tile layers) and also multiple sources of data for one layer, the structure of items in array may vary greatly.
 
 ![mapLayersStructure](./mapLayersStructure.jpg)
 
@@ -140,6 +140,10 @@ This config file is one long array with settings for layers in map. As there are
 
 **featureId**: property in Feature in geojson file under which the value for 'featureId' in attributes is stored,
 
+**tileDataUrl**: url of map tile layer data source,
+
+**tileAttributions**: attributions of the tile layer data source,
+
 **metadata**: informations about data in layer, they are shown when you click on info button aside from map layer in layers menu
 
 - **description**:,
@@ -202,6 +206,10 @@ As the name of it prompts, with this enabled, the stroke line is dashed.
 
 Not always are data nicely structured in only one way. For this cases, combined layers style is able to show points and geometrical shapes in one layer.
 
+##### tile layer
+
+Tile layer provides an option to display data provided by external data source through url in form of map tiles.
+
 #### Legend object
 
 Legend values are closely intertwined with style. Basically for each color or colormap used in visualisation, there should be one item in legend array.  

frontend/src/constants/index.js

@@ -5,6 +5,7 @@ export const staticLayersTypes = {
   GEOMETRY: 'geometry',
   GROUP: 'group',
   COMBINED: 'combined',
+  TILE: 'tile',
 };
 // static layer color types
 export const staticLayerColorTypes = {

frontend/src/ol/staticLayers/layerTypes/combined.js

@@ -12,7 +12,7 @@ const combinedLayer = (layerData, handleIsLoading) => {
     featureId: layerData.featureId,
     type: layerData.layerType,
     source: vectorSource,
-    zIndex: 1,
+    zIndex: 2,
     style: combinedStyleFactory(layerData.attribute, layerData.style),
     legend: layerData.legend,
     minZoom: 11,

frontend/src/ol/staticLayers/layerTypes/geometry.js

@@ -37,7 +37,7 @@ const geometryLayer = (layerData, handleIsLoading) => {
     featureId: layerData.featureId,
     type: layerData.layerType,
     source: createVectorSource(layerData, handleIsLoading),
-    zIndex: 1,
+    zIndex: 2,
     style: geometryStyleFactory(layerData.attribute, layerData.style),
     legend: layerData.legend,
     layerOptions: layerData.layerOptions,

frontend/src/ol/staticLayers/layerTypes/points.js

@@ -25,7 +25,7 @@ const pointsLayer = (layerData, handleIsLoading) => {
     }),
     style: pointStyleFactory(layerData.attribute, layerData.style),
     legend: layerData.legend,
-    zIndex: 2,
+    zIndex: 3,
     layerOptions: layerData.layerOptions,
     maxResolution: (layerData.layerOptions && layerData.layerOptions.maxResolution) || layerData.maxResolution,
   });

frontend/src/ol/staticLayers/layerTypes/regions.js

@@ -15,7 +15,7 @@ const regionsLayer = (layerData, handleIsLoading) => {
     source: vectorSource,
     style: regionStyleFactory(layerData.attribute, layerData.style),
     legend: layerData.legend,
-    zIndex: 0,
+    zIndex: 1,
     layerOptions: layerData.layerOptions,
     maxResolution: (layerData.layerOptions && layerData.layerOptions.maxResolution) || layerData.maxResolution,
   });

frontend/src/ol/staticLayers/layerTypes/tiles.js

@@ -0,0 +1,28 @@
+import TileLayer from 'ol/layer/Tile';
+import XYZ from 'ol/source/XYZ';
+
+const tileLayer = (layerData) => {
+  const newLayer = new TileLayer({
+    title: layerData.title,
+    attribute: layerData.attribute,
+    attributeDescription: layerData.attributeDescription,
+    featureId: layerData.featureId,
+    type: layerData.layerType,
+    source: new XYZ({
+      url: layerData.tileDataUrl,
+      attributions: layerData.tileAttributions,
+    }),
+    zIndex: 0,
+    layerOptions: layerData.layerOptions,
+    maxResolution: (layerData.layerOptions && layerData.layerOptions.maxResolution) || layerData.maxResolution,
+  });
+  newLayer.selectable = true;
+  if (layerData.visible) {
+    newLayer.setVisible(true);
+  } else {
+    newLayer.setVisible(false);
+  }
+  return newLayer;
+};
+
+export default tileLayer;

frontend/src/ol/staticLayers/staticLayerGenerator.js

@@ -3,6 +3,7 @@ import regionsLayer from './layerTypes/regions';
 import pointsLayer from './layerTypes/points';
 import geometryLayer from './layerTypes/geometry';
 import combinedLayer from './layerTypes/combined';
+import tileLayer from './layerTypes/tiles';
 // eslint-disable-next-line import/no-cycle
 import groupLayer from './layerTypes/group';
 
@@ -29,6 +30,9 @@ const staticLayerGenerator = (layerData, handleIsLoading) => {
     case staticLayersTypes.COMBINED: {
       return combinedLayer({ ...layerData, layerOptions }, handleIsLoading);
     }
+    case staticLayersTypes.TILE: {
+      return tileLayer({ ...layerData, layerOptions }, handleIsLoading);
+    }
     // eslint-disable-next-line no-empty
     default: {
     }

initial-data-load/src/mapLayers/mapLayersSchema.js

@@ -71,6 +71,8 @@ const OneMapLayerData = new mongoose.Schema(
     featureId: String,
     style: StyleSchema,
     legend: [LegendSchema],
+    tileDataUrl: String,
+    tileAttributions: String,
   },
   { _id: false },
 );
@@ -90,6 +92,8 @@ const MapLayerSchema = new mongoose.Schema({
   metadata: MetadataSchema,
   timeseries: Boolean,
   layerOptions: LayerOptionsSchema,
+  tileDataUrl: String,
+  tileAttributions: String,
 });
 
 const MapLayer = mongoose.model('MapLayer', MapLayerSchema, 'mapLayers');

initial-data-load/src/mapLayers/mapLayersUpload.js

@@ -61,6 +61,8 @@ const addMapLayer = async (data) => {
     legend: data.legend,
     timeseries: data.timeseries,
     layerOptions: data.layerOptions,
+    tileDataUrl: data.tileDataUrl,
+    tileAttributions: data.tileAttributions,
   };
 };