Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

FOSS4Gとは？

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

そもそもGISって？

Slide 7

Slide 7 text

地理空間情報を扱う技術

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

ディスクトップ

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

フロントエンド

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

バックエンド

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

データベース

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Webで地図を公開してみる

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

FOSS4Gを使おう！！

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

構築方法

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Leaflet Sample
HTML ライブラリの参照設定

Slide 36

Slide 36 text

Leaflet Sample
HTML ライブラリの参照設定

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

OpenStreetMap

Slide 40

Slide 40 text

var map = L.map('map'); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution:'© OpenStreetMap contributors'}).addTo(map); map.setView([43.0559815, 141.3857792], 16); JS

Slide 41

Slide 41 text

地理院地図

Slide 42

Slide 42 text

var map = L.map('map'); L.tileLayer(‘http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{ y}.png', { attribution: "国土地理院" }).addTo(map); map.setView([43.0559815, 141.3857792], 16); JS

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

geojson.io

Slide 50

Slide 50 text

国土数値情報

Slide 51

Slide 51 text

GeoJSON 表示

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Leaflet Sample
HTML

Slide 54

Slide 54 text

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の表示 アイコンと属性値の反映 マーカーアイコンを設定

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

OSGeo財団日本支部とは？

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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