const url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";

const layer = new GeoJSONLayer({
  url,
  title: "USGS Earthquakes",
  copyright: "USGS",
  definitionExpression: "type = 'earthquake'",
  popupTemplate: {
    title: `{title}`,
    content: `
      Earthquake of magnitude {mag} on {time}.<br />
      <a href="{url}" >More details...</a>
    `
  }
});

layer.elevationInfo = {
  mode: "absolute-height",
  unit: "kilometers",
  featureExpressionInfo: {
    expression: "Geometry($feature).z * -1"
  }
};

scene.ground.opacity = 1;

layer.renderer = new SimpleRenderer({
  symbol: new PointSymbol3D({
    symbolLayers: [
      new ObjectSymbol3DLayer({
        resource: { primitive: "sphere" }
      })
    ]
  }),
  visualVariables: [
    new ColorVariable({
      field: "mag",
      stops: [{ value: 1, color: "white" }, { value: 5, color: "red" }]
    }),
    new SizeVariable({
      field: "mag",
      axis: "all",
      stops: [{ value: 2, size: 500 }, { value: 7, size: 10000 }]
    })
  ]
});