Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

WebGISをはじめてみる

Avatar for Yasunori Kirimoto Yasunori Kirimoto
October 31, 2015
Technology
280
0

 WebGISをはじめてみる

OSGeo.JP × HTML5fun 発表資料

Avatar for Yasunori Kirimoto

Yasunori Kirimoto

October 31, 2015

More Decks by Yasunori Kirimoto

See All by Yasunori Kirimoto
Meet MIERUNE
Avatar for Yasunori Kirimoto dayjournal
0
88
Amazon Location Service Plugin for QGIS: Basemaps, Geocoding, and Routing
Avatar for Yasunori Kirimoto dayjournal
0
96
Geospatialの世界最前線を探る [2025年版]
Avatar for Yasunori Kirimoto dayjournal
1
710
Geospatialの世界最前線を探る [2025年版]
Avatar for Yasunori Kirimoto dayjournal
3
840
強化されたAmazon Location Serviceによる新機能と開発者体験
Avatar for Yasunori Kirimoto dayjournal
4
1k
FOSS4Gで実現するQGIS版Amazon Location Service Plugin
Avatar for Yasunori Kirimoto dayjournal
0
1.7k
State of Open Source Web Mapping Libraries
Avatar for Yasunori Kirimoto dayjournal
0
770
AWS Heroes Map 秘伝のレシピ
Avatar for Yasunori Kirimoto dayjournal
2
440
State of Amazon Location Service
Avatar for Yasunori Kirimoto dayjournal
0
510

Other Decks in Technology

See All in Technology
ASTを使って影響範囲を特定する
Avatar for Nealle nealle
0
150
HRC_Frontend_Conference_Fukuoka_2026.pdf
Avatar for takanori sugawara ts020
0
480
多層防御と最⼩権限で実現する、安全なAIエージェント設計パターン
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
260
Where Is JetBrains AI Heading- — Central CLI, Air Alpha, and the Agentic Development Stack
Avatar for Daisuke Masuda x5gtrn
PRO
0
150
Podは生きているのにGoだけが落ちる：GOGCとGOMEMLIMITで追うInvisible OOM Killの謎
Avatar for Watanabe Takeshi(Buzz) tkc66buzz
1
510
AIで仕事のやり方を変える
Avatar for Kentaro Matsumoto matsu7874
3
1.1k
コーディングエージェントでM5Stack系の開発を少し試した時の話 / M5 Japan Tour 2026 Autumn 東京
Avatar for you（@youtoy） you
PRO
0
160
アプリログインとWeb認証基盤をつなぐ ASWebAuthenticationSession 作法
Avatar for Go Takagi shimastripe
1
190
GoCon2026 - Open Source, Open World
Avatar for sanposhiho sanposhiho
4
3.2k
アリアドネの糸と、20年ごとの建て替え ── 長尾真『電子図書館』を、伊勢で読み直す / Rereading Makoto Nagao’s "Electronic Library" in Ise
Avatar for Kiyota Yoji, Ph.D. ykiyota
0
150
TinyGo 開発サイクルを高速化する：Go で作るエミュレータ入門
Avatar for ZOZO Developers zozotech
PRO
1
620
深夜のクラウド懺悔室 1:29:300 or 1:0:0
Avatar for kazzpapa3 kazzpapa3
1
230

Featured

See All Featured
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1369
210k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.5k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.4k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.4k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
930
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
11k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
560
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.5k

Transcript

  1. WebGISをはじめてみる Yasunori Kirimoto 2015.10.31 OSGeo.JP × HTML5fun

  2. None

  3. 今日の目次 ①WebGISとは ②構築方法 ③ まとめ

  4. WebGISとは

  5. そもそもGISって？

  6. 地理空間情報を扱う技術

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

  8. じゃあWebGISって？

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

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

  11. そこで、 FOSS4G を使おう!!

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

  13. SapporoLiveMap http://sapporolivemap.day-journal.com/

  14. None

  15. 構築方法

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

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

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

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

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

  21. html, body { height: 100%; padding: 0; margin: 0; }

    #map { z-index: 0; height: 100%; } CSS

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

  23. OpenStreetMap

  24. var map = L.map('map'); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution:'&copy; <a href="http://osm.org/copyright"> OpenStreetMap</a>

    contributors'}).addTo(map); map.setView([43.0559815, 141.3857792], 16); JS

  25. 地理院地図

  26. 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
  27. None

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

  29. var Map_Marker = L.marker([43.0559815, 141.3857792]) .addTo(map); var comment = 'Inter

    x cross Creative Center'; Map_Marker.bindPopup(comment).openPopup(); JS マーカーの表示 ポップアップの表示
  30. None

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

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

  33. geojson.io

  34. 国土数値情報

  35. GeoJSON 表示

  36. 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

  37. <!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

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

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

  40. まとめ

  41. ・背景地図 ・マーカー ・GeoJSON ・全体概要