![Page 1: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/1.jpg)
はじめてみよう地図を使った データビジュアライゼーション入門 ~ FOSS4G とオープンデータで 可視化した地図を公開 ~
Yasunori Kirimoto2016.06.18OSC 2016 Hokkaido
![Page 2: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/2.jpg)
![Page 3: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/3.jpg)
今日の目次
① FOSS4G とは?
② Web で地図を公開してみる
③ OSGeo 財団日本支部とは?
![Page 4: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/4.jpg)
FOSS4G とは?
![Page 5: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/5.jpg)
Free Open Source Software for GeoSpatial
オープンソースの地理情報ソフトウェア (GIS)
![Page 6: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/6.jpg)
そもそも GIS って?
![Page 7: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/7.jpg)
地理空間情報を扱う技術
![Page 8: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/8.jpg)
位置情報 + 属性
国土地理院 基盤地図情報を使用
![Page 9: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/9.jpg)
ディスクトップ
![Page 10: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/10.jpg)
![Page 11: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/11.jpg)
フロントエンド
![Page 12: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/12.jpg)
![Page 13: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/13.jpg)
![Page 14: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/14.jpg)
![Page 15: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/15.jpg)
![Page 16: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/16.jpg)
バックエンド
![Page 17: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/17.jpg)
![Page 18: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/18.jpg)
![Page 19: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/19.jpg)
データベース
![Page 20: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/20.jpg)
![Page 21: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/21.jpg)
![Page 22: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/22.jpg)
Web で地図を公開してみる
![Page 23: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/23.jpg)
Web 地図 (WebGIS) って聞いて何を思い浮かべますか??
![Page 24: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/24.jpg)
WebGIS をもっとも浸透させたコンテンツ
Google Maps
![Page 25: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/25.jpg)
自由度が高い WebGIS を構築するには?
![Page 26: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/26.jpg)
FOSS4G を使おう!!
![Page 27: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/27.jpg)
SapporoLiveMapsapporolivemap.day-journal.com
みんなの公園マップ - 札幌版 -
sapporoparkmap.day-journal.com
![Page 28: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/28.jpg)
index.html
stylesheet.css
script.js
HTML
CSS
JS
![Page 29: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/29.jpg)
Web サービスもあります!!
![Page 30: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/30.jpg)
![Page 31: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/31.jpg)
![Page 32: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/32.jpg)
構築方法
![Page 33: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/33.jpg)
基本構成
背景地図
マーカー
GeoJSON
![Page 34: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/34.jpg)
基本構成
背景地図
マーカー
GeoJSON
![Page 35: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/35.jpg)
<!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
ライブラリの参照設定
![Page 36: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/36.jpg)
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Leaflet Sample</title>
<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" /> <link href="./css/stylesheet.css" rel="stylesheet" />
</head>
<body>
<div id="map"></div>
<script src="./js/script.js"></script>
</body></html>
HTML
ライブラリの参照設定
![Page 37: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/37.jpg)
html, body { height: 100%; padding: 0; margin: 0; }
#map { z-index: 0; height: 100%; }
CSS
![Page 38: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/38.jpg)
基本構成
背景地図
マーカー
GeoJSON
![Page 39: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/39.jpg)
OpenStreetMap
![Page 40: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/40.jpg)
var map = L.map('map');
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution:'© <a href="http://osm.org/copyright"> OpenStreetMap</a> contributors'}).addTo(map);
map.setView([43.0559815, 141.3857792], 16);
JS
![Page 41: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/41.jpg)
地理院地図
![Page 42: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/42.jpg)
var map = L.map('map');
L.tileLayer(‘http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{ y}.png', { attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/ kikakuchousei40182.html' target='_blank'> 国土地理院 </a>" }).addTo(map);
map.setView([43.0559815, 141.3857792], 16);
JS
![Page 43: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/43.jpg)
![Page 44: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/44.jpg)
基本構成
背景地図
マーカー
GeoJSON
![Page 45: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/45.jpg)
var Map_Marker = L.marker([43.0559815, 141.3857792]) .addTo(map);
var comment = 'Inter x cross Creative Center';Map_Marker.bindPopup(comment).openPopup();
JS
マーカーの表示
ポップアップの表示
![Page 46: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/46.jpg)
![Page 47: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/47.jpg)
基本構成
背景地図
マーカー
GeoJSON
![Page 48: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/48.jpg)
・データを作成・オープンデータを利用
![Page 49: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/49.jpg)
geojson.io
![Page 50: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/50.jpg)
国土数値情報
![Page 51: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/51.jpg)
GeoJSON 表示
![Page 52: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/52.jpg)
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 ] } },{ "type": "Feature", "properties": { "P13_003": " 宮部記念緑地 " }, "geometry": { "type": "Point", "coordinates": [ 141.33550164, 43.0666937 ] } },{ "type": "Feature", "properties": { "P13_003": " 偕楽園緑地 " }, "geometry": { "type": "Point", "coordinates": [ 141.34429626, 43.06828667 ] } },{ "type": "Feature", "properties": { "P13_003": " 八軒コスモス公園 " }, "geometry": { "type": "Point", "coordinates": [ 141.32328053000001, 43.08470141 ] } }]};
GeoJSON
![Page 53: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/53.jpg)
<!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" />
<script src="./files/sample.geojson"></script> <link href="./css/stylesheet.css" rel="stylesheet" />
</head><body>
<div id="map"></div>
<script src="./js/script.js"></script>
</body></html>
HTML
![Page 54: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/54.jpg)
var ParkIcon = L.icon({ iconUrl: './img/Park.png', iconSize: [50, 50], iconAnchor: [25, 20], popupAnchor: [0, -30]});
var Map_GeoJSON = L.geoJson(pointdata, {
pointToLayer: function (feature, layer) { return L.marker(layer, { icon: ParkIcon }); }, onEachFeature: function (feature, layer) { layer.bindPopup(feature.properties.P13_003); }}).addTo(map);
JS
GeoJSON の表示
アイコンと属性値の反映
マーカーアイコンを設定
![Page 55: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/55.jpg)
国土数値情報(都市公園データ)を使用
![Page 56: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/56.jpg)
OSGeo 財団日本支部とは?
![Page 57: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/57.jpg)
OSGeo 財団2006 年設立オープンなジオを応援する組織多数のプロジェクト
![Page 58: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/58.jpg)
OSGeo 財団日本支部高品質のオープンソース地理空間ソフトウェアの支援と構築のために設立されました。この財団の目的は、コミュニティーが先導して、オープンソースプロジェクトの利用と開発を促進することです。
OSGeo 財団の日本における公式の支部が「 OSGeo 財団日本支部 (OSGeo.JP) 」です。
![Page 59: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/59.jpg)
FOSS4G Tokyo/Osaka- フリー&オープンソース GIS の祭典 –
2008 年よりスタート空間情報技術の情報交換の場
2016 年は 10 月頃開催!?
![Page 60: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/60.jpg)
FOSS4G Hokkaido2012 年から北海道でも地域カンファレンスを開催しています
2015 の様子
![Page 61: はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~](https://reader036.vdocuments.mx/reader036/viewer/2022081507/588314041a28ab31068b5ef5/html5/thumbnails/61.jpg)
2016 年は
7/8( 金 ) 9:00 ~ハンズオンデイ@札幌市産業振興センター FOSS4G ツールを実際に操作しながら学べる、ハンズオン ( 体験学習 )
7/9( 土 ) 10:00 ~コアデイ @ ICC Cross x Garden 基調講演、事例発表、懇親会 ( + LT )