一味違う地図をサイトに載せよう

ABOUT ME

朝日 孝輔

地理空間情報を扱うオープンソースソフトウェアのコミュニティ
OSGeo財団日本支部 運営委員

本日の内容

webで地図を公開する際のサービスやライブラリを幾つかご紹介

  • Mapbox
  • CartoDB
  • Cesium

Mapbox

CartoDB

CartoDB

Cesium

説明の前に、ちょっとだけ

Google Map?

Google Mapでも全然OKだよ
ただし…
  • ライセンス
    利用規約は読もうね、違反しちゃだめよ
  • 選択肢をいくつか知っておこう、オープンなもので作ろう
  • 折角なのでカッコいいサイトを作ろう

Mapbox

https://www.mapbox.com/

Mapbox

地図を使ったアプリケーションを作成するためのプラットホーム
  • Mapboxのサイト上で地図のデザインを選択できます
  • カスタムツールを使ってオリジナルのデザインを作成できます
  • 作成した地図の上にデータを配置できます
  • 作成した地図を公開できます
  • JavaScript API,Android/iOS SDKから作成した地図を使用できます
ユーザ登録してプロジェクトを作成します
最初に背景地図のスタイルを選択します
背景地図のデータはOpenStreetMapが使われています
Marker,Line,Polygonをサイト上で配置できます
geojson,kmlといったデータを予め用意してあれば
それを読みこませることもできます
プロジェクトをSaveすると
API/SDKのためのMap ID
地図をシェアするためのURL
サイトに組み込むためのコードが発行されます
DEMO
Turfとか注目されています

プログラマの方は
Mapboxのgithubは要チェック

https://github.com/mapbox
まずは無料プランで試してみましょう

CartoDB

https://cartodb.com/

CartoDB

地図を使ったアプリケーションを作成するためのプラットホーム
  • CartoDBにデータをアップロードして、さまざまな表現を付けられます
  • データの編集もCartoDB上で行えます
  • データをどのように表示・表現すべきか提案してくれたります
  • 作成した地図を公開できます
  • APIを通して作成したデータを使用できます
ユーザ登録してDATASETを作成します
手持ちのcsv、geojson、kmlなどがあればアップロードできます
位置情報を持っている必要はあります
MAPVIEWでデータを地図上に展開できます
用意されている背景地図を選択できます
タイル地図ならURLを指定して背景に指定もできます
Map Layer Wizardで簡単にDATASETの表現付もできます
MAPをPUBLISHすると
地図をシェアするためのURL
サイトに組み込むためのコードが発行されます
DEMO
Torqueとか注目されています

プログラマの方は
CartoDBのgithubは要チェック

https://github.com/CartoDB
まずは無料プランで試してみましょう
Pacific Spatial Solutionsが、
CartoDBを日本語化してくれています
こちらもお試し下さい

Cesium

http://cesiumjs.org/

Cesium

2D,3Dのバーチャル地球儀を作成するJavaScriptライブラリです
WebGLを使用しています
cesiumをリンクして
viewerを作成、カメラ位置を移動します 
						
var viewer = new Cesium.Viewer('cesiumContainer');
viewer.scene.camera.flyTo({
	destination : new Cesium.Cartesian3.fromDegrees(141.024902, 42.359777, 10000.0)
});
データを読み込みましょう 

var dataSource = new Cesium.GeoJsonDataSource();
dataSource.load('./aed.geojson');
viewer.dataSources.add(dataSource);
DEMO
国土地理院の地図に変更しよう 

var viewer = new Cesium.Viewer('cesiumContainer', {
	imageryProvider: new Cesium.OpenStreetMapImageryProvider({
		url: 'http://cyberjapandata.gsi.go.jp/xyz/std/',
		credit: new Cesium.Credit('地理院タイル', '', 'http://maps.gsi.go.jp/development/ichiran.html')
	}),
	baseLayerPicker: false
});
DEMO
地形データを読み込もう 

var terrainProvider = new Cesium.CesiumTerrainProvider({
	url : '//assets.agi.com/stk-terrain/world',
	requestVertexNormals: true
});
viewer.terrainProvider = terrainProvider;
viewer.scene.globe.enableLighting = true;
DEMO
3Dモデルを配置できます 

var scene = viewer.scene;
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
	Cesium.Cartesian3.fromDegrees(141.024902, 42.359777, 0.0)
);
var model = scene.primitives.add(
	Cesium.Model.fromGltf({
		url : './CesiumMilkTruck.gltf',
		modelMatrix : modelMatrix,
		scale : 200.0
	})
);
DEMO
DEMOをチェックしてみてください http://cesiumjs.org/demos.html

OSGeo.JP

OSGeo財団（The Open Source Geospatial Foundation）は、高品質のオープンソース地理空間ソフトウェアの支援と構築のために設立されました。
この財団の目的は、コミュニティーが先導し て、オープンソースプロジェクトの利用と開発を促進することです。OSGeo財団の日本における公式の支部が「OSGeo財団日本支部 （OSGeo.JP）」です。

OSGeo.JPの活動

大きな活動としては年3回カンファレンスを開催しています
間近だと大阪で11/21(土)
  • FOSS4G Hokkaido 6-7月頃
  • FOSS4G Tokyo 11月頃
  • FOSS4G Osaka 11月頃
地理空間情報面白そうと思った方は手にとってみてください
今日扱わなかった、面倒くさいところのお話になります