Slippy Mapのウィジェットを作ってみる

Blogger上でSlippy Mapを一応表示できるようになったので、ウィジェットとして作ってみることにしました。

前回は「地図作成時のオブジェクト名」と「地図描画スペースとなるdiv要素のid」が共に"map"だったので、1ページに複数のSlippy Mapを表示させるには、この組み合わせ毎にユニークにしてあげればいっかなーと考えていましたが、普段からJavaScriptなどをやり慣れていない私にはそれほど単純ではありませんでした。

とりあえずコードを書いて1ページに複数のSlippy Mapを表示させようとすると、前回のSlippy Mapを含めて、どれか1つしかタイルが読み込まれませんでした。コードと睨めっこしても他にユニークにするべきところも無さそうだしJavaScript自体は動いているので、もしかしたらOpenLayersの制約かななどと思いながらコードを眺めていると、window.onload=init; と書かれた行が目に留まりました。色々検索しているうちに次のページが見付かったので参考にさせてもらいました。

• thinkのScrapBook : addEventListener(), attachEvent() を使ってaddLoadEvent()

単純に window.onload を使わないようにコードを修正すると、1ページに複数のSlippy Mapを表示させることができるようになりましたが、よーっく地図を見ると全て同じ座標とズームレベルになっています。地図そのもののオブジェクトだけでなく、座標とズームレベルのオブジェクトも別の名前で作ってあげないと駄目みたいですね...

このウィジェットの追加ボタンのページを作成して、そちらに簡単な使用例を載せておきます。

現時点のコード（一応完成版）はこちら。（ "+ expand source" のリンクをクリックして下さい。）

+ expand sourceview plainprint?

1. <style>  
2. .slippymap img { padding: 0px !important; border: none !important;}  
3. </style>  
4. <!-- bring in the OpenLayers javascript library -->  
5. <script src="http://openlayers.org/api/OpenLayers.js"></script>  
6. <!-- bring in the OpenStreetMap OpenLayers layers. Using this hosted file will make sure we are kept up to date with any necessary changes. -->  
7. <script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>  
8.   
9. <script type="text/javascript"><!--  
10. // Blogger Slippy Map 0.1  
11. var i = 0;  
12. var lat = 54;  
13. var lon = 0;  
14. var z = 4;  
15. var style = "width:300px; height:200px;";  
16. var element1, element2, element3, text;  
17. var tags = document.getElementsByTagName("div");  
18.   
19.   for ( var j=0; j < tags.length; j++ ) {  
20.   
21.     if ( tags[j].className == "slippymap" ) {  
22.   
23.       i++;  
24.   
25.       if ( tags[j].getAttribute("lat") ) {  
26.          lat = tags[j].getAttribute("lat");}  
27.       if ( tags[j].getAttribute("lon") ) {  
28.          lon = tags[j].getAttribute("lon");}  
29.       if ( tags[j].getAttribute("z") ) {  
30.          z = tags[j].getAttribute("z");}  
31.       if ( tags[j].getAttribute("style") ) {  
32.          style = tags[j].getAttribute("style");}  
33.   
34.       element1 = document.createElement("script");  
35.       element1.setAttribute("type","text/javascript");  
36.       text = document.createTextNode("var lat"+ i + "=" + lat + "; var lon"  
37.         + i + "=" + lon + "; var zoom"+ i + "=" + z + "; var map" + i  
38.         + "; function lonLatToMercator(ll) { var lon = ll.lon * 20037508.34 / 180; "  
39.         + "var lat = Math.log (Math.tan ((90 + ll.lat) * Math.PI / 360)) / "  
40.         + "(Math.PI / 180); latlat = lat * 20037508.34 / 180; return new "  
41.         + "OpenLayers.LonLat(lon, lat); } ;"  
42.         + "if (typeof window.addEventListener == 'function') { "  
43.         + "window.addEventListener('load', init, false);} else if (typeof "  
44.         + "window.attachEvent == 'object') { window.attachEvent('onload', "  
45.         + "init);} else { var oldonload = window.onload ; if (typeof "  
46.         + "window.onload != 'function') { window.onload = init;} else { "  
47.         + "window.onload = function() { oldonload(); init(); } } };"  
48.         + "function init() { map" + i + " = new OpenLayers.Map('map" + i   
49.         + "', { controls:[ new OpenLayers.Control.Navigation()"  
50.         + ", new OpenLayers.Control.PanZoom(), new OpenLayers.Control"  
51.         + ".LayerSwitcher()], maxExtent: new OpenLayers.Bounds(-20037508.34, "  
52.         + "-20037508.34, 20037508.34, 20037508.34), maxResolution:156543.0399, "  
53.         + "units:'meters', projection: 'EPSG:900913' } ); var mapnik = new "  
54.         + "OpenLayers.Layer.OSM.Mapnik('Mapnik'); map" + i + ".addLayer(mapnik);"  
55.         + " var osmarender = new OpenLayers.Layer.OSM.Osmarender('Osmarender'); "  
56.         + "map" + i + ".addLayer(osmarender); var cyclemap = new OpenLayers"  
57.         + ".Layer.OSM.CycleMap('Cycle Map'); map" + i + ".addLayer(cyclemap); "  
58.         + "var maplint = new OpenLayers.Layer.OSM.Maplint('Maplint'); map" + i   
59.         + ".addLayer(maplint); var lonLat" + i + " = lonLatToMercator(new "  
60.         + "OpenLayers.LonLat(lon" + i + ", lat" + i + ")); map" + i   
61.         + ".setCenter (lonLat" + i + ", zoom" + i + "); } ");  
62.       element1.appendChild(text);  
63.       tags[j].appendChild(element1);  
64.       element1 = document.createElement("div");  
65.       element1.setAttribute("class","tempmap");  
66.       element1.setAttribute("style","margin-bottom:-35px;");  
67.       <!-- define a DIV into which the map will appear -->  
68.       element2 = document.createElement("div");  
69.       element2.setAttribute("id", "map" + i);  
70.       element2.setAttribute("style", style   
71.         + " border-style:solid; border-width:1px; border-color:#000;");  
72.       element1.appendChild(element2);  
73.       element2 = document.createElement("br");  
74.       element1.appendChild(element2);  
75.       element2 = document.createElement("span");  
76.       element2.setAttribute("class","tempmap")  
77.       element2.setAttribute("style",  
78.         "font-size:70%; background-color:white; position:relative;top:-65px;left:5px;z-index:1003;");  
79.       text = document.createTextNode("Data by ");  
80.       element2.appendChild(text);  
81.       element3 = document.createElement("a");  
82.       element3.setAttribute("href","http://www.openstreetmap.org/?lat=" + lat   
83.         + "&lon=" + lon + "&zoom=" + z );  
84.       element3.setAttribute("title","See this map on OpenStreetMap.org");  
85.       text = document.createTextNode("OpenStreetMap");  
86.       element3.appendChild(text);  
87.       element2.appendChild(element3);  
88.       element3 = document.createElement("br");  
89.       element2.appendChild(element3);  
90.       element3 = document.createElement("a");  
91.       element3.setAttribute("href","http://creativecommons.org/licenses/by-sa/2.0/");  
92.       element3.setAttribute("title","Creative Commons Attribution-Share Alike 2.0");  
93.       text = document.createTextNode("CC-BY-SA-2.0");  
94.       element3.appendChild(text);  
95.       element2.appendChild(element3);  
96.       element1.appendChild(element2);  
97.       tags[j].appendChild(element1);  
98.     }  
99.   }  
100. --></script>  

<style>
.slippymap img { padding: 0px !important; border: none !important;}
</style>
<!-- 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"><!--
// Blogger Slippy Map 0.1
var i = 0;
var lat = 54;
var lon = 0;
var z = 4;
var style = "width:300px; height:200px;";
var element1, element2, element3, text;
var tags = document.getElementsByTagName("div");

  for ( var j=0; j < tags.length; j++ ) {

    if ( tags[j].className == "slippymap" ) {

      i++;

      if ( tags[j].getAttribute("lat") ) {
         lat = tags[j].getAttribute("lat");}
      if ( tags[j].getAttribute("lon") ) {
         lon = tags[j].getAttribute("lon");}
      if ( tags[j].getAttribute("z") ) {
         z = tags[j].getAttribute("z");}
      if ( tags[j].getAttribute("style") ) {
         style = tags[j].getAttribute("style");}

      element1 = document.createElement("script");
      element1.setAttribute("type","text/javascript");
      text = document.createTextNode("var lat"+ i + "=" + lat + "; var lon"
        + i + "=" + lon + "; var zoom"+ i + "=" + z + "; var map" + i
        + "; 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); } ;"
        + "if (typeof window.addEventListener == 'function') { "
        + "window.addEventListener('load', init, false);} else if (typeof "
        + "window.attachEvent == 'object') { window.attachEvent('onload', "
        + "init);} else { var oldonload = window.onload ; if (typeof "
        + "window.onload != 'function') { window.onload = init;} else { "
        + "window.onload = function() { oldonload(); init(); } } };"
        + "function init() { map" + i + " = new OpenLayers.Map('map" + i 
        + "', { 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" + i + ".addLayer(mapnik);"
        + " var osmarender = new OpenLayers.Layer.OSM.Osmarender('Osmarender'); "
        + "map" + i + ".addLayer(osmarender); var cyclemap = new OpenLayers"
        + ".Layer.OSM.CycleMap('Cycle Map'); map" + i + ".addLayer(cyclemap); "
        + "var maplint = new OpenLayers.Layer.OSM.Maplint('Maplint'); map" + i 
        + ".addLayer(maplint); var lonLat" + i + " = lonLatToMercator(new "
        + "OpenLayers.LonLat(lon" + i + ", lat" + i + ")); map" + i 
        + ".setCenter (lonLat" + i + ", zoom" + i + "); } ");
      element1.appendChild(text);
      tags[j].appendChild(element1);
      element1 = document.createElement("div");
      element1.setAttribute("class","tempmap");
      element1.setAttribute("style","margin-bottom:-35px;");
      <!-- define a DIV into which the map will appear -->
      element2 = document.createElement("div");
      element2.setAttribute("id", "map" + i);
      element2.setAttribute("style", style 
        + " border-style:solid; border-width:1px; border-color:#000;");
      element1.appendChild(element2);
      element2 = document.createElement("br");
      element1.appendChild(element2);
      element2 = document.createElement("span");
      element2.setAttribute("class","tempmap")
      element2.setAttribute("style",
        "font-size:70%; background-color:white; position:relative;top:-65px;left:5px;z-index:1003;");
      text = document.createTextNode("Data by ");
      element2.appendChild(text);
      element3 = document.createElement("a");
      element3.setAttribute("href","http://www.openstreetmap.org/?lat=" + lat 
        + "&lon=" + lon + "&zoom=" + z );
      element3.setAttribute("title","See this map on OpenStreetMap.org");
      text = document.createTextNode("OpenStreetMap");
      element3.appendChild(text);
      element2.appendChild(element3);
      element3 = document.createElement("br");
      element2.appendChild(element3);
      element3 = document.createElement("a");
      element3.setAttribute("href","http://creativecommons.org/licenses/by-sa/2.0/");
      element3.setAttribute("title","Creative Commons Attribution-Share Alike 2.0");
      text = document.createTextNode("CC-BY-SA-2.0");
      element3.appendChild(text);
      element2.appendChild(element3);
      element1.appendChild(element2);
      tags[j].appendChild(element1);
    }
  }
--></script>

   [ More... ]