Suche senden
Hochladen
Leaflet初級編 - Web地図サイトを構築してみよう-
•
Als PPTX, PDF herunterladen
•
7 gefällt mir
•
7,195 views
Yasunori Kirimoto
Folgen
FOSS4G 2016 TOKYO ハンズオンデイ 発表資料
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 102
Jetzt herunterladen
Empfohlen
Git超入門_座学編.pdf
Git超入門_座学編.pdf
憲昭 村田
実行統計による実践的SQLチューニング
実行統計による実践的SQLチューニング
健一 三原
大規模ソーシャルゲームを支える技術~PHP+MySQLを使った高負荷対策~
大規模ソーシャルゲームを支える技術~PHP+MySQLを使った高負荷対策~
infinite_loop
DynamoDBによるソーシャルゲーム実装 How To
DynamoDBによるソーシャルゲーム実装 How To
伊藤 祐策
オープンデータとオープンソースGisを用いたweb上でのインタラクティブ可視化手法について
オープンデータとオープンソースGisを用いたweb上でのインタラクティブ可視化手法について
Ryousuke Wayama
FINAL FANTASY XVにおけるPhoton利用事例 - Photon運営事務局 GTMF 2018 OSAKA / TOKYO
FINAL FANTASY XVにおけるPhoton利用事例 - Photon運営事務局 GTMF 2018 OSAKA / TOKYO
Game Tools & Middleware Forum
第15回 Solr勉強会 #SolrJP Amazon CloudSearch Deep Dive
第15回 Solr勉強会 #SolrJP Amazon CloudSearch Deep Dive
Amazon Web Services Japan
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
Empfohlen
Git超入門_座学編.pdf
Git超入門_座学編.pdf
憲昭 村田
実行統計による実践的SQLチューニング
実行統計による実践的SQLチューニング
健一 三原
大規模ソーシャルゲームを支える技術~PHP+MySQLを使った高負荷対策~
大規模ソーシャルゲームを支える技術~PHP+MySQLを使った高負荷対策~
infinite_loop
DynamoDBによるソーシャルゲーム実装 How To
DynamoDBによるソーシャルゲーム実装 How To
伊藤 祐策
オープンデータとオープンソースGisを用いたweb上でのインタラクティブ可視化手法について
オープンデータとオープンソースGisを用いたweb上でのインタラクティブ可視化手法について
Ryousuke Wayama
FINAL FANTASY XVにおけるPhoton利用事例 - Photon運営事務局 GTMF 2018 OSAKA / TOKYO
FINAL FANTASY XVにおけるPhoton利用事例 - Photon運営事務局 GTMF 2018 OSAKA / TOKYO
Game Tools & Middleware Forum
第15回 Solr勉強会 #SolrJP Amazon CloudSearch Deep Dive
第15回 Solr勉強会 #SolrJP Amazon CloudSearch Deep Dive
Amazon Web Services Japan
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
Spring Bootをはじめる時にやるべき10のこと
Spring Bootをはじめる時にやるべき10のこと
心 谷本
Re: ご注文は自動化ですか?[2]
Re: ご注文は自動化ですか?[2]
Masahito Zembutsu
Leaflet.js超入門
Leaflet.js超入門
Takahiro Kamada
디자인 시스템 디자인하기
디자인 시스템 디자인하기
sangyong lee
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
infinite_loop
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
ssuser070fa9
自宅で出来る!ゲームサーバの作り方
自宅で出来る!ゲームサーバの作り方
光晶 上原
react-scriptsはwebpackで何をしているのか
react-scriptsはwebpackで何をしているのか
暁 三宅
リアルタイムなゲームの開発でコンテナを使ってみたら簡単便利で激安だったのでオススメしたい
リアルタイムなゲームの開発でコンテナを使ってみたら簡単便利で激安だったのでオススメしたい
YutoNishine
20150530 めとべや東京 Reactive Property + Livetで作るWPFアプリ
20150530 めとべや東京 Reactive Property + Livetで作るWPFアプリ
Takayoshi Tanaka
PostgreSQLの実行計画を読み解こう(OSC2015 Spring/Tokyo)
PostgreSQLの実行計画を読み解こう(OSC2015 Spring/Tokyo)
Satoshi Yamada
ハードコア デバッギング : サポート直伝! Windows カーネルモード デバッグ活用編!!
ハードコア デバッギング : サポート直伝! Windows カーネルモード デバッグ活用編!!
TAKUYA OHTA
年の瀬!リアルタイム通信ゲームサーバ勉強会
年の瀬!リアルタイム通信ゲームサーバ勉強会
monobit
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
土岐 孝平
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
Teruchika Yamada
이번 생에 디자인 시스템은 처음이라
이번 생에 디자인 시스템은 처음이라
NAVER Engineering
Unityではじめるオープンワールド制作 エンジニア編
Unityではじめるオープンワールド制作 エンジニア編
Unity Technologies Japan K.K.
WebGISをはじめてみる
WebGISをはじめてみる
Yasunori Kirimoto
이무림, Enum의 Boxing을 어찌할꼬? 편리하고 성능좋게 Enum 사용하기, NDC2019
이무림, Enum의 Boxing을 어찌할꼬? 편리하고 성능좋게 Enum 사용하기, NDC2019
devCAT Studio, NEXON
Gstreamer Basics
Gstreamer Basics
Seiji Hiraki
Leaflet初級編 - Web地図サイトを構築してみよう-
Leaflet初級編 - Web地図サイトを構築してみよう-
Yasunori Kirimoto
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
Weitere ähnliche Inhalte
Was ist angesagt?
Spring Bootをはじめる時にやるべき10のこと
Spring Bootをはじめる時にやるべき10のこと
心 谷本
Re: ご注文は自動化ですか?[2]
Re: ご注文は自動化ですか?[2]
Masahito Zembutsu
Leaflet.js超入門
Leaflet.js超入門
Takahiro Kamada
디자인 시스템 디자인하기
디자인 시스템 디자인하기
sangyong lee
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
infinite_loop
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
ssuser070fa9
自宅で出来る!ゲームサーバの作り方
自宅で出来る!ゲームサーバの作り方
光晶 上原
react-scriptsはwebpackで何をしているのか
react-scriptsはwebpackで何をしているのか
暁 三宅
リアルタイムなゲームの開発でコンテナを使ってみたら簡単便利で激安だったのでオススメしたい
リアルタイムなゲームの開発でコンテナを使ってみたら簡単便利で激安だったのでオススメしたい
YutoNishine
20150530 めとべや東京 Reactive Property + Livetで作るWPFアプリ
20150530 めとべや東京 Reactive Property + Livetで作るWPFアプリ
Takayoshi Tanaka
PostgreSQLの実行計画を読み解こう(OSC2015 Spring/Tokyo)
PostgreSQLの実行計画を読み解こう(OSC2015 Spring/Tokyo)
Satoshi Yamada
ハードコア デバッギング : サポート直伝! Windows カーネルモード デバッグ活用編!!
ハードコア デバッギング : サポート直伝! Windows カーネルモード デバッグ活用編!!
TAKUYA OHTA
年の瀬!リアルタイム通信ゲームサーバ勉強会
年の瀬!リアルタイム通信ゲームサーバ勉強会
monobit
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
土岐 孝平
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
Teruchika Yamada
이번 생에 디자인 시스템은 처음이라
이번 생에 디자인 시스템은 처음이라
NAVER Engineering
Unityではじめるオープンワールド制作 エンジニア編
Unityではじめるオープンワールド制作 エンジニア編
Unity Technologies Japan K.K.
WebGISをはじめてみる
WebGISをはじめてみる
Yasunori Kirimoto
이무림, Enum의 Boxing을 어찌할꼬? 편리하고 성능좋게 Enum 사용하기, NDC2019
이무림, Enum의 Boxing을 어찌할꼬? 편리하고 성능좋게 Enum 사용하기, NDC2019
devCAT Studio, NEXON
Gstreamer Basics
Gstreamer Basics
Seiji Hiraki
Was ist angesagt?
(20)
Spring Bootをはじめる時にやるべき10のこと
Spring Bootをはじめる時にやるべき10のこと
Re: ご注文は自動化ですか?[2]
Re: ご注文は自動化ですか?[2]
Leaflet.js超入門
Leaflet.js超入門
디자인 시스템 디자인하기
디자인 시스템 디자인하기
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
自宅で出来る!ゲームサーバの作り方
自宅で出来る!ゲームサーバの作り方
react-scriptsはwebpackで何をしているのか
react-scriptsはwebpackで何をしているのか
リアルタイムなゲームの開発でコンテナを使ってみたら簡単便利で激安だったのでオススメしたい
リアルタイムなゲームの開発でコンテナを使ってみたら簡単便利で激安だったのでオススメしたい
20150530 めとべや東京 Reactive Property + Livetで作るWPFアプリ
20150530 めとべや東京 Reactive Property + Livetで作るWPFアプリ
PostgreSQLの実行計画を読み解こう(OSC2015 Spring/Tokyo)
PostgreSQLの実行計画を読み解こう(OSC2015 Spring/Tokyo)
ハードコア デバッギング : サポート直伝! Windows カーネルモード デバッグ活用編!!
ハードコア デバッギング : サポート直伝! Windows カーネルモード デバッグ活用編!!
年の瀬!リアルタイム通信ゲームサーバ勉強会
年の瀬!リアルタイム通信ゲームサーバ勉強会
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
이번 생에 디자인 시스템은 처음이라
이번 생에 디자인 시스템은 처음이라
Unityではじめるオープンワールド制作 エンジニア編
Unityではじめるオープンワールド制作 エンジニア編
WebGISをはじめてみる
WebGISをはじめてみる
이무림, Enum의 Boxing을 어찌할꼬? 편리하고 성능좋게 Enum 사용하기, NDC2019
이무림, Enum의 Boxing을 어찌할꼬? 편리하고 성능좋게 Enum 사용하기, NDC2019
Gstreamer Basics
Gstreamer Basics
Ähnlich wie Leaflet初級編 - Web地図サイトを構築してみよう-
Leaflet初級編 - Web地図サイトを構築してみよう-
Leaflet初級編 - Web地図サイトを構築してみよう-
Yasunori Kirimoto
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
LeafletでWebGIS入門
LeafletでWebGIS入門
Yasunori Kirimoto
Arctic.js
Arctic.js
chikathreesix
Develop Web Application with Node.js + Express
Develop Web Application with Node.js + Express
Akinari Tsugo
History api
History api
Takami Kazuya
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
Yukihiro Kitazawa
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
Spring data-rest-and-spring-cloud-contract
Spring data-rest-and-spring-cloud-contract
Takeshi Ogawa
HTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
5分でわかったつもりになるParse.com
5分でわかったつもりになるParse.com
Kenta Tsuji
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
Kohei Kadowaki
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
Yosuke Onoue
FOSS4Gを利用したWebでの地理空間情報公開入門
FOSS4Gを利用したWebでの地理空間情報公開入門
Kosuke Asahi
イマドキの現場で使えるJavaライブラリ事情
イマドキの現場で使えるJavaライブラリ事情
takezoe
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
Kazunari Hara
Chrome Extensionsの基本とデザインパターン
Chrome Extensionsの基本とデザインパターン
Yoichiro Tanaka
Tokyo r 25_lt_isobe
Tokyo r 25_lt_isobe
Masayuki Isobe
Jqm20120210
Jqm20120210
cmtomoda
Ähnlich wie Leaflet初級編 - Web地図サイトを構築してみよう-
(20)
Leaflet初級編 - Web地図サイトを構築してみよう-
Leaflet初級編 - Web地図サイトを構築してみよう-
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
LeafletでWebGIS入門
LeafletでWebGIS入門
Arctic.js
Arctic.js
Develop Web Application with Node.js + Express
Develop Web Application with Node.js + Express
History api
History api
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
Spring data-rest-and-spring-cloud-contract
Spring data-rest-and-spring-cloud-contract
HTML5 on ASP.NET
HTML5 on ASP.NET
5分でわかったつもりになるParse.com
5分でわかったつもりになるParse.com
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
AngularJSとD3.jsによるインタラクティブデータビジュアライゼーション
FOSS4Gを利用したWebでの地理空間情報公開入門
FOSS4Gを利用したWebでの地理空間情報公開入門
イマドキの現場で使えるJavaライブラリ事情
イマドキの現場で使えるJavaライブラリ事情
jQuery Mobileの基礎
jQuery Mobileの基礎
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
Chrome Extensionsの基本とデザインパターン
Chrome Extensionsの基本とデザインパターン
Tokyo r 25_lt_isobe
Tokyo r 25_lt_isobe
Jqm20120210
Jqm20120210
Kürzlich hochgeladen
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
Kürzlich hochgeladen
(9)
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
Leaflet初級編 - Web地図サイトを構築してみよう-
1.
Leaflet 初級編 MIERUNE, LLC.
/ Yasunori Kirimoto 2016.11.04 FOSS4G 2016 TOKYO ハンズオン - Web地図サイトを構築してみよう-
2.
MIERUNE, LLC. Yasunori Kirimoto
3.
4.
Contents はじめに ハンズオン その他事例
5.
Introduction はじめに
6.
事前準備できてますか?? http://bit.ly/leaflet161104
7.
HTML CSS JS Web
Technology
8.
JavaScript Library
9.
OpenLayers 3
10.
CESIUM
11.
D3.js
12.
Leaflet
13.
Web Service
14.
CARTO
15.
Mapbox
16.
Hands On ハンズオン
17.
完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
18.
demodemo
19.
完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
20.
index.html stylesheet.css script.js HTML CSS JS
21.
フォルダ構成
22.
<!DOCTYPE html> <html lang="ja"> <head> <meta
charset="UTF-8"> <title>Leaflet Sample</title> <!-- Leafletライブラリ読み込み --> <script src="./library/leaflet-0.7.3/leaflet.js"></script> <link href="./library/leaflet-0.7.3/leaflet.css" rel="stylesheet" /> <!-- CSS読み込み --> <link href="./css/stylesheet.css" rel="stylesheet" /> </head> <body> <!-- Map読み込み --> <div id="map"></div> <!-- JS読み込み --> <script src="./js/script.js"></script> </body> </html> HTML
23.
html, body { height:
100%; padding: 0; margin: 0; } #map { z-index: 0; height: 100%; } CSS
24.
完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
25.
OpenStreetMap
26.
27.
var map =
L.map('map'); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); map.setView([35.680899409847584, 139.76712226867676], 16); JS
28.
地理院地図
29.
30.
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', { attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>" }).addTo(map); JS
31.
32.
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', { attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>" }).addTo(map); JS
33.
MIERUNE地図
34.
35.
L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', { attribution: "Maptiles
by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL." }).addTo(map); JS
36.
完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
37.
レイヤ統合
38.
var t_pale =
new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', { attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>" }); var t_ort = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', { attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>" }); var o_std = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }); var m_mono = new L.tileLayer('https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png', { attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL." }); JS
39.
var lat =
35.680899409847584; var lng = 139.76712226867676; var map = L.map('map', { center: [lat, lng], zoom: 15, maxZoom: 18, zoomControl: true, layers: [m_mono] }); var Map_BaseLayer = { "地理院地図 淡色": t_pale, "地理院地図 オルソ": t_ort, "OpenStreetMap 標準": o_std, "MIERUNE地図 MONO": m_mono }; L.control.layers( Map_BaseLayer, null ).addTo(map); JS
40.
レイヤ表示ON
41.
L.control.layers( Map_BaseLayer, null, {collapsed:false} ).addTo(map); JS
42.
スケール
43.
L.control.scale({ imperial: false, maxWidth: 300 }).addTo(map); JS
44.
ズームバー
45.
var map =
L.map('map', { center: [lat, lng], zoom: 15, maxZoom: 18, zoomControl: false, layers: [m_mono] }); JS
46.
完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
47.
マーカー
48.
var Map_Point =
L.marker( [35.68089940984, 139.7671222686] ).addTo(map); var comment = '東京駅だよ!!'; Map_Point.bindPopup(comment); JS
49.
var IconPin01 =
L.icon({ iconUrl: "./img/pin01.png", iconSize: [25, 25], iconAnchor: [0, 25], popupAnchor: [0, -35] }); var Map_Point = L.marker( [35.68089940984, 139.7671222686], { icon: IconPin01 } ).addTo(map); JS
50.
ライン
51.
var Map_Line =
L.polyline([ [35.67500798914924,139.75952625274658], [35.67845922918971,139.76094245910645], [35.689369743530044,139.76420402526855] ],{ "color": "#2DE9C4", "weight": 5, "opacity": 0.6 }).addTo(map); JS
52.
ポリゴン
53.
var Map_Polygon =
L.polygon([ [35.675949251235025,139.76617813110352], [35.67410157813001,139.77188587188718], [35.67455478492641,139.77227210998535], [35.683757812281115,139.77862358093262], [35.68431553740134,139.77343082427979], [35.68469897115985,139.77094173431396], [35.679923346539084,139.76871013641357], [35.675949251235025,139.76617813110352] ],{ "color": "#E92D63", "weight": 3, "opacity": 0.8, "fillColor": "#562DE9", "fillOpacity": 0.4 }).addTo(map); JS
54.
オーバーレイヤ
55.
var Map_AddLayer =
{ "Point": Map_Point, "Line": Map_Line, "Polygon": Map_Polygon }; L.control.layers( Map_BaseLayer, Map_AddLayer, {collapsed:false} ).addTo(map); JS
56.
完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
57.
データ準備
58.
地理空間データ作成 : geojson.io
59.
オープンデータ
60.
国土数値情報(都市公園データ)を使用 QGIS : Shp
→ GeoJSON 変換
61.
表示
62.
var sampledata =
{ "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
63.
<script src="./vecter/map.geojson"></script> HTML
64.
var GeoJsonSample =
L.geoJson(sampledata).addTo(map); JS
65.
アレンジ
66.
<script src="./vecter/point.geojson"></script> HTML
67.
var lat =
42.333174; var lng = 141.004646; var IconPin02 = L.icon({ iconUrl: "./img/pin02.png", iconSize: [25, 25], iconAnchor: [15, 20], popupAnchor: [-5, -30] }); var PointAll = L.layerGroup().addTo(map); var PointGeojson = L.geoJson(pointdata, { onEachFeature: function (feature, layer) { var field ="目標地点: " + feature.properties.OBJECTID; layer.bindPopup(field); }, pointToLayer: function (feature, layer) { if (feature.properties.OBJECTID > 25) { return L.marker(layer, { icon: IconPin01 }); }else if (feature.properties.OBJECTID <= 25) { return L.marker(layer, { icon: IconPin02 }); } } }).addTo(PointAll); JS
68.
var Map_AddLayer =
{ "目標地点": PointAll }; L.control.layers( Map_BaseLayer, Map_AddLayer, {collapsed:false} ).addTo(map); JS
69.
<script src="./vecter/line.geojson"></script> HTML
70.
var LineAll =
L.layerGroup().addTo(map); var line_geojson = L.geoJson(linedata, { style: { "color": "#58BE89", "weight": 3, "opacity": 0.7, "dashArray":[10, 5] }, onEachFeature: function (feature, layer) { var field ="距離(m): " + feature.properties.Shape_len; layer.bindPopup(field); }, clickable: true }).addTo(LineAll); var Map_AddLayer = { "目標地点": PointAll, "避難経路": LineAll }; JS
71.
<script src="./vecter/polygon.geojson"></script> HTML
72.
var PolygonAll =
L.layerGroup().addTo(map); var PolygonGeojson = L.geoJson(polygondata, { style: function(feature) { if (feature.properties.MEANmax_ < 2) { return { "color": "#90D6E5", "weight": 0.5, "fill": true, "fillColor":"#90D6E5", "fillOpacity":0.4 }; }else if (feature.properties.MEANmax_ >= 2 && feature.properties.MEANmax_ < 4) { return { "color": "#2A5CAA", "weight": 0.5, "fill": true, "fillColor":"#2A5CAA", "fillOpacity":0.4 }; }else if (feature.properties.MEANmax_ >= 4 && feature.properties.MEANmax_ < 6) { return { "color": "#F4EE4F", "weight": 0.5, "fill": true, "fillColor":"#F4EE4F", "fillOpacity":0.6 }; }else if (feature.properties.MEANmax_ >= 6 && feature.properties.MEANmax_ < 8) { JS
73.
var Map_AddLayer =
{ "目標地点": PointAll, "避難経路": LineAll, "津波区域": PolygonAll }; JS
74.
完成イメージ 基本構成 背景地図 コントロール オブジェクト GeoJSON プラグイン
75.
©OpenStreetMap contributors Leaflet LocateControl
76.
<script src="./plugin/leaflet-locatecontrol/L.Control.Locate.min.js"></script> <link href="./plugin/leaflet-locatecontrol/L.Control.Locate.min.css" rel="stylesheet"/> <link
href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" > HTML
77.
L.control.locate().addTo(map); JS
78.
©OpenStreetMap contributors Leaflet Label
79.
<script src="./plugin/leaflet-label/leaflet.label.js"></script> <link href="./plugin/leaflet-label/leaflet.label.css"
rel="stylesheet"/> HTML
80.
onEachFeature: function (feature,
layer) { var field ="浸水深さ(m): " + feature.properties.MEANmax_; layer.bindLabel(field); } JS
81.
Other Cases その他事例
82.
その他のプラグイン
83.
©OpenStreetMap contributors Leaflet Draw
84.
©OpenStreetMap contributors Leaflet MeasureControl
85.
©OpenStreetMap contributors Leaflet Minimap
86.
©OpenStreetMap contributors Leaflet Routing
Machine
87.
ハイブリッドアプリ
88.
CORDOVA
89.
PhoneGap
90.
Monaca
91.
使い方
92.
新規プロジェクトの作成
93.
プロジェクト選択
94.
ファイルをインポート
95.
プレビュー機能・実機検証
96.
QMetaTiles プラグイン
97.
CARTO,Mapboxと連携
98.
みんなの公園マップ - 札幌版
-
99.
Leaflet
100.
CARTO
101.
Mapbox
102.
おつかれさまでした!
Jetzt herunterladen