<arcgis-map id="hello" basemap="osm" center="-98.5,39.8" zoom="4">
</arcgis-map>

<select id="pick">
  <option value="osm">OpenStreetMap</option>
  <option value="satellite">Satellite</option>
</select>

<script type="module">
  document.getElementById("pick").addEventListener("change", (e) => {
    document.getElementById("hello").basemap = e.target.value;
  });
</script>

const quakes = new GeoJSONLayer({
  url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson",
  renderer: dotsSizedByMagnitude,
});
mapEl.map.add(quakes);

// Clusters: one property.
quakes.featureReduction = { type: "cluster", clusterRadius: "80px" };

// Heatmap: swap the renderer.
quakes.featureReduction = null;
quakes.renderer = {
  type: "heatmap",
  colorStops: [
    { ratio: 0.0, color: "rgba(216, 0, 27, 0)" },
    { ratio: 0.6, color: "rgba(216, 0, 27, 0.55)" },
    { ratio: 1.0, color: "#79000f" },
  ],
};

<arcgis-scene basemap="satellite" ground="world-elevation">
</arcgis-scene>

const [Camera, Point] = await $arcgis.import([
  "@arcgis/core/Camera.js",
  "@arcgis/core/geometry/Point.js",
]);

sceneEl.view.goTo(new Camera({
  position: new Point({ longitude: 86.92, latitude: 27.75,
    z: 9200, spatialReference: { wkid: 4326 } }),
  tilt: 76,
  heading: 12,   // facing the summit
}));

// Time: give the layer's own timestamps to a slider tag.
<arcgis-time-slider mode="cumulative-from-start" loop play-rate="90">
</arcgis-time-slider>

slider.fullTimeExtent = storms.timeInfo.fullTimeExtent;
slider.stops = { interval: { value: 6, unit: "hours" } };
slider.play();

// Mood: one property, no new layer.
quakes.effect = "bloom(2, 0.6px, 0.1)";

const geometryEngine = await $arcgis.import(
  "@arcgis/core/geometry/geometryEngine.js");

mapEl.view.on("click", async (event) => {
  const circle = geometryEngine.geodesicBuffer(
    event.mapPoint, 250, "kilometers");
  drawCircle(circle);   // a fill graphic, nothing more

  const { features } = await quakes.queryFeatures({
    geometry: circle,
    spatialRelationship: "intersects",
    outFields: ["mag", "place"],
  });

  const strongest = features.reduce(
    (a, b) => (a?.attributes.mag > b.attributes.mag ? a : b), null);
  card.innerHTML = features.length
    ? `<h3>${features.length} earthquakes within 250 km this week</h3>
       <p>Strongest: M ${strongest.attributes.mag.toFixed(1)}, ${strongest.attributes.place}</p>`
    : `<h3>Zero earthquakes within 250 km this week</h3>
       <p>A quiet neighborhood.</p>`;
});

const { features } = await quakes.queryFeatures({
  where: "1=1",
  outFields: ["mag", "place", "time"],
});

kpiTotal.textContent = features.length.toLocaleString();
kpiBig.textContent = features
  .filter((f) => f.attributes.mag >= 4.5).length.toLocaleString();

const strongest = [...features]
  .sort((a, b) => b.attributes.mag - a.attributes.mag)[0];
kpiMax.textContent = `M ${strongest.attributes.mag.toFixed(1)}`;

const newest = features.reduce((a, b) =>
  a.attributes.time > b.attributes.time ? a : b);
kpiRecent.textContent = agoText(newest.attributes.time);

row.addEventListener("click", () => {
  mapEl.view.goTo({ target: feature.geometry, zoom: 6 });
});

const WMSLayer = await $arcgis.import(
  "@arcgis/core/layers/WMSLayer.js");

mapEl.map.add(new WMSLayer({
  url: "https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi",
  sublayers: [{ name: "nexrad-n0r" }],
  opacity: 0.65,
  refreshInterval: 5,   // minutes; the layer refetches itself
}));

const HURRICANES = "https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/Active_Hurricanes_v1/FeatureServer";

const cone      = new FeatureLayer({ url: HURRICANES + "/4", opacity: 0.35 });
const track     = new FeatureLayer({ url: HURRICANES + "/2" });
const positions = new FeatureLayer({ url: HURRICANES + "/0",
  outFields: ["STORMNAME", "MAXWIND", "BASIN"] });

mapEl.map.addMany([cone, track, positions]);

const chapters = new FeatureLayer({
  // The service name says 2022; the data inside is the current
  // vintage (226 chapters). Names, not codes, in every card.
  url: "https://services.arcgis.com/pGfbNJoYypmNq86F/arcgis/rest/services/Master_ARC_Geography_2022/FeatureServer/3",
  outFields: ["Chapter", "Region", "Division"],
  renderer: subtleOutlines,
});
mapEl.map.add(chapters);

mapEl.view.on("click", async (event) => {
  const hit = await mapEl.view.hitTest(event, { include: chapters });
  const result = hit.results.find((r) => r.graphic?.layer === chapters);
  if (result) showCard(result.graphic.attributes);  // name, region, division
});

// The exact three layers from the sections above, all on one map.
mapEl.map.addMany([chapters, radar, cone, track, positions]);

// Click handling now checks two layers instead of one.
mapEl.view.on("click", async (event) => {
  const hit = await mapEl.view.hitTest(event,
    { include: [positions, chapters] });
  const storm = hit.results.find((r) => r.graphic?.layer === positions);
  const chapter = hit.results.find((r) => r.graphic?.layer === chapters);

  if (storm) showStormCard(storm.graphic.attributes);
  else if (chapter) showChapterCard(chapter.graphic.attributes);
});

const res = await fetch("/api/flights");
const { states } = await res.json();

const graphics = states.map((s) => new Graphic({
  geometry: { type: "point", longitude: s.lon, latitude: s.lat },
  attributes: s,
}));

const planes = new FeatureLayer({
  source: graphics,
  objectIdField: "icao24",
  fields: [
    { name: "icao24", type: "string" },
    { name: "callsign", type: "string" },
    { name: "country", type: "string" },
    { name: "altitudeM", type: "double" },
    { name: "velocityMs", type: "double" },
  ],
  renderer: dotRenderer,
});
mapEl.map.add(planes);

const dotRenderer = {
  type: "simple",
  symbol: { type: "simple-marker", size: 5, outline: null },
  visualVariables: [{
    type: "color",
    field: "altitudeM",
    stops: [
      { value: 0,     color: "#fff0f2" },
      { value: 12000, color: "#79000f" },
    ],
  }],
};

mapEl.view.on("click", async (event) => {
  const hit = await mapEl.view.hitTest(event, { include: planes });
  const result = hit.results.find((r) => r.graphic?.layer === planes);
  if (!result) return;
  showCard(result.graphic.attributes);  // callsign, country, altitude, speed
});

const res = await fetch(
  "https://eonet.gsfc.nasa.gov/api/v3/events?status=open");
const { events } = await res.json();

const graphics = events.map((e) => {
  const point = e.geometry.at(-1);   // most recent position
  return new Graphic({
    geometry: { type: "point", longitude: point.coordinates[0],
                latitude: point.coordinates[1] },
    attributes: { title: e.title, category: e.categories[0].title,
                  link: e.sources[0]?.url, date: point.date },
  });
});

const events_ = new FeatureLayer({
  source: graphics,
  objectIdField: "oid",
  fields: [ /* title, category, link, date */ ],
  renderer: dotRenderer,   // the same marker style as every other layer here
});
mapEl.map.add(events_);

mapEl.view.on("click", async (event) => {
  const hit = await mapEl.view.hitTest(event, { include: events_ });
  const result = hit.results.find((r) => r.graphic?.layer === events_);
  if (result) showCard(result.graphic.attributes);  // title, category, link
});

const { solarLat, solarLon } = await (await fetch("/api/iss")).json();

// The boundary of this buffer, a quarter of Earth's circumference from
// the sun's point, IS the terminator.
const litHemisphere = geometryEngine.geodesicBuffer(
  { type: "point", longitude: solarLon, latitude: solarLat },
  10007.5,           // a quarter of Earth's circumference, in kilometers
  "kilometers"
);
const terminatorLine = { type: "polyline", paths: litHemisphere.rings };

sceneEl.map.add(new GraphicsLayer({
  elevationInfo: { mode: "on-the-ground" },
  graphics: [new Graphic({ geometry: terminatorLine, symbol: goldLine })],
}));

setInterval(async () => {
  const iss = await (await fetch("/api/iss")).json();
  issGraphic.geometry = { type: "point",
    longitude: iss.lon, latitude: iss.lat, z: iss.altitudeKm * 1000 };
}, 8000);