Ionic 3 leaflet map markers not working


#1

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));
}

}


#2

Try it changing coordinates: NativeGeocoderForwardResult to coordinates: NativeGeocoderForwardResult[].


#3

already did, not working :c


#4

Is it giving you the same error?


#5

not exactly, now it is:

Typescript Error
Cannot find name ‘NativeGeocoderFowardResult’.
C:/Users/cheonew/Desktop/leionic/wopmap2.2/src/pages/home/home.ts
this.nativeGeocoder.forwardGeocode(city)
.then((coordinates: NativeGeocoderFowardResult[]) => {
let markerGroup = leaflet.featureGroup();


#6

Ok, I forgot a r in Foward, it is Forward.
Change NativeGeocoderFowardResult[] to NativeGeocoderForwardResult[].

Try it and tell me for future errors!


#7

It works now, but the markers dont, thank you so much anyway, just if you have some free time
My problem now is that the app run, but the markers dont appear in the map (Im trying to make an app that let me use the markers as events on the map)

In the console tells while trying the app

util.js:66 Native: tried calling NativeGeocoder.forwardGeocode, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
cordovaWarn @ util.js:66
home.ts:69 cordova_not_available

and I’m following this course


#8

Now the error is that when you do ionic serve you load the app like a web and in the major plugins of ionic it is not available to run the plugins on serve. If you want to check your app you would use a android/ios device and deploy to it with:

ionic cordova run android #with --livereload to realtime updates
#or
ionic cordova run ios #with --livereload to realtime updates

If the plugin is browser compatible you can use:

ionic cordova run browser

You can know what platforms are compatible on the ionic native plugin website.