I am working with angular and trying to display the result of a function in HTML. In my code snippet below, I am defining a function called 'geo' which returns the latitude and longitude values.
var geo = function onLocationFound(e) {
var radius = e.accuracy / 2;
let marker = new L.Marker(e.latlng, {
draggable: true,
icon: Icon
}).bindPopup(""+e.latlng);;
map.addLayer(marker);
return e.latlng
}
this.latlng = geo;However, when I try to display the 'latlng' value in HTML using {{latlng}}, it shows the entire function code instead of the expected return value. Can anyone point out where I might be making a mistake?
For reference, you can check out the original question here: assign function return value to some variable using javascript
Here is the corresponding .ts file:
import { Component } from '@angular/core';
import { icon,latLng, marker, polyline, tileLayer,Map, point } from 'leaflet';
/*import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';*/
import * as L from 'leaflet';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
latlng:any
public onMapReady(map: Map) {
map.locate({setView: true, maxZoom: 16});
/*map.on('click', <LeafletMouseEvent>(e) => { alert(e.latlng.lat); alert(e.latlng.lng); });*/
var Icon = L.icon({
iconUrl: 'leaflet/marker-icon.png',
shadowUrl: 'leaflet/marker-shadow.png',
iconSize: [25,41], // size of the icon
iconAnchor: [ 13, 41 ], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
function onLocationFound(e) {
var radius = e.accuracy / 2;
let marker = new L.Marker(e.latlng, {
draggable: true,
icon: Icon
}).bindPopup(""+e.latlng);;
map.addLayer(marker);
this.latlng = e.latlng
}
map.on('locationfound', onLocationFound);
}
googleMaps = tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
detectRetina: true
});
googleHybrid = tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
detectRetina: true
});
summit = marker([ 46.8523, -121.7603 ], {
icon: icon({
iconSize: [ 25, 41 ],
iconAnchor: [ 13, 41 ],
iconUrl: 'leaflet/marker-icon.png',
shadowUrl: 'leaflet/marker-shadow.png'
})
});
layersControl = {
baseLayers: {
'Google Maps': this.googleMaps,
'Google Hybrid': this.googleHybrid,
},
}
options = {
layers: [this.googleMaps]
};
};