World Cities

viewof minPop = Inputs.range([0.4, 20],{step: 0.1,
  label: "Popuplation (millions)> ",
  value: 5,
});

viewof minElev = Inputs.range([-100, 3000], {
  label: "Elevation (Meter)>",
  value: 1,
  step: 10
});

viewof climateZone = Inputs.select(['-all-', 'Cfa', 'Cwa', 'Am', 'Aw'], {
  label: "Climate Zone: ",
  value: "-all-"
});

d3 = await require("d3");
//topojson = await require("topojson");
topojson = await require("topojson-client@3.1.0/dist/topojson-client.min.js");
//console.log(topojson);

//topojson = import("https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js");

// The global does not work well.
window.topojson = topojson;

htl.html`<link href='${resolve('leaflet@1.9.4/dist/leaflet.css')}' rel='stylesheet' />`;

htl.html`<link href='https://cdn.jsdelivr.net/npm/osmbuildings-classic@3.0.0/dist/OSMBuildings.css' rel='stylesheet' />`;

htl.html`<link href='${resolve('leaflet-velocity@2.1.4/dist/leaflet-velocity.css')}' rel='stylesheet' />`;

L = await require('leaflet@1.9.4/dist/leaflet.min.js', 
                  'leaflet-providers@1.13.0',
                  'leaflet.fullscreen@3.0.1/Control.FullScreen.js',
                  './leaflet-velocity_mod.js',
                  './osm_building_mod_4.js',
                  'leaflet-globe-minimap@0.0.4-rev2.0/dist/Control.GlobeMiniMap.min.js');

// a most robust, but not very responsive solution is to use absolute height like 800px;
container = htl.html`<div style="height: 100%;">`;

{
  //a; b; // force resize event on load or user sees nothing
  // see limitations here: https://vega.github.io/vega-lite/docs/size.html#specifying-responsive-width-and-height
  // window.dispatchEvent(new Event('resize'))
}

htl.html`<style>

.observablehq {
  height: calc(100%);
}

/* This overwrites the default padding-right of 12px, which will produce a horizontal scroll bar.*/
.panel-input>div, .panel-input>div>div {
  padding-right: 1px;
}

/*
.osmb-container {
  transform: translate3d(0, 0, 0);
  pointerEvents: none;
  position: absolute;
  left: 0;
  top: 0;
}

.osmb-container.zoom-animation {
  transition-duration: 250ms;
  transition-property: transform;
  transform-origin: 50% 50%;
}

.osmb-layer {
  transform: translate3d(0, 0, 0);
  image-rendering: optimizeSpeed;
  position: absolute;
  left: 0;
  top: 0;
}
*/

</style>
`;

mapC = L.map(container).setView([37.774, 2.423], 2);
  osmImage = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
  });

  // http://www.geo.hunter.cuny.edu/~ssun
  // Climate Zone created using gdal tools in QGIS (it comes with a GUI interface).
  czImage = L.tileLayer("https://www.geo.hunter.cuny.edu/~ssun/climate_zone/{z}/{x}/{y}.png", {
  attribute: "<a href=https://koeppen-geiger.vu-wien.ac.at/>Climate Change and Infectious Diseases Group</a>, Hunter College",
  maxZoom: 6,
  
});
  
  esriImage = L.tileLayer.provider('Esri.WorldImagery');
  cartoMap  = L.tileLayer.provider('CartoDB.Positron').addTo(mapC);


  miniMap = L.control.globeminimap({ 
      position: 'bottomright',
      width: 80,
      height: 80,
      land:'#AAAA00',
      water:'#CCEBC5',
      marker:'#AA0000',
      topojsonSrc: './world.json',
      durations: 1250
    }).addTo(mapC);
    
  miniMap.transitionMap(mapC.getCenter(), 10000);

cityLayer = L.geoJson(null).addTo(mapC);
  
  //osmbURL = 'https://{s}.data.osmbuildings.org/0.2/59fcc2e8/tile/{z}/{x}/{y}.json'
  //osmbURL = 'http://{s}.data.osmbuildings.org/0.2/anonymous/tile/{z}/{x}/{y}.json'
  osmbURL = 'https://{s}-data.onegeo.co/maps/tiles/{z}/{x}/{y}.json?token=y6ip7mpdscz5y6gf'
  
  osmb = L.tileLayer.osmBuildings(mapC);
  osmb.load(osmbURL).remove();

osmb.style({"wallColor": "rgb(158,158,158)",
              "roofColor": "rgb(218,218,218)",
              "shadows": true})

osmb.date(new Date(2024, 11, 3, 10, 0));

neTidevelocityLayer = L.velocityLayer({
    displayValues: true,
    displayOptions: {
      velocityType: "Ocean Current",
      position: "bottomleft",
      emptyString: "No current data",
      showCardinal: true
    },
    maxVelocity: 0.5, // if the value is low, values will be "squeezed" into a narrower color spectrum
    velocityScale: 0.06 // arbitrary default 0.005
  });
  
  globalWindVelocityLayer = L.velocityLayer({
    displayValues: true,
    displayOptions: {
      velocityType: "Global Wind",
      position: "bottomleft",
      emptyString: "No wind data"
    },
    maxVelocity: 15
  });
  
      
  L.control.layers({"ESRI Imagery": esriImage, 
                      "Carto Location": cartoMap,
                      "OpenStreet": osmImage
                      }, 
                     {"World Cities": cityLayer,
                     "Buildings": osmb,
                     "Wind - Global": globalWindVelocityLayer,
                     "Ocean Tide - NE US": neTidevelocityLayer,
                     "Climate Zone": czImage}
                    ).addTo(mapC);

fetch("./useast_2024_1018.json").then((response) => {
            return response.json();
      }).then((data) => {
        neTidevelocityLayer.setData(data);
      });

fetch("./wind-global.json").then((response) => {
            return response.json();
      }).then((data) => {
        globalWindVelocityLayer.setData(data);
      });

{
  cityLayer.eachLayer( l => mapC.removeLayer(l));
  cityLayer.clearLayers();


  searchFiltered.forEach( (e, i)=>{
    
    let l = L.circle([e.lat, e.lon], {radius: Math.max(600, Math.pow(e.pop,0.68)),
                                      color: 'red',
                                      weight: 1,
                                      fill: true,
                                      fillColor:'yellow'});
                                      
    if(citySize == "Small Circle") {
      l.setRadius(2000);
    }

    l.properties = e;
    l.bindTooltip("<strong>" + e.name + "</strong>" + "<br>Elevation: " + e.elev.toLocaleString() + "<br>Population: " + e.pop.toLocaleString() + "<br>Climate Region: " + e.cz); 
    
   // l.bindPopup("<strong>" + e.name + "</strong>" + "<br>Elevation: " + e.elev.toLocaleString() + "<br>Population: " + e.pop.toLocaleString() + "<br>Climate Region: " + e.cz + "<br>Visit <a href=\"https://uccrnna.org/\" target=\"_blank\">UCCRN</a> for details.");
    l.on("click", (evt) => {
      if(e.json && e.json.trim() != "") {
        fetch("./climate_cases/" + e.json.trim()).then((response) => {
            return response.json();
        }).then((data) => {
            updateCases(data);
        });
      } else {
        updateCases({"entity": {"city_name": e.name, "country_name": e.country_name}, cases:[{"case_desc":"No data yet", "url":"#"}]});
      }
    });
    
    cityLayer.addLayer(l);
  });
}

viewof searchFiltered = Inputs.search(filteredData, 
                {placeholder: "Search cities …", columns: ["name", "country", "cz"]});

viewof selectedCities = Inputs.table(searchFiltered, {
  columns: ["name", "country", "pop", "elev", "cz"],
  header: {name: "Name", country: "Country", pop: "Population", elev: "Elevation(m)", cz: "Climate Region"},
  multiple: false,
  rows: 20,
  height: 380
});

viewof casesHTML = {
  const element = htl.html`<strong>Cases for ${curCaseDat.entity.city_name}, ${curCaseDat.entity.country_name} </strong><br>
    ${curCaseDat.cases.map((r, i) => 
      htl.html.fragment`<a href="${r.url}" target="_blank">[${i+1}]: ${r.case_desc}</a><br>`
      )}`;

  element.value = curCaseDat.entity.city_name;
  return element;
}

/*
viewof caseTable = Inputs.table(
curCaseDat.cases, 
{
    header:{case_desc: "Case Description", url: "Link for Case Details"},
    rows: 20,
    height: 280
  });
  */
  
  //treeDat = curCaseDat.cases.map((r, i) => curCaseDat.entity.city_name + "/" + r.case_desc);
  //mutable treeDat = curCaseDat.cases.map((r, i) => ({"name": curCaseDat.entity.city_name + "/" + r.case_desc, url": r.url}));
                                    
  //console.log(treeDat);
  
  Plot.plot({
    axis: null,
    height: 150,
    margin: 10,
    marginLeft: 80,
    marginRight: 360,
    marks: [
      Plot.tree(curCaseDat.cases.map((r, i) => ({"name": curCaseDat.entity.city_name + "/" + r.case_desc,
                                                 "url": r.url})
                                    ),
                {path: "name", textStroke: "white", fontSize: 12, href: (d) => {
                if(d && d.url) return d.url; else return "#";},
                target: "_blank"}),
    ]
  })