Garrett Luu / Oxkintok

Download as
Browse Code »

Commit 9f6da49531d69002e01b18e4c4e0bdca7d347370

Authored by Garrett Luu
1 parent c3de46ad6f
Exists in main

Implement legend functionality

Showing 2 changed files with 34 additions and 56 deletions Side-by-side Diff

Oxkintok_t.html View file @ 9f6da49
... ... @@ -379,10 +379,11 @@
379 379 // viewer.scene.view.position.set(position);
380 380 // }
381 381  
382   - function createNewViewModel({name, tooltip, layer, id, format}) {
  382 + function createNewViewModel({name, tooltip, layer, id, format, units, min, max, legend = true}) {
383 383 const now = Cesium.JulianDate.now();
384 384 const past = Cesium.JulianDate.now();
385   - Cesium.JulianDate.addDays(now, -2, past);
  385 + Cesium.JulianDate.addDays(now, -7, now);
  386 + Cesium.JulianDate.addDays(now, -9, past);
386 387 const times = Cesium.TimeIntervalCollection.fromIso8601({
387 388 iso8601: `${Cesium.JulianDate.toIso8601(past, 0)}/${Cesium.JulianDate.toIso8601(now, 0)}`,
388 389 leadingInterval: true,
... ... @@ -399,7 +400,7 @@
399 400 const provider = new Cesium.WebMapTileServiceImageryProvider({
400 401 url:
401 402 `https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/${layer}/default/{Time}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.${format}`,
402   - layer: "MODIS_Terra_CorrectedReflectance_TrueColor",
  403 + layer: layer,
403 404 style: "default",
404 405 tileMatrixSetID: id,
405 406 maximumLevel: 5,
406 407  
... ... @@ -409,9 +410,24 @@
409 410 credit: "NASA Global Imagery Browse Services for EOSDIS",
410 411 tilingScheme: gibs.GeographicTilingScheme()
411 412 });
  413 + // update legend
  414 + if (legend) {
  415 + var qs = document.querySelector.bind(document);
  416 + qs('.scale .legend-title').textContent = units
  417 + qs('.legend-colorbar').setAttribute('src', `images/${layer}.png`);
  418 + qs('.legend-max').innerHTML = max;
  419 + qs('.legend-min').innerHTML = min;
  420 + qs('#legend .single').style.display = 'none';
  421 + qs('#legend .scale').style.display = 'block';
  422 + qs('#legend').style.display = 'block';
  423 + } else {
  424 + var qs = document.querySelector.bind(document);
  425 + qs('#legend').style.display = 'none';
  426 + }
412 427 // Make the weather layer semi-transparent to see the underlying geography.
413 428 provider.defaultAlpha = .5;
414 429 return [providerViewModels[1].creationCommand(), provider]
  430 +
415 431 }
416 432 })
417 433 providerViewModels.push(providerViewModel);
... ... @@ -423,7 +439,8 @@
423 439 tooltip: "Realtime weather data from NASA Global Imagery",
424 440 layer: "MODIS_Terra_CorrectedReflectance_TrueColor",
425 441 id: "250m",
426   - format: "jpg"
  442 + format: "jpg",
  443 + legend: false
427 444 });
428 445  
429 446 createNewViewModel({
430 447  
431 448  
432 449  
... ... @@ -431,61 +448,22 @@
431 448 tooltip: "Realtime aerosols data",
432 449 layer: "MODIS_Terra_Aerosol",
433 450 id: "2km",
434   - format: "png"
  451 + format: "png",
  452 + units: "Optical Depth",
  453 + min: "0.0",
  454 + max: "⩾ 5.0",
435 455 });
436   -
437   -
438   - let fireProviderViewModel = new Cesium.ProviderViewModel({
  456 + createNewViewModel({
439 457 name: "Infrared",
440   - tooltip: "Realtime weather data from NASA Global Imagery",
441   - category: "Other",
442   - iconUrl: "libs/Cesium/Widgets/Images/ImageryProviders/bingAerial.png",
443   - creationFunction: () => {
444   - const provider = new Cesium.WebMapTileServiceImageryProvider({
445   - url:
446   - "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/GOES-East_ABI_Band13_Clean_Infrared/default/{Time}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png",
447   - layer: "GOES-East_ABI_Band13_Clean_Infrared",
448   - style: "default",
449   - tileMatrixSetID: "2km",
450   - maximumLevel: 5,
451   - format: "image/png",
452   - clock: cesiumViewer.clock,
453   - times: times,
454   - credit: "NASA Global Imagery Browse Services for EOSDIS",
455   - tilingScheme: gibs.GeographicTilingScheme()
456   - });
457   - // Make the weather layer semi-transparent to see the underlying geography.
458   - provider.defaultAlpha = .5;
459   - provider.readyPromise.then(() => {
460   - const start = Cesium.JulianDate.fromIso8601("2022-11-08");
461   - const stop = Cesium.JulianDate.fromIso8601("2022-11-09");
462   -
463   - cesiumViewer.timeline.zoomTo(start, stop);
464   - clock.startTime = start;
465   - clock.stopTime = stop;
466   - clock.currentTime = start;
467   - clock.clockRange = Cesium.ClockRange.LOOP_STOP;
468   - clock.multiplier = 7200;
469   - });
470   - // update legend
471   - var qs = document.querySelector.bind(document);
472   - qs('.scale .legend-title').textContent = "Temperature"
473   - qs('.legend-colorbar').setAttribute('src', "images/GOES-East_ABI_Band13_Clean_Infrared.png");
474   - qs('.legend-max').innerHTML = "57";
475   - qs('.legend-min').innerHTML = "-92";
476   - qs('#legend .single').style.display = 'none';
477   - qs('#legend .scale').style.display = 'block';
478   - qs('#legend').style.display = 'block';
479   - return [providerViewModels[1].creationCommand(), provider]
480   - }
  458 + tooltip: "Infrared",
  459 + layer: "GOES-East_ABI_Band13_Clean_Infrared",
  460 + id: "2km",
  461 + format: "png",
  462 + units: "Temperature",
  463 + min: "-92℃",
  464 + max: "> 57℃"
481 465 })
482 466  
483   - // providerViewModels.push(weatherProviderViewModel);
484   - // providerViewModels.push(aerosolProviderViewModel);
485   - // providerViewModels.push(fireProviderViewModel);
486   - // cesiumViewer.baseLayerPicker.viewModel.imageryProviderViewModels = providerViewModels;
487   -
488   -
489 467 let cp = new Cesium.Cartesian3(4303414.154026048, 552161.235598733, 4660771.704035539);
490 468 cesiumViewer.camera.setView({
491 469 destination: cp,
... ... @@ -495,7 +473,7 @@
495 473 roll: 0.0
496 474 }
497 475 });
498   -
  476 +
499 477 function dataCallback(interval, index) {
500 478 let time;
501 479 if (index === 0) {
images/MODIS_Terra_Aerosol.png View file @ 9f6da49

593 Bytes