基盤地図情報（数値標高モデル）（5mメッシュ（標高））のGeoJSONタイルのビューア #geojson

さきほど作成したDEM5AのGeoJSONタイルのビューアは、次のようになる。

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css"/>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
    <script src="http://handygeospatial.github.io/mapsites/js/leaflet-hash.js"></script>
    <script src="http://handygeospatial.github.io/mapsites/js/TileLayer.GeoJSON.js"></script>
    <style>
      body {padding: 0; margin: 0}
      html, body, #mapdiv {height: 100%; width: 100%;}
      .leaflet-container {background: #fff;}
    </style>
  </head>
  <body>
    <div id="mapdiv">
    <script>
      var std = L.tileLayer(
        'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
        {maxZoom: 24, maxNativeZoom: 18,
         attribution: '地理院タイル（標準地図）'});
      var dem = new L.TileLayer.GeoJSON(
        './{z}/{x}/{y}.geojson',
        {minZoom: 18, maxNativeZoom: 18, maxZoom: 24, 
         attribution: '基盤地図情報（数値標高モデル）（5mメッシュ（標高））'},
        {pointToLayer: function(feat, latlng) {
           return L.circleMarker(latlng, {radius: 4});
         },
         onEachFeature: function(feat, layer) {
           var popupString = '<div class="popup">';
           for (var k in feat.properties) {
             var v = feat.properties[k];
             popupString += k + ': ' + v + '<br />';
           }
           popupString += '</div>';
           layer.bindPopup(popupString);
         }
        });
      var map = L.map('mapdiv', {
        center: [35.68467, 139.65380], zoom: 18,
        layers: [std, dem]});

      var hash = L.hash(map);
      L.control.layers({'地理院タイル（標準地図）': std}).addTo(map);
    </script>
  </body>
</html>

python -m SimpleHTTPServer とかやって見ることができる。（ベクトルタイルなので、file: スキームでは動かない場合がある。）