ol5.3ex 4 - CartoDB source example

「CartoDB source example (cartodb.html) 」を参考に地図を表示してみます。

「Github - CartoDB/cartodb: Location Intelligence & Data Visualization tool（https://github.com/CartoDB/cartodb」の「What is CARTO?」に次のようにあります。

What is CARTO?
CARTO is an open, powerful, and intuitive platform for discovering and predicting the key insights underlying the location data in our world.

Empower organizations to optimize operational performance, strategic investments, and everyday decisions with CARTO Engine—our embeddable platform for web and mobile apps—and the new CARTO Builder, a drag and drop analysis tool.

It was built to make it easier for people to tell their stories by providing them with flexible and intuitive ways to create maps and design geospatial applications. CARTO can be installed on your own server and we also offer a hosted service at carto.com.

なぜ CARTO?
CARTO は、私達の世界で地理データの根底にある重要な洞察を発見し予測するためのオープンで強力、そして直感的プラットフォームです。組織に、操作性と戦略的な投資、CARTO Engineーウエッブとモバイルアプリ用の組み込み可能なプラットフォームーと新しい CARTO Builder、ドラッグ・アンド・ドロップアナリストツール、を最大限に活用する権限を与えます。

マップを作成し、地理アプリケーションを設計するための柔軟で直感的な方法でそれらを提供することによって、人々がストーリーを語りやすくするために構築されました。CARTO はあなたのサーバにインストールができ、私達は carto.com のホストサービスも提供します。

「CARTO日本語サービス（https://chizudb.jp/）」も参考にしてください。


説明に次のようにあります。

A simple example with an anonymous cartodb map

匿名 cartodb マップの単純な例

次の内容で index.js を作成します。

user@deb9-vmw:~/new-project$ vim index.js

import 'ol/ol.css';
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import {CartoDB, OSM} from 'ol/source/';

var mapConfig = {
 'layers': [{
 /** layers [object] required
  * Array of object.
  * オブジェクトの配列。
  * （CartoDB Maps API[https://carto.com/developers/
  * maps-api/reference/#operation/instantiateAnonymousMap]）
  */

  'type': 'cartodb',
  /** type [string(Layer type)] required
   * A string value that defines the layer type:
   * レイヤタイプを定義する文字列値：
   * cartodb - an alias for mapnik (for backward
   * compatibility)
   * 'mapnik' のエイリアス（上位互換）
   * （CartoDB Maps API[https://carto.com/developers/
   * maps-api/reference/#operation/instantiateAnonymousMap]）
   */

  'options': {
  /** options [object] required
   * Sets different options for each layer type.
   * 各レイヤタイプに違うオプションを設定。
   * （CartoDB Maps API[https://carto.com/developers/
   * maps-api/reference/#operation/instantiateAnonymousMap]）
   */

   'cartocss_version': '2.1.1',
   /** cartocss_version [string (cartocss version)] required
    * A string value, specifying the CartoCSS style version
    * of the CartoCSS attribute.
    * Note: The CartoCSS version is specific to the layer
    * type.
    * 文字列値、CartoCSS 属性の CartoCSS スタイルバージョンを
    * 指定。
    * 注意：CartoCSS バージョンはレイヤタイプ対して特定のもの
    * です。
    * （CartoDB Maps API[https://carto.com/developers/
    * maps-api/reference/#operation/instantiateAnonymousMap]）
    */

   'cartocss': '#layer { polygon-fill: #F00; }',
   /** cartocss [string (cartocss)] required
    * Specifies the CartoCSS style to render the tiles.
    * Note: The CartoCSS specification is dependent on the
    * layer type. For details, see mapnik-reference.json.
    * タイルを描画するために CartoCSS スタイルバージョンを指定。
    * 注意：CartoCSS 仕様はレイヤタイプによります。詳細は
    * mapnik-reference.json を参照してください。
    * （CartoDB Maps API[https://carto.com/developers/
    * maps-api/reference/#operation/instantiateAnonymousMap]）
    */

   'sql': 'select * from european_countries_e where area > 0'
   /** sql [string] required
    * The SQL request to the user database that will fetch
    * the rendered data.
    * Tip: The SQL request should include the following
    * Mapnik layer configurations:
    * ● geom_column
    * ● interactivity
    * ● attributes
    * Note: The SQL request may contain substitutions
    * tokens, such as !bbox!, !pixel_width! and 
    * !pixel_height!. It is suggested to define the
    * layergroup minzoom and extent variables to prevent
    * errors.
    * 描画されるデートを取得するユーザデータベースのためのSQL
    * リクエスト。
    * コツ：SQL リクエストは、次の Mapnik レイヤ設定を含めます：
    * ● geom_column
    * ● interactivity
    * ● attributes
    * 注意：SQL リクエストは!bbox!、!pixel_width!、
    * !pixel_height!のような、置換トークンを含みます。エラー
    * を防ぐために layergroup minzoom と extent variables を
    * 定義します。
    * （CartoDB Maps API[https://carto.com/developers/
    * maps-api/reference/#operation/
    * instantiateAnonymousMap]）
    */

  }
 }]
};

var cartoDBSource = new CartoDB({
/** ol/source/CartoDB~CartoDB
 * Layer source for the CartoDB tiles.
 * CartoDB タイルのレイヤソース。
 * （ol5 API）
 */

 account: 'documentation',
 /** account
  * If using named maps, this will be the name of the 
  * template to load.
  * 名付けられた（named）マップを使用する場合、これはロードする
  * ためのテンプレートの名前です。
  * （ol5 API）
  */

 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 設定。詳細については http://docs.cartodb.com/
  * cartodb-platform/maps-api/anonymous-maps/を参照して
  * ください。名付けられた（named）マップを使用している場合、テ
  * ンプレートパラメータを持つ key-value 検索。詳細については 
  * http://docs.cartodb.com/cartodb-platform/maps-api/
  * named-maps/を参照してください。
  * （ol5 API）
  */});

var map = new Map({
 layers: [

  new TileLayer({
  /** ol/layer/Tile~TileLayer 
   * For layer sources that provide pre-rendered, tiled 
   * images in grids that are organized by zoom levels for 
   * specific resolutions. 
   * プリレンダリング（事前描画）を提供するレイヤソースのため
   * の、特定の解像度でのズームレベルによって編成されているグ
   * リッドのタイルイメージ。（ol5 API）
   */

   source: new OSM()
   /** source（option）
    * Source for this layer. 
    * レイヤのソース。（ol5 API）
    */

  }),
  new TileLayer({
   source: cartoDBSource
  })
 ],

 target: 'map',
 /** target[new Map(options)]
  * The container for the map, either the element 
  * itself or the id of the element. If not specified 
  * at construction time, module:ol/Map~Map#setTarget 
  * must be called for the map to be rendered.
  * map のコンテナ、（HTML）エレメント自身、または、エレメント
  * の id。構築時に指定されていない場合、描画される map のた
  * めに module：ol/Map~Map#setTarget が呼び出されなけれ
  * ばなりません。
  * （ol5 API）
  */

 view: new View({
 /** view[new Map(options)]
  * The map's view. No layer sources will be fetched 
  * unless this is specified at construction time or 
  * through module:ol/Map~Map#setView.
  * map（マップ）の view（ビュー）。これが構築時に指定されて
  * いないか、module：ol/Map~Map#setView を介さなければ、
  * 取得されるレイヤソースはありません。
  * （ol5 API）
  */

  center: [0, 0],
  /** center[new View(opt_options)]
   * The initial center for the view. The coordinate system 
   * for the center is specified with the projection option. 
   * Layer sources will not be fetched if this is not set, 
   * but the center can be set later with #setCenter.
   * view（ビュー）の初期 center（中心）値。 center の座標系
   * は、projection（投影法）オプションで指定されます。これが
   * 設定されなければレイヤソースは取得されませんが、center は 
   * #setCenter で後で設定できます。
   * （ol5 API）
   */

  zoom: 2
  /** zoom[new View(opt_options)]
   * Only used if resolution is not defined. Zoom level used 
   * to calculate the initial resolution for the view. The 
   * initial resolution is determined using the 
   * #constrainResolution method.
   * resolution（解像度）が定義されていない場合のみ使用されま
   * す。view の初期 resolution（解像度）を計算するために使用
   * される zoom（ズーム）レベル。初期 resolution は、
   * #constrainResolution メソッドを使用して決定されます。
   * （ol5 API）
   */

 })
});

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

 cartoDBSource.setConfig(mapConfig);
 /** setConfig(config)
  * Sets the CartoDB config
  * CartoDB config（設定）を設定。
  */

}

document.getElementById('country-area').addEventListener('change', function() {
/** Document.getElementById()
 * The Document method getElementById() returns an 
 * Element object representing the element whose id 
 * property matches the specified string. Since element 
 * IDs are required to be unique if specified, they're a 
 * useful way to get access to a specific element 
 * quickly.
 * If you need to get access to an element which doesn't 
 * have an ID, you can use querySelector() to find the 
 * element using any selector.
 * Document の getElementById() メソッドは、 id プロパティ
 * が指定された文字列に一致する要素を表す Element オブジェ
 * クトを返します。要素の ID は指定されていれば固有であるこ
 * とが求められているため、特定の要素にすばやくアクセスする
 * には便利な方法です。
 * ID を持たない要素にアクセスする必要が ある場合は、
 * querySelector() で何らかのセレクターを使用して要素を検
 * 索することができます。
 * （MDN[https://developer.mozilla.org/ja/docs/Web/API/
 * Document/getElementById]）
 */

/** EventTarget.addEventListener
 * The EventTarget method addEventListener() sets up a 
 * function that will be called whenever the specified 
 * event is delivered to the target. Common targets are
 * Element, Document, and Window, but the target may be 
 * any object that supports events (such as 
 * XMLHttpRequest).
 * addEventListener() works by adding a function or an 
 * object that implements EventListener to the list of 
 * event listeners for the specified event type on the 
 * EventTarget on which it's called.
 * EventTarget.addEventListener() メソッドは、指定された
 * イベントがターゲットに渡されるときにはいつでも呼び出される
 * ファンクションを設定します。一般的なターゲットは、Element、
 * Document、Window ですが、ターゲットは（XMLHttpRequest 
 * のような）イベントをサポートするあらゆるオブジェクトです。
 * addEventListener() は、呼び出される EventTarget の指
 * 定されたイベントタイプためのイベントリスナのリストに 
 * EventListener を実装するファンクション、または、オブジェ
 * クトを追加することによって動作します。
 *（MDN[https://developer.mozilla.org/en-US/docs/Web/API/
 * EventTarget.addEventListener]）
 */

 setArea(this.value);
});

次に index.html を作成します。

user@deb9-vmw:~/new-project$ vim index.html

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>CartoDB source example</title>

  <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

 </head>
 <body>
  <div id="map"></div>

  <div>
  <form">
   <label>
    Show countries larger than
     <select id="country-area">
      <option value="0" default>0 km&sup2;</option>
      <option value="5000">5000 km&#178;</option>
      <option value="10000">10000 km&#xB2;</option>
      <option value="50000">5000 &#13218;</option>
      <option value="100000">100000 km<sup>2</sup></option>
      <!-- km<sup>2</sup> では option タグ内で
            km² になりません -->
     </select>
    <label>
   <form">
  <div>

  <script src="./index.js"></script>
 <body>
</html>

npm start を実行します。

user@deb9-vmw:~/new-project$ npm start

Webブラウザのアドレス欄に

http://localhost:1234

と入力して Enter キーを押します。