差分

このページの2つのバージョン間の差分を表示します。

--- 00.ionic4:11.ionicとleafletで地図表示 [2019/08/31] – [11.IonicとLeafletで地図表示] adash333
+++ 00.ionic4:11.ionicとleafletで地図表示 [2019/09/03] (現在) – [リンク] adash333
@@ 行 12: / 行 12: @@
 How to add Leaflet Map in Ionic -4 or Angular
+https://qiita.com/uedayou/items/30f88d88238f648e8ee6
+@uedayou
+年07月09日に更新
+Angular6とLeafletで地図を表示する
@@ 行 38: / 行 41: @@
 </code>
 {{:00.ionic4:pasted:20190831-092546.png}}
+===== 今回のアプリ作成の流れ =====
+以下の予定です。
+  -新規Ionic4アプリ作成(GPSを利用するためcapacitor入り)
+  -leafletのインストール
+  -leaflet+openstreetmapで地図を読み込み
+  -capacitorのgeolocationAPIで現在地を取得
+  -現在地を地図に表示
+  -アプリのPWA化
+  -Netlifyにデプロイ
 ===== 新規Ionic4アプリ作成 =====
 C:/ionic/　フォルダをVisualStudioCodeで開き、Ctrl+@でコマンドプロンプトを開き、以下を入力します。
+後で、CapacitorのGeolocationを利用したいので、''%%--capacitor%%''オプションをつけておきます。
 分くらいかかります。
@@ 行 47: / 行 63: @@
 </code>
-{{:00.ionic4:pasted:20190828-105755.png}}
+{{:00.ionic4:pasted:20190831-094140.png}}
-{{:00.ionic4:pasted:20190828-105809.png}}
+{{:00.ionic4:pasted:20190831-094814.png}}
-{{:00.ionic4:pasted:20190828-110109.png}}
+{{:00.ionic4:pasted:20190831-094842.png}}
-{{:00.ionic4:pasted:20190828-110128.png}}
 次に以下を入力して、一旦、Ionic4アプリを起動してみます。
 <code>
-cd ionic4-capacitor-gps
+cd ionic4-leaflet-map-gps
 ionic serve
 </code>
-{{:00.ionic4:pasted:20190828-110418.png}}
+{{:00.ionic4:pasted:20190831-095111.png}}
-{{:00.ionic4:pasted:20190828-110429.png}}
 いったん、Ctrl+C => y + Enter でサーバを停止します。
+さらに、VisualStudioCodeを閉じます。
+===== leafletのインストールと初期設定 =====
+アプリに地図表示ライブラリであるleaflet.jsをインストールします。
+C:/ionic/ionic4-leaflet-map-gps/　フォルダをVisualStudioCodeで開き、Ctrl+@でコマンドプロンプトを開き、以下を入力します。
+<code>
+npm install leaflet --save
+</code>
+{{:00.ionic4:pasted:20190831-202407.png}}
+angular.json の
+<code>
+"assets":
+"styles":
+</code>
+の最後のところに、以下のように追加します。
+（変更前）
+{{:00.ionic4:pasted:20190831-204708.png}}
+（変更後）
+{{:00.ionic4:pasted:20190831-204830.png}}
+===== Tabテンプレートの設定 =====
+Ctrl+@で ionic serveして開発サーバを起動しておきます。
+src/app/tabs/tabs.page.html を編集します。
+（変更前）
+{{:00.ionic4:pasted:20190831-212203.png}}
+（変更後）
+{{:00.ionic4:pasted:20190831-212445.png}}
+===== 地図の表示(tab1.page.html) =====
+Tab1でLeafletを用いて地図を表示します。
+src/app/tab1/tab1.page.html（[[https://github.com/adash333/ionic4-leaflet-map-gps/blob/65a5a6ea888867c51cf1e3452bdca0bbdade1345/src/app/tab1/tab1.page.html|ソースコード]]）
+（変更前）
+{{:00.ionic4:pasted:20190831-224534.png}}
+（変更後）
+{{:00.ionic4:pasted:20190831-224832.png}}
+src/app/tab1/tab1.page.ts（[[https://github.com/adash333/ionic4-leaflet-map-gps/blob/65a5a6ea888867c51cf1e3452bdca0bbdade1345/src/app/tab1/tab1.page.ts|ソースコード]]）
+（変更前）
+{{:00.ionic4:pasted:20190831-224928.png}}
+（変更後）
+{{:00.ionic4:pasted:20190831-232912.png}}
+この時点でのソースコード
+https://github.com/adash333/ionic4-leaflet-map-gps/tree/65a5a6ea888867c51cf1e3452bdca0bbdade1345
+===== @types/leafletを--save-devでインストールしてアイコンを表示 =====
+なぜかアイコンが表示されないので、https://qiita.com/uedayou/items/30f88d88238f648e8ee6　を参考に以下のようにやってみます。
+<code>
+npm install @types/leaflet --save-dev
+</code>
+{{:00.ionic4:pasted:20190901-002348.png}}
+angular.jsonの設定(参考：[[https://qiita.com/uedayou/items/30f88d88238f648e8ee6#%E5%9C%B0%E5%9B%B3%E8%A1%A8%E7%A4%BA|こちらのコード]])
+===== CapacitorのGeolocationを用いて現在地を表示 =====
+通常のhtmlファイルであれば、Chromeなどのブラウザに付属しているGeolocation APIを用いればよいらしいのですが、今回はCapacitorのGeolocationというものを用います。
+https://qiita.com/spice/items/22811539d3561bd1e73c
+https://qiita.com/uedayou/items/30f88d88238f648e8ee6
+https://github.com/Asymmetrik/ngx-leaflet
+https://www.javascripttuts.com/using-leaflet-open-street-map-in-an-ionic-application-in-one-go/
+を見ながらいろいろやったのですが、うまくアイコンを表示することができなかったので、結局、以下の方法で行いました。
+{{:00.ionic4:pasted:20190901-022812.png}}
+  -""npm install leaflet""
+  -""npm install @types/leaflet --save-dev""
+  -C:\ionic\ionic4-leaflet-map-gps\node_modules\leaflet\dist　から、images/ フォルダを、C:\ionic\ionic4-leaflet-map-gps\src\assets　フォルダにコピー＆ペーストする
+  -angular.jsonを編集（assets と styles）
+  -tab1.page.tsからは以下のように呼び出す
+<code>
+import { Component } from '@angular/core';
+import * as L from 'leaflet';
+@Component({
+  selector: 'app-tab1',
+  templateUrl: 'tab1.page.html',
+  styleUrls: ['tab1.page.scss']
+})
+export class Tab1Page {
+  map: any;
+  ionViewDidEnter() {
+    // 地図表示
+    this.map = L.map('map').setView([35.685988,139.753947], 15);
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(this.map);
+    L.marker([35.685988,139.753947], {
+      icon: L.icon({
+         iconSize: [ 25, 41 ],
+         iconAnchor: [ 13, 41 ],
+         iconUrl: 'assets/images/marker-icon.png',
+         shadowUrl: 'assets/images/marker-shadow.png'
+      })
+   }).addTo(this.map);
+  }
+  /** Remove map when we have multiple map object */
+  ionViewWillLeave() {
+    this.map.remove();
+  }
+}
+</code>
+{{:00.ionic4:pasted:20190901-015638.png}}
 ===== リンク =====
 前：[[00.ionic4:10.ionic4とcapacitorでgps取得|10.ionic4とcapacitorでgps取得]]
-次：
+次：[[00.ionic4:11.緯度経度から歩いた距離を表示|00.ionic4:11.緯度経度から歩いた距離を表示]]
 目次：[[00.ionic4:index.html|スマホ用ホームページ&amp;スマホアプリ作成ソフトIonic4]]