Tatata

2008/08/02

大宮

lat=35.9164
lon=139.6282
z=14

オープンストリートマップの地図はクリエイティブ・コモンズのライセンス「表示-継承 2.0 一般」に基づいて利用することができます。利用許諾条項の要約及び詳細については上の"CC-BY-SA-2.0"のリンク先をご覧下さい。
オープンストリートマップのサイトでは地図の画像ファイルやデータをエクスポートすることができます。上の"Data by OpenStreetMap"のリンク先をご覧下さい。
地図の作成に興味がある方はウィキをご覧下さい。また、日本コミュニティのサイトもあります。

[ More... ]

福島

福島県福島市

lat=37.757
lon=140.4659
z=14

[ More... ]

旭川

Blogger Slippy MapウィジェットがIE6でも動くようになりました。

でも、まだ不具合がありそうなので、テストも兼ねて日本の中で OpenStreetMap の地図が育っている街を幾つか表示してみようと思います。

北海道旭川市

lat=43.7648
lon=142.3742
z=14

このブログのトップページやアーカイブのページの動きが暫く重くなります。 ;-)

[ More... ]

Slippy MapウィジェットがIE6でも動くようになりました

Firefox3とSafari3では動いたのにIE6では動かなかった Blogger Slippy MapウィジェットがIE6でも動くようになりました。（稼動確認したPCはWindowsXP SP3とSP2です。）

何箇所か alert を入れてみて何となく悪そうな場所は分かったのですが、そこから先は Visual Web Developer 2008 Express Edition をインストールしても分かりませんでした。（これはデバッグツールの使い方自体良く分かっていないせいだと思います。）

また検索を繰り返し、次のページに辿り着いて漸く分かりました。

OKWave : JavaScriptでJavaScriptを追加したいです。

そこに書かれていた原因とは「ＩＥの場合、動的にスクリプトエレメント（<script></script>）にテキストの追加は、できないようです。」ということで、解決策は「動的に関数を作成したいとかそういうことなら、文字列として、関数を構成してeval すればいいです。（script タグを追加する必要はない）」でした。

で、 eval とやらをしてみました。
IEのためのコードを追加しなければならないのかと思っていたので助かりました。普段からJavaScriptを書いている人には当たり前のことなんだろうなぁ（汗

今回のコード（IE6対応版）はこちら。（ "+ expand source" のリンクをクリックして下さい。）

<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>

しかし...
Firefox3とSafari3ではクレジットとライセンスが地図の枠内に収まるのに、IE6では枠外に出てしまうな。
良く見るとIE6では枠の線も表示されてないよ。
まっ、いっかぁ～。とりあえず動くようになったし。

あと、あんまり地図を貼り付けるとページの動きが遅くなりますね。当たり前か。

[ More... ]

2008/08/01

JavaScript カスタム関数

便利そうなのでリンクしておきます。

IE6でSlippy Mapを複数表示できない件も調べてみようかな。

Visual Web Developer 2008 Express Editionになって、JavaScriptデバッガがまともに使えるようになった気がする。

Amazon.co.jp ウィジェット

2008/07/31

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.

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;");
      
      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)

履歴 (History)

0.1: 2008-07-31 新規作成。Firefox3とSafari3で動作。
0.1.1: 2008-08-02 IE6で動作。

[ More... ]

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" のリンクをクリックして下さい。）

<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... ]

Amazon.co.jp ウィジェット

Atom

Tatata

2008/08/02

大宮

福島

旭川

Slippy MapウィジェットがIE6でも動くようになりました

2008/08/01

JavaScript カスタム関数

2008/07/31

Blogger Slippy Map

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

サイト及び関連サイトの検索

関連サイトへのリンク

ラベル

アーカイブ

その他のリンク

identi.caのフィード

twitterのフィード

OpenStreetMap diary entries by Tatata

Blogger Syntax Highliter with Perl support

Blogger Slippy Map

2008/08/02

2008/08/01

2008/07/31

サイト及び関連サイトの検索

関連サイトへのリンク

ラベル

フィードリーダーに登録

アーカイブ

その他のリンク

identi.caのフィード

twitterのフィード

OpenStreetMap diary entries by Tatata

Blogger Syntax Highliter with Perl support

Blogger Slippy Map