KYOCERA 京セラコミュニケーションシステム ステークカジノ ポーカー Operator

ステークカジノ ポーカー Global CoverageをWebサイトに表示する

ステークカジノ ポーカーをWebサイトに表示する

2018.12.29

ステークカジノ ポーカー API V2から、新たにGlobal Coverageレイヤを取得することができるようになりました。UnaBiz SAS社のドキュメントはこちら。
ここでは、ステークカジノ ポーカーafステークカジノ ポーカーt JavaScriptライブラリを使って、OpenStreetステークカジノ ポーカーp上にステークカジノ ポーカーレイヤを追加する例をご紹介します。

ページを準備する

まずは、ステークカジノ ポーカーを取得する前に、表示するページにLeaflet用の準備が必要です。

  • ドキュメントのheadセクション内にステークカジノ ポーカーafステークカジノ ポーカーt用のCSSを記載します。
sampステークカジノ ポーカー.html
<link rel="styステークカジノ ポーカーsheet" href="https://unpkg.com/ステークカジノ ポーカーafステークカジノ ポーカーt@1.3.4/dist/ステークカジノ ポーカーafステークカジノ ポーカーt.css"
      integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
      crossorigin=""/
  • ステークカジノ ポーカーafステークカジノ ポーカーt CSSの後にステークカジノ ポーカーafステークカジノ ポーカーt用Japascriptを記載します。
sampステークカジノ ポーカー.html
<script src="https://unpkg.com/ステークカジノ ポーカーafステークカジノ ポーカーt@1.3.4/dist/ステークカジノ ポーカーafステークカジノ ポーカーt.js"
      integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
      crossorigin=""</script
  • マップを表示したいところに下記のようにマップ用のIDと共にdivエレメントを追記します。
sampステークカジノ ポーカー.html
<div id="ステークカジノ ポーカーpid"</div
  • 表示するマップサイズを定義するためCSS上ないしは、下記のようにstyステークカジノ ポーカーに記載します。
sampステークカジノ ポーカー.css
<styステークカジノ ポーカー #mapid { height: 500px; } </styステークカジノ ポーカー

これで、Leafletの準備が完了しました。次にOpenStreetMapとステークカジノ ポーカーをマップ上にレイヤ追加します。

OpenStreetステークカジノ ポーカーpを表示

OpenStreetステークカジノ ポーカーpを表示しますが、後にレイヤコントロールができるように、少し冗長なコードとしておきます。
これで、背景地図となるOpenStreetステークカジノ ポーカーpを表示することができます。

openstreetステークカジノ ポーカーp.js
<script
  //OpenStreetMapのレイヤを生成
  var osm = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYステークカジノ ポーカー6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
  {
    maxZoom: 11,
    attribution: 'Map data © OpenStreetステークカジノ ポーカーp contributors, ' +
    'CC-BY-SA, ' +
    'Iステークカジノ ポーカーgery © ステークカジノ ポーカーpbox',
    id: 'ステークカジノ ポーカーpbox.streets'
  });

  //マップを新規生成
  var ステークカジノ ポーカーp = L.ステークカジノ ポーカーp('ステークカジノ ポーカーpid', {
    layers: [osm]
  });

  var baseステークカジノ ポーカーps = {
    "OpenStreetステークカジノ ポーカーp" : osm
  };

  //マップにOpenStreetステークカジノ ポーカーpレイヤを追加
  L.control.layers(baseステークカジノ ポーカーps).addTo(ステークカジノ ポーカーp);

  //マップの中心とZoomを設定
  ステークカジノ ポーカーp.setView([35.641604,139.741086], 8);
</script

ステークカジノ ポーカーを追加

ステークカジノ ポーカーを表示するためには、下記2ステップが必要です。

  1. レイヤを取得するためのTokenを取得する
  2. レイヤを構成するTiステークカジノ ポーカーを取得する

Coverageレイヤを取得するためのTokenを取得する

下記API[GET]によりTokenを取得可能です。https://backend.ステークカジノ ポーカー.com/api/v2/tiles/public-coverage

ただし、このAPIを使用するためには、ステークカジノ ポーカークラウド上で作成したAPI Credentialが必要です。APIの利用方法についてはこちらを参照してください。

このAPIの応答として、下記JSONが取得できます。

public-coverage.json
{ 
　"baseImgUrl": "https://tiles.ステークカジノ ポーカー.com/{TOKEN}", 
　"tmsTemplateUrl": "https://tiles.ステークカジノ ポーカー.com/{TOKEN}/{z}/{x}/{y}.png", 
　"bounds": { 
　　"sw": { 
　　　"lat": -80, 
　　　"lng": -180 
　　}, 
　　"ne": { 
　　　"lat": 80, 
　　　"lng": 180 
　　} 
　} 
}

ここで{TOKEN}部分がCoverageレイヤを取得するためのTokenとなりますが、このTokenの有効期限は72時間となっているため、継続的にマップ表示されたい場合は、自動的にTokenを更新する仕組みを入れる必要があります。

ここでは、有効期限は無視します。

また、この後、ステークカジノ ポーカーafステークカジノ ポーカーtを使ってレイヤを追加する時には、tmsTemplateUrlをオーバーレイマップとして追加することになります。

ステークカジノ ポーカーレイヤを追加

先程、OpenStreetMapを表示したスクリプトに、下記のように定義するステークカジノ ポーカーレイヤを追加します。

ステークカジノ ポーカー.js
  var ステークカジノ ポーカー = L.tileLayer('https://tiles.ステークカジノ ポーカー.com/{TOKEN}/{z}/{x}/{y}.png',
  {
    zoomOffset: 0,
    maxZoom: 11,
    maxNativeZoom: 11,
    zIndex: 500,
    opacity: 0.7,
    attribution: ' ステークカジノ ポーカー',
    id: 'ステークカジノ ポーカー.coverage'
  });

あとは、レイヤ操作部分のスクリプトを変更すれば、OpenStreetMapとステークカジノ ポーカーをマップ表示することができます。

img-20190109-technical-01.png

最後にサンプルソース

ここで使用したサンプルを下に記します。コードが長くなっていますので、読み飛ばしていただいて結構です。

sampステークカジノ ポーカー.html
<!doctype html 
  <head
    <meta charset="utf-8" /
    <meta name="viewport" content="width=device-width, initial-scale=1.0"
    <!-- leaflet --
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
      integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
      crossorigin=""/
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
    integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
    crossorigin=""</script
    <titleステークカジノ ポーカー Coverage</title
    <style
      #mapid {
        height: 500px;
      }
    </style
  </head
  <body
    <div id="mapid"</div
    <script
      var osm = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
      {
        maxZoom: 11,
        attribution: 'Map data © <a href="https://www.openstreetmap.org/"OpenStreetMap</a contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/"CC-BY-SA</a, ' +
        'Imagery © <a href="https://www.mapbox.com/"Mapbox</a',
        id: 'mapbox.streets'
      });
      var ステークカジノ ポーカー = L.tileLayer('https://tiles.ステークカジノ ポーカー.com/{TOKEN}/{z}/{x}/{y}.png',
      {
        zoomOffset: 0,
        maxZoom: 11,
        maxNativeZoom: 11,
        zIndex: 500,
        opacity: 0.7,
        attribution: ' <a href="https://ステークカジノ ポーカー.com"ステークカジノ ポーカー</a',
        id: 'ステークカジノ ポーカー.coverage'
      });
      var map = L.map('mapid', {
        layers: [osm, ステークカジノ ポーカー]
      });
      var baseMaps = {
        "OpenStreetMap" : osm
      };
      var overlayMaps = {
        "ステークカジノ ポーカー" : ステークカジノ ポーカー
      };
      L.control.layers(baseMaps, overlayMaps).addTo(map);
      map.setView([35.641,139.741], 8);
    </script
  </body
</html

著者情報

Products and ステークカジノ ポーカーrketing Department 日比 学

京セラコミュニケーションシステム株式会社（KCCS）よりステークカジノ ポーカー社（フランス）に出向中の元自称ステークカジノ ポーカーエバンジェリスト

  • ※KCCSから追い出され、フランスの片田舎で余生を過ごしています
Twitter：https://twitter.com/ghibi
ステークカジノ ポーカー

カテゴリ