configure cesium in ADC portal to load HWITW pane

[mbjones]

The plan is to have a cesium-based globe where clicking on the globe produces a lat/lon value, which in turn is used to generate a HWITW URI that can load the time series graph for that point. This would be displayed in a pane in Cesium.

Here's some sample code for getting the lat/lon value in Cesium:

var viewer = new Cesium.Viewer('cesiumContainer');
viewer.canvas.addEventListener('click', function (e) {

    var mousePosition = new Cesium.Cartesian2(e.clientX, e.clientY);
    var ellipsoid = viewer.scene.globe.ellipsoid;
    var cartesian = viewer.camera.pickEllipsoid(mousePosition, ellipsoid);

    if (cartesian) {

        var cartographic = ellipsoid.cartesianToCartographic(cartesian);
        var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
        var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);

        alert(longitudeString + ', ' + latitudeString);

    } else {

        alert('Globe was not picked');

    }
}, false);

[robyngit]

@mbjones see NCEAS/metacatui#2199 (comment) for a sandcastle demo

[mbjones]

Sandcastle link from above is still working fine. Here's the Cesium JS code to be sure we keep track of it.

// Set up the Cesium viewer.
const viewer = new Cesium.Viewer("cesiumContainer", {
  selectionIndicator: false,
  infoBox: false,
});
const scene = viewer.scene;

// Base URL for How Weird Is The Weather.
const urlBase = "https://hwitw-dev.arcticdata.io/static/index.html?";

// Create the Cesium mouse event handler
const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

// Create the entity that will serve as the label that displays the lat/lon.
const label = viewer.entities.add({
  label: {
    show: false,
    showBackground: true,
    font: "14px monospace",
    horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
    verticalOrigin: Cesium.VerticalOrigin.TOP,
    pixelOffset: new Cesium.Cartesian2(15, 0),
  },
});

// Convert a cartographic coord to a fixed decimal string.
function formatCartographic(coordinate) {
  return Cesium.Math.toDegrees(coordinate).toFixed(2);
}

// Given mouse coordinates, get the lat/lon as a string
function getLatLonString(cartesian) {
  if (!cartesian) return;
  const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  const longitudeString = formatCartographic(cartographic.longitude);
  const latitudeString = formatCartographic(cartographic.latitude);
  return [longitudeString, latitudeString];
}

// Format the lat/lon as a string for the HWITW URL.
function formatLatLonForHWITW(latLonArray) {
  const [longitudeString, latitudeString] = latLonArray;
  return `lat=${latitudeString}&lon=${longitudeString}`;
}

// Format the lat/lon as a string for the label.
function formatLatLonForLabel(latLonArray) {
  const [longitudeString, latitudeString] = latLonArray;
  return `Lat: ${latitudeString}\u00B0, Lon: ${longitudeString}\u00B0`;
}

// Update the label with the lat/lon string and position it on the globe.
function updateLabel(string, cartesian) {
  label.position = cartesian;
  label.label.show = true;
  label.label.text = string;
}

// Hide the label.
function hideLabel() {
  label.label.show = false;
}

// Keep track of the last lat/lon string.
let lastPositionString = [];

// Show the position of the mouse on the globe while it's moving.
handler.setInputAction(function (movement) {
  const cartesian = viewer.camera.pickEllipsoid(
    movement.endPosition,
    scene.globe.ellipsoid
  );
  const posStrings = getLatLonString(cartesian);
  if (!posStrings) {
    hideLabel();
    return;
  }
  lastPositionString = posStrings; // For the click event.
  const labelString =
    "How Weird Is The Weather at\n" + formatLatLonForLabel(posStrings);

  updateLabel(labelString, cartesian);
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

// Redirect to HWITW on mouse click.
handler.setInputAction(function () {
  if (!lastPositionString || !lastPositionString.length) {
    return;
  }
  const hwitwString = formatLatLonForHWITW(lastPositionString);
  const url = urlBase + hwitwString;
  window.open(url, "_blank");
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);