first commit

src/app/shared/component/map/map.component.html

@@ -0,0 +1,12 @@
+<!--<div  leaflet style="height: 400px; width: 800px"-->
+<!--     [leafletOptions]="options"-->
+<!--     [leafletMarkerCluster]="markerClusterData"-->
+<!--     [leafletMarkerClusterOptions]="markerClusterOptions"-->
+<!--     (leafletMarkerClusterReady)="markerClusterReady($event)">-->
+<!--</div>-->
+
+<div class="map-container">
+  <div class="map-frame">
+    <div id="map " style="height: 50vh;"></div>
+  </div>
+</div>

src/app/shared/component/map/map.component.scss

@@ -0,0 +1,17 @@
+.map-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 30px;
+}
+
+.map-frame {
+  border: 2px solid black;
+  height: 100%;
+}
+
+#map {
+  height: 100%;
+}

src/app/shared/component/map/map.component.ts

@@ -0,0 +1,69 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {circle, latLng, marker, polygon, tileLayer} from "leaflet";
+import * as L from 'leaflet';
+import 'leaflet.markercluster';
+
+
+@Component({
+  selector: 'app-map',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.scss']
+})
+export class MapComponent implements OnInit  {
+  @Input() coords!:number[][];
+  map: any;
+  options = {
+    layers: [
+      tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
+    ],
+    zoom: 6,
+    center: latLng(10.1291, 106.3131)
+  };
+  markerClusterGroup!: L.MarkerClusterGroup;
+  markerClusterData: L.Marker[] = [];
+  markerClusterOptions!: L.MarkerClusterGroupOptions;
+
+  constructor() { }
+  ngOnInit() {
+    // console.log(L);
+    // console.log(this.markerClusterOptions);
+    this.markerClusterData = this.generateMarker(this.coords);
+  }
+
+
+  onMapReady(map: any) {
+    // get a local reference to the map as we need it later
+    this.map = map;
+    console.log('test ready')
+    setTimeout(()=>{
+      this.map.reload()
+    })
+  }
+
+
+  markerClusterReady(group: L.MarkerClusterGroup) {
+    console.log('test ready')
+    setTimeout(()=>{
+      this.markerClusterGroup = group;
+    })
+
+  }
+
+  generateMarker(coords: number[][]): L.Marker[] {
+    const data: L.Marker[] = [];
+    const icon = L.icon({
+      iconSize: [25, 41],
+      iconAnchor: [10, 41],
+      popupAnchor: [2, -40],
+      // specify the path here
+      iconUrl: "https://unpkg.com/[email protected]/dist/images/marker-icon.png",
+      shadowUrl:
+        "https://unpkg.com/[email protected]/dist/images/marker-shadow.png"
+    });
+
+    for (let i = 0; i < coords.length; i++) {
+      data.push(L.marker( [coords[i][0],coords[i][1]], { icon }));
+    }
+    return data;
+  }
+}

src/app/shared/shared.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedComponentModule } from './component/shared-component.module';
+
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    SharedComponentModule,
+
+  ],
+  exports: [
+    SharedComponentModule,
+  ]
+})
+export class SharedModule { }