2017年4月22日土曜日

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
 })
});
 

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

「Custom Overview Map(overviewmap-custom.html) 」を参考に地図を表示してみます。
説明に次のようにあります。

This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS. You can also rotate the map using the shift key to see how the overview map reacts.

この例では、カスタムCSSを定義することと同じようにサポートされているオプションを使用して overviewmap コントロールをカスタマイズする方法を示します。 また、Shift キーを使用して地図を回転すると、概要マップ(overview map)がどのように反応するかを見ることができます。

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。




b 「ファイルを開く」ウィンドウで、「user」->「workspace」->「ol4proj」-> 「v4.1.0」->「examples」->「overviewmap-custom.html」をクリックして選択し、「OK」ボタンをクリッ クします。
同じように「overviewmap-custom.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。




d 「ファイル」ウィンドウで「ol4proj」->「v4.1.0」->「examples」をクリックして選択し、「ファイル名」を「2170-ol4ex.html」と入力し、「完了」ボタンをクリックします。
(「ファイル」->「新規」->「その他」をクリックし、「ウィザードを選択」ダイアログで「Web」->「HTMLファイル」からテンプレートも作成できます。)






e 「overviewmap-custom.html」の内容をコピーして「2170-ol4ex.html」に貼り付け、修正します。

f 同じように、新規に「2170-ol4ex.js」ファイルを作成し、「moverviewmap-custom.js」の内容をコピーして貼り付け、修正します。「overviewmap-custom-require.js」も「2170-ol4ex-require.js」に貼り付けます。
(「ファイル」->「新規」->「JavaScript ソース・ファイル」をクリックし、「新規 JavaScript ファイル」ダイアログでテンプレートも作成できます。)






「2170-ol3ex.html」
<!DOCTYPE html>
<html lang="en-US">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
  <link rel="stylesheet" href="../css/ol.css" type="text/css">
  <link rel="stylesheet" href="./resources/layout.css" type="text/css">

  <link rel="stylesheet" href="overviewmap-custom.css"">
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
  <script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
  <title>Custom Overview Map</title>
 </head>
 <body>
  <!-- 
  bootstrap-combined.min.css, ol.css, layout.css,
  CSSファイルで設定されたセレクタを使用。
  -->
  <header class="navbar" role="navigation">
   <div class="container">
    <div class="display-table pull-left" id="navbar-logo-container">
     <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers Examples</a>
    </div>
    <!-- menu items that get hidden below 768px width -->
    <nav class='collapse navbar-collapse navbar-responsive-collapse'>
     <ul class="nav navbar-nav pull-right">
      <li><a href="../doc">Docs</a></li>
      <li><a class="active" href="index.html">Examples</a></li>
      <li><a href="../apidoc">API</a></li>
      <li><a href="https://github.com/openlayers/openlayers">Code</a></li>
     </ul>
    </nav>
   </div>
  </header>
  <div class="container-fluid">
   <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
    <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true">&times;</span>
    </button>
     This example uses OpenLayers v<span>4.0.1</span>. 
     The <a id="latest-link" href="#" class="alert-link">latest</a>
     is v<span id="latest-version"></span>.
   </div>
   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">Custom Overview Map</h4>
     <div id="map" class="map"></div>
    </div>
   </div>
   <div class="row-fluid">
    <div class="span12">
     <p id="shortdesc">Example of OverviewMap control with 
       advanced customization.</p>
     <div id="docs"><p>This example demonstrates how you can 
       customize the overviewmap control using its supported 
       options as well as defining custom CSS.  You can also 
       rotate the map using the shift key to see how the 
       overview map reacts.</p>
     </div>
     <div id="api-links">Related API documentation: 
      <ul class="inline">
       <li>
        <a href="../apidoc/ol.Map.html" title="API documentation for ol.Map">ol.Map</a>
       </li>,
       <li>
        <a href="../apidoc/ol.View.html" title="API documentation for ol.View">ol.View</a>
       </li>,
       <li>
        <a href="../apidoc/ol.control.html" title="API documentation for ol.control">ol.control</a>
       </li>,
       <li>
        <a href="../apidoc/ol.control.OverviewMap.html" title="API documentation for ol.control.OverviewMap">ol.control.OverviewMap</a>
       </li>,
       <li>
        <a href="../apidoc/ol.interaction.html" title="API documentation for ol.interaction">ol.interaction</a>
       </li>,
       <li>
        <a href="../apidoc/ol.interaction.DragRotateAndZoom.html" title="API documentation for ol.interaction.DragRotateAndZoom">ol.interaction.DragRotateAndZoom</a>
       </li>,
       <li>
        <a href="../apidoc/ol.layer.Tile.html" title="API documentation for ol.layer.Tile">ol.layer.Tile</a>
       </li>,
       <li>
        <a href="../apidoc/ol.source.OSM.html" title="API documentation for ol.source.OSM">ol.source.OSM</a>
       </li>
      </ui>
     </div>
    </div>
   </div>
   <div class="row-fluid">
    <div id="source-controls">
     <a id="copy-button">
      <i class="fa fa-clipboard"></i> Copy
     </a>
     <a id="jsfiddle-button">
      <i class="fa fa-jsfiddle"></i> Edit
     </a>
    </div>
    <form method="POST" id="jsfiddle-form" target="_blank" action="https://codepen.io/pen/define/">
     <textarea class="hidden" name="title">Custom Overview Map</textarea>
     <textarea class="hidden" name="description">Example of OverviewMap control with advanced customization.</textarea>
     <textarea class="hidden" name="js">
// --- 省略 ---
&lt;/html&gt;</code></pre>
   </div>
  </div>
  <script src="./resources/common.js"></script>
  <script src="./resources/prism/prism.min.js"></script>
  <!-- 
  <script src="loader.js?id=overviewmap-custom"></script>
  -->
  <!-- ファイル修正 -->
  <script src="loader.js?id=2170-ol4ex"></script>
 </body>
 <script>
  var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
  fetch(packageUrl).then(function(response) {
  /** GlobalFetch.fetch()(This is an experimental technology)
   * The fetch() method of the GlobalFetch interface 
   * starts the process of fetching a resource. This 
   * returns a promise that resolves to the Response 
   * object representing the response to your request.
   * GlobalFetch インタフェースの fetch() メソッドは、リソー
   * スを取得する処理を開始します。これは要求に対する応答を表す 
   * Response オブジェクトに解決のプロミス(promise)を返しま
   * す。
   *(MDN[https://developer.mozilla.org/ja/docs/Web/API/
   * FGlobalFetch/fetch])
   */
   return response.json();
   /** Response(This is an experimental technology)
    * The Response interface of the Fetch API represents 
    * the response to a request.
    * Fetch API の Response インタフェースは、要求に対する応答
    * を表します。
    * (MDN[https://developer.mozilla.org/en-US/docs/Web/
    * API/Response])
    */
   /** Body.json()(This is an experimental technology)
    * The json() method of the Body mixin takes a Response 
    * stream and reads it to completion. It returns a 
    * promise that resolves with an object literal 
    * containing the JSON data.
    * Body mixin の json() メソッドは、Response ストリームを
    * 受け取り、それを完了させるために読み込みます。これは、
    * JSON データを含むオブジェクトリテラルで解決する約束
    * (promisee)を返します。
    * (MDN[https://developer.mozilla.org/en-US/docs/Web/
    * API/Body/json])
    */
  }).then(function(json) {
   var latestVersion = json.version;
   document.getElementById('latest-version').innerHTML = latestVersion;
   var url = window.location.href;
   var branchSearch = url.match(/\/([^\/]*)\/examples\//);
   /** String.prototype.match()
    * 正規表現 に対する 文字列 のマッチングの際に、そのマッチ結
    * 果を得るために使われます。
    * (MDN[https://developer.mozilla.org/ja/docs/Web/
    * JavaScript/Reference/Global_Objects/String/match])
    */
   var cookieText = 'dismissed=-' + latestVersion + '-';
   var dismissed = document.cookie.indexOf(cookieText) != -1;
   /** String.prototype.indexOf()
    * 呼び出す String オブジェクト 中で、指定された値が最初に現
    * れたインデックスを返します。fromIndex から検索を始め、値が
    * 見つからない場合は -1 を返します。
    * (MDN[https://developer.mozilla.org/ja/docs/Web/
    * JavaScript/Reference/Global_Objects/String/indexOf])
    */
   if (!dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && '4.1.0' != latestVersion) {
    var link = url.replace(branchSearch[0], '/latest/examples/');
    /** Location.replace()
     * The Location.replace() method replaces the current 
     * resource with the one at the provided URL. The 
     * difference from the assign() method is that after 
     * using replace() the current page will not be saved 
     * in session History, meaning the user won't be able 
     * to use the back button to navigate to it.
     * 指定された URL に現在の文書を置き換えます。 assign() メ
     * ソッドとの違いは、replace() を用いた後、現在のページは、
     * セッションの履歴には保持されないことです。つまり、ユーザ
     * は、置き換え前のページに戻るために、戻るボタンを使うこと
     * ができません。
     * (MDN[https://developer.mozilla.org/en-US/docs/Web/
     * API/Location/replace])
     */
    fetch(link, {method: 'head'}).then(function(response) {
     var a = document.getElementById('latest-link');
     a.href = response.status == 200 ? link : '../../latest/examples/';
     /** Response.status(This is an experimental technology)
      * The status read-only property of the Response 
      * interface contains the status code of the response 
      * (e.g., 200 for a success).
      * Response インタフェースの status 読み取り専用プロパティ
      * は、応答のステータス・コード(例えば、成功のために 200)
      * を含みます。
     * (MDN[https://developer.mozilla.org/en-US/docs/Web/
     * API/Response/status])
      */
    });
    var latestCheck = document.getElementById('latest-check');
    latestCheck.style.display = '';
    document.getElementById('latest-dismiss').onclick = function() {
     latestCheck.style.display = 'none';
     document.cookie = cookieText;
    }
   }
  });
 </script>
</html>


COMMONJS は

COMMONJS
http://webpack.github.io/docs/commonjs.html

に、次のようにあります。

The CommonJS group defined a module format to solve JavaScript scope issues by making sure each module is executed in its own namespace.
This is achieved by forcing modules to explicitly export those variables it wants to expose to the “universe”, and also by defining those other modules required to properly work.
To achieve this CommonJS give you two tools:
the require() function, which allows to import a given module into the current scope.
the module object, which allows to export something from the current scope.

CommonJSグループは、それ自身の名前空間内で実行されている各モジュールを確認することによって、JavaScriptのスコープ問題を解決するためのモジュールフォーマットを定義しました。
これは、それが「universe(?)」に公開したい変数を明示的にエクスポートするモジュールを強制することによって、同じように、正常に動作するのに必要な他のモジュールを定義することによって、達成されます。
この CommonJS を達成するために2つのツールを与えます:
require()関数、指定したモジュールを現在のスコープにインポートすることができます。
モジュールオブジェクト、現在のスコープからエクスポートすることができます。


Prism は、

Prism
http://prismjs.com/

に、次のようにあります。

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.
Prismは、最新のWeb標準に構築されたことを考慮し軽量で拡張可能なシンタックスハイライトです。それは Dabblet からスピンオフで、何千人も日々そこで試験されています。


ZeroClipboard は

ZeroClipboard v2.x
http://zeroclipboard.org/

に、次のようにあります。

The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.
ZeroClipboard ライブラリは、見えない Adobe Flash ムービーとJavaScript のインターフェイスを使用してテキストをクリップボードにコピーする簡単な方法を提供します。

Debian 8 では動作しませんでした。ボタンを右クリックしたときに flash のコンテキストメニューが表示されると動作しています。

2 - ol4.1ex 169b - View Min-Zoom 2

「min-zoom.js(2169-ol4ex.js)」は、マップを表示するための JavaScript ファイルです。

「2169-ol4ex.js」
var viewport = document.getElementById('map');
function getMinZoom() {
 var width = viewport.clientWidth;
 return Math.ceil(Math.LOG2E * Math.log(width / 256));
 /** Math.ceil()
  * The Math.ceil() function returns the smallest integer 
  * greater than or equal to a given number.
  * 引数として与えた数以上の最小の整数を返します。
  * (MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/ceil])
  */
 /** Math.LOG2E()
  * The Math.LOG2E property represents the base 2 logarithm  
  * of e, approximately 1.442:
  * 2 を底とした E の対数。約 1.442 です。
  * (MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/LOG2E])
  */
 /** Math.log()
  * The Math.log() function returns the natural logarithm  
  * (base e) of a number.
  * Math.log() 関数は、引数として与えた数の自然対数 (底は e) 
  * を返します。
  * (MDN[https://developer.mozilla.org/ja/docs/Web/
  * JavaScript/Reference/Global_Objects/Math/log])
  */
}
var initialZoom = getMinZoom();
var view = new ol.View({
 center: [0, 0],
 minZoom: initialZoom,
 zoom: initialZoom
});
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. 
   * プリレンダリング(事前描画)を提供するレイヤソースのため
   * の、特定の解像度でのズームレベルによって編成されているグ
   * リッドのタイルイメージ。(ol4 API)
   */
   source: new ol.source.OSM()
   /** ol.source.OSM 
    * Layer source for the OpenStreetMap tile server.
    * OpenStreetMap タイルサーバのレイヤソース。(ol4 API)
    */
  })
 ],
 target: 'map',
 view: view
});
window.addEventListener('resize', function() {
/** EventTarget.addEventListener
 * The EventTarget.addEventListener() method registers 
 * the specified listener on the EventTarget it's called 
 * on. The event target may be an Element in a document, 
 * the Document itself, a Window, or any other object 
 * that supports events (such as XMLHttpRequest).
 * EventTarget.addEventListener() メソッドは、それが呼び
 * 出される EventTarget に指定されたリスナを登録します。イベ
 * ントターゲットは、ドキュメントの Element、Document 自身、
 * Window、または(XMLHttpRequest などの)イベントをサポート
 * している他のオブジェクトです。
 * (MDN[https://developer.mozilla.org/en-US/docs/Web/
 * API/EventTarget/addEventListener])
 */
 var minZoom = getMinZoom();
 if (minZoom !== view.getMinZoom()) {
 /** getMinZoom()
  * Get the minimum zoom level for the view.
   * view の最小ズームレベルを取得します。(ol4 API)
  */
  view.setMinZoom(minZoom);
  /** setMinZoom(zoom)
   * Set a new minimum zoom level for the view.
   * view の最小ズームレベルを設定します。(ol4 API)
   */
 }
});
 
 

2 - ol4.1ex 169a - View Min-Zoom 1

「View Min-Zoom(min-zoom.html) 」を参考に地図を表示してみます。
説明に次のようにあります。

The minZoom option for a view limits how far out you can zoom. This property can be updated by calling view.setMinZoom(newMinZoom). In this example, the minimum zoom level is set so that you only see one world at a time. Resize your browser window to change the threshold.

view の minZoom オプションは、ズームできる範囲を制限します。 このプロパティは、view.setMinZoom(newMinZoom)を呼び出して更新できます。 この例では、一度に1つの世界地図だけを表示できるように、最小ズームレベルが設定されています。 しきい値を変更するためにブラウザウィンドウのサイズを変更します。


HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。




b 「ファイルを開く」ウィンドウで、「user」->「workspace」->「ol4proj」-> 「v4.1.0」->「examples」->「min-zoom.html」をクリックして選択し、「OK」ボタンをクリッ クします。
同じように「min-zoom.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。




d 「ファイル」ウィンドウで「ol4proj」->「v4.1.0」->「examples」をクリックして選択し、「ファイル名」を「2169-ol4ex.html」と入力し、「完了」ボタンをクリックします。
(「ファイル」->「新規」->「その他」をクリックし、「ウィザードを選択」ダイアログで「Web」->「HTMLファイル」からテンプレートも作成できます。)






e 「min-zoom.html」の内容をコピーして「2169-ol4ex.html」に貼り付け、修正します。

f 同じように、新規に「2169-ol4ex.js」ファイルを作成し、「min-zoom.js」の内容をコピーして貼り付け、修正します。「min-zoom-require.js」も「2169-ol4ex-require.js」に貼り付けます。
(「ファイル」->「新規」->「JavaScript ソース・ファイル」をクリックし、「新規 JavaScript ファイル」ダイアログでテンプレートも作成できます。)






「2169-ol3ex.html」
<!DOCTYPE html>
<html lang="en-US">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
  <link rel="stylesheet" href="../css/ol.css" type="text/css">
  <link rel="stylesheet" href="./resources/layout.css" type="text/css">
    
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
  <script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
  <title>View Min-Zoom</title>
 </head>
 <body>
  <!-- 
  bootstrap-combined.min.css, ol.css, layout.css,
  CSSファイルで設定されたセレクタを使用。
  -->
  <header class="navbar" role="navigation">
   <div class="container">
    <div class="display-table pull-left" id="navbar-logo-container">
     <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers Examples</a>
    </div>
    <!-- menu items that get hidden below 768px width -->
    <nav class='collapse navbar-collapse navbar-responsive-collapse'>
     <ul class="nav navbar-nav pull-right">
      <li><a href="../doc">Docs</a></li>
      <li><a class="active" href="index.html">Examples</a></li>
      <li><a href="../apidoc">API</a></li>
      <li><a href="https://github.com/openlayers/openlayers">Code</a></li>
     </ul>
    </nav>
   </div>
  </header>
  <div class="container-fluid">
   <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
    <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close">
     <span aria-hidden="true">&times;</span>
    </button>
     This example uses OpenLayers v<span>4.0.1</span>. 
     The <a id="latest-link" href="#" class="alert-link">latest</a>
     is v<span id="latest-version"></span>.
   </div>
   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">View Min-Zoom</h4>
     <div id="map" class="map"></div>
    </div>
   </div>
   <div class="row-fluid">
    <div class="span12">
     <p id="shortdesc">Demonstrates how the view&#x27;s 
       minimum zoom level can be changed.</p>
     <div id="docs"><p>The <code>minZoom</code> option 
       for a view limits how far out you can zoom.  This 
       property can be updated by calling 
       <code>view.setMinZoom(newMinZoom)</code>. In this 
       example, the minimum zoom level is set so that you 
       only see one world at a time.  Resize your browser 
       window to change the threshold.</p>
     </div>
     <div id="api-links">Related API documentation: 
      <ul class="inline">
       <li>
        <a href="../apidoc/ol.Map.html" title="API documentation for ol.Map">ol.Map</a>
       </li>,
       <li>
        <a href="../apidoc/ol.View.html" title="API documentation for ol.View">ol.View</a>
       </li>,
       <li>
        <a href="../apidoc/ol.layer.Tile.html" title="API documentation for ol.layer.Tile">ol.layer.Tile</a>
       </li>,
       <li>
        <a href="../apidoc/ol.source.OSM.html" title="API documentation for ol.source.OSM">ol.source.OSM</a>
       </li>
      </ui>
     </div>
    </div>
   </div>
   <div class="row-fluid">
    <div id="source-controls">
     <a id="copy-button">
      <i class="fa fa-clipboard"></i> Copy
     </a>
     <a id="jsfiddle-button">
      <i class="fa fa-jsfiddle"></i> Edit
     </a>
    </div>
    <form method="POST" id="jsfiddle-form" target="_blank" action="https://codepen.io/pen/define/">
     <textarea class="hidden" name="title">View Min-Zoom</textarea>
     <textarea class="hidden" name="description">Demonstrates how the view's minimum zoom level can be changed.</textarea>
     <textarea class="hidden" name="js">
// --- 省略 ---
&lt;/html&gt;</code></pre>
   </div>
  </div>
  <script src="./resources/common.js"></script>
  <script src="./resources/prism/prism.min.js"></script>
  <!-- 
  <script src="loader.js?id=min-zoom"></script>
  -->
  <!-- ファイル修正 -->
  <script src="loader.js?id=2169-ol4ex"></script>
 </body>
 <script>
  var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
  fetch(packageUrl).then(function(response) {
  /** GlobalFetch.fetch()(This is an experimental technology)
   * The fetch() method of the GlobalFetch interface 
   * starts the process of fetching a resource. This 
   * returns a promise that resolves to the Response 
   * object representing the response to your request.
   * GlobalFetch インタフェースの fetch() メソッドは、リソー
   * スを取得する処理を開始します。これは要求に対する応答を表す 
   * Response オブジェクトに解決のプロミス(promise)を返しま
   * す。
   *(MDN[https://developer.mozilla.org/ja/docs/Web/API/
   * FGlobalFetch/fetch])
   */
   return response.json();
   /** Response(This is an experimental technology)
    * The Response interface of the Fetch API represents 
    * the response to a request.
    * Fetch API の Response インタフェースは、要求に対する応答
    * を表します。
    * (MDN[https://developer.mozilla.org/en-US/docs/Web/
    * API/Response])
    */
   /** Body.json()(This is an experimental technology)
    * The json() method of the Body mixin takes a Response 
    * stream and reads it to completion. It returns a 
    * promise that resolves with an object literal 
    * containing the JSON data.
    * Body mixin の json() メソッドは、Response ストリームを
    * 受け取り、それを完了させるために読み込みます。これは、
    * JSON データを含むオブジェクトリテラルで解決する約束
    * (promisee)を返します。
    * (MDN[https://developer.mozilla.org/en-US/docs/Web/
    * API/Body/json])
    */
  }).then(function(json) {
   var latestVersion = json.version;
   document.getElementById('latest-version').innerHTML = latestVersion;
   var url = window.location.href;
   var branchSearch = url.match(/\/([^\/]*)\/examples\//);
   /** String.prototype.match()
    * 正規表現 に対する 文字列 のマッチングの際に、そのマッチ結
    * 果を得るために使われます。
    * (MDN[https://developer.mozilla.org/ja/docs/Web/
    * JavaScript/Reference/Global_Objects/String/match])
    */
   var cookieText = 'dismissed=-' + latestVersion + '-';
   var dismissed = document.cookie.indexOf(cookieText) != -1;
   /** String.prototype.indexOf()
    * 呼び出す String オブジェクト 中で、指定された値が最初に現
    * れたインデックスを返します。fromIndex から検索を始め、値が
    * 見つからない場合は -1 を返します。
    * (MDN[https://developer.mozilla.org/ja/docs/Web/
    * JavaScript/Reference/Global_Objects/String/indexOf])
    */
   if (!dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && '4.1.0' != latestVersion) {
    var link = url.replace(branchSearch[0], '/latest/examples/');
    /** Location.replace()
     * The Location.replace() method replaces the current 
     * resource with the one at the provided URL. The 
     * difference from the assign() method is that after 
     * using replace() the current page will not be saved 
     * in session History, meaning the user won't be able 
     * to use the back button to navigate to it.
     * 指定された URL に現在の文書を置き換えます。 assign() メ
     * ソッドとの違いは、replace() を用いた後、現在のページは、
     * セッションの履歴には保持されないことです。つまり、ユーザ
     * は、置き換え前のページに戻るために、戻るボタンを使うこと
     * ができません。
     * (MDN[https://developer.mozilla.org/en-US/docs/Web/
     * API/Location/replace])
     */
    fetch(link, {method: 'head'}).then(function(response) {
     var a = document.getElementById('latest-link');
     a.href = response.status == 200 ? link : '../../latest/examples/';
     /** Response.status(This is an experimental technology)
      * The status read-only property of the Response 
      * interface contains the status code of the response 
      * (e.g., 200 for a success).
      * Response インタフェースの status 読み取り専用プロパティ
      * は、応答のステータス・コード(例えば、成功のために 200)
      * を含みます。
     * (MDN[https://developer.mozilla.org/en-US/docs/Web/
     * API/Response/status])
      */
    });
    var latestCheck = document.getElementById('latest-check');
    latestCheck.style.display = '';
    document.getElementById('latest-dismiss').onclick = function() {
     latestCheck.style.display = 'none';
     document.cookie = cookieText;
    }
   }
  });
 </script>
</html>


COMMONJS は

COMMONJS
http://webpack.github.io/docs/commonjs.html

に、次のようにあります。

The CommonJS group defined a module format to solve JavaScript scope issues by making sure each module is executed in its own namespace.
This is achieved by forcing modules to explicitly export those variables it wants to expose to the “universe”, and also by defining those other modules required to properly work.
To achieve this CommonJS give you two tools:
the require() function, which allows to import a given module into the current scope.
the module object, which allows to export something from the current scope.

CommonJSグループは、それ自身の名前空間内で実行されている各モジュールを確認することによって、JavaScriptのスコープ問題を解決するためのモジュールフォーマットを定義しました。
これは、それが「universe(?)」に公開したい変数を明示的にエクスポートするモジュールを強制することによって、同じように、正常に動作するのに必要な他のモジュールを定義することによって、達成されます。
この CommonJS を達成するために2つのツールを与えます:
require()関数、指定したモジュールを現在のスコープにインポートすることができます。
モジュールオブジェクト、現在のスコープからエクスポートすることができます。


Prism は、

Prism
http://prismjs.com/

に、次のようにあります。

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.
Prismは、最新のWeb標準に構築されたことを考慮し軽量で拡張可能なシンタックスハイライトです。それは Dabblet からスピンオフで、何千人も日々そこで試験されています。


ZeroClipboard は

ZeroClipboard v2.x
http://zeroclipboard.org/

に、次のようにあります。

The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.
ZeroClipboard ライブラリは、見えない Adobe Flash ムービーとJavaScript のインターフェイスを使用してテキストをクリップボードにコピーする簡単な方法を提供します。

Debian 8 では動作しませんでした。ボタンを右クリックしたときに flash のコンテキストメニューが表示されると動作しています。

v4.1.0 がリリースされました

v4.1.1 がリリースされました(2017.5.8 追記)
日本時間で(2017.5.5)に v4.1.1 がリリースされました。

Releases 4.1.1 - openlayers/openlayers GitHub
(https://github.com/openlayers/openlayers/releases/tag/v4.1.1)より

v4.1.1
Summary

This is a patch release to fix several minor issues and two regression in the v4.1.0 release.

v4.1.1 リリースは、v4.1.0 リリースのいくつかの軽微な問題と2回の回帰に対処するパッチリリースです。


v4.1.0 がリリースされました
日本時間で(2017.4.15)に v4.1.0 がリリースされました。

Releases 4.1.0 - openlayers/openlayers GitHub
(https://github.com/openlayers/openlayers/releases/tag/v4.1.0)より

4.1.0
Summary

The v4.1.0 release includes features and fixes from 91 pull requests.

バージョン 4.1.0 には、91個のプルリクエスト(訳注:Git でリクエストを出す機能)からの機能と修正が含まれています。


Interactive overview map
インタラクティブな概要図

The extent rectangle on the overview map can now be dragged to control the view for the main map.

概要マップ上の範囲矩形をドラッグして、メインマップのビューを制御することができます。


Setting min and max zoom for a view
ビューの最小および最大ズームの設定

You can now change the min or max zoom for a view after it has been created. This can be useful if you want to limit how far out users can zoom based on changes in viewport width (use view.setMinZoom() for this).

作成したビューの最小または最大のズームを変更できるようになりました。 これは、ユーザーがビューポートの幅の変更に基づいてズームできる範囲を制限したい場合に便利です(このためにview.setMinZoom()を使用します)。


Adding duplicate layers to a map throws
マップに重複レイヤーを追加するとスロー(メソッドが例外を投げること)されます

Previously, you could do this:

以前は、これを行うことができました:

map.addLayer(layer);
map.addLayer(layer);


However, after adding a duplicate layer, things failed if you tried to remove that layer.

ただし、重複するレイヤーを追加した後、そのレイヤーを削除しようとすると失敗します。

Now, map.addLayer() throws if you try adding a layer that has already been added to the map.

現在、map.addLayer()は、既にマップに追加されているレイヤーを追加しようとするとスローされます。


Simpler constrainResolution configuration
より簡単な ConstrainResolution configuration

The constrainResolution configuration for ol.interaction.PinchZoom and ol.interaction.MouseWheelZoom
can now be set directly with an option in ol.interaction.defaults:

ol.interaction.PinchZoom と ol.interaction.MouseWheelZoom のconstrainResolution configuration は、
ol.interaction.defaults のオプションを使って直接設定することができます:

ol.interaction.defaults({
  constrainResolution: true
});



(Detailed changes リストはサイトをみてください。)


OpenLayers のダウンロード
OpenLayers のホームページ(http://openlayers.org/)の「LATEST」の文中の「v4.1.0」をクリックします。


開いたページ「Downloads for the v4.1.0 release(http://openlayers.org/download/)」の「v4.1.0.zip」をクリックしてダウンロードします。


次のようなダイアログが表示されたら「OK」ボタンをクリックします。



このファイルを解凍します。

user@deb8-vmw:~$ cd ダウンロード
user@deb8-vmw:~/ダウンロード$ ls
---
v4.1.0.zip
---
user@deb8-vmw:~/ダウンロード$ unzip v4.1.0.zip
user@deb8-vmw:~/ダウンロード$ ls
---
v4.1.0
v4.1.0.zip
---


ol4proj フォルダに、解凍した v4.1.0 フォルダを eclipse にインポートします。
eclipse を起動します。

user@deb8-vmw:~/ダウンロード$ cd
user@deb8-vmw:~$ eclipse


メニューの ファイル -> インポート をクリックします。











「インポート」ダイアログの「選択」の「インポート・ウィザードの選択(S):」で、一般 -> ファイル・システム をクリックして選択し、「次へ」ボタンをクリックします。







「インポート」ダイアログの「ファイル・システム」の「次のディレクトリから(Y):」欄の右側の「参照(R)」ボタンをクリックします。






「ディレクトリーからインポート」ダイアログで左側の「ホーム」をクリックして、表示された「名前」欄の「ダウンロード」をクリックして選択し、「OK」ボタンをクリックします。






「インポート」ダイアログの「ファイル・システム」の「ダウンロード」の左側の三角形をクリックして「ダウンロード」以下の一覧を表示し、「v4.1.0」をクリックして選択します。



「インポート」ダイアログの「ファイル・システム」の「宛先フォルダー(L):」欄の右側の「参照(W)」ボタンをクリックします。






「フォルダーにインポート」ダイアログで「ol4proj」をクリックして選択し、「OK」ボタンをクリックします。










「インポート」ダイアログの「ファイル・システム」の「完了(F)」ボタンをクリックします。









検証(時間がかかることがあります)が終わったあと「プロジェクタ・エクスプローラー」ビューの「ol4proj」左側の▽をクリックして、「v4.1.0」を表示します。
「v4.1.0」左側の▽をクリックすると中身が表示されます。

追加された Examples を試してみます。
Mousewheel/Trackpad Zoom(mousewheel-zoom.html)は削除されました。