Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>VectorTileLayer</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
​
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.10/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.10/"></script>
​
    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/VectorTileLayer",
        "esri/widgets/Attribution"
      ], function(Map, MapView, VectorTileLayer, Attribution) {
​
        // ArcGIS Online のキャンバス (ライト グレー) ベースマップを表示するマップを作成
        var map = new Map({basemap:"gray-vector"});
​
        // マップと中心座標とズーム率を指定してマップビューを作成
        var view = new MapView({
          container: "viewDiv",
          map: map,
          center: [139.745433, 35.658581], 
          zoom: 6
        });
​
        // スタイルファイルの JSON を参照してベクタータイル レイヤーを作成
        var vtLayer = new VectorTileLayer({
          url:
            "https://gist.githubusercontent.com/yozaw/63f5eb0b0d490778ce5082926a49e732/raw/a05d3d8e72ca26fbe02a45e86786f1a676cadc89/style.json",
        });
        
        // 作成したベクタータイル レイヤーをマップに追加
        map.add(vtLayer);
        
        
        view.watch('ready', function(){
          var attribution = view.ui._components[0];
          attribution.widget.watch('attributionText', function(evt){ 
            updateAttr = setInterval(function(){
              attrdiv = document.getElementsByClassName('esri-attribution__sources')[0]
              attrdiv.innerHTML = attribution.widget.attributionText + ", 国土地理院ベクトルタイル提供実験"
              clearInterval(updateAttr);
            }, 2);
          });
        });
        
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
yozawpro
0viewers