How to load kml file on cesium resium react components

Question

I need to load a kml file on react component using resium-cesium. I have followed the exact procedure as shown in the official resium page as follows.

https://resium.darwineducation.com/getting_started#loading-your-own-data

I tried to load sample kml file from official github page of cesium. https://github.com/CesiumGS/cesium/tree/master/Apps/SampleData I have downloaded this sampleData folder and put under the src folder of react project. Then tried to load as follows.

import React from "react";
import { Viewer, KmlDataSource, GeoJsonDataSource } from "resium";

const data = {
  type: 'Feature',
  properties: {
    name: 'Coors Field',
    amenity: 'Baseball Stadium',
    popupContent: 'This is where the Rockies play!'
  },
  geometry: {
    type: 'Point',
    coordinates: [-104.99404, 39.75621]
  }
};

const App = () => (

  <Viewer full>
    <KmlDataSource data={"src/SampleData/kml/facilities/facilities.kml"} />
    <GeoJsonDataSource data={data} />
  </Viewer>

);

export default hot(App);

I should receive a similar result of this. https://sandcastle.cesium.com/index.html?src=KML.html But I did not receive. In my code GeoJsonDataSource work perfectly. but KmlDataSource have problem. In my log console, I noticed this warnings.

My final output like this. please help me to load kml file perfectly. Thank you for all.

score 3 · Answer 1 · answered Jun 21 '21 at 12:39

You should place your KML file under the public folder like this.

// App.js
import React from "react";
import { Viewer, KmlDataSource, GeoJsonDataSource } from "resium";

const data = {
    type: 'Feature',
    properties: {
        name: 'Coors Field',
        amenity: 'Baseball Stadium',
        popupContent: 'This is where the Rockies play!'
    },
    geometry: {
        type: 'Point',
        coordinates: [-104.99404, 39.75621]
    }
};

const App = () => (
    <Viewer full>
        <KmlDataSource data={"./kml/facilities/facilities.kml"} />
        <GeoJsonDataSource data={data} />
    </Viewer>
);

export default App;

Finally, I see this.

Source code here

@ ZhefengJin I am sorry. I think I disturb you again. If you can please check this question also. Thank you very much for your hard work. https://stackoverflow.com/questions/68294429/how-to-load-kml-kmz-data-files-externally-in-cesium-resium — Dilan Sarith, Jul 08 '21 at 01:04

How to load kml file on cesium resium react components

1 Answers1