Client-side projection

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample shows how to project features to the spatialReference that user picked from the projections drop down menu using the client-side projection module.

GeoJSON portal item containing features for oceans and continents are loaded from ArcGIS Online. Once the portal item is loaded, the raw GeoJSON data is fetched. Each GeoJSON feature is converted to a Polygon instance with a WGS84 spatial reference. Each polygon is then projected from WGS84 to the Winkel III spatial reference initially. Users then can choose a different projection from the drop down and the polygons will be converted to that projection and will be re-displayed on the view.

function projectData(wkid) {
  // convert polygons from WGS84 to the selected spatial reference
  var outSpatialReference = new SpatialReference({
    wkid: wkid
  });

  // loop through the raw GeoJSON data, project the polygons,
  // and create array of graphics to be added to the view
  const graphics = jsonData.features.map(function (feature, i) {
    // create a polygon from the raw GeoJSON specify its spatial reference
    const polygon = new Polygon({
      spatialReference: SpatialReference.WGS84
    });

    // read the GeoJSON's geometry and add to the polygon rings
    feature.geometry.coordinates.forEach(function (coord) {
      polygon.addRing(coord[0]);
    });

    // project the polygons to the user selected projection
    const projectedPolygon = projection.project(polygon, outSpatialReference);

    // create new graphic and set its geometry to the projected polygon
    const graphic = {
      geometry: projectedPolygon,
      // select only the attributes you care about
      attributes: {
        ObjectID: i
      }
    };

    // check if the feature is continent or ocean and assign an appropriate symbol
    graphic.symbol = feature.properties.CONTINENT != "Ocean" ? createSymbol("#31a354") :
      createSymbol("#2B65EC");

    return graphic;
  });

  // re-create view and map
  recreateView(graphics, outSpatialReference);
}