OpenStreetMapでバルーン表示してみた

OpenStreetMapってのは
誰でも自由に使用する事ができ、地図情報自体も編集できる地図です。

先日作成する勉強会に出てきたのですが実際地図も作ったりしてきました。
ちょっと地図使うサービスを作り始めていたので
せっかくなのでとOSMで地図表示してみる事にしました。

leafletとの出逢い
国内のブログを何個か見て「これは苦労するな」と感じました。
使用するJSにvar記述がなくて、変数等が
どのように管理されているかわからなかったからです。

jQueryライクな記述ができるようなプラグインはないかな？と
感じていて「下手すると作るか？」と思った時に「leaflef」に出逢いました。

マップ作成方法
まずHTMLに表示部分を準備します（サイズ等はお任せします）
view plainprint?
<div id="canvas"></div>  
<div id="canvas"></div>


その後JSで
view plainprint?
var map = L.map('canvas').setView([38.0,140.0],6)  
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {  
    attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'  
}).addTo(map);  
        var map = L.map('canvas').setView([38.0,140.0],6)
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

setView()は中心の点です。次の引数がズーム率。
この場合日本がほぼ入る位の表示ですね。
2行目は著作権表示です。

これだけで表示されます！

バルーン(maker)を表示

私のサービスはTwitterで情報を拾う予定だったので
拾ってきた情報を表示させてみよう！って事になりました。
正直地図の表示だけだと、leafletは必要なかったんですけどね。

view plainprint?
var marker = L.marker([lat,lon]).addTo(map);  
marker.bindPopup(content);  
          var marker = L.marker([lat,lon]).addTo(map);
          marker.bindPopup(content);


これだけです＞＜。
座標を渡してあげて、マップを指定。
それにcontent(表示するHTML)を設定してあげたら、



という感じで表示されます。
本当に簡単です。