2 - ol3ex 22b - Localized OpenStreetMap example 2

OpenCycleMap と OpenSeaMap は、OpenStreetMap を元に作成された地図です。
日本で、OpenCycleMap は作成されていますが、 OpenSeaMap はありません。（OpenSeaMap は、ドイツ北部の海域をサポートしています。）

OpenCycleMap（http://www.opencyclemap.org/）
OpenCycleMap（http://www.opencyclemap.org/docs/）に次のようにあります。

The OpenCycleMap global cycling map is based on data from the OpenStreetMap project. At low zoom levels it is intended for overviews of national cycling networks; at higher zoom levels it should help with planning which streets to cycle on, where you can park your bike and so on.
OpenCycleMap グローバルサイクリングマップは、OpenStreetMap のプロジェクトのデータに基づいています。低いズームレベルでは、全国のサイクリングネットワークの概要を対象としています。高いズームレベルでは、バイクを駐車できる場所のように、サイクルリング（ツーリング）の行程の計画に役立てることができます。
The map is updated every few days with the latest data from OpenStreetMap. News about OpenCycleMap can be found in the OpenStreetMap archives on my blog.
マップは、OpenStreetMap の最新データで数日ごとに更新されます。 OpenCycleMap についてのニュースは、私のブログで OpenStreetMap のアーカイブで見つけることができます。

OpenSeaMap（http://www.openseamap.org/）
OpenSeaMap Wiki（http://wiki.openstreetmap.org/wiki/OpenSeaMap）に次のようにあります。

History and fundamentals
OpenSeaMap was created in 2009 in response to a great need for freely-accessible seafaring maps. OpenSeaMap's goal is to add nautical and tourism information that would interest sailors OSM, and to present it in a pleasing way. This includes beacons, buoys and other seamarks, port information, repair shops, ship supplies and much more, but also shops, restaurants and places of interest. OpenSeaMap is part of OpenStreetMap and uses its database.
OpenSeaMap は、自由にアクセス可能な船乗り用マップに対する大きな要求に応じて、2009年に作成されました。 OpenSeaMap の目標は、航路や船員のOSMの興味になる観光の情報を追加することと、楽しい方法でそれを提示するです。これはショップ、レストラン、興味のある場所だけでなく、ビーコン、ブイ、他の航路目標、ポート情報、修理工場、船舶用品やさらに多くのものが含まれています。 OpenSeaMap は OpenStreetMap の一部であり、そのデータベースを使用しています。

「222-ol3ex.js」

/** tiles.openseamap.org does not set CORS headers, so we 
 * have to disable crossOrigin and we cannot use WebGL.
 * tiles.openseamap.org は CORS ヘッダを設定していないので、
 * crossOrigin を無効にする必要があり、WebGL を使用するこ
 * とはできません。
 */

var openCycleMapLayer = 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.OSM({
 /** ol.source.OSM 
  * Layer source for the OpenStreetMap tile server.
  * OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
  */
  attributions: [
   new ol.Attribution({
   /** ol.Attribution
    * An attribution for a layer source.
    * レイヤソースの属性（ol3 API）
    */
    html: 'All maps © ' +
     '<a href="http://www.opencyclemap.org/">OpenCycleMap</a>'
   }),
   ol.source.OSM.DATA_ATTRIBUTION
   // v3.1.0 以降 ol.source.OSM.ATTRIBUTION を使用
  ],
  url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
 })
});

var openSeaMapLayer = new ol.layer.Tile({
 source: new ol.source.OSM({
  attributions: [
   new ol.Attribution({
    html: 'All maps © ' +
     '<a href="http://www.openseamap.org/">OpenSeaMap</a>'
    }),
    ol.source.OSM.DATA_ATTRIBUTION
   // v3.1.0 以降 ol.source.OSM.ATTRIBUTION を使用
  ],
  crossOrigin: null,
  /** crossOrigin
   * The crossOrigin attribute for loaded images. Note 
   * that you must provide a crossOrigin value if you 
   * are using the WebGL renderer or if you want to 
   * access pixel data with the Canvas renderer. See 
   * https://developer.mozilla.org/en-US/docs/Web/HTML/
   * CORS_enabled_image for more detail.
   * ロードされたイメージの crossOrigin属性。WebGLのレンダ
   * ラーを使用している場合、または、キャンバスレンダラでピ
   * クセルデータにアクセスする場合、crossOrigin 値を提供な
   * ければならないことに注意してください。詳細は 
   * https://developer.mozilla.org/en-US/docs/Web/HTML/
   * CORS_enabled_image を参照してください。（ol3 API）
   */
  url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png'
 })
});

var map = new ol.Map({
 layers: [
  openCycleMapLayer,
  openSeaMapLayer
 ],
 target: 'map',

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

 /** ol.control.defaults()
  * デフォルトでは、マップに含まコントロールのセット。
  * 特に設定しない限り、これは、以下の各コントロールの
  * インスタンスを含むコレクションを返します。(API Doc より）
  * ol.control.Zoom, ol.control.Rotate, ol.control.Attribution
  */

  attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
  /** @type 
   * 値のタイプ（型）の説明 - 式などで表示
   * attributionOptions の値の型は、
   * olx.control.AttributionOptions の型を使用。
   * （@use JSDoc[http://usejsdoc.org/]より）
   */

   collapsible: false // 折りたたみ
  })
 }),

 view: new ol.View({
  maxZoom: 18,
  center: [-244780.24508882355, 5986452.183179816],
  zoom: 15
 })
});