OpenStreetMapってのは 誰でも自由に使用する事ができ、地図情報自体も編集できる地図です。 先日作成する勉強会に出てきたのですが実際地図も作ったりしてきました。 ちょっと地図使うサービスを作り始めていたので せっかくなのでとOSMで地図表示してみる事にしました。 leaflef」に出逢いました。 まずHTMLに表示部分を準備します(サイズ等はお任せします)国内のブログを何個か見て「これは苦労するな」と感じました。 使用するJSにvar記述がなくて、変数等が どのように管理されているかわからなかったからです。 jQueryライクな記述ができるようなプラグインはないかな?と 感じていて「下手すると作るか?」と思った時に「<div id="canvas"></div>その後JSで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行目は著作権表示です。 これだけで表示されます! 私のサービスはTwitterで情報を拾う予定だったので 拾ってきた情報を表示させてみよう!って事になりました。 正直地図の表示だけだと、leafletは必要なかったんですけどね。var marker = L.marker([lat,lon]).addTo(map); marker.bindPopup(content);これだけです><。 座標を渡してあげて、マップを指定。 それにcontent(表示するHTML)を設定してあげたら、 という感じで表示されます。 本当に簡単です。
2014年4月28日月曜日
OpenStreetMapでバルーン表示してみた
登録:
コメントの投稿 (Atom)
0 件のコメント:
コメントを投稿