Map Type Cesium React Reconciler Error

[ki1ikina]

We created a new MapStore2 project with the project creation script with the latest MapStore 2 code (726be96), and added the following lines to the index.html file:

<script src="MapStore2/web/client/libs/Cesium/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="MapStore2/web/client/libs/Cesium/Build/Cesium/Widgets/widgets.css" />

Then we changed this line of code in Main.jsx from:

const Main = (props) => <MapViewer plugins={props.plugins} params={{mapType: "leaflet"}}/>;

to:

const Main = (props) => <MapViewer plugins={props.plugins} params={{mapType: "cesium"}}/>;

And we now get the following error in the web browser console:

ReactReconciler.js:51 Uncaught (in promise) TypeError: Cannot read property '_currentElement' of null(…)

When switching mapType back to "leaflet" or even "openlayers" all works as expected. Why does a mapType of "cesium" not work?

[mbarto]

Hi, to enable the usage of CesiumJS in projects you need to change the webpack.config.js a little bit (we will update this in next release, so that a manual change is not needed anymore, sorry for the inconvenience). You basically have to: add the following plugin in the plugins section: new NormalModuleReplacementPlugin(/cesium$/, path.join(__dirname, "MapStore2", "web", "client", "libs", "cesium")), change the exclude property of the JSX loader to: exclude: /(ol\.js)$|(Cesium\.js)$/, Let me know if this fixes your issues. Regards, Mauro 2017-01-05 19:19 GMT+01:00 ki1ikina <notifications@github.com>:

…

We created a new MapStore2 project with the project creation script with the latest MapStore 2 code (726be96 <726be96>), and added the following lines to the index.html file: <script src="MapStore2/web/client/libs/Cesium/Build/Cesium/Cesium.js"></script> <link rel="stylesheet" href="MapStore2/web/client/libs/Cesium/Build/Cesium/Widgets/widgets.css" /> Then we changed this line of code in Main.jsx from: const Main = (props) => <MapViewer plugins={props.plugins} params={{mapType: "leaflet"}}/>; to: const Main = (props) => <MapViewer plugins={props.plugins} params={{mapType: "cesium"}}/>; And we now get the following error in the web browser console: ReactReconciler.js:51 Uncaught (in promise) TypeError: Cannot read property '_currentElement' of null(…) When switching *mapType* back to "leaflet" or even "openlayers" all works as expected. Why does a *mapType* of "cesium" not work? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1371>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACpGYEva25C5SX6CdMO7wWiMAd9Cp-Vlks5rPTQqgaJpZM4Lb-a4> .

[ki1ikina]

I modified my webpack.config.js like so:

new NormalModuleReplacementPlugin(/leaflet$/, path.join(__dirname, "MapStore2", "web", "client", "libs", "leaflet")),
new NormalModuleReplacementPlugin(/openlayers$/, path.join(__dirname, "MapStore2", "web", "client", "libs", "openlayers")),
new NormalModuleReplacementPlugin(/cesium$/, path.join(__dirname, "MapStore2", "web", "client", "libs", "cesium")),
new NormalModuleReplacementPlugin(/proj4$/, path.join(__dirname, "MapStore2", "web", "client", "libs", "proj4")),
new NoErrorsPlugin()

and
{
test: /\.jsx?$/,
exclude: /(ol\.js)$|(Cesium\.js)$/,
loader: "react-hot",
include: [path.join(__dirname, "js"), path.join(__dirname, "MapStore2", "web", "client")]
}, {
test: /\.jsx?$/,
exclude: /(ol\.js)$|(Cesium\.js)$/,
loader: "babel-loader",
include: [path.join(__dirname, "js"), path.join(__dirname, "MapStore2", "web", "client")]
}

and I still get the same result in the console (e.g. ReactReconciler.js:51)

I'm sure I'm missing something, but not sure what.

[ki1ikina]

I pulled down the latest version of master (c95bab9) and I was able to successfully manually change between openlayers & cesium. Thank you.