OpenStreetMapで写真の位置情報を表示する

フォローする

(著者:サイボウズ 竹内 能彦)

はじめに

今回は OpenLayersOpenStreetMap を使って kintone に登録した写真の位置情報を地図に表示するサンプルを紹介します。

OpenStreetMap とは「道路地図などの地理情報データを誰でも利用できるよう、フリーの地理情報データを作成することを目的としたプロジェクト」で、無償で地図を利用できることが大きなメリットになります。
OpenStreetMap のライセンスについてはこちらをご確認ください。

 

デモ環境

https://dev-demo.cybozu.com/k/255/

※デモ環境についての説明、アカウントとパスワードはこちら

 

結果

まずは結果からご覧いただきましょう。

画像が一枚の場合

レコードに画像を一枚しか登録しない場合は撮影地点を中心に地図を表示します。

 

 

画像が複数枚の場合

複数枚登録した場合は、すべてのピンを地図内に収めるようにズームを自動調整します。

  

 

位置情報が取得できない場合

位置情報が取得できない場合はメッセージを表示します。

 

一覧画面での見え方

一覧画面にも地図を表示します。

 

アプリの準備

フィールドの設定(今回のカスタマイズで必要なフィールドのみを抜粋)

フィールド名 フィールドタイプ フィールドコード
写真 添付ファイル pic
  スペース map

JS/CSS設定

「アプリの設定 > JavaScript / CSSでカスタマイズ」の「PC用のCSSファイル」に以下のURLを設定します。

  • https://js.cybozu.com/openlayers/v3.17.1/ol.css

「アプリの設定 > JavaScript / CSSでカスタマイズ」の「PC用のJavaScriptファイル」に以下のURL/ファイルを設定します。

  • https://js.cybozu.com/jquery/2.2.4/jquery.min.js
  • https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.1.0/load-image.all.min.js
  • https://js.cybozu.com/openlayers/v3.17.1/ol.js
  • 以下のサンプルコードをエディタにコピーして、ファイル名を「sample.js」、文字コードを「UTF-8N」で保存、アップロードします。
    ※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください

 

終わりに

地図の表示に利用した OpenLayers には様々な機能がありますので色々試していただければと思います。
OpenLayers の機能サンプルはこちら

 

注意事項

  • 本Tipsのサンプルプログラムは、その動作を保証するものではありません。
  • 本Tipsのサンプルプログラムについて、技術的なサポート等は行っておりません。
  • スマートフォンなど端末の位置情報が無効の場合や、縮小版の写真を登録すると位置情報が取得できません。

コメント

ログインしてコメントを残してください。
Powered by Zendesk