Adds selector and examples

Signed-off-by: Daniel Kastl <[email protected]>

Author: dkastl

app/views/gtt_tile_sources/_form.html.erb

@@ -1,14 +1,53 @@
 <%= error_messages_for 'tile_source' %>
 
-
 <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.select :type,
+      options_for_select([
+        ['ol.source.OSM', 'ol.source.OSM'],
+        ['ol.source.TileWMS', 'ol.source.TileWMS'],
+        ['ol.source.XYZ', 'ol.source.XYZ']
+      ], selected: f.object.type ),
+      { include_blank: l(:gtt_tile_sources_select), required: true }
+    %>
+  </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>
+  <p>
+    <%= f.text_area :options_string, rows: 10, cols: 80 %>
+    <em class="info"><a href="#" onclick="loadExampleConfiguration(this);return false;"><%= l(:gtt_tile_sources_load_example) %></a></em>.
+  </p>
 </div>
 
+<script>
+  const tile_source_examples = {
+    'ol.source.OSM': {
+      "url": "https://tile.openstreetmap.jp/{z}/{x}/{y}.png",
+      "custom": "19/34.74701/135.35740",
+      "crossOrigin": null,
+      "attributions": "<a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>"
+    },
+    'ol.source.TileWMS': {
+      "url": "https://www.example.com/geoserver/wms",
+      "params": {
+        "TILED": true,
+        "LAYERS": "raster:mydata"
+      },
+      "serverType": "geoserver"
+    },
+    'ol.source.XYZ': {
+      "url": "https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",
+      "projection": "EPSG:3857",
+      "attributions": "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
+    }
+  };
 
-
+  function loadExampleConfiguration(obj) {
+    var config = tile_source_examples[document.getElementById("tile_source_type").value];
+    if (config) {
+      document.getElementById("tile_source_options_string").innerHTML = JSON.stringify(config, undefined, 2);;
+    }
+  }
+</script>

config/locales/en.yml

@@ -42,7 +42,9 @@ en:
 
   geocoder_options: "Geocoder Options"
 
-  gtt_tile_sources_info: Select the tile sources that should be available in this project.
+  gtt_tile_sources_info: "Select the tile sources that should be available in this project."
+  gtt_tile_sources_select: "-- Select type --"
+  gtt_tile_sources_load_example: "Load example configuration"
 
   gtt_settings_general_center_lon: "Default map center longitude"
   gtt_settings_general_center_lat: "Default map center latitude"

config/locales/ja.yml

@@ -43,6 +43,8 @@ ja:
   geocoder_options: "ジオコーダのオプション"
 
   gtt_tile_sources_info: このプロジェクトで使用できるタイルソースを選択します。
+  gtt_tile_sources_select: "-- Select type --"
+  gtt_tile_sources_load_example: "Load example configuration"
 
   gtt_settings_general_center_lon: "既定の地図中心経度"
   gtt_settings_general_center_lat: "既定の地図中心緯度"