JS v3.0 API Parsing/displaying of complex MultiPolygon shapes using KML/GeoJSON with "holes"

[jesse-vericatch]

Hi there,

I've opened a support request relating to this same issue hoping that I'll get an answer back quickly relating to Heremaps JS API parsing of KML/GeoJSON MultiPolygons with "holes" in them as in the image below.

As I'm a paying customer I've confirmed within the TCS Examples with KML and have uploaded the same KML file but don't see any of the cutout areas.

So what's the current status for being able to work with complex shapes like this or how would I go about using these?

Let me know what else I could provide you to assist.

Cheers,
Jesse

[germanz]

@jesse-vericatch use the H.data.geojson.Reader. We introduced a disableLegacyMode flag in order to support the complex geometries (MultiGeometry, holes) and do not break the backward compatibility. So the code should look like this:

var reader = new H.data.geojson.Reader('/path/to/geojson/file.json', {disableLegacyMode: true});
reader.parse();
map.addLayer(reader.getLayer());

Please attach an example dataset if it still does not work.
Polygons with holes with the KML are not supported at the moment.

[Wokiri]

Hello,

I have a valid geojson file which does not render in my map. Instead, my console reports something of this nature...
Cannot GET /%7B%22type%22:%22FeatureCollection%22,%22name%22:%22CircularArea%22,%22crs%22:%7B%22type%22:%22name%22,%22properties%22:%7B%22name%22:%22urn:ogc:def:crs:OGC:1.3:CRS84%22%7D%7D,%22features%22:[%7B%22type%22:%22Feature%22,%22geometry%22:%7B%22type%22:%22Polygon%22,%22coordinates%22:[[[28.03751,-26.21245],[28.03777,-26.21245],[28.03803,-26.21245],[28.03829,-26.21247],[28.03855,-26.21248],[28.03881,-26.2125],[28.03907,-26.21253],[28.03933,-26.21256],[28.03959,-26.21259]....

... 404 (Not Found)d @ mapsjs-core.js:41 Qc @ mapsjs-core.js:42 text/plain @ mapsjs-core.js:75 qf.Dj @ mapsjs-core.js:74 (anonymous) @ mapsjs-core.js:52 (anonymous) @ mapsjs-core.js:52 ge.b @ mapsjs-core.js:52 ge.add @ mapsjs-core.js:51 de @ mapsjs-core.js:51 qf @ mapsjs-core.js:74 Us.parse @ VM850:30 geoJsonAreaCoverage @ HackathonMap.js:64 (anonymous) @ HackathonMap.js:373

This is just a section of the message. Would you help me figure out the reason for this anomaly, I guess it is on my side.

Thanks.

[ttobis]

@Wokiri can you please share reproducible code sample?

[Wokiri]

https://1drv.ms/u/s!AnbB9qGR0gszgYZ9kygwksmLMaCMiA?e=Ofbc2G

Kindly receive. I have not included my API key I hope you will append yours,
Thanks.

[ttobis]

ok, I see where the problem is.

As per the geojson.Reader documentation, the first parameter should be URL to geojson file, not the geojson data.
If you want to parse geojson data, then create instance of Reader with undefined first parameter:
geoJsonReader = new H.data.geojson.Reader(undefined, {...
and then parse the data using parseData method, instead of parse:
geoJsonReader.parseData(data)

[Wokiri]

Many thanks... It works.

[oleksmarkh]

Polygons with holes are supported for KML since v3.1.15.0:

function getKml(xml) {
  return `<?xml version="1.0" encoding="UTF-8"?>
    <kml xmlns="http://www.opengis.net/kml/2.2">
      ${xml}
    </kml>`.replace(/\n/g, '').replace(/>\s*</g, '><');
};

const polygonKml = getKml(`
  <Document>
    <Folder>
      <name>InputLayer</name>
      <Placemark>
        <MultiGeometry>
          <Polygon>
            <outerBoundaryIs>
              <LinearRing><coordinates>...</coordinates></LinearRing>
            </outerBoundaryIs>

            <innerBoundaryIs>
              <LinearRing><coordinates>...</coordinates></LinearRing>
            </innerBoundaryIs>

            <innerBoundaryIs>
              <LinearRing><coordinates>...</coordinates></LinearRing>
            </innerBoundaryIs>

            <innerBoundaryIs>
              <LinearRing><coordinates>...</coordinates></LinearRing>
            </innerBoundaryIs>
          </Polygon>
        </MultiGeometry>
      </Placemark>
    </Folder>
  </Document>
`);

const kmlReader = new H.data.kml.Reader(null);
kmlReader.setState(H.data.AbstractReader.State['LOADING']);
kmlReader.createObjects(polygonKml);
console.log(kmlReader.getLayer().getProvider().getRootGroup().getObjects());
map.addLayer(kmlReader.getLayer());