Search code examples
angularionic3capacitor

NativeGeocoderReverseResult getting error while importing in ionic4 + capacitor


Getting error while importing NativeGeocoderReverseResult from native geocoder.I am using ionic4 with capacitor

import { NativeGeocoder, NativeGeocoderReverseResult, , NativeGeocoderOptions } from '@ionic-native/native-geocoder/ngx'; all other than NativeGeocoderForwardResult is importing without error

import { Component } from '@angular/core';
import { Plugins, Capacitor, CameraSource, CameraResultType, CameraDirection, Camera, Geolocation } from '@capacitor/core';
import { NativeGeocoder, NativeGeocoderReverseResult, NativeGeocoderForwardResult, NativeGeocoderOptions } from '@ionic-native/native-geocoder/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  selectedImage: string;
  coordinates: { lat: number; long: number; };
  resultValue: any;

  constructor(private mediaCapture: MediaCapture, private alertcontroller: AlertController, private nativeGeocoder: NativeGeocoder) {
    this.getLocation();
   }

  getLocation() {
    if (!Capacitor.isPluginAvailable('Geolocation')) {
      this.alertcontroller.create({header: 'could not fetch location'});
      return;

    }
    Plugins.Geolocation.getCurrentPosition().then(position => {
      this.coordinates = { lat: position.coords.latitude, long: position.coords.longitude};
      console.log('coordinates-oojj', this.coordinates);

    });
    const options: NativeGeocoderOptions = {
      useLocale: true,
      maxResults: 5
  };

    this.nativeGeocoder.reverseGeocode(52.5072095, 13.1452818, options)
    .then((result: NativeGeocoderReverseResult[]) => {
      this.resultValue = result;
      console.log('resultValue',this.resultValue)
      console.log(JSON.stringify(result[0]))}
    )

    .catch((error: any) => console.log(error));
  }


}


Solution

  • NativeGeocoderReverseResult is not part of Ionic anymore. The plugin (native-geocoder) was updated to 3.2.0. The docs are deprecated. Its recommended to use a new import statement:

    import { NativeGeocoder, NativeGeocoderResult, NativeGeocoderOptions } from '@ionic-native/native-geocoder/ngx';
    

    with the following code:

    let options: NativeGeocoderOptions = {
          useLocale: true,
          maxResults: 5
      };
    
      this.nativeGeocoder.reverseGeocode(52.5072095, 13.1452818, options)
        .then((result: NativeGeocoderResult[]) => console.log(JSON.stringify(result[0])))
        .catch((error: any) => console.log(error));
    
      this.nativeGeocoder.forwardGeocode('Berlin', options)
        .then((result: NativeGeocoderResult[]) => console.log('The coordinates are latitude=' + result[0].latitude + ' and longitude=' + result[0].longitude))
        .catch((error: any) => console.log(error));
    

    As you can see NativeGeocorderReverseResult and NativeGeocoderForwardResult are both replaced by NativeGeocoderResult.

    See the source code for more information: https://github.com/ionic-team/ionic-native/blob/4de49c37dd9bd23799b089595db998ade34a9c88/src/%40ionic-native/plugins/native-geocoder/index.ts