OpenBeerMap2 via VTS - 世界の測量

OpenBeerMap というものがある。やや待たされる感じがしたので、VTSベースのものを作ってみた。

構想

OpenBeerMap というものがある（https://openbeermap.github.io ）。確認はしていないが Overpass API を使っているそうである。こういうスタティックかつ空間的に局所的なサービスには、API系ではなくてリソース系のサービスが合うはずである。
Mapzen Vector Tile Service というものがある（https://github.com/mapzen/vector-datasource/wiki/Mapzen-Vector-Tile-Service ）。ベクトルタイルを提供してくれるサービスであり、最近開始された。これを使ってOpenBeerMapを書き換える。

作ったもの

OpenBeerMap2 using VTS (you get beer icons when z > 15)
上記が作成したサイトである。Mapzen Vector Tile Service では、z > 15 のときに pub や cafe が出てくるようになっているらしいので、z > 15 のときのみビールが出てくる。
GeoLocation API で現在位置に飛ぶ機能は、まだつけていない。

実装解説

vector.mapzen.com/osm/pois/{z}/{x}/{y}.json を使わせていただいていることと、feature　ごとに properties.kind が cafe か bar である場合に icon をビールにしていることがポイントである。

<!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>OpenBeerMap2 using VTS (you get beer icons when z > 15)</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/pale/{z}/{x}/{y}.png',
        {attribution: "地理院タイル（淡色地図）",
         maxZoom: 22, maxNativeZoom: 18});
      var beer_icon = L.icon({
        iconUrl: 'https://openbeermap.github.io/assets/img/beer1.png',
        iconSize: [34, 40]});
      var info_icon = L.icon({
        iconUrl: 'https://handygeospatial.github.io/mapsites/2013/12/13/maki/marker-stroked-24.png',
        iconSize: [24, 24]});
      var vec = new L.TileLayer.GeoJSON(
        'http://vector.mapzen.com/osm/pois/{z}/{x}/{y}.json',
        {attribution: '(c) OpenStreetMap contributors',
         maxZoom: 22, maxNativeZoom: 18}, 
        {
          onEachFeature: function(feature, layer) {
            var popupString = '<div class="popup">';
            for (var k in feature.properties) {
              var v = feature.properties[k];
              popupString += k + ': ' + v + '<br />';
            }
            popupString += '</div>';
            layer.bindPopup(popupString);
            if(feature.properties.kind == 'pub' || 
              feature.properties.kind == 'cafe') {
              layer.setIcon(beer_icon);
            } else {
              layer.setIcon(info_icon);
            }
          }
        });

      var map = L.map('mapdiv', {
        center: [35.64826, 139.74583], zoom: 19, maxZoom: 22, 
        layers: [std, vec]});

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