2 - ol3.15ex 153b - CartoDB source element 2

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

「2153-ol3ex.js」

var mapConfig = {

 'layers': [{
 /** layers
  * Defines the layer type, and the layers in rendering 
  * order.
  * レイヤタイプ、および、レンダリング順のレイヤを定義しま
  * す。
  * （CartoDM doc [http://docs.cartodb.com/
  * cartodb-platform/maps-api/mapconfig/]）
  */

  'type': 'cartodb',
  /** type
   * A string value that defines the layer type. You 
   * can define up to four values:
   * レイヤのタイプを定義する文字列値。4個までの値を定義
   * することができます。
   */

  /** cartoDB
   * an alias for mapnik (for backward 
   * compatibility)
   * mapnik（後方互換）のエイリアス。
   */

  'options': {
  /** options
   * An object value that sets different options for 
   * each layer type.
   * レイヤタイプごとに異なるオプションを設定するオブジェ
   * クト値。
   */

   'cartocss_version': '2.1.1',
   /** cartocss_version
    * A string value, specifying the CartoCSS style 
    * version of the CartoCSS attribute.
    * 文字列値、CartoCSS 属性の CartoCSS スタイルのバー
    * ジョンを指定。
    */

   'cartocss': '#layer { polygon-fill: #F00; }',
   /** cartocss
    * A string value, specifying the CartoCSS style to 
    * render the tiles.
    * 文字列値、タイルをレンダリングするための CartoCSS 
    * のスタイルを指定。
    */

   'sql': 'select * from european_countries_e where area > 0'
   /** sql
    * A string value, the SQL request to the user 
    * database that will fetch the rendered data.
    * 文字列値、レンダリングされたデータを取得するユーザ
    * データベースへのSQLリクエスト。
    */

  }
 }]
};

var cartoDBSource = new ol.source.CartoDB({
/** ol.source.CartoDB
 * Layer source for the CartoDB tiles.
 * CartoDB タイルのレイヤソース。
 * （ol3 API[説明は Stable Only のチェックを外すと表示]）
 */

 account: 'documentation',
 /** account
  * CartoDB account name. Required.
  * CartoDB アカウント名。必須。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

 config: mapConfig
 /** config
  * If using anonymous maps, the CartoDB config to use. 
  * See http://docs.cartodb.com/cartodb-platform/
  * maps-api/anonymous-maps/ for more detail. If using 
  * named maps, a key-value lookup with the template 
  * parameters. See http://docs.cartodb.com/
  * cartodb-platform/maps-api/named-maps/ for more 
  * detail.
  * 匿名（anonymous）マップを使用している場合、使用するための 
  * CartoDB config。詳細については http://docs.cartodb.com/
  * cartodb-platform/maps-api/anonymous-maps/を参照して
  * ください。名前（named）マップを使用している場合、テンプ
  * レートパラメータを持つ key-value 検索。詳細については 
  * http://docs.cartodb.com/cartodb-platform/maps-api/
  * named-maps/を参照してください。
  * （ol3 API[説明は Stable Only のチェックを外すと表示]）
  */

});

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.OSM()
   /** ol.source.OSM 
    * Layer source for the OpenStreetMap tile server.
    * OpenStreetMap タイルサーバのレイヤソース。（ol3 API）
    */

  }),
  new ol.layer.Tile({
   source: cartoDBSource
  })
 ],
 target: 'map',
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});

function setArea(n) {
 mapConfig.layers[0].options.sql =
  'select * from european_countries_e where area > ' + n;
 cartoDBSource.setConfig(mapConfig);
}

document.getElementById('country-area').addEventListener('change', function() {
/** EventTarget.addEventListener
 * addEventListener は、 1 つのイベントターゲットにイベント 
 * リスナーを1つ登録します。イベントターゲットは、ドキュメント
 * 上の単一のノード、ドキュメント自身、ウィンドウ、あるいは、
 * XMLHttpRequest です。
 *（MDN[https://developer.mozilla.org/ja/docs/Web/API/
 * EventTarget.addEventListener]）
 */

 setArea(this.value);
});