00.ionic4:11.ionicとleafletで地図表示
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン最新のリビジョン両方とも次のリビジョン | ||
00.ionic4:11.ionicとleafletで地図表示 [2019/08/31] – [開発環境] adash333 | 00.ionic4:11.ionicとleafletで地図表示 [2019/09/01] – [CapacitorのGeolocationを用いて現在地を表示] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
===== 11.IonicとLeafletで地図表示 ===== | ===== 11.IonicとLeafletで地図表示 ===== | ||
- | Webアプリで地図を表示したいときに、LeafletというJavaAcriptライブラリを用いて、OpenStreetMapを利用するのが便利です。 | + | Webアプリで地図を表示したいときに、[[https:// |
+ | (GoogleMapは非常に便利そうですが、使用するために登録が必要ですし、使用しすぎると有料になってしまう恐れがあります。) | ||
- | (GoogleMapは非常に便利そうですが、使用しすぎると有料になってしまう恐れがあります。) | + | https:// |
+ | {{: | ||
以下のサイトを写経してみたいと思います。 | 以下のサイトを写経してみたいと思います。 | ||
http:// | http:// | ||
- | {{: | + | How to add Leaflet Map in Ionic -4 or Angular |
+ | https:// | ||
+ | @uedayou | ||
+ | 2018年07月09日に更新 | ||
+ | Angular6とLeafletで地図を表示する | ||
行 35: | 行 41: | ||
</ | </ | ||
{{: | {{: | ||
+ | |||
+ | ===== 今回のアプリ作成の流れ ===== | ||
+ | 以下の予定です。 | ||
+ | |||
+ | -新規Ionic4アプリ作成(GPSを利用するためcapacitor入り) | ||
+ | -leafletのインストール | ||
+ | -leaflet+openstreetmapで地図を読み込み | ||
+ | -capacitorのgeolocationAPIで現在地を取得 | ||
+ | -現在地を地図に表示 | ||
+ | -アプリのPWA化 | ||
+ | -Netlifyにデプロイ | ||
+ | |||
===== 新規Ionic4アプリ作成 ===== | ===== 新規Ionic4アプリ作成 ===== | ||
C:/ | C:/ | ||
+ | 後で、CapacitorのGeolocationを利用したいので、'' | ||
5分くらいかかります。 | 5分くらいかかります。 | ||
行 44: | 行 63: | ||
</ | </ | ||
- | {{: | + | {{: |
- | {{: | + | {{: |
- | {{: | + | {{: |
- | + | ||
- | {{: | + | |
次に以下を入力して、一旦、Ionic4アプリを起動してみます。 | 次に以下を入力して、一旦、Ionic4アプリを起動してみます。 | ||
< | < | ||
- | cd ionic4-capacitor-gps | + | cd ionic4-leaflet-map-gps |
ionic serve | ionic serve | ||
</ | </ | ||
- | {{: | + | {{: |
- | + | ||
- | {{: | + | |
いったん、Ctrl+C => y + Enter でサーバを停止します。 | いったん、Ctrl+C => y + Enter でサーバを停止します。 | ||
+ | さらに、VisualStudioCodeを閉じます。 | ||
+ | ===== leafletのインストールと初期設定 ===== | ||
+ | アプリに地図表示ライブラリであるleaflet.jsをインストールします。 | ||
+ | C:/ | ||
+ | < | ||
+ | npm install leaflet --save | ||
+ | </ | ||
+ | {{: | ||
+ | angular.json の | ||
+ | < | ||
+ | " | ||
+ | " | ||
+ | </ | ||
+ | の最後のところに、以下のように追加します。 | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | ===== Tabテンプレートの設定 ===== | ||
+ | Ctrl+@で ionic serveして開発サーバを起動しておきます。 | ||
+ | |||
+ | src/ | ||
+ | |||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | ===== 地図の表示(tab1.page.html) ===== | ||
+ | |||
+ | Tab1でLeafletを用いて地図を表示します。 | ||
+ | |||
+ | src/ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | src/ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | この時点でのソースコード | ||
+ | https:// | ||
+ | |||
+ | ===== @types/ | ||
+ | なぜかアイコンが表示されないので、https:// | ||
+ | |||
+ | |||
+ | < | ||
+ | npm install @types/ | ||
+ | </ | ||
+ | {{: | ||
+ | |||
+ | angular.jsonの設定(参考:[[https:// | ||
+ | |||
+ | |||
+ | |||
+ | ===== CapacitorのGeolocationを用いて現在地を表示 ===== | ||
+ | 通常のhtmlファイルであれば、Chromeなどのブラウザに付属しているGeolocation APIを用いればよいらしいのですが、今回はCapacitorのGeolocationというものを用います。 | ||
+ | |||
+ | |||
+ | https:// | ||
+ | |||
+ | https:// | ||
+ | |||
+ | https:// | ||
+ | |||
+ | https:// | ||
+ | |||
+ | を見ながらいろいろやったのですが、うまくアイコンを表示することができなかったので、結局、以下の方法で行いました。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | -"" | ||
+ | -"" | ||
+ | -C: | ||
+ | -angular.jsonを編集(assets と styles) | ||
+ | -tab1.page.tsからは以下のように呼び出す | ||
+ | |||
+ | < | ||
+ | import { Component } from ' | ||
+ | import * as L from ' | ||
+ | |||
+ | @Component({ | ||
+ | selector: ' | ||
+ | templateUrl: | ||
+ | styleUrls: [' | ||
+ | }) | ||
+ | export class Tab1Page { | ||
+ | map: any; | ||
+ | |||
+ | ionViewDidEnter() { | ||
+ | // 地図表示 | ||
+ | this.map = L.map(' | ||
+ | L.tileLayer(' | ||
+ | attribution: | ||
+ | }).addTo(this.map); | ||
+ | L.marker([35.685988, | ||
+ | icon: L.icon({ | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | }) | ||
+ | | ||
+ | } | ||
+ | |||
+ | /** Remove map when we have multiple map object */ | ||
+ | ionViewWillLeave() { | ||
+ | this.map.remove(); | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | {{: | ||
===== リンク ===== | ===== リンク ===== |
00.ionic4/11.ionicとleafletで地図表示.txt · 最終更新: 2019/09/03 by adash333