Draw KML Extent Given an XML in ArcGIS JS SDK

Question

I have a link that will return an HTML with the plain text of an XML. An example is below.

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<Style id="0"> 
</Style> 
<Placemark>
<Polygon><outerBoundaryIs><LinearRing><coordinates>-85.168000000000006,30.344000000000001 -83.069000000000003,25.523 -52.729999999999997,30.094000000000001 -53.235999999999997,35.152000000000001 -85.168000000000006,30.344000000000001</coordinates></LinearRing></outerBoundaryIs></Polygon>
</Placemark>
</Document>
</kml>

I need to be able to create a KML that is described above I have tried the code below but to no avail. There were other attempts, but I do not remember exactly what I changed as this was last week.

let kmlExtent = null;
 function drawKML(dataid) {
 let kURL = "https://.../cwn_L2_kml.cgi?dataid=" + dataid;
 
 if (kmlExtent == null) {
 console.log("here");
 actDrawKML(kURL);
 } else if (kmlExtent != null) {
 console.log("here2")
 map.remove(kmlExtent);
 actDrawKML(kURL);
 }
 }
 function actDrawKML(kURL) {
 fetch(proxyUrl + kURL)
 .then(response => response.blob()) // Parse the JSON response
 .then(data => {
 console.log(data);
 console.log(data.type);
 // Create a Blob with the KML content and correct MIME type
 const kmlBlob = new Blob([data], {type: 'application/vnd.google-earth.kml+xml'});
 const kmlUrl = URL.createObjectURL(kmlBlob);
 kmlExtent = new KMLLayer({
 visible: true,
 url: kmlUrl,
 title: "Spatial Extent"
 });
 map.add(kmlExtent);
 })
 .catch(error => console.error('Error fetching or processing KML content: ', error));
 }

The console outputs are in the image below. I don't know what else I could try I tried parsing it as a JSON with response.JSON(), but that did not work. Is there any suggestions on what to try? Console statements

error: k {name: 'request:server', details: {...}, message: 'Unable to load https://utility.arcgis.com/sharing/...Dsl7F9KurI89k2tGEKbfrfdpoX6ek8Kh0rqIf status: 400'}

Answer 1

Your are out of luck here with using object URL for url option when creating KML layer. If you look at the docs at https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-KMLLayer.html#url, you can read:

The publicly accessible URL for a .kml or .kmz file.

This means you can't use object URL for KML layer url option.

If you don't explictly want to add KML layer, one possible solution is to convert KML to GeoJSON and then add GeoJSON layer. Conversion can be done with Mapbox togeojson JS library.

Relevant part of the code could then look something like this:

fetch(kmlUrl)
 .then((response) => response.text())
 .then((text) => {
 const parser = new DOMParser();
 const xml = parser.parseFromString(text, "text/xml");
 const geojson = toGeoJSON.kml(xml);
 const blob = new Blob([JSON.stringify(geojson)], {
 type: "application/json"
 });
 const url = URL.createObjectURL(blob);
 const layer = new GeoJSONLayer({
 url
 });
 groupLayer.add(layer);
 });

This is the result:

enter image description here