はじめてみよう地図を使ったデータビジュアライゼーション入門～ FOSS4Gとオープンデータで可視化した地図を公開～

はじめてみよう地図を使った
データビジュアライゼーション入門
～ FOSS4Gとオープンデータで
可視化した地図を公開～
Yasunori Kirimoto
2016.06.18
OSC 2016 Hokkaido

今日の目次
① FOSS4Gとは？
② Webで地図を公開してみる
③ OSGeo財団日本支部とは？

Free Open Source Software for GeoSpatial
オープンソースの地理情報ソフトウェア(GIS)

地理空間情報を扱う技術

位置情報 + 属性
国土地理院基盤地図情報を使用

Webで地図を公開してみる

Web地図(WebGIS)って聞いて
何を思い浮かべますか？？

WebGISをもっとも浸透させたコンテンツ
Google Maps

自由度が高いWebGISを構築するには？

SapporoLiveMap
sapporolivemap.day-journal.com
みんなの公園マップ - 札幌版 -
sapporoparkmap.day-journal.com

index.html
stylesheet.css
script.js
HTML
CSS
JS

Webサービスもあります！！

基本構成
背景地図
マーカー
GeoJSON

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Leaflet Sample</title>
<script src="./Library/leaflet-0.7.5/leaflet.js”></script>
<link href=“./Library/leaflet-0.7.5/leaflet.css"
rel="stylesheet" />
<link href="./css/stylesheet.css" rel="stylesheet" />
</head>
<body>
<div id="map"></div>
<script src="./js/script.js"></script>
</body>
</html>
HTML
ライブラリの参照設定

<!DOCTYPE html>
<html lang="ja">
<head>
<script src="http://cdn.leafletjs.com/leaflet-
0.7.5/leaflet.js"></script>
<link rel="stylesheet“ href="http://cdn.leafletjs.com/
leaflet-0.7.5/leaflet.css" />
</head>
<body>
</body>
</html>
HTML
ライブラリの参照設定

html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
z-index: 0;
height: 100%;
}
CSS

var Map_Marker = L.marker([43.0559815, 141.3857792])
.addTo(map);
var comment = 'Inter x cross Creative Center';
Map_Marker.bindPopup(comment).openPopup();
JS
マーカーの表示
ポップアップの表示

・データを作成
・オープンデータを利用

var pointdata = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name":
"urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "P13_003":
"北6条エルムの里公園" }, "geometry": { "type": "Point",
"coordinates": [ 141.34308642, 43.0666937 ] } },
"宮部記念緑地" }, "geometry": { "type": "Point",
"coordinates": [ 141.33550164, 43.0666937 ] } },
"偕楽園緑地" }, "geometry": { "type": "Point",
"coordinates": [ 141.34429626, 43.06828667 ] } },
"八軒コスモス公園" }, "geometry": { "type": "Point",
"coordinates": [ 141.32328053000001, 43.08470141 ] } }
]
};
GeoJSON

<!DOCTYPE html>
<html lang="ja">
<head>
<script src="./Library/leaflet-0.7.5/leaflet.js”></script>
<link href=“./Library/leaflet-0.7.5/leaflet.css" rel="stylesheet" />
<script src="./files/sample.geojson"></script>
</head>
<body>
</body>
</html>
HTML

国土数値情報（都市公園データ）を使用

OSGeo財団日本支部とは？

OSGeo財団
2006年設立
オープンなジオを応援する組織
多数のプロジェクト

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

FOSS4G Tokyo/Osaka
- フリー＆オープンソースGISの祭典 –
2008年よりスタート
空間情報技術の情報交換の場
2016年は10月頃開催！？

FOSS4G Hokkaido
2012年から北海道でも地域カンファレ
ンスを開催しています
2015の様子

2016年は
7/8(金) 9:00～
ハンズオンデイ＠札幌市産業振興センター
FOSS4Gツールを実際に操作しながら学べる、
ハンズオン(体験学習)
7/9(土) 10:00～
コアデイ@ ICC Cross x Garden
基調講演、事例発表、懇親会( + LT )

はじめてみよう地図を使ったデータビジュアライゼーション入門～ FOSS4Gとオープンデータで可視化した地図を公開～

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (19)

Similar a はじめてみよう地図を使ったデータビジュアライゼーション入門～ FOSS4Gとオープンデータで可視化した地図を公開～

Similar a はじめてみよう地図を使ったデータビジュアライゼーション入門～ FOSS4Gとオープンデータで可視化した地図を公開～ (20)

Último

Último (9)