APIの利用制限と有料プランが発表になってから、いつか別APIを使ったものに移行いしないとなぁと考えていました。APIも同じく利用制限があるので、Foresquareで使われているという「OpenStreetMap」が良さそうということで使ってみました。今回も、Webサイトで実現しようということでJavascriptでの実装となります。意図したことが出来たので備忘メモ。APIの基本的な使い方http://openstreetmap.piyolab.net↑API実験室をひととおり読むと、基本的な使い方がわかります。地図を表示するだけなら簡単でした。問題はここから、地図上に図形を描画したい。GeoExt:http://nobmob.blogspot.jp/2009/03/openlayers-17a.htmlこの中のプログラムをそのまま使ってもうまく表示されません。理由は、座標の変換が必要だったからでした。それでは、はじめから手順を追ってみます。図形を描画するには、OpenLayersライブラリを使用します。OpenLayersのサイトから、tar.gzまたはzipファイルをダウンロードします↓http://openlayers.orgOpenLayersのリファレンス(日本語)http://mapabc.wikidot.com/openlayers:menu解凍したら、OpenLayersを動作させるために必要なファイルだけをnginxにアップロードします。アップしたのは以下の3点です。・imgディレクトリ・themeディレクトリ・OpenLayers.js※「OpenLayers.js」「img」「theme」は相対位置が決まっているようです。3点とも同ディレクトリに置く必要がありましたコーディング内でOpenLayers.jsを参照すれば、OpenLayersが使用可能になります。Javascriptでの実装OpenStreetMapを表示するJavascript部分は↓のとおりです。ほとんど参考サイトのままです。15);--------------------------------------実行結果↓テストがうまくいったことだし、次はアプリに適用してみよう。[必須入力]このブログについてものづくりに関することを色々と。ウィジェット過去ログ2019年07月(1)2019年02月(3)2018年12月(1)2018年04月(1)2018年03月(1)2018年02月(1)2017年11月(3)2017年04月(4)2017年03月(7)2017年02月(1)2016年11月(1)2016年09月(1)2016年08月(3)2016年07月(1)2016年05月(1)2016年04月(1)2016年02月(4)2016年01月(1)2015年11月(1)2015年06月(1)検索ボックス。