ベクトルタイル・いちさと（小学校区）Pt. 3 テストサイトの公開
ここまで準備したデータを使ってテストサイトを公開した。
http://handygeospatial.github.io/mapsites/2014/01/06/clipped.html
ファイルのアップロード
作成したファイルをAWS S3にアップロードするには、s3cmdを使用した。tilestache-seed.py がデータを作成した場所に移動して、次のようなコマンドで実行する。
$ s3cmd sync 13 s3://www.handygeospatial.info/2014/01/06/clipped/
AWS コンソールに移動して、当該ファイルを Make public する。また、CORS 設定がまだの場合は、CORS 設定をする。
サイトの作成
http://handygeospatial.github.io/mapsites/2014/01/06/clipped.html の clipped.html の内容は次の通り。Pt. 2のコードとくらべて、スタイルなどを多少書き加えている程度である。その他、後ほど説明するが、Pt. 2 のコードではロードを省略していたTileLayer.Vector.Unclipped.js等が後ほど重要になってくるので、ロードするようにしている。（important と書いているあたり）
<!doctype html> <html> <head> <!-- thx https://github.com/ebrelsford/leaflet-tilelayer-vector --> <meta charset='UTF-8'> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <link rel="apple-touch-icon" href="https://si0.twimg.com/profile_images/666603054/r.png"/> <title>ベクトルタイル・いちさと（小学校区）Overzoomable</title> <link rel='stylesheet' href='http://cdn.leafletjs.com/leaflet-0.7/leaflet.css'> <link rel="stylesheet" href="http://leaflet.github.io/Leaflet.label/leaflet.label.css"> <script src='http://cdn.leafletjs.com/leaflet-0.7/leaflet.js'></script> <script src="http://leaflet.github.io/Leaflet.label/leaflet.label.js"></script> <script src="http://handygeospatial.github.io/mapsites/2014/01/01/communist.min.js"></script> <script src="http://handygeospatial.github.io/mapsites/2014/01/01/TileCache.js"></script> <script src="http://handygeospatial.github.io/mapsites/2014/01/01/TileQueue.js"></script> <script src="http://handygeospatial.github.io/mapsites/2014/01/01/AbstractWorker.js"></script> <script src="http://handygeospatial.github.io/mapsites/2014/01/01/CommunistWorker.js"></script> <script src="http://handygeospatial.github.io/mapsites/2014/01/01/TileLayer.GeoJSON.js"></script> <script src="http://handygeospatial.github.io/mapsites/2014/01/01/TileLayer.Overzoom.js"></script> <script src="http://handygeospatial.github.io/mapsites/2014/01/01/Leaflet.label-patch.js"></script> <!-- important --> <script src="http://handygeospatial.github.io/mapsites/2013/12/31/TileLayer.Vector.Unclipped.js"></script> <script src="http://handygeospatial.github.io/mapsites/2013/12/31/TileLayer.Vector.Debug.js"></script> <script src="http://handygeospatial.github.io/mapsites/2013/12/31/TileLayer.Div.js"></script> <script src="http://handygeospatial.github.io/mapsites/2013/12/31/TileLayer.Progress.js"></script> <!-- end of important part --> <script src="http://handygeospatial.github.io/mapsites/2014/01/01/leaflet-hash.js"></script> <style> html, body, #mapdiv {margin: 0; padding: 0; width: 100%; height: 100%;} </style> </head> <body> <div id='mapdiv'/> <script> map = new L.Map('mapdiv', {zoom: 13, center: [(35.66811 + 36.153059) / 2 , (139.233398 + 140.914307) / 2]}); hash = new L.Hash(map); var normal_style = { "clickable": true, "color": "#00F", "fillColor": "#00F", "weight": 1, "opacity": 0.3, "fillOpacity": 0.2 }; var hover_style = { "fillColor": "#f00" }; map.addLayer(new L.TileLayer( 'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {attribution: '地理院タイル', minZoom: 5, maxZoom: 18})); map.addLayer(new L.TileLayer.Vector( 'http://www.handygeospatial.info/2014/01/06/clipped/{z}/{x}/{y}.geojson', {attribution: '国土数値情報（小学校区データ） 国土交通省', unloadInvisibleTiles: false, minZoom: 5, maxZoom: 18, serverZooms: [13], filter: function(feature) {return true;}, unique: function(feature) {return feature.properties.id;} }, {style: normal_style, onEachFeature: function(feature, layer) { layer.on('mouseover', function() { layer.setStyle(hover_style); }); layer.on('mouseout', function() { layer.setStyle(normal_style); }); layer.bindPopup( "市区町村コード: " + feature.properties.A27_005 + "<br/>設置主体: " + feature.properties.A27_006 + "<br/>名称: " + feature.properties.A27_007+ "<br/>所在地: " + feature.properties.A27_008 ); } })); </script> </body> </html>
