SlideShare a Scribd company logo
OpenLayersで地図表示 Powered by Rabbit 2.1.2
OpenLayersで
地図表示
鍋太郎@NSEG
OpenLayersで地図表示 Powered by Rabbit 2.1.2
自己紹介
プログラマー✓
Debian系翻訳者✓
http://about.me/nabetaro✓
OpenLayersで地図表示 Powered by Rabbit 2.1.2
今日のお題
JSでWebブラウザに地図を出す
OpenLayers✓
http://openlayers.org/✓
✓
ほんのさわりだけ
OpenLayersで地図表示 Powered by Rabbit 2.1.2
OpenLayers
各種地図を扱える
Google Map✓
Bing Map✓
OpenStreetMap✓
ArcGIS✓
他✓
✓
OpenLayersで地図表示 Powered by Rabbit 2.1.2
OpenLayers
二条項BSDライセンス✓
最新安定版は 2.13.1✓
現在、3系を開発中✓
OpenLayersで地図表示 Powered by Rabbit 2.1.2
用語
longitude (経度) x軸✓
latitude (緯度) y軸✓
projection (投影)
EPSG:4326✓
EPSG:900913✓
✓
OpenLayersで地図表示 Powered by Rabbit 2.1.2
今回のHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
…略…
</head>
<body onload="init();">
<div id="map_canvas"></div>
</body>
</html>
OpenLayersで地図表示 Powered by Rabbit 2.1.2
地図の生成
OpenLayers.Map オブジェクト
を生成
✓
DOMに割り当てる
今回はidがmap_canvasのdiv要素✓
✓
map = new OpenLayers.Map("map_canvas");
OpenLayersで地図表示 Powered by Rabbit 2.1.2
OpenStreetMapを表示
レイヤーを生成して
OpenLayers.Map オブジェクト
に追加
✓
map.addLayer(new OpenLayers.Layer.OSM());
OpenLayersで地図表示 Powered by Rabbit 2.1.2
OpenStreetMapを表示
OpenLayersで地図表示 Powered by Rabbit 2.1.2
表示の中心を指定
OpenLayers.LonLat オブジェ
クトで点を生成
✓
setCenterメソッドで中心を指
定
✓
OpenLayersで地図表示 Powered by Rabbit 2.1.2
カスタマイズ
OpenLayers.Mapの第2引数や
map.addLayersメソッドで
✓
OpenLayers.Control.Navigation :DnDで操作
OpenLayers.Control.Attribution :権利表示
OpenLayers.Control.LayerSwitcher :レイヤ切り替え表示
OpenLayers.Control.PanZoomBar :パンパネル・ズームバー表示
などなど
OpenLayersで地図表示 Powered by Rabbit 2.1.2
利用できるレイヤー
地図サービス
OpenLayers.Layer.OSM✓
OpenLayers.Layer.Bing✓
OpenLayers.Layer.Google✓
OpenLayers.Layer.Google.v3✓
✓
OpenLayersで地図表示 Powered by Rabbit 2.1.2
利用できるレイヤー
OpenLayers.Layer.Boxes
矩形描画✓
✓
OpenLayers.Layer.Text
データをテキストファイルから読み
込み描画
✓
✓
OpenLayersで地図表示 Powered by Rabbit 2.1.2
OpenLayers.Layer.Text
タブ区切りテキストでデータを
指定してマーカー描画
✓
マーカーをクリックで名前や説
明を表示
✓
lat lon title description icon iconSize iconOffset
36.655929565 138.187515259 3号基 3号基 image/orange03.png 32,32 -16,-32
36.655368805 138.187473706 4号基 4号基 image/orange04.png 32,32 -16,-32
……
OpenLayersで地図表示 Powered by Rabbit 2.1.2
OpenLayers.Layer.Text
テキストファイルに指定する列✓
point マーカーの位置「経度,緯度」の形
lat マーカー位置の緯度
lon マーカー位置の経度
icon または image マーカー画像のURL
iconSize アイコンサイズ
iconOffset マーカーの左上の点のオフセット
title クリック時のポップアップに表示するタイトル
description クリック時のポップアップに表示する文字 (テキストかHTML)
OpenLayersで地図表示 Powered by Rabbit 2.1.2
OpenLayers.Layer.Text
ファイルを読み込むレイヤーを
生成
✓
var pois = new OpenLayers.Layer.Text(
"レイヤー名", {
location:"ファイル名",
});
map.addLayer(pois);
OpenLayersで地図表示 Powered by Rabbit 2.1.2
ここまででできること
OpenLayersで地図表示 Powered by Rabbit 2.1.2
ここに置いておきますね
触ってみてくださいまし
http://www.caldron.jp/~nabetaro/openlayers_sample/openlayers_sample.html
OpenLayersで地図表示 Powered by Rabbit 2.1.2
もっと
公式サンプルあります✓
http://openlayers.org/dev/examples/
OpenLayersで地図表示 Powered by Rabbit 2.1.2
まとめ
HTML上に地図を表示するJSラ
イブラリ
✓
各種地図を重ねて表示できる✓
お手軽にマーカーも表示できる✓
もっとOpenStreetMapを活用
しよう! (アレ?
✓

More Related Content

What's hot

Iceberg 2018 (Japanese translation)
Iceberg 2018 (Japanese translation)Iceberg 2018 (Japanese translation)
Iceberg 2018 (Japanese translation)
Tomohiro Oda
 
Ingress on GKE/GCE
Ingress on GKE/GCEIngress on GKE/GCE
Ingress on GKE/GCE
shouta yoshikai
 
boot2docker upgrade
boot2docker upgradeboot2docker upgrade
boot2docker upgrade
Kazuhiro Nishiyama
 
Gcpでdocker
GcpでdockerGcpでdocker
Gcpでdocker
koda3
 
Dockerで遊んでみよっかー YAPC::Asia Tokyo 2014
Dockerで遊んでみよっかー YAPC::Asia Tokyo 2014Dockerで遊んでみよっかー YAPC::Asia Tokyo 2014
Dockerで遊んでみよっかー YAPC::Asia Tokyo 2014
Masahiro Nagano
 
社内勉強会(Docker)
社内勉強会(Docker)社内勉強会(Docker)
社内勉強会(Docker)
Shinya Sasaki
 
Docker on RHEL & Project Atomic 入門 - #Dockerjp 4
Docker on RHEL & Project Atomic 入門 - #Dockerjp 4Docker on RHEL & Project Atomic 入門 - #Dockerjp 4
Docker on RHEL & Project Atomic 入門 - #Dockerjp 4
Emma Haruka Iwao
 
Weaveを試してみた
Weaveを試してみたWeaveを試してみた
Weaveを試してみた
Kazuto Kusama
 
高スループットなサーバアプリケーションの為の新しいフレームワーク
「Seastar」
高スループットなサーバアプリケーションの為の新しいフレームワーク
「Seastar」高スループットなサーバアプリケーションの為の新しいフレームワーク
「Seastar」
高スループットなサーバアプリケーションの為の新しいフレームワーク
「Seastar」
Takuya ASADA
 
Windows の Docker 上で PGX を動かしてみた
Windows の Docker 上で PGX を動かしてみたWindows の Docker 上で PGX を動かしてみた
Windows の Docker 上で PGX を動かしてみた
Hikari Morita
 
GUI&基本操作、CLI編
GUI&基本操作、CLI編GUI&基本操作、CLI編
GUI&基本操作、CLI編
Go Chiba
 
Kubernetes Meetup Tokyo #8 Self-hosted Kubernetes を調べてみた
Kubernetes Meetup Tokyo #8 Self-hosted Kubernetes を調べてみたKubernetes Meetup Tokyo #8 Self-hosted Kubernetes を調べてみた
Kubernetes Meetup Tokyo #8 Self-hosted Kubernetes を調べてみた
Akihito Inoh
 
k3s のすすめ
k3s のすすめk3s のすすめ
k3s のすすめ
KokiMakita1
 
Kubernetes etc.. & rancher 2.0 technical preview
Kubernetes etc.. & rancher 2.0 technical previewKubernetes etc.. & rancher 2.0 technical preview
Kubernetes etc.. & rancher 2.0 technical preview
cyberblack28 Ichikawa
 
Dockerの改修を一緒にやりませんか
Dockerの改修を一緒にやりませんかDockerの改修を一緒にやりませんか
Dockerの改修を一緒にやりませんか
axsh co., LTD.
 
Dockerの利用事例
Dockerの利用事例Dockerの利用事例
Dockerの利用事例
maebashi
 
机上の Kubernetes - 形式手法で見るコンテナオーケストレーション #NGK2016B
机上の Kubernetes -  形式手法で見るコンテナオーケストレーション #NGK2016B机上の Kubernetes -  形式手法で見るコンテナオーケストレーション #NGK2016B
机上の Kubernetes - 形式手法で見るコンテナオーケストレーション #NGK2016B
y_taka_23
 
DockerをRed Hatはどのように見ているのか
DockerをRed Hatはどのように見ているのかDockerをRed Hatはどのように見ているのか
DockerをRed Hatはどのように見ているのか
Emma Haruka Iwao
 
Kubernetes introduction
Kubernetes introductionKubernetes introduction
Kubernetes introduction
DAEBUM LEE
 
Docker地雷n本勝負
Docker地雷n本勝負Docker地雷n本勝負
Docker地雷n本勝負
RyutaKoide
 

What's hot (20)

Iceberg 2018 (Japanese translation)
Iceberg 2018 (Japanese translation)Iceberg 2018 (Japanese translation)
Iceberg 2018 (Japanese translation)
 
Ingress on GKE/GCE
Ingress on GKE/GCEIngress on GKE/GCE
Ingress on GKE/GCE
 
boot2docker upgrade
boot2docker upgradeboot2docker upgrade
boot2docker upgrade
 
Gcpでdocker
GcpでdockerGcpでdocker
Gcpでdocker
 
Dockerで遊んでみよっかー YAPC::Asia Tokyo 2014
Dockerで遊んでみよっかー YAPC::Asia Tokyo 2014Dockerで遊んでみよっかー YAPC::Asia Tokyo 2014
Dockerで遊んでみよっかー YAPC::Asia Tokyo 2014
 
社内勉強会(Docker)
社内勉強会(Docker)社内勉強会(Docker)
社内勉強会(Docker)
 
Docker on RHEL & Project Atomic 入門 - #Dockerjp 4
Docker on RHEL & Project Atomic 入門 - #Dockerjp 4Docker on RHEL & Project Atomic 入門 - #Dockerjp 4
Docker on RHEL & Project Atomic 入門 - #Dockerjp 4
 
Weaveを試してみた
Weaveを試してみたWeaveを試してみた
Weaveを試してみた
 
高スループットなサーバアプリケーションの為の新しいフレームワーク
「Seastar」
高スループットなサーバアプリケーションの為の新しいフレームワーク
「Seastar」高スループットなサーバアプリケーションの為の新しいフレームワーク
「Seastar」
高スループットなサーバアプリケーションの為の新しいフレームワーク
「Seastar」
 
Windows の Docker 上で PGX を動かしてみた
Windows の Docker 上で PGX を動かしてみたWindows の Docker 上で PGX を動かしてみた
Windows の Docker 上で PGX を動かしてみた
 
GUI&基本操作、CLI編
GUI&基本操作、CLI編GUI&基本操作、CLI編
GUI&基本操作、CLI編
 
Kubernetes Meetup Tokyo #8 Self-hosted Kubernetes を調べてみた
Kubernetes Meetup Tokyo #8 Self-hosted Kubernetes を調べてみたKubernetes Meetup Tokyo #8 Self-hosted Kubernetes を調べてみた
Kubernetes Meetup Tokyo #8 Self-hosted Kubernetes を調べてみた
 
k3s のすすめ
k3s のすすめk3s のすすめ
k3s のすすめ
 
Kubernetes etc.. & rancher 2.0 technical preview
Kubernetes etc.. & rancher 2.0 technical previewKubernetes etc.. & rancher 2.0 technical preview
Kubernetes etc.. & rancher 2.0 technical preview
 
Dockerの改修を一緒にやりませんか
Dockerの改修を一緒にやりませんかDockerの改修を一緒にやりませんか
Dockerの改修を一緒にやりませんか
 
Dockerの利用事例
Dockerの利用事例Dockerの利用事例
Dockerの利用事例
 
机上の Kubernetes - 形式手法で見るコンテナオーケストレーション #NGK2016B
机上の Kubernetes -  形式手法で見るコンテナオーケストレーション #NGK2016B机上の Kubernetes -  形式手法で見るコンテナオーケストレーション #NGK2016B
机上の Kubernetes - 形式手法で見るコンテナオーケストレーション #NGK2016B
 
DockerをRed Hatはどのように見ているのか
DockerをRed Hatはどのように見ているのかDockerをRed Hatはどのように見ているのか
DockerをRed Hatはどのように見ているのか
 
Kubernetes introduction
Kubernetes introductionKubernetes introduction
Kubernetes introduction
 
Docker地雷n本勝負
Docker地雷n本勝負Docker地雷n本勝負
Docker地雷n本勝負
 

More from Nozomu KURASAWA

ActiveStorage::Analyzer
ActiveStorage::AnalyzerActiveStorage::Analyzer
ActiveStorage::Analyzer
Nozomu KURASAWA
 
プルリク送ったらライブラリ壊したった
 プルリク送ったらライブラリ壊したった プルリク送ったらライブラリ壊したった
プルリク送ったらライブラリ壊したった
Nozomu KURASAWA
 
LINEのbotを作ってみた
LINEのbotを作ってみたLINEのbotを作ってみた
LINEのbotを作ってみた
Nozomu KURASAWA
 
電話番号の扱い方の提案(仮)
電話番号の扱い方の提案(仮)電話番号の扱い方の提案(仮)
電話番号の扱い方の提案(仮)
Nozomu KURASAWA
 
Windowsを踏台にしてSSH接続
Windowsを踏台にしてSSH接続Windowsを踏台にしてSSH接続
Windowsを踏台にしてSSH接続
Nozomu KURASAWA
 
sidで始める開発者生活
sidで始める開発者生活sidで始める開発者生活
sidで始める開発者生活
Nozomu KURASAWA
 
Debianのパッチ事情
Debianのパッチ事情Debianのパッチ事情
Debianのパッチ事情
Nozomu KURASAWA
 
Debian パッケージングチュートリアル
Debian パッケージングチュートリアルDebian パッケージングチュートリアル
Debian パッケージングチュートリアル
Nozomu KURASAWA
 
PGP/GPG キーサインパーティ 接触編
PGP/GPG キーサインパーティ 接触編PGP/GPG キーサインパーティ 接触編
PGP/GPG キーサインパーティ 接触編
Nozomu KURASAWA
 
aptのマニュアルをpo4a化した話
aptのマニュアルをpo4a化した話aptのマニュアルをpo4a化した話
aptのマニュアルをpo4a化した話
Nozomu KURASAWA
 
OSMを楽しむ2012
OSMを楽しむ2012OSMを楽しむ2012
OSMを楽しむ2012
Nozomu KURASAWA
 
真・HTML help文字化け対策
真・HTML help文字化け対策真・HTML help文字化け対策
真・HTML help文字化け対策
Nozomu KURASAWA
 
おきらく翻訳
おきらく翻訳おきらく翻訳
おきらく翻訳
Nozomu KURASAWA
 
Heroku に ChiliProject を入れてみた
Heroku に ChiliProject を入れてみたHeroku に ChiliProject を入れてみた
Heroku に ChiliProject を入れてみた
Nozomu KURASAWA
 
PO ファイルで翻訳管理
PO ファイルで翻訳管理PO ファイルで翻訳管理
PO ファイルで翻訳管理
Nozomu KURASAWA
 
OpenStreetMapの紹介
OpenStreetMapの紹介OpenStreetMapの紹介
OpenStreetMapの紹介
Nozomu KURASAWA
 

More from Nozomu KURASAWA (16)

ActiveStorage::Analyzer
ActiveStorage::AnalyzerActiveStorage::Analyzer
ActiveStorage::Analyzer
 
プルリク送ったらライブラリ壊したった
 プルリク送ったらライブラリ壊したった プルリク送ったらライブラリ壊したった
プルリク送ったらライブラリ壊したった
 
LINEのbotを作ってみた
LINEのbotを作ってみたLINEのbotを作ってみた
LINEのbotを作ってみた
 
電話番号の扱い方の提案(仮)
電話番号の扱い方の提案(仮)電話番号の扱い方の提案(仮)
電話番号の扱い方の提案(仮)
 
Windowsを踏台にしてSSH接続
Windowsを踏台にしてSSH接続Windowsを踏台にしてSSH接続
Windowsを踏台にしてSSH接続
 
sidで始める開発者生活
sidで始める開発者生活sidで始める開発者生活
sidで始める開発者生活
 
Debianのパッチ事情
Debianのパッチ事情Debianのパッチ事情
Debianのパッチ事情
 
Debian パッケージングチュートリアル
Debian パッケージングチュートリアルDebian パッケージングチュートリアル
Debian パッケージングチュートリアル
 
PGP/GPG キーサインパーティ 接触編
PGP/GPG キーサインパーティ 接触編PGP/GPG キーサインパーティ 接触編
PGP/GPG キーサインパーティ 接触編
 
aptのマニュアルをpo4a化した話
aptのマニュアルをpo4a化した話aptのマニュアルをpo4a化した話
aptのマニュアルをpo4a化した話
 
OSMを楽しむ2012
OSMを楽しむ2012OSMを楽しむ2012
OSMを楽しむ2012
 
真・HTML help文字化け対策
真・HTML help文字化け対策真・HTML help文字化け対策
真・HTML help文字化け対策
 
おきらく翻訳
おきらく翻訳おきらく翻訳
おきらく翻訳
 
Heroku に ChiliProject を入れてみた
Heroku に ChiliProject を入れてみたHeroku に ChiliProject を入れてみた
Heroku に ChiliProject を入れてみた
 
PO ファイルで翻訳管理
PO ファイルで翻訳管理PO ファイルで翻訳管理
PO ファイルで翻訳管理
 
OpenStreetMapの紹介
OpenStreetMapの紹介OpenStreetMapの紹介
OpenStreetMapの紹介
 

OpenLayersで地図表示

  • 1. OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenLayersで 地図表示 鍋太郎@NSEG
  • 2. OpenLayersで地図表示 Powered by Rabbit 2.1.2 自己紹介 プログラマー✓ Debian系翻訳者✓ http://about.me/nabetaro✓
  • 3. OpenLayersで地図表示 Powered by Rabbit 2.1.2 今日のお題 JSでWebブラウザに地図を出す OpenLayers✓ http://openlayers.org/✓ ✓ ほんのさわりだけ
  • 4. OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenLayers 各種地図を扱える Google Map✓ Bing Map✓ OpenStreetMap✓ ArcGIS✓ 他✓ ✓
  • 5. OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenLayers 二条項BSDライセンス✓ 最新安定版は 2.13.1✓ 現在、3系を開発中✓
  • 6. OpenLayersで地図表示 Powered by Rabbit 2.1.2 用語 longitude (経度) x軸✓ latitude (緯度) y軸✓ projection (投影) EPSG:4326✓ EPSG:900913✓ ✓
  • 7. OpenLayersで地図表示 Powered by Rabbit 2.1.2 今回のHTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> …略… </head> <body onload="init();"> <div id="map_canvas"></div> </body> </html>
  • 8. OpenLayersで地図表示 Powered by Rabbit 2.1.2 地図の生成 OpenLayers.Map オブジェクト を生成 ✓ DOMに割り当てる 今回はidがmap_canvasのdiv要素✓ ✓ map = new OpenLayers.Map("map_canvas");
  • 9. OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenStreetMapを表示 レイヤーを生成して OpenLayers.Map オブジェクト に追加 ✓ map.addLayer(new OpenLayers.Layer.OSM());
  • 10. OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenStreetMapを表示
  • 11. OpenLayersで地図表示 Powered by Rabbit 2.1.2 表示の中心を指定 OpenLayers.LonLat オブジェ クトで点を生成 ✓ setCenterメソッドで中心を指 定 ✓
  • 12. OpenLayersで地図表示 Powered by Rabbit 2.1.2 カスタマイズ OpenLayers.Mapの第2引数や map.addLayersメソッドで ✓ OpenLayers.Control.Navigation :DnDで操作 OpenLayers.Control.Attribution :権利表示 OpenLayers.Control.LayerSwitcher :レイヤ切り替え表示 OpenLayers.Control.PanZoomBar :パンパネル・ズームバー表示 などなど
  • 13. OpenLayersで地図表示 Powered by Rabbit 2.1.2 利用できるレイヤー 地図サービス OpenLayers.Layer.OSM✓ OpenLayers.Layer.Bing✓ OpenLayers.Layer.Google✓ OpenLayers.Layer.Google.v3✓ ✓
  • 14. OpenLayersで地図表示 Powered by Rabbit 2.1.2 利用できるレイヤー OpenLayers.Layer.Boxes 矩形描画✓ ✓ OpenLayers.Layer.Text データをテキストファイルから読み 込み描画 ✓ ✓
  • 15. OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenLayers.Layer.Text タブ区切りテキストでデータを 指定してマーカー描画 ✓ マーカーをクリックで名前や説 明を表示 ✓ lat lon title description icon iconSize iconOffset 36.655929565 138.187515259 3号基 3号基 image/orange03.png 32,32 -16,-32 36.655368805 138.187473706 4号基 4号基 image/orange04.png 32,32 -16,-32 ……
  • 16. OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenLayers.Layer.Text テキストファイルに指定する列✓ point マーカーの位置「経度,緯度」の形 lat マーカー位置の緯度 lon マーカー位置の経度 icon または image マーカー画像のURL iconSize アイコンサイズ iconOffset マーカーの左上の点のオフセット title クリック時のポップアップに表示するタイトル description クリック時のポップアップに表示する文字 (テキストかHTML)
  • 17. OpenLayersで地図表示 Powered by Rabbit 2.1.2 OpenLayers.Layer.Text ファイルを読み込むレイヤーを 生成 ✓ var pois = new OpenLayers.Layer.Text( "レイヤー名", { location:"ファイル名", }); map.addLayer(pois);
  • 18. OpenLayersで地図表示 Powered by Rabbit 2.1.2 ここまででできること
  • 19. OpenLayersで地図表示 Powered by Rabbit 2.1.2 ここに置いておきますね 触ってみてくださいまし http://www.caldron.jp/~nabetaro/openlayers_sample/openlayers_sample.html
  • 20. OpenLayersで地図表示 Powered by Rabbit 2.1.2 もっと 公式サンプルあります✓ http://openlayers.org/dev/examples/
  • 21. OpenLayersで地図表示 Powered by Rabbit 2.1.2 まとめ HTML上に地図を表示するJSラ イブラリ ✓ 各種地図を重ねて表示できる✓ お手軽にマーカーも表示できる✓ もっとOpenStreetMapを活用 しよう! (アレ? ✓