2 - ol4.1ex 170b - Custom Overview Map 2

「overviewmap-custom.js（2170-ol4ex.js）」は、マップを表示するための JavaScript ファイルです。

「2170-ol4ex.js」

var overviewMapControl = new ol.control.OverviewMap({
/** new ol.control.OverviewMap(opt_options)
 * Create a new control with a map acting as an overview 
 * map for an other defined map.
 * もうひとつの定義されたマップの概要マップとして動作するマッ
 * プで新しいコントロールを作成します。（ol4 API）
 */

 // see in overviewmap-custom.html to see the custom CSS 
 // used
 // 使用されたカスタム CSS を知るために 
 // overviewmap-custom.html をみてください。
 className: 'ol-overviewmap ol-custom-overviewmap',

 layers: [
 /** layers
  * Layers for the overview map. If not set, then all 
  * main map layers are used instead.
  * 概要マップのレイヤー。 設定されていない場合は、すべての
  * メインマップレイヤが代わりに使用されます。（ol4 API）
  */

  new ol.layer.Tile({
  /** ol.layer.Tile 
   * For layer sources that provide pre-rendered, tiled 
   * images in grids that are organized by zoom levels 
   * for specific resolutions. 
   * プリレンダリング（事前描画）を提供するレイヤソースのた
   * めの、特定の解像度でのズームレベルによって編成されてい
   * るグリッドのタイルイメージ。（ol4 API）
   */

   source: new ol.source.OSM({
   /** ol.source.OSM 
    * Layer source for the OpenStreetMap tile server.
    * OpenStreetMap タイルサーバのレイヤソース。（ol4 API）
    */

    'url': 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
      '?apikey=0e6fc...（省略）'

   })
  })
 ],

  collapseLabel: '\u00BB',
  /** collapseLabel
   * Text label to use for the expanded overviewmap 
   * button. Default is «. Instead of text, also a Node 
   * (e.g. a span element) can be used.
   * 展開される overviewmap ボタンに使用するテキストラベル。 
   * デフォルトは « です。 テキストの代わりに、ノード（例え
   * ば、span 要素）も使用することができます。（ol4 API）
   */

  label: '\u00AB',
  /** label
   * Text label to use for the collapsed overviewmap 
   * button. Default is ». Instead of text, also a Node 
   * (e.g. a span element) can be used.
   * 折りたたまれる overviewmap ボタンに使用するテキストラベ
   * ル。 デフォルトは « です。 テキストの代わりに、ノード（例
   * えば、span 要素）も使用することができます。（ol4 API）
   */

  collapsed: false
  /** collapsed
   * Whether the control should start collapsed or not 
   * (expanded). Default to true.
   * コントロール（control）が折りたたみ（展開）を開始するか
   * どうか。デフォルトは true です。（ol4 API）
   */

});

var map = new ol.Map({

 controls: ol.control.defaults().extend([
 /** controls
  * Controls initially added to the map. 
  * If not specified, ol.control.defaults() is used.
  * 初期設定で、マップに追加されたコントロール。
  * 明示されていなければ、ol.control.defaults() が使用され
  * ます。（ol4 API）
  */

 /** ol.control.defaults(opt_options)
  * Set of controls included in maps by default. Unless 
  * configured otherwise, this returns a collection 
  * containing an instance of each of the following 
  * controls:
  * ol.control.Zoom, ol.control.Rotate, 
  * ol.control.Attribution
  * デフォルトでは、マップに含まれるコントロールのセット。
  * 特に設定しない限り、これは、次の各コントロールのインス
  * タンスを含むコレクションを返します。(ol4 API）
  */

  overviewMapControl
 ]),

 interactions: ol.interaction.defaults().extend([
 /** interactions
  * Interactions that are initially added to the map. 
  * If not specified, ol.interaction.defaults() is 
  * used.
  * 最初にマップに追加されるインタラクション。 指定しない場
  * 合、ol.interaction.defaults（）が使用されます。
  * (ol4 API）
  */

  new ol.interaction.DragRotateAndZoom()
  /** ol.interaction.DragRotateAndZoom 
   * Allows the user to zoom and rotate the map by clicking 
   * and dragging on the map. By default, this interaction 
   * is limited to when the shift key is held down.
   * This interaction is only supported for mouse devices.
   * And this interaction is not included in the default 
   * interactions.
   * マップ上をクリックとドラッグすることで、マップをズーム
   * し、回転することを許可します。デフォルトでは、このイン
   * ターラクションは、シフトキーを押しているときに制限され
   * ています。
   * このインターラクションは、マウスデバイスだけサポートし
   * ます。
   * このインターラクションは、デフォルトのインターラクショ
   * ンに含まれません。（ol4 API）
   */

 ]),
 layers: [
  new ol.layer.Tile({
   source: new ol.source.OSM()
  })
 ],
 target: 'map',
 view: new ol.View({
  center: [500000, 6000000],
  zoom: 7
 })
});