Im using Ionic 3 to create a map with several markers and everything has been going well until the part of the markers. When I code the Geolocalisation in the home.ts file and run the app it gives me this text:
Typescript Error
Argument of type ‘(coordinates: NativeGeocoderForwardResult) => void’ is not assignable to parameter of type ‘(value: NativeGeocoderForwardResult) => void | PromiseLike’. Types of parameters ‘coordinates’ and ‘value’ are incompatible. Type ‘NativeGeocoderForwardResult’ is not assignable to type ‘NativeGeocoderForwardResult’. Property ‘latitude’ is missing in type ‘NativeGeocoderForwardResult’.
C:/Users/cheonew/Desktop/leionic/wopmap2.2/src/pages/home/home.ts
this.nativeGeocoder.forwardGeocode(city)
.then((coordinates: NativeGeocoderForwardResult) => {
let markerGroup = leaflet.featureGroup();
Now, this is my Code in home.ts (its showing errors in: .then((coordinates: NativeGeocoderForwardResult) …
Here you go:
import { Component, ViewChild, ElementRef } from ‘@angular/core’;
import { NavController, AlertController } from ‘ionic-angular’;
import leaflet from ‘leaflet’;
import { NativeGeocoder, NativeGeocoderForwardResult } from ‘@ionic-native/native-geocoder’;
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
@ViewChild(‘map’) mapContainer: ElementRef;
map: any;
constructor(public navCtrl: NavController, private alertCtrl: AlertController,private nativeGeocoder: NativeGeocoder) {
}
ionViewDidEnter() {
this.loadmap();
}
loadmap() {
this.map = leaflet.map(“map”).fitWorld();
leaflet.tileLayer(‘http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, {
attributions: ‘www.tphangout.com’,
maxZoom: 14
}).addTo(this.map);
}
addMarker() {
let prompt = this.alertCtrl.create({
title: ‘Add Marker’,
message: “Enter location”,
inputs: [
{
name: ‘city’,
placeholder: ‘City’
},
],
buttons: [
{
text: ‘Cancel’,
handler: data => {
console.log(‘Cancel clicked’);
}
},
{
text: ‘Save’,
handler: data => {
this.geoCodeandAdd(data.city);
}
}
]
});
prompt.present();
}
geoCodeandAdd(city) {
this.nativeGeocoder.forwardGeocode(city)
.then((coordinates: NativeGeocoderForwardResult) => {
let markerGroup = leaflet.featureGroup();
let marker: any = leaflet.marker([coordinates[0].latitude, coordinates[0].longitude]).on(‘click’, () => {
alert(‘Marker clicked’);
})
markerGroup.addLayer(marker);
this.map.addLayer(markerGroup);
})
.catch((error: any) => console.log(error));
}
}
