2 - ol3ex 38b - Popup example 2

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

「238-ol3ex.js」の内容

/**
 * Elements that make up the popup.
 * ポップアップを作成するエレメント。
 */

var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');

/**
 * Add a click handler to hide the popup.
 * @return {boolean} Don't follow the href.
 * ポップアップを隠すクリックハンドラを追加。
 * @return {boolean}（戻り値｛Boolean 型｝） 
 *     href の後にt付けないでください。
 */

/** @return（@returns と同義）
 * The @returns tag documents the value that a function 
 * returns.
 * @returns タグは、関数が返す値について説明します。
 * （@use JSDoc [http://usejsdoc.org/tags-returns..html]）
 */

closer.onclick = function() {
/** GlobalEventHandlers.onclick
 * The onclick property returns the click event 
 * handler code on the current element.
 * onclick　プロパティは、現在の要素の click イベント
 * ハンドラのコードを返します。
 * （MDN[https://developer.mozilla.org/en-US/
 * docs/Web/API/GlobalEventHandlers.onclick]）
 */

 container.style.display = 'none';

 closer.blur();
 /** HTMLElement.blur()
  * The HTMLElement.blur() method removes 
  * keyboard focus from the current element.
  * HTMLElement.blur（）メソッドは、現在の要素から
  * キーボードフォーカスを削除します。
  * （MDN[https://developer.mozilla.org/en-US/
  * docs/Web/API/HTMLElement.blur]）
  */

 return false;
};

/**
 * Create an overlay to anchor the popup to the map.
 * マップにポップアップを固定するためのオーバーレイを作成します。
 */

var overlay = 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: container
});

/**
 * Create the map.
 */
var map = new ol.Map({
 layers: [

  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.natural-earth-hypso-bathy.jsonp',
    crossOrigin: 'anonymous'
   })
  })
 ],

 renderer: exampleNS.getRendererFromQueryString(),
 //'example-behavior.js' により URL にある renderer を返します

 overlays: [overlay],
 target: 'map',
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});

/**
 * Add a click handler to the map to render the popup.
 * ポップアップをレンダリングするためにマップにクリックハンドラ
 * を追加します。
 */

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

 var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
 /** ol.coordinate.toStringHDMS()
  * Returns: Hemisphere, degrees, minutes and seconds.
  * （ol3 API）
  */

 /** ol.proj.transform(coordinate, source, destination)
  * Transforms a coordinate from source projection to 
  * destination projection. This returns a new coordinate 
  * (and does not modify the original).
  * ソース投影から変換先投影に座標変換します。これは、新しい座標
  * を返します（オリジナルを変更しません）。（ol3 API）
  */

  coordinate, 'EPSG:3857', 'EPSG:4326'));

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

  content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
  '</code>';
  container.style.display = 'block';
});