Blogger Slippy Map

[ja] Slippy Map MediaWiki Extensionからの出力を基にBlogger用のSlippy Mapウィジェットを作成しました。
divタグに幾つかの属性値を設定して使用します（使用例をご覧下さい）。
ウィジェットを追加するには下のボタンを押して下さい。
Firefox3とSafari3では動きますが、IE6では動きませんでした。
Firefox3、Safari3、IE6で動きました。

[en] I made a Slippy Map widget based on output from Slippy Map MediaWiki Extension.
Usage is just adding some attributes to div tag; see examples below.
To get this widget, click the button.
It works on Firefox3 and Safari3, doesn't work on IE6.
It works on Firefox3, Safari3 and IE6.

<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.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("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); eval("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 + "); } "); } } --></script>

---

---

使用例 (Examples)

---

<div class="slippymap" lat="36" lon="139" z="3" style="width:250px;height:200px;"></div>

---

<div class="slippymap" lat="52.516" lon="13.378" z="9" style="width:300px;height:300px;"></div>

---

<div class="slippymap" lat="51.5012" lon="-0.123" z="14" style="width:500px;height:400px;"></div>

---

履歴 (History)

0.1

2008-07-31 新規作成。Firefox3とSafari3で動作。

0.1.1

2008-08-02 IE6で動作。

   [ More... ]