Display KML File in 4.X API

[CalebSchwind]

Is there a way to display data from a KML file in a KMLLayer. I found some code at the bottom of this post Is it possible to load KML from a file?, that works for displaying KML files in the 3.x api. Is there something similar that can be done in the 4.x api? 

[Egge-Jan_Pollé]

Hi Caleb Schwind,

Yes, KMLLayer is supported in the 4.x api since version 4.5:

KMLLayer | ArcGIS API for JavaScript 4.14 

You might have a look at this sample: KMLLayer | ArcGIS API for JavaScript 4.14 

HTH,

Egge-Jan

[CalebSchwind]

Hi Egge-Jan Pollé,

The sample shows how to load a KMLLayer using a url. Is there a way to display a KMLLayer from local files on the user's machine in 4.x? In my app, I've added the ability for a user to select local files and have them displayed on the map. 

[MikeHorn]

Can you use URL.createObjectURL to create a URL to pass to KMLLayer?

[CalebSchwind]

I just tried using URL.createObjectURL, but the https://utility.arcgis.com/sharing/kml?url=<generatedUrl> web service ,that is called when the KMLLayer is initialized, immediately returns an "Invalid URL" error.

The url that is generated looks like "blob:http://mysite.com/56f7c728-05d6-4fb1-8a4e-0e76714ca57c". If I remove the "blob:" part of the url, then the https://utility.arcgis.com/sharing/kml service will spin for a while and eventually return a "File not found. Wrong url or out of memory" error. 

It looks like the web service that supports the KMLLayer rejects any url with something before "http". 

[CalebSchwind]

I can directly call the https://utility.arcgis.com/sharing/kml web service with the contents of the file that I loaded in, but I don't see any way to make a KMLLayer from the response. When I do this I get the following response:

The last post in Is it possible to load KML from a file? shows how to create the KMLLayer from the above response in the 3.X api, but the KMLLayer in 4.X doesn't have the parameters necessary to use this method. 

[CharlieElverson]

Hi Caleb, I ran into some similar headaches a while back. I wanted to just create a layer from a KML file on the local machine, but the sharing/kml service refused to accept just the kml file contents.

Do you have a back-end that you can add to?

If so, create 2 REST endpoints. One POST endpoint for uploading the KML file and one GET endpoint for retrieving it.

On the front-end, the user "opens" the file, which uploads it to the POST endpoint. Then, after a successful upload, use the GET endpoint to provide the url for the kml layer.

It's a little clunky, but it's what I had to do, since the KML service refused to work with anything other than a web-accessible file.

[CalebSchwind]

Unfortunately, I don't have a back-end that I can add to.

[SteveCole · Accepted solution]

You can do this, but you have to cobble a solution together. I don't have my own link handy at the moment but I'll post the link to a working example tonight.

Anyways, the strategy is to use the File & FileReader API of HTML 5 to allow your user to specify their desired KML file and to read its contents in. The next step is to convert the KML into JSON/geoJSON and then make your JS API map layer from that. There are JS libraries that facilitate this conversion.

Now, I will say that the working example I'll share later was written with simple KMLs in mind (a single polygon or several). I don't know how well it might work if the KML files you intend to support are more complex.

Anyways, more later..

[CalebSchwind]

I was able to get the KML file import working, using this method. Some of my KMLs are more complex, but I think I can use the results from https://utility.arcgis.com/sharing/kml to get what I need that is missing from the kml to geoJSON conversion. 

Thank you!