IONIC3、Leaflet、Bingmapsを使って地図を表示するまで

【前提】
node.js、Ionic3はインストール済み。

【手順】
１．プロジェクトを作成
以下のコマンドを実行してIonicプロジェクトを作成。
AndroidとかiOSのプラットフォームを追加するか聞かれるけど全てNo。

ionic start MyIonicProject tutorial

２．npmパッケージ追加
packages.jsonのdependenciesに以下を追記。

    "@types/leaflet": "1.2.3",
    "@asymmetrik/ngx-leaflet": "2.5.3",
    "leaflet": "1.2.0",
    "leaflet-bing-layer": "3.2.0"

３．LeafletのCSSをコピーしてlink
packages.jsonに以下を追記。

  "config": {
      "ionic_copy": "./config/copy.config.js"
  }

packages.jsonから「config/copy.config.js」の場所にファイルを作り、以下の内容を記述。

module.exports = {
    copyAnimateCss: {
        src: './node_modules/leaflet/dist/leaflet.css',
        dest: '{{BUILD}}'
    }
}

index.htmlのヘッダにcssへのリンクを追記。

<link href="build/leaflet.css" rel="stylesheet">

４．hello Ionicページに地図を表示
src\pages\hello-ionicのファイルを修正し、地図を表示する。
■hello-ionic.html

<ion-content padding>
    <div id="map" style="width:100%; height:100%;"></div>
</ion-content>

■hello-ionic.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import NGX from '@asymmetrik/ngx-leaflet';
import L from 'leaflet';
import 'leaflet-bing-layer';

@Component({
    selector: 'page-hello-ionic',
    templateUrl: 'hello-ionic.html'
})

export class HelloIonicPage {
    map: any;

    constructor() {
    }
    
    ionViewDidEnter() {
        this.loadmap();
    }

    loadmap() {
        this.map = L.map("map").setView([35.658581, 139.745433], 16);
        L.tileLayer.bing('BingMasのキー', {
            maxZoom: 18
        }).addTo(this.map);
    }
}

ここまでやったら実行。

ionic serve

Angular2+でOnsenUIを使うまで

Angular2+でプロジェクトを作り、OnsenUIを使うまでの手順。
Node.JSはインストール済みの前提。

１．angular-cliをインストール
以下のコマンドを実行。

npm install -g @angular/cli

２．angularプロジェクトを作成
以下のコマンドを実行。

ng new my-app
cd my-app

3.OnsenUIを導入
以下のコマンドを実行。

npm install onsenui ngx-onsenui --save

４．OnsenModuleのインポート
"src\app\app.module.ts"にモジュールをインポートする記述を追加。

import { OnsenModule } from 'ngx-onsenui';

imports: [
   BrowserModule,
   OnsenModule,
],

５．CUSTOM_ELEMENTS_SCHEMA 読み込み
"src\app\app.module.ts"に"ons-" タグを書いても警告が出なくなる記述を追加

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

  schemas: [
      CUSTOM_ELEMENTS_SCHEMA,
  ],

６．CSSファイル読み込み
".angular-cli.json"にcss読み込みのコードを追記。

      "styles": [
        "../node_modules/onsenui/css/onsenui.css",
        "../node_modules/onsenui/css/onsen-css-components.css",
        "styles.css"
      ],

７．適当に編集して実行 以下のコマンドを実行。

ng serve --open

【参考】
AngularJS QuickStart
OnsenUI Angular 2+