Watersheds for HNDS-R Project

This map provides simple tools for exploring HUC10 watersheds across New Mexico and Arizona.

L = {
  const L = await require("leaflet/dist/leaflet.js");
  if (!L._style) {
    const href = await require.resolve("leaflet/dist/leaflet.css");
    document.head.appendChild(L._style = html`<link href=${href} rel=stylesheet>`);
  }

  return L;
};

watersheds = d3.json("data/watersheds.geojson");

basin_names = {

  let a = watersheds.features.map(x => x.properties.basin);
  
  // get unique values
  return [... new Set(a)];

};

viewof basin = Inputs.select(basin_names, { label: "Basin:" });

viewof updateBasin = Inputs.button([
  ["Add", value => ["add", basin]],
  ["Remove", value => ["remove", basin]]
], {required: true});

buildResultsContainer = {

  d3.select(".results-container")
    .append("div")
    .attr("class", "results")
    .append("p");
  
  d3.select(".results-container")
    .insert("label", ".results")
    .text("Watershed ID (selected):");

};

viewof copyToClipboard = Inputs.button("Copy to clipboard");

container = {

  let x = d3.create("div")
  
  x.attr("style", `width:100%;height:${window.outerHeight * 0.65}px`);

  return x.node();

}

southwest = {
  
  let map = L.map(container);
  
  // add basemap layers
  const stamen = 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
  
  const esri = 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community';
  
  const Stamen_Terrain = L.tileLayer(
  'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}{r}.{ext}', 
  {
    attribution: stamen,
    subdomains: 'abcd',
    minZoom: 0,
    maxZoom: 18,
    ext: 'png'
  }).addTo(map);
  
  const Stamen_TonerLite = L.tileLayer(
  'https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', 
  {
    attribution: stamen,
    subdomains: 'abcd',
    minZoom: 0,
    maxZoom: 18,
    ext: 'png'
  });
  
  const Esri_WorldImagery = L.tileLayer(
  'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', 
  {
      attribution: esri,
      minZoom: 0,
    maxZoom: 18,
    ext: 'png'
  });
  
  // button to toggle basemap layer selection
  L.control.layers(
    {
      "Stamen Terrain": Stamen_Terrain,
      "Stamen TonerLite": Stamen_TonerLite,
      "Esri World Imagery": Esri_WorldImagery
    },
    null,
    {position: 'topleft'}
  ).addTo(map);
  
  L.control.scale().addTo(map);
  
  map.setView([34.3, -109], 6);

  return map; 

};

styles = ({
  basic: {
    weight: 0.8,
    fillColor: "#696969",
    fillOpacity: 0.4,
    color: "#5e5e5e",
    opacity: 0.6
  },
  highlight: {
    weight: 1.2,
    fillColor: "#35e6ab",
    fillOpacity: 0.6,
    color: "#5e5e5e",
    opacity: 0.8
  },
  select: {
    weight: 1.0,
    fillColor: "#e69035",
    fillOpacity: 0.4,
    color: "#5e5e5e",
    opacity: 0.6
  }
});

// main variable for tracking huc10 selections
mutable results = [];

geojson = {

// indexOf returns index number if e exists, -1 otherwise
  const idx = (e) => { return results.indexOf(e.feature.properties.hydrologic_unit); };
  
  const highlightFeature = (e) => {

    e.target.setStyle(styles.highlight); 
    e.target.bringToFront();
    e.target.openPopup();
  
  };
  
  const resetHighlight = (e) => { 

    let q = (idx(e.target) < 0) ? styles.basic : styles.select;
    
    e.target.setStyle(q);
    e.target.closePopup();
  
  };
  
  const toggleFeature = (e) => {

    const i = idx(e.target);
    
    if (i > -1) {
            
      e.target.setStyle(styles.basic);
      results.splice(i, 1);
      
    } else {
              
      e.target.setStyle(styles.select);
      results.push(e.target.feature.properties.hydrologic_unit);
      
    };
          
  };
  
  const pop = (e) => {
  
    const txt = `
      <div class="popup">
        <h4> ${e.properties.watershed} </h4>
        <ul>
          <li> <b>ID:</b> ${e.properties.hydrologic_unit} </li>
          <li> <b>Basin:</b> ${e.properties.basin} </li>
          <li> <b>Sub-basin:</b> ${e.properties.subbasin} </li>
        </ul>
      </div>
    `;
    
    return txt;
    
  };
  
  const onEachFeature =  (feature, layer) => {
    
    layer.bindTooltip(pop(feature), {offset: L.point(30,0)});
    
    layer.on({
      mouseover: highlightFeature,
      mouseout: resetHighlight,
      click: toggleFeature
    });
    
  }

  let layer = L.geoJSON(watersheds, { 
    style: styles.basic, 
    onEachFeature: onEachFeature
  }).addTo(southwest);
  
  return layer;

}

mutable trigger = [0];

geojson.on("click", (e) => { mutable trigger += 1; });

// Add HUC10 IDs to results-container in side panel

displayResults = {

  trigger;

  let txt = [];
  
  if (results.length > 0) { txt.push(results.map(e => " " + e)) };
  
  d3.select(".results")
    .selectAll("p")
    .filter((d,i) => { return i == 0 })
    .text(txt);

};

// copy HUC10 IDs to clipboard
{  
  
  copyToClipboard;
  
  navigator.clipboard.writeText(results);
  
};

geojson.eachLayer(e => {
      
  let p = e.feature.properties;
  let d = updateBasin[0];
  let b = updateBasin[1]
  let i = results.indexOf(p.hydrologic_unit);
  
  if (p.basin == b) {
  
    if (d == "add") {
    
      if (i < 0) {
  
        e.setStyle(styles.select);
        results.push(p.hydrologic_unit);
        mutable trigger += 1;
        
      };
  
    } else { 

      if (i > -1) {
      
        e.setStyle(styles.basic);
        results.splice(i, 1);
        mutable trigger -= 1;
      
      };
  
    };
  
  } else { };

});