Submit Search
Upload
Leaflet初級編 - Web地図サイトを構築してみよう-
•
Download as PPTX, PDF
•
7 likes
•
7,193 views
Yasunori Kirimoto
Follow
FOSS4G 2016 TOKYO ハンズオンデイ 発表資料
Read less
Read more
Technology
Report
Share
Report
Share
1 of 102
Download now
Recommended
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
土岐 孝平
RLSを用いたマルチテナント実装 for Django
RLSを用いたマルチテナント実装 for Django
Takayuki Shimizukawa
JavaScript GIS ライブラリ turf.js 入門
JavaScript GIS ライブラリ turf.js 入門
Takahiro Kamada
Spring Framework ふりかえりと4.3新機能
Spring Framework ふりかえりと4.3新機能
kimulla
マイクロサービス化設計入門 - AWS Dev Day Tokyo 2017
マイクロサービス化設計入門 - AWS Dev Day Tokyo 2017
Yusuke Suzuki
組織の問題も解決するアーキテクチャ BackendsForFrontends
組織の問題も解決するアーキテクチャ BackendsForFrontends
PIXTA Inc.
ある工場のRedmine +(Plus)
ある工場のRedmine +(Plus)
Kohei Nakamura
マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜
Yoshiki Nakagawa
Recommended
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
土岐 孝平
RLSを用いたマルチテナント実装 for Django
RLSを用いたマルチテナント実装 for Django
Takayuki Shimizukawa
JavaScript GIS ライブラリ turf.js 入門
JavaScript GIS ライブラリ turf.js 入門
Takahiro Kamada
Spring Framework ふりかえりと4.3新機能
Spring Framework ふりかえりと4.3新機能
kimulla
マイクロサービス化設計入門 - AWS Dev Day Tokyo 2017
マイクロサービス化設計入門 - AWS Dev Day Tokyo 2017
Yusuke Suzuki
組織の問題も解決するアーキテクチャ BackendsForFrontends
組織の問題も解決するアーキテクチャ BackendsForFrontends
PIXTA Inc.
ある工場のRedmine +(Plus)
ある工場のRedmine +(Plus)
Kohei Nakamura
マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜
Yoshiki Nakagawa
位置データもPythonで!!!
位置データもPythonで!!!
hide ogawa
今なら聞ける!Power BI の基本と OMS の Power BI 連携
今なら聞ける!Power BI の基本と OMS の Power BI 連携
Yugo Shimizu
QGIS初級編 さわってみようQGIS (for ver. 2.8.2 at FOSS4G 2015 Hokkaido)
QGIS初級編 さわってみようQGIS (for ver. 2.8.2 at FOSS4G 2015 Hokkaido)
Yoh Fukuda
ネイティブコードを語る
ネイティブコードを語る
Kenji Imasaki
Qgis2.18 基礎編
Qgis2.18 基礎編
Jyun Tanaka
Azure Web PubSub Serviceを触ってみた
Azure Web PubSub Serviceを触ってみた
DevTakas
Wiresharkの解析プラグインを作る ssmjp 201409
Wiresharkの解析プラグインを作る ssmjp 201409
稔 小林
PostgreSQLの行レベルセキュリティと SpringAOPでマルチテナントの ユーザー間情報漏洩を防止する (JJUG CCC 2021 Spring)
PostgreSQLの行レベルセキュリティと SpringAOPでマルチテナントの ユーザー間情報漏洩を防止する (JJUG CCC 2021 Spring)
Koichiro Matsuoka
Foss4G Japan 2021 シェープファイルの真の後継規格 FlatGeobufの普及啓蒙活動
Foss4G Japan 2021 シェープファイルの真の後継規格 FlatGeobufの普及啓蒙活動
Kanahiro Iguchi
「書ける」から「できる」になれる! ~Javaメモリ節約ノウハウ話~
「書ける」から「できる」になれる! ~Javaメモリ節約ノウハウ話~
JustSystems Corporation
アンケートを即可視化!~MS Forms ⇒ MS Flow ⇒ Power BI~
アンケートを即可視化!~MS Forms ⇒ MS Flow ⇒ Power BI~
Yugo Shimizu
OVF, OVA, ovftool
OVF, OVA, ovftool
tshiroyama
Node.js with WebRTC DataChannel
Node.js with WebRTC DataChannel
mganeko
Zabbix超入門
Zabbix超入門
Daisuke Ikeda
『コンテナ疲れ』と戦う、k8s・PaaS・Serverlessの活用法
『コンテナ疲れ』と戦う、k8s・PaaS・Serverlessの活用法
Kazuto Kusama
B07_業務の自動化を多角的に実現する Power Automate の世界 [Microsoft Japan Digital Days]
B07_業務の自動化を多角的に実現する Power Automate の世界 [Microsoft Japan Digital Days]
日本マイクロソフト株式会社
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
Shuichi Tsutsumi
地理学卒論・修論生のためのQGIS講座_総合編
地理学卒論・修論生のためのQGIS講座_総合編
Inoshachu, NPO
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
Takahiro Inoue
Akka ActorとAMQPでLINEのメッセージングパイプラインをリプレースした話
Akka ActorとAMQPでLINEのメッセージングパイプラインをリプレースした話
LINE Corporation
Leaflet初級編 - Web地図サイトを構築してみよう-
Leaflet初級編 - Web地図サイトを構築してみよう-
Yasunori Kirimoto
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
More Related Content
What's hot
位置データもPythonで!!!
位置データもPythonで!!!
hide ogawa
今なら聞ける!Power BI の基本と OMS の Power BI 連携
今なら聞ける!Power BI の基本と OMS の Power BI 連携
Yugo Shimizu
QGIS初級編 さわってみようQGIS (for ver. 2.8.2 at FOSS4G 2015 Hokkaido)
QGIS初級編 さわってみようQGIS (for ver. 2.8.2 at FOSS4G 2015 Hokkaido)
Yoh Fukuda
ネイティブコードを語る
ネイティブコードを語る
Kenji Imasaki
Qgis2.18 基礎編
Qgis2.18 基礎編
Jyun Tanaka
Azure Web PubSub Serviceを触ってみた
Azure Web PubSub Serviceを触ってみた
DevTakas
Wiresharkの解析プラグインを作る ssmjp 201409
Wiresharkの解析プラグインを作る ssmjp 201409
稔 小林
PostgreSQLの行レベルセキュリティと SpringAOPでマルチテナントの ユーザー間情報漏洩を防止する (JJUG CCC 2021 Spring)
PostgreSQLの行レベルセキュリティと SpringAOPでマルチテナントの ユーザー間情報漏洩を防止する (JJUG CCC 2021 Spring)
Koichiro Matsuoka
Foss4G Japan 2021 シェープファイルの真の後継規格 FlatGeobufの普及啓蒙活動
Foss4G Japan 2021 シェープファイルの真の後継規格 FlatGeobufの普及啓蒙活動
Kanahiro Iguchi
「書ける」から「できる」になれる! ~Javaメモリ節約ノウハウ話~
「書ける」から「できる」になれる! ~Javaメモリ節約ノウハウ話~
JustSystems Corporation
アンケートを即可視化!~MS Forms ⇒ MS Flow ⇒ Power BI~
アンケートを即可視化!~MS Forms ⇒ MS Flow ⇒ Power BI~
Yugo Shimizu
OVF, OVA, ovftool
OVF, OVA, ovftool
tshiroyama
Node.js with WebRTC DataChannel
Node.js with WebRTC DataChannel
mganeko
Zabbix超入門
Zabbix超入門
Daisuke Ikeda
『コンテナ疲れ』と戦う、k8s・PaaS・Serverlessの活用法
『コンテナ疲れ』と戦う、k8s・PaaS・Serverlessの活用法
Kazuto Kusama
B07_業務の自動化を多角的に実現する Power Automate の世界 [Microsoft Japan Digital Days]
B07_業務の自動化を多角的に実現する Power Automate の世界 [Microsoft Japan Digital Days]
日本マイクロソフト株式会社
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
Shuichi Tsutsumi
地理学卒論・修論生のためのQGIS講座_総合編
地理学卒論・修論生のためのQGIS講座_総合編
Inoshachu, NPO
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
Takahiro Inoue
Akka ActorとAMQPでLINEのメッセージングパイプラインをリプレースした話
Akka ActorとAMQPでLINEのメッセージングパイプラインをリプレースした話
LINE Corporation
What's hot
(20)
位置データもPythonで!!!
位置データもPythonで!!!
今なら聞ける!Power BI の基本と OMS の Power BI 連携
今なら聞ける!Power BI の基本と OMS の Power BI 連携
QGIS初級編 さわってみようQGIS (for ver. 2.8.2 at FOSS4G 2015 Hokkaido)
QGIS初級編 さわってみようQGIS (for ver. 2.8.2 at FOSS4G 2015 Hokkaido)
ネイティブコードを語る
ネイティブコードを語る
Qgis2.18 基礎編
Qgis2.18 基礎編
Azure Web PubSub Serviceを触ってみた
Azure Web PubSub Serviceを触ってみた
Wiresharkの解析プラグインを作る ssmjp 201409
Wiresharkの解析プラグインを作る ssmjp 201409
PostgreSQLの行レベルセキュリティと SpringAOPでマルチテナントの ユーザー間情報漏洩を防止する (JJUG CCC 2021 Spring)
PostgreSQLの行レベルセキュリティと SpringAOPでマルチテナントの ユーザー間情報漏洩を防止する (JJUG CCC 2021 Spring)
Foss4G Japan 2021 シェープファイルの真の後継規格 FlatGeobufの普及啓蒙活動
Foss4G Japan 2021 シェープファイルの真の後継規格 FlatGeobufの普及啓蒙活動
「書ける」から「できる」になれる! ~Javaメモリ節約ノウハウ話~
「書ける」から「できる」になれる! ~Javaメモリ節約ノウハウ話~
アンケートを即可視化!~MS Forms ⇒ MS Flow ⇒ Power BI~
アンケートを即可視化!~MS Forms ⇒ MS Flow ⇒ Power BI~
OVF, OVA, ovftool
OVF, OVA, ovftool
Node.js with WebRTC DataChannel
Node.js with WebRTC DataChannel
Zabbix超入門
Zabbix超入門
『コンテナ疲れ』と戦う、k8s・PaaS・Serverlessの活用法
『コンテナ疲れ』と戦う、k8s・PaaS・Serverlessの活用法
B07_業務の自動化を多角的に実現する Power Automate の世界 [Microsoft Japan Digital Days]
B07_業務の自動化を多角的に実現する Power Automate の世界 [Microsoft Japan Digital Days]
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
地理学卒論・修論生のためのQGIS講座_総合編
地理学卒論・修論生のためのQGIS講座_総合編
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
Akka ActorとAMQPでLINEのメッセージングパイプラインをリプレースした話
Akka ActorとAMQPでLINEのメッセージングパイプラインをリプレースした話
Similar to 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
Similar to 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
More from Yasunori Kirimoto
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた
Yasunori Kirimoto
QGIS3.2で地理院タイルをつかってみた
QGIS3.2で地理院タイルをつかってみた
Yasunori Kirimoto
Node.jsでスクレイピングして可視化してみた
Node.jsでスクレイピングして可視化してみた
Yasunori Kirimoto
はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~
はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~
Yasunori Kirimoto
みんなの公園マップ札幌版
みんなの公園マップ札幌版
Yasunori Kirimoto
WebGISをはじめてみる
WebGISをはじめてみる
Yasunori Kirimoto
More from Yasunori Kirimoto
(6)
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた
ZappaでDBもパッケージしたサーバーレスAPIを構築してみた
QGIS3.2で地理院タイルをつかってみた
QGIS3.2で地理院タイルをつかってみた
Node.jsでスクレイピングして可視化してみた
Node.jsでスクレイピングして可視化してみた
はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~
はじめてみよう地図を使ったデータビジュアライゼーション入門 ~ FOSS4Gとオープンデータで可視化した地図を公開 ~
みんなの公園マップ札幌版
みんなの公園マップ札幌版
WebGISをはじめてみる
WebGISをはじめてみる
Recently uploaded
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
furutsuka
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
Atomu Hidaka
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
osamut
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Shota Ito
Recently uploaded
(9)
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
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.
おつかれさまでした!
Download now