2 - ol3ex 32b - Timezones in KML 2

「kml-timezones.js（232-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。
timezones.kml の内容は、次のようになっています。
「timezones.kml」

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
 <Style id="hidelist"><ListStyle><listItemType>checkHideChildren</listItemType><bgColor>00ffffff</bgColor><maxSnippetLines>0</maxSnippetLines></ListStyle></Style>

 <Style id="nStylem1200"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d261d6cd</color></PolyStyle></Style>
  <Style id="nStylem1100"><LineStyle><color>4cffffff</color><width>1.0</width></LineStyle><PolyStyle><color>d25bb85f</color></PolyStyle></Style>

---

 <Style id="hStylem1200"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da61d6cd</color></PolyStyle></Style>
 <Style id="hStylem1100"><LineStyle><color>c0ffffff</color><width>1.0</width></LineStyle><PolyStyle><color>da5bb85f</color></PolyStyle></Style>

---

 <StyleMap id="khStylem1200"><Pair><key>normal</key><styleUrl>#nStylem1200</styleUrl></Pair><Pair><key>highlight</key><styleUrl>#hStylem1200</styleUrl></Pair></StyleMap>
 <StyleMap id="khStylem1100"><Pair><key>normal</key><styleUrl>#nStylem1100</styleUrl></Pair><Pair><key>highlight</key><styleUrl>#hStylem1100</styleUrl></Pair></StyleMap>

---

 <styleUrl>#hidelist</styleUrl>

 <Placemark>
  <name>GMT -12:00</name>
  <description><![CDATA[<div style="width:300px;height:50px;"  id="clock" ></div>
   <script language="JavaScript">
    var int=self.setInterval("tick()",50);
    function tick(){
     document.getElementById("clock").innerHTML=calc(-12);
    }
    function calc(offset) {
     d = new Date();
     utc = d.getTime() + (d.getTimezoneOffset() * 60000);
     nd = new Date(utc + (3600000*offset));
     return nd.toLocaleString();
    }
   </script>
  ]]></description>

  <styleUrl>#khStylem1200</styleUrl>
  <MultiGeometry>
   <Polygon>
    <outerBoundaryIs>
     <LinearRing>
      <coordinates>

       -179.0623,-89.90000000000001,0 -180,-89.90000000000001,0 -180,-86.5,0 -180,-81.49999,0 -180,-76.5,0 -180,-71.5,0 -180,-66.5,0 -180,-61.5,0 -180,-56.5,0 -180,-51.50000000000001,0 -176.2216,-48.22535,0 -172.5,-45,0 -172.4998,-50,0 -172.4996,-55.00000000000001,0 -172.4995,-60.00000000000001,0 -172.4993,-65,0 -172.4991,-70,0 -172.4989,-75,0 -172.4987,-80,0 -172.4986,-83.3,0 -172.4984,-88.3,0 -172.4984,-89.90000000000001,0 -173.4361,-89.90000000000001,0 -174.3738,-89.90000000000001,0 -175.3115,-89.90000000000001,0 -176.2492,-89.90000000000001,0 -177.1869,-89.90000000000001,0 -178.1246,-89.90000000000001,0 -179.0623,-89.90000000000001,0 

      </coordinates>
     </LinearRing>
    </outerBoundaryIs>
    <tessellate>1</tessellate>
   </Polygon>

   <Polygon>
    <outerBoundaryIs>
     <LinearRing>
      <coordinates>

       -172.509,74.89999,0 -172.509,70.23302,0 -175.7817,72.31562,0 -180,75,0 -180,79.90000000000001,0 -180,84.90001,0 -180,89.90000000000001,0 -179.0636,89.90000000000001,0 -178.1273,89.90000000000001,0 -177.1909,89.90000000000001,0 -176.2545,89.90000000000001,0 -175.3181,89.90000000000001,0 -174.3818,89.90000000000001,0 -173.4454,89.90000000000001,0 -172.509,89.90000000000001,0 -172.509,84.90001,0 -172.509,79.90000000000001,0 -172.509,74.89999,0

      </coordinates>
     </LinearRing>
    </outerBoundaryIs>
    <tessellate>1</tessellate>
   </Polygon>
  </MultiGeometry>
 </Placemark>
 <Placemark>
  <name>GMT -11:00</name>

---
「232-ol3ex.js」

var styleFunction = function(feature, resolution) {
 var offset = 0;
 var name = feature.get('name'); // e.g. GMT -08:30
 /** get(key)
  * Gets a value.
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */
 var match = name.match(/([\-+]\d{2}):(\d{2})$/);
 /**
  * /([\-+]\d{2}):(\d{2})$/
  * [\-+] --- - または +
  * \d --- 数値
  * \d{2} --- ２個の数値
  * $ --- 行の最後
  * （-> 00:00 という文字列） 
  */

 if (match) {

  var hours = parseInt(match[1], 10);
  /** parseInt(string, radix)
   * str: 文字列, radix: 基数（進法）
   * 文字列の引数をパースし、指定された基数の整数を返します。
   * （MDN[https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Reference/Global_Objects/parseInt]）
   */
  /** String.prototype.match()
   * 正規表現 に対する 文字列 のマッチングの際に、そのマッチ
   * 結果を得るために使われます。
   * （MDN[https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Reference/Global_Objects/String/match]）
   */

  var minutes = parseInt(match[2], 10);
  offset = 60 * hours + minutes;
 }

 var date = new Date();
 /** Date
  * 日付や時刻を扱うことが可能な、JavaScript の Date 
  * インスタンスを生成します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Date]）
  */

 var local = new Date(date.getTime() +
  (date.getTimezoneOffset() + offset) * 60000);
 // offset from local noon (in hours)
 /** Date.prototype.getTime()
  * ユニバーサル時間に従い、指定された日付の時刻に対応する数
  * 値を返します。
  * GetTime メソッドによって返される値は、1970 年 1 月 1 日 
  * 00:00:00 UTC からの経過ミリ秒です。このメソッドは、日付
  * と時刻を別の Date オブジェクトに割り当てるために使用できま
  * す。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Date/getTime]）
  */
 /** Date.prototype.getTimezoneOffset()
  * UTCと現在のロケール時間との差を分単位で返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Date/
  * getTimezoneOffset]）
  */

 var delta = Math.abs(12 - local.getHours() + (local.getMinutes() / 60));
  /** Math.abs()
   * 引数として与えた数の絶対値を返します。
   * （MDN[https://developer.mozilla.org/ja/docs/Web/
   * JavaScript/Reference/Global_Objects/Math/abs]）
   */
 /** Date.prototype.getHours()
  * 地方時に基づき、指定された日時の「時」を返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Date/getHours]）
  */
 /** Date.prototype.getMinutes()
  * ローカル時刻の「分」（minutes）を返します。
  * （MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Date/getMinutes]）
  */

 if (delta > 12) {
  delta = 24 - delta;
 }
 var opacity = 0.75 * (1 - delta / 12);

 return [new ol.style.Style({
 /** ol.style.Style 
  * Base class for vector feature rendering styles.
  * ベクタフィーチャがスタイルを描画するための基本クラス。
  * （ol3 API）
  */

  fill: new ol.style.Fill({
  /** ol.style.Fill 
   * Set fill style for vector features.
   * ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
   */

   color: [0xff, 0xff, 0x33, opacity]
  }),

  stroke: new ol.style.Stroke({
  /** ol.style.Stroke 
   * Set stroke style for vector features. 
   * Note that the defaults given are the Canvas defaults, 
   * which will be used if option is not defined. 
   * The get functions return whatever was entered 
   * in the options;  they will not return the default.
   * ベクタフィーチャのためのストロークスタイルの設定。
   * デフォルトは、オプションが定義されていない場合に使用される
   * Canvas のデフォルトを与えられることに注意してください。 
   * GET機能は、オプションで入力されたものはすべて返します。
   * それらはデフォルトを返しません。（ol3 API）
   */

   color: '#ffffff'
  })
 })];
};

var vector = new ol.layer.Vector({
/** ol.layer.Vector
 * Vector data that is rendered client-side.
 * クライアント側で描画されるベクタデータ。（ol3 API）
 */

 source: new ol.source.KML({
 /** ol.source.KML 
  * Static vector source in KML format
  * KML フォーマットの静的ベクタソース（0l3 API）
  */

  extractStyles: false,
  projection: 'EPSG:3857',
  // url: 'data/kml/timezones.kml'
  url: 'v3.0.0/examples/data/kml/timezones.kml' // 修正
 }),
 style: styleFunction
});

var raster = 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.Stamen({
 /** ol.source.Stamen
  * Layer source for the Stamen tile server.
  * Stamen タイルサーバのレイヤソース。（ol3 API）
  * （2 - ol3ex 24b - Stamen example 2 参照）
  */
  layer: 'toner'
 })
});

var map = new ol.Map({
 layers: [raster, vector],
 target: 'map',
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});

var info = $('#info');
info.tooltip({
/** Tooltips tooltip.js
 * Inspired by the excellent jQuery.tipsy plugin written 
 * by Jason Frame; Tooltips are an updated version, 
 * which don't rely on images, use CSS3 for animations, 
 * and data-attributes for local title storage.
 * Jason Frame によって書かれた優れたjQuery.tipsyプラグイン
 * に触発されました。Tooltips は、更新されたバージョンで、画像
 * に依存しない、アニメーションに CSS3 を使用し、ローカルタイト
 * ル·ストレージのためのデータの属性です。
 * （Bootstrap[http://getbootstrap.com/javascript/
 * #tooltips]）
 * カーソルを何かの項目に合わせたとき、その項目に覆いかぶさるよう
 * な形で小さな枠が出現し、その枠内には選択された項目に関する補足
 * 情報が表示される。
 * （ツールチップ[http://ja.wikipedia.org/wiki/
 * %E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97]）
 */
 animation: false,
 /** animation
  * Apply a CSS fade transition to the tooltip
  * ツールチップにCSSのフェードトランジション（遷移）を適用しま
  * す。
  */
 trigger: 'manual'
 /** trigger
  * How tooltip is triggered - click | hover |
  *  focus | manual. You may pass multiple triggers; 
  * separate them with a space.
  * ツールチップがトリガされる方法 - click | hover |
  *  focus | manual。複数のトリガを設定するには、スペースで
  * 分割。
  */
});

var displayFeatureInfo = function(pixel) {
 info.css({
 /** .css()
  * Get the computed style properties for the first element 
  * in the set of matched elements.
  * マッチした要素のセットの最初の要素の計算されたスタイルプロ
  * パティを取得します。
  * （jQuery[http://api.jquery.com/css/]）
  */ 
  left: pixel[0] + 'px',
  top: (pixel[1] - 15) + 'px'
 });

 var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
 /** forEachFeatureAtPixel
  * Detect features that intersect a pixel on the viewport, 
  * and execute a callback with each intersecting feature. 
  * Layers included in the detection can be configured 
  * through opt_layerFilter. Feature overlays will always 
  * be included in the detection.
  * ビューポート上のピクセルと交差するフィーチャを検出し、
  * 各交差するフィーチャとコールバックを実行します。
  * 検出に含まれるレイヤが opt_layerFilter を通じて
  * 設定することができます。フィーチャーオーバーレイは
  * 常に検出に含まれます。（ol3 API）
  */

  return feature;
 });
 if (feature) {
  info.tooltip('hide')
  /** .tooltip('hide')
   * Hides an element's tooltip. Returns to the caller 
   * before the tooltip has actually been hidden (i.e. 
   * before the hidden.bs.tooltip event occurs). 
   * This is considered a "manual" triggering of the 
   * tooltip.
   * 要素のツールチップを非表示にします。ツールチップが実際に
   * 隠される前（すなわち、hidden.bs.tooltipイベントが発生
   * する前）に、caller が返されます。これは、ツールチップの
   * トリガ（trigger:） が manyal とみなされます。
   * （Bootstrap[http://getbootstrap.com/javascript/
   * #tooltips]）
   */
   .attr('data-original-title', feature.get('name'))
   /** .attr()
    * Get the value of an attribute for the first element 
    * in the set of matched elements or set one or more 
    * attributes for every matched element.
     * マッチした要素のセットの最初の要素の属性の値を取得するか、
     * すべての一致した要素の1つ以上の属性を設定します。
    * （jQuery[http://api.jquery.com/attr/]）
     */
   /** get(key)
    * Gets a value.
    * （ol3 API[説明は Stable Only のチェックを外すと表示]）
    */
   .tooltip('fixTitle')
   // 変更した title 属性を tooltip に反映
   .tooltip('show');
   /** .tooltip('show')
    * Reveals an element's tooltip. Returns to the caller 
    * before the tooltip has actually been shown (i.e. 
    * before the shown.bs.tooltip event occurs). 
    * This is considered a "manual" triggering of the 
    * tooltip. Tooltips with zero-length titles are never 
    * displayed.
    * 要素のツールチップをRevealsにします。ツールチップが実際に
    * 表示される前（すなわち、shown.bs.tooltipイベントが発生
    * する前）に、caller が返されます。これは、ツールチップの
    * トリガ（trigger:） が manyal とみなされます。
    * zero-length タイトルのツールチップは決して表示されません。
    * （Bootstrap[http://getbootstrap.com/javascript/
    * #tooltips]）
    */
 } else {
  info.tooltip('hide');
 }
};

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

 displayFeatureInfo(map.getEventPixel(evt.originalEvent));
 /** getEventPixel
  * Returns the map pixel position for a browser event.
  * ブラウザイベントに対して、マップのピクセル位置を返します。
  * （ol3 API）
  */
});

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

originalEvent
「ol.MapBrowserEvent」
（Events emitted as map browser events are instances of this type. See ol.Map for which events trigger a map browser event.
マップブラウザイベントとして発するイベントは、このタイプのインスタンスです。イベントがマップブラウザイベントをトリガする ol.Map を参照してください。）
のメンバ。

ol/ol/mapbrowserevent.js 32行目
 * @param {goog.events.BrowserEvent} browserEvent Browser event.
ol/ol/mapbrowserevent.js 52行目
 this.originalEvent = browserEvent.getBrowserEvent();

goog.events.BrowserEvent
「events.BrowserEvent - Extends goog.events.Event」
（http://docs.closure-library.googlecode.com/git/class_goog_events_BrowserEvent.html）
Accepts a browser event object and creates a patched, cross browser event object. The content of this object will not be initialized if no event object is provided. If this is the case, init() needs to be invoked separately.
events.BrowserEvent。goog.events.Eventを拡張します。
ブラウザイベントオブジェクトを受け入れ、パッチを適用した、クロスブラウザイベントオブジェクトを作成します。イベントオブジェクトが提供されない場合は、このオブジェクトの内容は初期化されません。この場合は、init()は別々に呼び出す必要があります。

「Instance Methods」
getBrowserEvent() ⇒ Event
No description.
Returns: Event  The underlying browser event object.