Looking for advice on customizing a working code that uses leaflet angular to place markers with predefined latitudes and longitudes. I want to be able to customize this by passing latitudes and longitudes when the addmarker button is pressed. Any suggestions on how to achieve this?
The latitude and longitude information is not available when the page loads, it must only be passed when the add marker button is pressed.
import { Component, OnChanges } from "@angular/core";
import "leaflet/dist/leaflet.css";
import * as L from "leaflet";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
map;
markers: L.Layer[] = [];
markerIcon = {
icon: L.icon({
iconSize: [25, 41],
iconAnchor: [10, 41],
popupAnchor: [2, -40],
// specify the path here
iconUrl: 'leaflet/marker-icon.png',
shadowUrl: 'leaflet/marker-shadow.png'
})
};
public options = {
layers: [
L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 18,
attribution: ""
})
],
zoom: 10,
center: L.latLng(40.7128, 74.0060)
//center: L.latLng(this.lat, this.long);
};
getLatLong() {
this.lat = 40.7128;
this.long = 74.0060;
this.addMarker(this.lat, this.long);
}
addMarker(lat, long) {
const newMarker = L.marker([40.7128, 74.0060], this.markerIcon);
//const newMarker = L.marker([this.lat, this.long], this.markerIcon);
this.markers.push(newMarker);
newMarker.addTo(this.map);
}
onMapReady(map: L.Map) {
this.map = map;
// Do stuff with map
}
}
<div
style="height: 90vh;"
leaflet
[leafletOptions]="options"
(leafletMapReady)="onMapReady($event)"
></div>
<button (click)="addMarker()">
add marker
</button>
<button (click)="getLatLong()">
getLAtLong
</button>