SL MapのAPI使ってBlogやWebサイトに貼りつけよう♪

SL MapのAPIのGoogle仕様がなくなってから暫くは放置だったのですがmapapi2としてこっそりと復活していました。公式のWebサイトであるmaps.secondlife.comでは、早くからleafletによるMAP表示が展開されていましたがユーザー向けの仕様は長く公開されていなかったのですが、いつの間にか使える状態で提示されていました。

■まずはBlogなどにSL Mapそのもの本物を貼ってみたいという場合

こんな感じでMAPをブログなどに貼る事が出来ます
(こちらはハリボテではありません。地図をぐりぐり動かしてみてください)

コードは次のようになっています。
特に以前のGoolge Map仕様のようなAPIキーを必要としないので、どなたでもCopyして利用可能です
(ただし、表示するマーカーや対象のSIMなどは変更してくださいね)

<script src="//maps.secondlife.com/_scripts/sl.mapapi2.js"></script>
<link href="//maps.secondlife.com/_styles/sl.mapapi2.css" rel="stylesheet" type="text/css"></link>
<script>
function loadmap(tag_names,local_x,local_y) {
    //http://wiki.secondlife.com/wiki/Linden_Lab_Official:Map_API_Reference
    var lmap = SLMap(document.getElementById(tag_names));
    var mapszoom = 8;     //Zoom levelは 1 ～ 8まで
    var sl_zoom  = mapszoom - 8;  //GMapのZoomをSLZoomに変換
    var regions_per_tile_edge = Math.pow(2, sl_zoom - 1);
    var mapsxx = simcoords.x + regions_per_tile_edge; //Zoomに合わせて角位置をオフセット
    var mapsyy = simcoords.y + regions_per_tile_edge; //Zoomに合わせて角位置をオフセット
    lmap.setView([mapsyy, mapsxx], mapszoom);   //何故かx,yが逆になってる 


 // creates the icon
 var icon = L.icon({
     iconUrl: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Eddy8YMi-u6ok0K1cjG15ANMVUTNIGtqCTPSGi0XFu7L9Ah_ic9q_CKfw1twyttNhBAB1h5qf4IH2vUoss8At67pzgs_yXt0_09qdj7lIKhKAZy74sP4_UfrJ6qk7nmNskDF8GO0LMes/s1600/marker-sm.png',
     iconSize: [53, 90]
 });
  
 // creates the marker
 local_x = simcoords.x + (local_x / 256);
 local_y = simcoords.y + (local_y / 256);
 L.marker([local_y, local_x], {  //ここもY, Xの順になってる模様
     icon: icon
 }).addTo(lmap);
}
</script>

<style>
        div#map-container {
            width:  256px;//好きな大きさに変えてね
            height: 256px;//好きな大きさに変えてね

        }
</style>
<script src="//cap.secondlife.com/cap/0/d661249b-2b5a-4436-966a-3d3b8d7a574f?var=simcoords&sim_name=Mosh"></script>
<a href="secondlife://Mosh/218/96/31/">Mosh/218/96/31/</a>
<br />
<div id="map-container">
</div>
<script>
loadmap('map-container',218,96);
</script>

■スクリプトを貼るなんて面倒だし重いし～軽さ優先にしたいなら
グローバルマップ上でのSIMの位置は変わらないので（変わったら景観が違ってしまいますね）それを利用して固定的なSIM画像の表示で画像のみ取得というのも使えそうですよ～
先のMAPそのものを表示するスクリプト部分で、SIM名からグローバル座標を取得している部分に着目してください。
これですね

<script src="//cap.secondlife.com/cap/0/d661249b-2b5a-4436-966a-3d3b8d7a574f?var=simcoords&sim_name=Mosh">
</script>

これを実際にWEBブラウザーのURL部分に手打ち入力してみると分かると思いますが、このような値が返却されてきます。

var simcoords = {'x' : 1807, 'y' : 1197 };

すなわちMoshというSIMは、グローバル座標でX=1807,Y=1197の位置だということ。

(記号や空白文字を含むSIM名の指定はエンコードが必要です)

この部分だけ利用すると

このように固定的に１つのSIMの画像のみを得る事が可能です
コードはこんな感じでシンプルです

<script src="https://cap.secondlife.com/cap/0/d661249b-2b5a-4436-966a-3d3b8d7a574f?var=slRegionPos_result&sim_name=Japan%20Fetish%20Zone">
</script>
<script>
document.write("<img src='http://map.secondlife.com/map-1-" + slRegionPos_result.x + "-" + slRegionPos_result.y  + "-objects.jpg' width=256 height=256>");
</script>

だけど、
そもそもBlogにスクリプトが貼れないんだけどーって場合でもなんとかなりますよ～
というのもグローバル座標って申請してSIMの位置お引っ越ししない限りは、ずっと同じ位置だからSecondLife内部で参照するUUIDによるSIM画像とは違って、常に同じ名前の画像URLで更新されているから固定的な名称で参照できるのです。

外部のWEB上で見るSIM画像のURLは

http://map.secondlife.com/map-1-1807-1197-objects.jpg

と言う形式で

http://map.secondlife.com/map-(Zoom倍率)-(X座標)-(Y座標)-objects.jpg

となっている固定名称なのです
(ただし"HTTPS"のプロトコルで参照しようとすると、安全でない接続とみなされてしまうのが残念ですけど・・・)
とりあえずはブログなどでのサイドバーに固定的に表示するなどでは、単なる一枚画像なのでとても有用なのでは思います。またMAP上でマーカー表示をしたければオーバレイ表示(スタイル指定で画像に画像を重ねる)として追加すれば簡単に実現できますよね。

なんか参照URLが超怪しいので不安になったりしますが
SIM名→グローバル座標として公式に公開されている機能ですので安心してください
http://wiki.secondlife.com/wiki/Map_API_Reference
http://wiki.secondlife.com/wiki/Linden_Lab_Official:Map_API_Introduction
なお、グローバル座標から該当SIM名を得るというのも同様に公開されています

★3/12追記：
単一指定の画像URLの場合、上記ではリファレンス通りに
http://map.secondlife.com/map～のサーバーを指定していますが、
これだとhttpsのプロトコルが使えない事と実際にAPIでMAP表示したときにはCDNの方が参照されているので、単一指定画像の場合に同様にCDN側を指定してもいいのかもしれません（勝手に使う訳ですからグレーゾーンですけど）
CDN側のURLだと現在はAkamaiのサービスをlindenさんは使っているので
https://secondlife-maps-cdn.akamaized.net/map～のURL形式となります。

で、このMAPのWEB表示が何の関連が？
という疑問があるかも知れませんね。
先の記事で触れた「ipほいほい」を考えてみてください。
この記事では外部WEBにてマーカー付きの地図を表示する事が趣旨ですが、表示する対象をSecondLife内からダイナミックにしたとき、どう機能するか分かりますよね。
そうです、アバターの現在位置を外部のWEBで表示するという事に繋がります。いかがわしい目的でなく、「今日はここでLIVEやってるよ～」などの自己主張に使うといいかも。