Merge pull request #102 from gtt-project/feature/add-overlay-layers

Feature/add overlay layers

Author: sanak

app/controllers/gtt_tile_sources_controller.rb

@@ -61,7 +61,7 @@ def destroy
   def tile_source_params
     return {} unless params[:tile_source]
 
-    params[:tile_source].permit( :name, :type, :global, :position,
+    params[:tile_source].permit( :name, :type, :baselayer, :global, :position,
                                 :default, :options_string )
   end
 end

app/views/gtt_tile_sources/_form.html.erb

@@ -4,6 +4,7 @@
 <div class="box tabular">
   <p><%= f.text_field :name, required: true, size: 25  %></p>
   <p><%= f.text_field :type, required: true, size: 25  %></p>
+  <p><%= f.check_box :baselayer %></p>
   <p><%= f.check_box :global %></p>
   <p><%= f.check_box :default %></p>
   <p> <%= f.text_area :options_string, rows: 10, cols: 80 %> </p>

app/views/gtt_tile_sources/_tile_source.html.erb

@@ -1,6 +1,7 @@
 <tr class="<%= cycle("odd", "even") %>">
   <td><%= tile_source.type %></td>
   <td><%= link_to tile_source.name, edit_gtt_tile_source_path(tile_source) %></td>
+  <td><%= checked_image tile_source.baselayer? %></td>
   <td><%= checked_image tile_source.global? %></td>
   <td><%= checked_image tile_source.default? %></td>
   <td><%= tile_source_options tile_source %></td>

app/views/gtt_tile_sources/index.html.erb

@@ -10,6 +10,7 @@
     <tr>
       <th><%= l :label_type %></th>
       <th><%= l :label_name %></th>
+      <th><%= l :label_baselayer %></th>
       <th><%= l :label_global %></th>
       <th><%= l :label_default %></th>
       <th><%= l :label_config %></th>

config/locales/en.yml

@@ -8,6 +8,7 @@ en:
   field_location: "Location"
   field_geom: "Geometry"
   field_global: Globally available
+  field_baselayer: BaseLayer
   field_options_string: Options
   field_gtt_tile_source_ids: Tile Sources
 
@@ -16,6 +17,7 @@ en:
   label_project_map: "Project Map"
   label_user_map: "User Map"
   label_name: Name
+  label_baselayer: BaseLayer
   label_nearby: "nearby(lat,lng)"
   label_type: Type
   label_config: Configuration

config/locales/ja.yml

@@ -8,6 +8,7 @@ ja:
   field_location: "場所"
   field_geom: "所在地"
   field_global: 世界的に利用可能
+  field_baselayer: 背景レイヤー
   field_options_string: オプション
   field_gtt_tile_source_ids: タイルソース
 
@@ -16,6 +17,7 @@ ja:
   label_project_map: "プロジェクト 地図"
   label_user_map: "ユーザ 地図"
   label_name: タイトル
+  label_baselayer: 背景レイヤー
   label_nearby: "近く(緯度,経度)"
   label_type: タイプ
   label_config: 構成

db/migrate/20210812013250_add_baselayer_to_tile_sources.rb

@@ -0,0 +1,5 @@
+class AddBaselayerToTileSources < ActiveRecord::Migration[5.2]
+  def change
+    add_column :gtt_tile_sources, :baselayer, :boolean, default: true
+  end
+end

src/components/gtt-client.ts

@@ -4,9 +4,9 @@ import { Map, Feature, View, Geolocation } from 'ol'
 import 'ol-ext/filter/Base'
 import { Geometry, Point } from 'ol/geom'
 import { GeoJSON, WKT } from 'ol/format'
-import { Layer, Tile } from 'ol/layer'
+import { Layer, Tile, Image } from 'ol/layer'
 import VectorLayer from 'ol/layer/Vector'
-import { OSM, XYZ } from 'ol/source'
+import { OSM, XYZ, TileWMS, ImageWMS } from 'ol/source'
 import { Style, Fill, Stroke, Circle } from 'ol/style'
 import { OrderFunction } from 'ol/render'
 import {
@@ -32,11 +32,15 @@ import Toggle from 'ol-ext/control/Toggle'
 import Button from 'ol-ext/control/Button'
 import TextButton from 'ol-ext/control/TextButton'
 import LayerPopup from 'ol-ext/control/LayerPopup'
+import LayerSwitcher from 'ol-ext/control/LayerSwitcher'
 import Popup from 'ol-ext/overlay/Popup'
 import { position } from 'ol-ext/control/control'
 import { ResizeObserver } from '@juggle/resize-observer'
 import VectorSource from 'ol/source/Vector'
 import { FeatureLike } from 'ol/Feature'
+import TileSource from 'ol/source/Tile'
+import ImageSource from 'ol/source/Image'
+import { Options as ImageWMSOptions } from 'ol/source/ImageWMS'
 
 interface GttClientOption {
   target: HTMLDivElement | null
@@ -46,6 +50,7 @@ interface LayerObject {
   type: string
   id: number
   name: string
+  baselayer: boolean
   options: object
 }
 
@@ -54,6 +59,16 @@ interface FilterOption {
   distance: boolean
 }
 
+interface TileLayerSource {
+  layer: typeof Tile
+  source: typeof OSM | typeof XYZ
+}
+
+interface ImageLayerSource {
+  layer: typeof Image
+  source: typeof ImageWMS
+}
+
 export class GttClient {
   readonly map: Map
   maps: Array<Map>
@@ -146,26 +161,70 @@ export class GttClient {
       const layers = JSON.parse(this.contents.layers) as [LayerObject]
       layers.forEach((layer) => {
         const s = layer.type.split('.')
-        const tileSource = getTileSource(s[1], s[2])
-        if (tileSource) {
-          const l = new Tile({
+        const layerSource = getLayerSource(s[1], s[2])
+        const tileLayerSource = layerSource as TileLayerSource
+        if (tileLayerSource) {
+          const l = new (tileLayerSource.layer)({
             visible: false,
-            source: new (tileSource)(layer.options)
+            source: new (tileLayerSource.source)(layer.options)
           })
+
           l.set('lid', layer.id)
           l.set('title', layer.name)
-          l.set('baseLayer', true)
-          l.on('change:visible', e => {
-            const target = e.target as Tile<XYZ>
-            if (target.getVisible()) {
-              const lid = target.get('lid')
-              document.cookie = `_redmine_gtt_basemap=${lid};path=/`
-            }
+          l.set('baseLayer', layer.baselayer)
+          if( layer.baselayer ) {
+            l.on('change:visible', e => {
+              const target = e.target as Tile<TileSource>
+              if (target.getVisible()) {
+                const lid = target.get('lid')
+                document.cookie = `_redmine_gtt_basemap=${lid};path=/`
+              }
+            })
+          }
+          this.layerArray.push(l)
+        } else if (layerSource as ImageLayerSource) {
+          const imageLayerSource = layerSource as ImageLayerSource
+          const l = new (imageLayerSource.layer)({
+            visible: false,
+            source: new (imageLayerSource.source)(layer.options as ImageWMSOptions)
           })
+
+          l.set('lid', layer.id)
+          l.set('title', layer.name)
+          l.set('baseLayer', layer.baselayer)
+          if( layer.baselayer ) {
+            l.on('change:visible', e => {
+              const target = e.target as Image<ImageSource>
+              if (target.getVisible()) {
+                const lid = target.get('lid')
+                document.cookie = `_redmine_gtt_basemap=${lid};path=/`
+              }
+            })
+          }
           this.layerArray.push(l)
-          this.map.addLayer(l)
         }
       }, this)
+
+      /**
+       * Ordering the Layers for the LayerSwitcher Control.
+       * BaseLayers are added first.
+       */
+      this.layerArray.forEach( (l:Layer) => {
+          if( l.get("baseLayer") ) {
+            this.map.addLayer(l)
+          } 
+        } 
+      )
+
+      var containsOverlay = false;
+
+      this.layerArray.forEach( (l:Layer) => {
+          if( !l.get("baseLayer") ) {
+            this.map.addLayer(l)
+            containsOverlay = true
+          } 
+        } 
+      )
     }
 
     this.setBasemap()
@@ -331,7 +390,15 @@ export class GttClient {
     })
 
     // Add LayerSwitcher Image Toolbar
-    this.map.addControl(new LayerPopup())
+    if( containsOverlay) {
+      this.map.addControl(new LayerSwitcher({
+        reordering: false
+      }))
+    }
+    else {
+      this.map.addControl(new LayerPopup())
+    }
+        
 
     // Because Redmine filter functions are applied later, the Window onload
     // event provides a workaround to have filters loaded before executing
@@ -1194,12 +1261,16 @@ export class GttClient {
   }
 }
 
-const getTileSource = (source: string, class_name: string): any => {
+const getLayerSource = (source: string, class_name: string): TileLayerSource | ImageLayerSource | undefined => {
   if (source === 'source') {
     if (class_name === 'OSM') {
-      return OSM
+      return { layer: Tile, source: OSM }
     } else if (class_name === 'XYZ') {
-      return XYZ
+      return { layer: Tile, source: XYZ }
+    } else if (class_name === 'TileWMS') {
+      return { layer: Tile, source: TileWMS }
+    } else if (class_name === 'ImageWMS') {
+      return { layer: Image, source: ImageWMS }
     }
   }
   return undefined