Slippy Mapを表示してみる

OpenStreetMapではサイトに表示しているメインの地図をSlippy Mapと呼んでいます。

最近、日本語サイトのOpenStreetMap Japanで地図ページの改良をなさっている方が居て、私もちょっと触ってみたくなってBloggerに表示させてみることにしました。

ベースにしたのは、MediaWiki用のSlippy Map MediaWiki Extensionからの出力です。

サーバーからタイル（細分化された地図画像）を引っ張ってくることは直ぐにできましたが、タイル同士の間に数ピクセルの隙間が空いてしまいます。OSM.orgやOSM.jpで使用しているコードを覗いて見たり、OpenLayersの文書やソースを読んでみても解決できず二日程悩んでいました。ふと思い立ってFirefoxのアドオンのページを確認してみるとFirebugのFirefox3対応版が出ていたので早速インストール。HTMLを調査すると適用されているスタイル (padding:4px;) や要素のクラス名 (olTileImage) が簡単に分かり、直ぐに解決。この程度のことだから、OpenLayersのFAQやメーリングにも質問が出ていなかったんだと思いました。それにしてもFirebugは便利だなぁ。あまり使ったことがないので、使い方も良く分かんないけど...

やろうと思ったけどやり方が分からず、とりあえず現時点では諦めたこと。

• 地図のスクロール時やズーム時に、OSM.orgの地図へのURLに入っている座標やズームレベルを更新すること。
  • URLのベースをOSM.orgサーバーへ向ける。
  • 座標の形式を lat=35.67255 lon=139.76183 のように普段GPSなどで見ているものと同じにする。
  • リンクテキストを Permalink 以外のものにする
• ズームレベルに合わせたスケールを表示する。

これからやろうと思っていること。

• 1ページに複数のSlippy Mapを表示させる。
  • Slippy Map MediaWiki Extensionは1ページに1つしか表示できない。
• Widget追加ボタンの作成。

Base Layer

Mapnik

Overlays

Data by OpenStreetMap
CC-BY-SA-2.0

上の地図を表示させているコードはこちら。（ "+ expand source" のリンクをクリックして下さい。）

+ expand sourceview plainprint?

1. <style>  
2. .map img { padding: 0px !important; border: none !important;}  
3. </style>  
4.   
5. <div class="map" style="margin-bottom:-35px;">  
6.   
7. <!-- define a DIV into which the map will appear -->  
8. <div style="width:400px; height:350px; border-style:solid; border-width:1px; border-color:#000;" id="map"></div>  
9.   
10. <br/>  
11. <span style="font-size:70%; background-color:white; position:relative;top:-65px;left:5px;z-index:1003;">Data by <a href="http://www.openstreetmap.org/?lat=36&lon=139&zoom=4" title="See this map on OpenStreetMap.org">OpenStreetMap</a><br/>  
12. <a href="http://creativecommons.org/licenses/by-sa/2.0/" title="Creative Commons Attribution-Share Alike 2.0">CC-BY-SA-2.0</a></span>  
13.   
14. </div>  
15.   
16. <!-- bring in the OpenLayers javascript library -->  
17. <script src="http://openlayers.org/api/OpenLayers.js"></script>  
18. <!-- bring in the OpenStreetMap OpenLayers layers. Using this hosted file will make sure we are kept up to date with any necessary changes. -->   
19. <script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>   
20.   
21. <script type="text/javascript">   
22. var lon=139;   
23. var lat=36;   
24. var zoom=4;   
25. var map;   
26.   
27. function lonLatToMercator(ll) {  
28.   var lon = ll.lon * 20037508.34 / 180;  
29.   var lat = Math.log (Math.tan ((90 + ll.lat) * Math.PI / 360)) / (Math.PI / 180);  
30.   latlat = lat * 20037508.34 / 180;  
31.   return new OpenLayers.LonLat(lon, lat);  
32. }  
33.   
34. window.onload=init;   
35.   
36. function init() {  
37.   map = new OpenLayers.Map("map", {  
38.     controls:[  
39.       new OpenLayers.Control.Navigation(),  
40.       new OpenLayers.Control.PanZoom(),  
41.       new OpenLayers.Control.LayerSwitcher()],  
42.     maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),  
43.     maxResolution:156543.0399,  
44.     units:'meters',  
45.     projection: "EPSG:900913"  
46.   } );  
47.   var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");  
48.   map.addLayer(mapnik);  
49.   var osmarender = new OpenLayers.Layer.OSM.Osmarender("Osmarender");  
50.   map.addLayer(osmarender);  
51.   var cyclemap = new OpenLayers.Layer.OSM.CycleMap("Cycle Map");  
52.   map.addLayer(cyclemap);  
53.   var maplint = new OpenLayers.Layer.OSM.Maplint("Maplint");  
54.   map.addLayer(maplint);  
55.   var lonLat = lonLatToMercator(new OpenLayers.LonLat(lon, lat));  
56.   map.setCenter (lonLat, zoom);  
57. }   
58. </script>  

<style>
.map img { padding: 0px !important; border: none !important;}
</style>

<div class="map" style="margin-bottom:-35px;">

<!-- define a DIV into which the map will appear -->
<div style="width:400px; height:350px; border-style:solid; border-width:1px; border-color:#000;" id="map"></div>

<br/>
<span style="font-size:70%; background-color:white; position:relative;top:-65px;left:5px;z-index:1003;">Data by <a href="http://www.openstreetmap.org/?lat=36&lon=139&zoom=4" title="See this map on OpenStreetMap.org">OpenStreetMap</a><br/>
<a href="http://creativecommons.org/licenses/by-sa/2.0/" title="Creative Commons Attribution-Share Alike 2.0">CC-BY-SA-2.0</a></span>

</div>

<!-- bring in the OpenLayers javascript library -->
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<!-- bring in the OpenStreetMap OpenLayers layers. Using this hosted file will make sure we are kept up to date with any necessary changes. --> 
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script> 

<script type="text/javascript"> 
var lon=139; 
var lat=36; 
var zoom=4; 
var map; 

function lonLatToMercator(ll) {
  var lon = ll.lon * 20037508.34 / 180;
  var lat = Math.log (Math.tan ((90 + ll.lat) * Math.PI / 360)) / (Math.PI / 180);
  lat = lat * 20037508.34 / 180;
  return new OpenLayers.LonLat(lon, lat);
}

window.onload=init; 

function init() {
  map = new OpenLayers.Map("map", {
    controls:[
      new OpenLayers.Control.Navigation(),
      new OpenLayers.Control.PanZoom(),
      new OpenLayers.Control.LayerSwitcher()],
    maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
    maxResolution:156543.0399,
    units:'meters',
    projection: "EPSG:900913"
  } );
  var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
  map.addLayer(mapnik);
  var osmarender = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
  map.addLayer(osmarender);
  var cyclemap = new OpenLayers.Layer.OSM.CycleMap("Cycle Map");
  map.addLayer(cyclemap);
  var maplint = new OpenLayers.Layer.OSM.Maplint("Maplint");
  map.addLayer(maplint);
  var lonLat = lonLatToMercator(new OpenLayers.LonLat(lon, lat));
  map.setCenter (lonLat, zoom);
} 
</script>

追記

Widget追加ボタンを作成しました。
尚、上のコードで表示できるSlippy Mapは1ページに1つだけで、Widgetでは複数のSlippy Mapを同じページに表示できます。また、上のコードによるSlippy Mapと同じページ内にWidgetによるSlippy Mapがあると、その影響により指定した座標・ズームで表示できないことがあるようです。

   [ More... ]