# Angular+LeafletMap
* [參考網址1](https://dannyliu.me/%E5%9C%A8angular-9%E4%B8%AD%E4%BD%BF%E7%94%A8leaflet-js-%E8%88%87-openstreetmap/)
* [參考網址2](https://www.digitalocean.com/community/tutorials/angular-angular-and-leaflet)
* [參考網址3(新增標記)](https://www.digitalocean.com/community/tutorials/angular-angular-and-leaflet-marker-service)
## [先參照前篇完成Mqtt](https://hackmd.io/@109213067/BJBlg0Mio/https%3A%2F%2Fhackmd.io%2FReJeJ4_ERhGeGtALqBGL8A)
## 流程
Angular使用Leaflet套件顯示地圖
## 安裝Angular的Leaflet套件
`npm install leaflet`
`npm install @types/leaflet`
`npm install @asymmetrik/ngx-leaflet`
## 新增component顯示地圖
* 新增component
`ng g c leafmap`
* 修改style.css導入leaflet.css內容如下(避免地圖破碎):

@import "../node_modules/leaflet/dist/leaflet.css";

.leaflet-container {
    overflow: hidden;
    height: 100%;
}

* leafmap.component.ts內容:

import { Component,OnInit} from '@angular/core';
import * as L from 'leaflet';
import { icon, Marker } from 'leaflet';

@Component({
  selector: 'app-leafmap',
  templateUrl: './leafmap.component.html',
  styleUrls: ['./leafmap.component.css']
})

export class LeafmapComponent{
  map:any;

  ngOnInit() {
    const iconRetinaUrl = 'assets/marker-icon-2x.png';
    const iconUrl = 'assets/marker-icon.png';
    const shadowUrl = 'assets/marker-shadow.png';
    const iconDefault = icon ({
      iconRetinaUrl,
      iconUrl,
      shadowUrl,
      iconSize: [25,41],
      iconAnchor: [12,41],
      popupAnchor: [1,-34],
      tooltipAnchor: [16,-28],
      shadowSize: [41,41]
    });
    Marker.prototype.options.icon = iconDefault;
    this.map = L.map('map', {
      center: [23.952672279106505, 120.92716871995295],
      zoom: 16
    });
    const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      minZoom: 3,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });
    const marker1 = L
      .marker([23.952672279106505, 120.92716871995295],{title:'管院'})
      .addTo(this.map)
      .bindPopup("<h1>管院在這裡</h1>");
    const marker2 = L
      .marker([23.941804203963905, 120.9308004137981],{title:''})
      .addTo(this.map)
      .bindPopup("<h1>住的地方</h1>")
    const marker3 = L
      .marker([22.69037999999579, 120.32945971836486],{title:'管院'})
      .addTo(this.map)
      .bindPopup("<h1>我家啦</h1>")
    const marker4 = L
      .marker([23.128122197367723, 113.34752774482281],{title:'管院'})
      .addTo(this.map)
      .bindPopup("<h1>暨南大学</h1>")
    marker1.openPopup();
    tiles.addTo(this.map);
  }
  addMarker(p1:string,p2:string,text:string) {
    const marker4 = L
      .marker([this.convertNum(p1), this.convertNum(p2)],{title:text})
      .addTo(this.map)
      .bindPopup("<h1>"+text+"</h1>")
  }
  convertNum(text:string) {
    return parseFloat(text);
  }
}

* leafmap.component.html內容:

<h1>Map</h1>
<input #p1 placeholder="p1"/>
<input #p2 placeholder="p2"/>
<input #p3 placeholder="text"/>
<button (click)="addMarker(p1.value,p2.value,p3.value); p1.value='';p2.value='';p3.value=''">send</button>
<div class="map-container">
    <div class="map-frame">
      <div id="map"></div>
    </div>
</div>

* leafmap.component.css內容:

.map-container {
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 30px;
}

.map-frame {
  border: 2px solid black;
  height: 100%;
}

#map {
  height: 100%;
}

* angular.json的project的assets導入圖標圖片檔案

"assets": [
    "src/favicon.ico",
    "src/assets",
    {
        "glob": "**/*",
        "input":"./node_modules/leaflet/dist/images/",
        "output": "./assets/"
    }
],

## 用app-routing把todo,Mqtt,Map頁面分隔開
* app-routing.module.ts內容:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TodoComponent } from './todo/todo.component' 
import { ConnectMqttComponent } from './connect-mqtt/connect-mqtt.component'
import { LeafmapComponent } from './leafmap/leafmap.component'

const routes: Routes = [
  {path:'todo',component:TodoComponent},
  {path:'mqtt',component:ConnectMqttComponent},
  {path:'map',component:LeafmapComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

* app.component.html放切換頁面的按鈕:

<button routerLink="/todo">Todolist</button>
<button routerLink="/mqtt">Mqtt</button>
<button routerLink="/map">Map</button>
<router-outlet></router-outlet>

## 補充遇到問題
### 1. 地圖無法正常顯示(破碎)
* 可能是沒有正常導入leatlet.css檔案
* [參考網址1](https://stackoverflow.com/questions/54996877/angular-leaflet-map-does-does-not-render-properly)
* [參考網址2](https://lightrun.com/answers/angular-angular-cli-please-help-angular--leaflet-incorrectly-displayed-tiles)
### 2. 圖標無法正常顯示
* 圖標的圖片沒有被正確導入
* [參考網址](https://stackoverflow.com/questions/41144319/leaflet-marker-not-found-production-env)