Google Map APIの利用制限と有料プランが発表になってから、
いつか別APIを使ったものに移行いしないとなぁと考えていました。

Google Maps APIの有料化・料金・利用制限まとめ:
http://matome.naver.jp/odai/2131976887859594401

Yahoo Map APIも同じく利用制限があるので、
Foresquareで使われているという「OpenStreetMap」が良さそうということで使ってみました。
今回も、Webサイトで実現しようということでJavascriptでの実装となります。

日本語ドキュメントが少ないので調べるのに時間がかかってしまいましたが、
意図したことが出来たので備忘メモ。

OpenStreetMap 日本語サイト: ←OpenStreetMapのサービスを利用してみたいとき
http://openstreetmap.jp

OpenStreetMap API 実験室 ← OpenStreetMap APIの基本的な使い方
http://openstreetmap.piyolab.net

↑API実験室をひととおり読むと、基本的な使い方がわかります。
地図を表示するだけなら簡単でした。

問題はここから、地図上に図形を描画したい。
ということで、参考にしたサイトはこちら↓

Debianでka-Mapのメモ プラスOpenLayers とGeoExt:
http://nobmob.blogspot.jp/2009/03/openlayers-17a.html

この中のプログラムをそのまま使ってもうまく表示されません。
理由は、座標の変換が必要だったからでした。

それでは、はじめから手順を追ってみます。

(1) OpanLayersライブラリを使用
図形を描画するには、OpenLayersライブラリを使用します。
OpenLayersのサイトから、tar.gzまたはzipファイルをダウンロードします↓
http://openlayers.org

OpenLayersのリファレンス(日本語)
http://mapabc.wikidot.com/openlayers:menu

解凍したら、OpenLayersを動作させるために必要なファイルだけをnginxにアップロードします。
アップしたのは以下の3点です。

・imgディレクトリ
・themeディレクトリ
・OpenLayers.js
※「OpenLayers.js」「img」「theme」は相対位置が決まっているようです。
　3点とも同ディレクトリに置く必要がありました


コーディング内でOpenLayers.jsを参照すれば、OpenLayersが使用可能になります。
↓こんな感じ
<script src="http://[取得したドメイン]/js/OpenLayers/OpenLayers.js"></script>

詳細は割愛しますが、OpenStreetMapを表示したい箇所のタグはこのようにしました↓

<div id="canvas" style="width:320px; height:480px"></div>

(2) Javascriptでの実装
OpenStreetMapを表示するJavascript部分は↓のとおりです。
ほとんど参考サイトのままです。

--------------------------------------
    // マップのオプション設定
    var options = {
        controls:[
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.ZoomPanel(),
            new OpenLayers.Control.Attribution()
        ],
        restrictedExtent:new OpenLayers.Bounds(139.7, 35.6, 139.8, 35.8)
                                       .transform(
                                           new OpenLayers.Projection("EPSG:4326"),
                                           new OpenLayers.Projection("EPSG:900913")
                                       )
    };

    // マップの初期化(オプション付与)
    var map = new OpenLayers.Map("canvas", options);
    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);

    var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);

    // 点のプロパティ
    var style_point = {
        strokeColor: "#FF6347",
        fillColor: "#FF6347",
        fillOpacity: 0.2,    // 内側の透明度
        strokeWidth: 4, // 外周の太さ
        pointRadius: 10  // 半径
    };

    var vectorLayer = new OpenLayers.Layer.Vector("描画テスト", {style: layer_style});

    // 点の座標を決める
    var point = new OpenLayers.Geometry.Point(139.760, 35.680);

    // 座標を変換 ※この処理が新たに必要だった
    point.transform(
        new OpenLayers.Projection("EPSG:4326"),
        map.getProjectionObject()
    );
    
    // 点を生成
    var pointFeature = new OpenLayers.Feature.Vector(point, null, style_point);

    // レイヤの追加と描画する図の指定
    map.addLayer(vectorLayer);
    vectorLayer.addFeatures([pointFeature]);

    // 地図の中央座標を指定
    var lonLat = new OpenLayers.LonLat(139.76, 35.68)
                               .transform(
                                   new OpenLayers.Projection("EPSG:4326"),
                                   new OpenLayers.Projection("EPSG:900913")
                               );

    // 中央とズーム値を指定
    map.setCenter(lonLat, 15);
--------------------------------------

実行結果↓



テストがうまくいったことだし、次はアプリに適用してみよう。