Converting Mapbox GL Feature Coordinates to CesiumJS-compatible Format for ReactJS App

Converting Mapbox GL Feature Coordinates to CesiumJS Compatible Format in a ReactJS App

In this article, we will demonstrate how to convert Mapbox GL feature coordinates to a CesiumJS compatible format in a ReactJS application. This is particularly useful when working with applications that require the use of both Mapbox GL and CesiumJS maps.

Prerequisites

Before diving into the conversion process, it is assumed that the reader has a working knowledge of the following:

• JavaScript programming language
• ReactJS library
• Mapbox GL JS library
• CesiumJS library

Mapbox GL Feature Coordinates

Mapbox GL provides a feature object containing various information about a clicked feature, including its geometry, properties, and id. The geometry property contains the coordinate information in the form of a GeoJSON object.

{
  "type": "Feature",
  "geometry": {
    "type": "Polygon",
    "coordinates": [[
      [-104.053839, 39.702446],
      [-104.053858, 39.702551],
      [-104.054053, 39.702552],
      [-104.054059, 39.702447],
      [-104.053839, 39.702446]
    ]]
  },
  "properties": {
    "name": "Washington, D.C.",
    "icon": "monument"
  },
  "id": "polygon-1"
}

Converting Mapbox GL Feature Coordinates to CesiumJS Compatible Format

CesiumJS requires coordinate information in the form of an array of Cartesian3 objects, which are different from the GeoJSON format used by Mapbox GL.

To convert the Mapbox GL feature coordinates to a CesiumJS compatible format, we can create a helper function that takes the geometry property of a Mapbox GL feature object and returns a CesiumJS compatible format.

function convertMapboxGLGeometryToCesiumJS(geometry) {
  const cesiumGeometry = [];
  switch (geometry.type) {
    case "Point":
      cesiumGeometry.push(
        new Cesium.Cartesian3.fromDegrees(geometry.coordinates[0], geometry.coordinates[1])
      );
      break;
    case "LineString":
      geometry.coordinates.forEach((coordinate) => {
        cesiumGeometry.push(
          new Cesium.Cartesian3.fromDegrees(coordinate[0], coordinate[1])
        );
      });
      break;
    case "Polygon":
      geometry.coordinates[0].forEach((coordinate) => {
        cesiumGeometry.push(
          new Cesium.Cartesian3.fromDegrees(coordinate[0], coordinate[1])
        );
      });
      break;
    default:
      console.error("Unsupported geometry type:", geometry.type);
      break;
  }
  return cesiumGeometry;
}

Integrating with a ReactJS App

Now that we have a helper function to convert Mapbox GL feature coordinates to a CesiumJS compatible format, we can integrate this with a ReactJS application.

Assuming we have a Mapbox GL map and a CesiumJS map in our ReactJS application, we can add a click event listener to the Mapbox GL map that converts the feature coordinates to a CesiumJS compatible format and sets the CesiumJS map to the same location.

function handleMapboxGLClick(event) {
  if (event.features.length > 0) {
    const feature = event.features[0];
    const cesiumGeometry = convertMapboxGLGeometryToCesiumJS(feature.geometry);
    const cesiumEntity = viewer.entities.add({
      position: cesiumGeometry,
      // other CesiumJS entity properties
    });
  }
}

• Mapbox GL provides a feature object containing geometry information in the form of a GeoJSON object.
• CesiumJS requires coordinate information in the form of an array of Cartesian3 objects.
• We can create a helper function to convert Mapbox GL feature coordinates to a CesiumJS compatible format.
• We can integrate this helper function in a ReactJS application by adding a click event listener to the Mapbox GL map that converts the feature coordinates to a CesiumJS compatible format and sets the CesiumJS map to the same location.

References

• Mapbox GL Geometry
• CesiumJS Cartesian3
• ReactJS
• Mapbox GL Map On