2 - ol3.1ex 48b - TileUTFGrid example 2

「tileutfgrid.js（248-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。
「248-ol3ex.js」

var mapLayer = 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. 
 * プリレンダリング（事前描画）を提供するレイヤソースのための、
 * 特定の解像度でのズームレベルによって編成されているグリッドの
 * タイルイメージ。（ol3 API）
 */

 source: new ol.source.TileJSON({
 /** ol.source.TileJSON 
  * Layer source for tile data in TileJSON format.
  * TileJSON フォーマットのタイルデータのためのレイヤソース。
  *（ol3 API）
  */

  url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json'
 })
});

var gridSource = new ol.source.TileUTFGrid({
/** ol.source.TileUTFGrid 
 * Layer source for UTFGrid interaction data 
 * loaded from TileJSON format.
 * TileJSO　フォーマットからロードされた UTFGrid 
 * インターラクションのデータソース。（ol3 API）
 */

 url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json'
});

var gridLayer = new ol.layer.Tile({source: gridSource});

var view = new ol.View({
 center: [0, 0],
 zoom: 1
});

var mapElement = document.getElementById('map');

var map = new ol.Map({
 layers: [mapLayer, gridLayer],
 target: mapElement,
 view: view
});

var infoElement = document.getElementById('country-info');
var flagElement = document.getElementById('country-flag');
var nameElement = document.getElementById('country-name');

var infoOverlay = new ol.Overlay({
/** ol.Overlay 
 * Like ol.control.Control, Overlays are visible widgets. 
 * Unlike Controls, they are not in a fixed position on 
 * the screen, but are tied to a geographical coordinate, 
 * so panning the map will move an Overlay but not a Control.
 * ol.control.Controlと同じように、オーバーレイは、目に見える
 * ウィジェットです。コントロールとは異なり、それらは画面上の
 * 固定された位置にありませんが、地理座標に関連付けられている
 * ので、オーバーレイを移動しますが、コントロールできない
 * マップをパンします。（ol3 API）
 */

 element: infoElement,
 offset: [15, 15],
 stopEvent: false
});

map.addOverlay(infoOverlay);
/** addOverlay()
 * Add the given overlay to the map.
 * 与えられたオーバーレイをマップに追加します。（ol3 API）
 */

var displayCountryInfo = function(coordinate) {

 var viewResolution = /** @type {number} */ (view.getResolution());
 /** @type 
  * 値のタイプ（型）の説明 - 式などで表示
  * （@use JSDoc[http://usejsdoc.org/]より）
  */

 /** getResolution()
  * Return: The resolution of the view.
  * view（ビュー）の解像度を返します。（ol3 API）
  */

 gridSource.forDataAtCoordinateAndResolution(coordinate, viewResolution,
  function(data) {
  // If you want to use the template from the TileJSON,
  //  load the mustache.js library separately and call
  // TileJSON からテンプレートを使用する場合は、別途 mustache.js
  // ライブラリをロードし、次の式で呼び出します。
  //  info.innerHTML = Mustache.render(gridSource.getTemplate(), data);

   mapElement.style.cursor = data ? 'pointer' : '';
   /** 条件演算子 condition ? expr1 : expr2 
    * condition: true か false かを評価する条件文です。
    * expr1, expr2: 各々の値の場合に実行する式です。
    * condition が true の場合、演算子は expr1 の値を選択します。
    * そうでない場合は expr2 の値を選択します。
    * （MDN[https://developer.mozilla.org/ja/docs/JavaScript/
    * Reference/Operators/Conditional_Operator]）
    */

   if (data) {

    /* jshint -W069 */
    /* 予約語でないプロパティ名のとき 、[]（角括弧、ブラケット）
     * 内の文字列リテラルを使用してプロパティにアクセスする試み
     * を検出したとき投げられる警告を発行しないように JSHint に
     * 伝えることを意味します。
     * （['{a}'] is better written in dot notation[https://
     * jslinterrors.com/a-is-better-written-in-dot-notation]）
     */

    flagElement.src = 'data:image/png;base64,' + data['flag_png'];
    nameElement.innerHTML = data['admin'];

    /* jshint +W069 */
    // 上記警告の発行を有効化します。

   }

   infoOverlay.setPosition(data ? coordinate : undefined);
  /** setPosition()
   * Set the position for this overlay.
   * このオーバーレイに位置を設定します。（ol3 API）
   */

 });
};

$(map.getViewport()).on('mousemove', function(evt) {
/** getViewport()
 * Return: Viewport （ol3 API）
 */
/** jQuery on イベント */

 var coordinate = map.getEventCoordinate(evt.originalEvent);
 /** getEventCoordinate
  * Returns the geographical coordinate for a browser event.
  * ブラウザイベントに対して地理的座標を返します。
  */

 displayCountryInfo(coordinate);
});

map.on('click', function(evt) {
/** on
 * Listen for a certain type of event.
 * あるタイプのイベントをリッスンします。（ol3 API）
 */

 displayCountryInfo(evt.coordinate);
});