how can i pass lat,long from outside to create a leaflet marker angular

Question

This is a working code to place a marker using leaflet angular for predefined lat,longs.

Now i want to customize this by passing lat,long when addmarker button is pressed. Can anyone advise ?

Lat long infomration is not available when page loads and it has to be passed only when 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>

From where the coords will come from? Once you know them you will pass them as argument to the addMarkers method — kboul, Apr 11 '20 at 13:55
ok thanks,do i need to change in options too or only in addMarker? — sunny, Apr 11 '20 at 14:12
For me this onlyworks when options and addMarker lat longs are same.,how to update the options variable too? — sunny, Apr 11 '20 at 14:22
You have already done it. You have declared lat long as arguments. Now when you invoke the method on the component you need to pass the values you want if the values are static and do not change. Do you want to change the map centre as well when pressing addMarker button? So centre the map when adding the marker around the new location? — kboul, Apr 11 '20 at 14:23
i have updated the code , i added a new method getLatLong in which if i place the lat longs same as Options it is working .but i need to find a way to update options too so that i can use other lat longs also — sunny, Apr 11 '20 at 14:27
Have you solved it? Can you give an example? So you want to addMarker in that location [40.7128, 74.0060]. The map centre is already in that position. In which position do you want it to go? — kboul, Apr 11 '20 at 14:50
No i have not,suppose when page loads and location is [40.7128, 74.0060]..This is just a dummy location as we need to place something to show map,when we click getLATLONG we will be passing actual lat longs for which we need to place ,example [46.8523, -121.7603] — sunny, Apr 11 '20 at 14:55

score 1 · Accepted Answer · answered Apr 11 '20 at 15:00

You pass the coordinates you want as arguments on addMarker() like this:

<button (click)="addMarker(46.8523, -121.7603)">
  add marker
</button>

You do not need getLatLong and another button

And then using the map instance you change the map center:

this.map.panTo(new L.LatLng(lat, lng));

Demo

how can i pass lat,long from outside to create a leaflet marker angular

1 Answers1