世界の測量

Sibling of "Relevant, Timely, and Accurate, " but much lighter and shorter ※自らの所属する組織の見解を示すものでない

#voorlichter の HTML サイドについて

#voorlichter の HTML ファイルは、このエントリの末尾にあるとおりである。多少の説明を加える。

Web Mappingライブラリ関係

#tsukubau と同じく、Web Mapping の JavaScript ライブラリには Leaflet (by Cloudmade)を使用しているが、今回さらに Wax (by Mapbox) を使用することにした。Wax は Web Mapping の JavaScript ライブラリたちの上にさらに付加機能を加えるものである。付加機能とは、特に TileJSON 対応や UTFGrid 対応などの機能である。TileJSON 対応は、サーバーサイドでの tilestream 採用とも関係してくるので、このエントリでの詳述は避ける。

今回、Leaflet と Wax のライブラリファイルは、mapbox.com から直接引くことにした。#tsukubau の際に www.handygeospatial.info に設置した Leaflet と Wax では、wax.leaf.interaction() の呼び出しの際にエラーが発生する。mapbox のものを引くとこのエラーは解消する。

Web Mapping のシステム起動は、function start で呼び出している。肝要な部分は、

  wax.tilejson('http://bulky.handygeospatial.info/api/Tileset/voorlichter_old',
    function(tilejson) {
      tilejson['attribution'] = tilejson['attribution'].replace('xx', '298');
      map = new L.Map('map').addLayer(new wax.leaf.connector(tilejson))
        .setView(new L.LatLng(lat, lng), z);
      var tooltip = new L.Control.Attribution(
        {position: 'topright', prefix: ''});
      map.addControl(tooltip);
      wax.leaf.interaction()
        .map(map)
        .tilejson(tilejson)
        .on(wax.tooltip().parent(tooltip._container).events());
    });

http://bulky.handygeospatial.info/api/Tileset/voorlichter_old を直接見ていただくと、このコードが何をしているか推測しやすくなると思う。

UTFGrid によるマウスカーソルの動きに対するインタラクションは、wax.leaf.interaction().map(map).tilejson(tilejson).on(wax.tooltip().parent(tooltip._container).events()) によって起動する。JavaScript らしいメソッドチェーンだ。ここの引数を変えていくことで、動きを変えていくことができる。

URL関係

現在の地図表示状態を、http://www.handygeospatial.info/voorlichter/?lng=140.11931&lat=41.86596&z=19 といった形で埋め込めるようにした。

具体的には、ページを初期化する function start で、URL の中のパラメータを解釈して地図の中心位置やズームレベルをそれに合わせるようにした。

また、「update URL to here」ボタンで、現在の地図表示状態によってURLを更新することにした。

ツイートボタンでは、現在のURLをツイートするようにしているので、「update URL to here」ボタンで、現在の地図表示に対してツイートできることになる。

現在の地図表示状態をツイートする際に、「update URL to here」して「ツイート」するようにするのはスマートではない。ツイートボタンを押した瞬間の地図表示状態を反映した URL をツイートできるように改善するべきである。

ソースコード

http://www.handygeospatial.info/voorlichter/ のソースコードの全体は次のとおり。 

<html>
<head>
<title>voorlichter / amazon ec2</title>
<link rel="stylesheet" href="http://mapbox.com/wax/externals/leaflet/leaflet.css"/>
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://mapbox.com/wax/externals/leaflet/leaflet.ie.css" />
<![endif]-->
<!--<script src="/leaflet-head/leaflet.js"></script>-->
<!--<script src="/leaflet-head/wax.leaf.min.js"></script>-->
<script src="http://mapbox.com/wax/externals/leaflet/leaflet.js"></script>
<script src="http://mapbox.com/wax/dist/wax.leaf.min.js"></script>
<script>
var map;
var hash;

function hash_from_url(url) {
  hash = {}
  var s = url.split('?')[1];
  if(s) {
    s = s.split('&');
    for(i in s) {
      var kv = s[i].split('=');
      hash[kv[0]] = kv[1];
    }
  }
  return hash;
}

function update_url() {
  var center = map.getCenter();
  var url = document.location.href.split('?')[0];
  url = url + '?lng=' + center.lng.toFixed(5) + 
    '&lat=' + center.lat.toFixed(5) + 
    '&z=' + map.getZoom();
  return url;
}

function uu() {
  document.location.href = update_url();
}

function start() {
  hash = hash_from_url(document.location.href);
  var lng = hash.lng ? Number(hash.lng) : 140.1206;
  var lat = hash.lat ? Number(hash.lat) : 41.865851;
  var z = hash.z ? Number(hash.z) : 15;

  wax.tilejson('http://bulky.handygeospatial.info/api/Tileset/voorlichter_old',
    function(tilejson) {
      tilejson['attribution'] = tilejson['attribution'].replace('xx', '298');
      map = new L.Map('map').addLayer(new wax.leaf.connector(tilejson))
        .setView(new L.LatLng(lat, lng), z);
      var tooltip = new L.Control.Attribution(
        {position: 'topright', prefix: ''});
      map.addControl(tooltip);
      wax.leaf.interaction()
        .map(map)
        .tilejson(tilejson)
        .on(wax.tooltip().parent(tooltip._container).events());
    });
}
</script>
</head>
<body onload="start();">
<button onclick='uu();'>update URL to here</button>
<a style="position:absolute; top:100px" href="https://twitter.com/share" class="twitter-share-button" data-text="DKG voorlichter" data-lang="ja" data-hashtags="voorlichter">tweet here</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div id='map' style='height: 95%'></div>

<script>
</body>
</html>