Which layer to use for KML files?

[vivek091195]

I want to render KML files, I tried rendering the polygons using GeoJSON layer but the result seems to be different when compared with rendering the same file on GoogleMaps. Which layer to use when rendering KML in deck.gl?

[kylebarron]

You should be able to use the GeoJSONLayer by using the KMLLoader from loaders.gl.

[vivek091195]

Hi, I am using react-dropzone for uploading the KML file. Previously, I was trying to read the content of the file like this,

const getParsedKML = (file) => {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    try {
      fileReader.onload = async (e) => {
        let result = await extractGoogleCoords(e.target.result);
        resolve(result);
      }
    } catch (err) {
      reject(err);
    }
    fileReader.readAsText(file)
  })
}

const extractGoogleCoords = async(plainText) => {
    let parser = new DOMParser()
    let xmlDoc = parser.parseFromString(plainText, "text/xml")
    let googlePolygons = []
    let googleMarkers = []

    if (xmlDoc.documentElement.nodeName == "kml") {

      for (const item of xmlDoc.getElementsByTagName('Placemark') as any) {
        let placeMarkName = item.getElementsByTagName('name')[0].childNodes[0].nodeValue.trim()
        let polygons = item.getElementsByTagName('Polygon')
        let markers = item.getElementsByTagName('Point')

        /** POLYGONS PARSE **/        
        for (const polygon of polygons) {
          let coords = polygon.getElementsByTagName('coordinates')[0].childNodes[0].nodeValue.trim()
          let points = coords.split(" ")

          let googlePolygonsPaths = []
          for (const point of points) {
            let coord = point.split(",")
            googlePolygonsPaths.push({ lat: +coord[1], lng: +coord[0] })
          }
          googlePolygons.push(googlePolygonsPaths)
        }

        /** MARKER PARSE **/    
        for (const marker of markers) {
          var coords = marker.getElementsByTagName('coordinates')[0].childNodes[0].nodeValue.trim()
          let coord = coords.split(",")
          googleMarkers.push({ lat: +coord[1], lng: +coord[0] })
        }
      }
    } else {
      throw "error while parsing"
    }

    return { markers: googleMarkers, polygons: googlePolygons }

  }

Can you please help me in understanding how can I use KMLLoader here, I tried using it, but ended up in an error of Failed to fetch, because I guess it accepts a URL as the first parameter. How can I use it here? I tried using KMLLoader like this,

import {KMLLoader} from '@loaders.gl/kml';
import {load} from '@loaders.gl/core';
const getParsedKML = (file, showDialog) => {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    try {
      fileReader.onload = async (e) => {
        const data = await load(e.target.result, KMLLoader);
        resolve(result);
      }
    } catch (err) {
      reject(err);
    }
    fileReader.readAsText(file)
  })
}

[ibgreen]

This may be a discussion for loaders.gl. I believe the KMLLoader is based on the @tmcw/togeojson package, which probably dictates how things like ExtendedData tags in KML are handled (or not).

[vivek091195]

I checked directly with @tmcw/togeojson package, it seems to be working fine. But when calling it with KMLLoader, then ExtendedData tags are missing.

[kylebarron]

We used to use a custom KML parser in loaders.gl and recently switched to using @tmcw/togeojson. It looks like that didn't make it into 2.3.x, so you'll need to use v3.0.0-alpha.3 or higher, from this PR (visgl/loaders.gl#1019).

[ibgreen]

Good catch. You should be able to import just the kml loader from 3.0.0-alpha. I don't recommend bumping other modules at this stage.

[vivek091195]

@ibgreen @kylebarron Thanks a lot, v3.0.0-alpha.3 works fine.