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

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

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

FOSS4Gとは？

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

そもそもGISって？

地理空間情報を扱う技術

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

ディスクトップ

フロントエンド

バックエンド

データベース

Webで地図を公開してみる

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

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

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

FOSS4Gを使おう！！

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 ライブラリの参照設定

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 ライブラリの参照設定

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

OpenStreetMap

地理院地図

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

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

geojson.io

国土数値情報

GeoJSON 表示

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

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

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

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とオープンデータで...

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

Transcript

More Decks by Yasunori Kirimoto

Other Decks in Technology

Featured

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

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