Deadline soon! Really Need Help, Cordova Maps

Ionic Framework ionic-v3
1

Hey,

I have a deadline to meet soon and I am struggling with one aspect of my application…

I am using cordova maps to display a KML file like so…

addKmlOverlay({'url': "https://www.samplewebsite.com/myKMLFile.kml"});

And that works great. But I am also providing an offline solution and I am storing the file contents in a string like so…

var myKMLString = "<?xml version='1.0' encoding='UTF-8'?><kml xmlns='http://www.opengis.net/kml/2.2'><Document></Document></kml>"

But the addKmlOverlay states this…

“map.addKmlOverlay() adds geographic markup onto the map from a KML file. You can specify the file using one of the following protocols: http, https, file, cdvfile or the file absolute path. Only Android, also accepts file:///android_asset/. The added overlays are clickable.”

So I’m lost at how to convert my string into a format that the addKmlOverlay will accept.

If anyone can help it would be greatly appreciated!

Thanks

2

You could always decide to store to the file on your device? That way you could always retrieve it from your device, even when it’s offline.

3

Hey, Thanks for the reply.

I have been trying to do this but I couldn’t get it working and thought the string approach then converting would be easier.

If you could point me in the right direction I would definitely try that.

4

You should use the FileTransfer plugin, which you can find over here: http://ionicframework.com/docs/native/transfer/.

Download the file on your device and you can use the file// cdvfile// approach :slight_smile:

1 Like
5

Can I use this plugin with Ionic 2 or will I need to move up to 3?

6

You could use them with Ionic 2 or 3. But with Ionic 3 (edit: native) it’s easier to load the plugins separately and you could decrease your bundle size (since you haven’t got the explicit need to import the entire ionic/native module).

7

You’re referring to Ionic Native 3, which is different from Ionic 3.

1 Like
8

Ionic 3 and 2 aren’t really different in the way Ionic 1 and 2 are different. The question was about Ionic 2 or 3 and I didn’t explain it properly. You don’t need to upgrade Ionic from 2 to 3 to make use of Ionic Native.

You could move up to Ionic native 3 and I would recommend you to do so, because it decreases you bundle size. Nonetheless, you don’t need to. It’s up to you.

9

Thanks, I’m currently not moving up to native 3 just yet but trying to implement the plugin.

I have added these imports…

import { Transfer, File } from 'ionic-native';

Declared them in the constructor…

constructor(private transfer: Transfer, private file: File)

and added this in ionViewDidLoad() (Just for testing)

  const fileTransfer: TransferObject = this.transfer.create();
  
  const url = 'http://www.example.com/file.pdf';
  fileTransfer.download(url, this.file.dataDirectory + 'file.pdf').then((entry) => {
    console.log('download complete: ' + entry.toURL());
  }, (error) => {
    // handle error
  });

Now obviously it isn’t working because I have not imported TransferObject - because it doesn’t exist. But that is because I’m guessing it only exists in native 3.

I don’t see why the docs aren’t versioned because I don’t see how someone can just find this out on their own.

Thanks for any help you can give me.

10

You could just not set an explicit type to const fileTransfer. Or set it to any. This is more error prone and not really typescript like, but it should get you up and running.

11

I’ve changed it around to look like so…

const fileTransfer = this.transfer.create();

which just results in the ide telling me create is not defined on transfer.

I also just set it to any and removed the assignment of this.transfer.create() (which obviously wont work) but I receive an error saying that Transfer has no provider.

12

Okay and instead of declaring it through your decorator, does calling it directly work for you? Like this: Transfer.create() or does it still say Transfer has no provider? I’m looking through an older implementation I did with FileTransfer plugin (and lower Ionic Native version) and it’s looking like this:

  let ft = new Transfer();
  // download the video and set it to localhost where it's stored
  ft.download(url, pathToSaveTo).then(() => {
	  this.dismissLoading();  		
	  this.registerVideoListeners();     
			
  }).catch((err) => {
	  this.presentToast(err);
	  this.dismissLoading();
	  console.log('something went wrong while downloading your video.');
  });
13

Calling it directly like so…

const fileTransfer = Transfer.create();

Still shows the message:
image

If I go ahead and build this on the device anyway, I recieve 2 errors one saying No provider for transfer and another stating create doesnt exist like above.

14

Okay, that’s definitely due to a versioning issue. Try it like the example I gave you. I guess the methods on the Transfer are different nowadays.

15

thanks for all the help! maybe I’ll just have to update to the latest.

16

I feel your frustration with not founding these (deprecated) docs, but it’s a good reason to up your version of Ionic Native. if you don’t have that many plugins, i think it’s worth it to upgrade.