Birding on Public Lands

I am an avid birder and some of my favorite places to bird include local, state, and federal public lands. Why public lands? Because they are (usually) open to the public, and provide unique opportunities to see some amazing wildlife (including birds)! Below you can select and view some of the public lands I’ve visited. You can even see the most recent bird sightings (last 2 weeks for up to 10 selected public lands), but you’ll need to enter your eBird API key and hit the Run button. If you don’t have an eBird API key, then visit this page.

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>`);
  }
  // L.esri = await require("esri-leaflet/dist/esri-leaflet.js"); // didn't work in R either, something wrong in esri-leaflet
  // L.esri.Heat = await r("esri-leaflet-heatmap");
  // await r("leaflet.heat").catch(() => L.heatLayer);
  return L;
};

fed_public_lands = await FileAttachment("data/protected_lands_visited.geojson").json();

// load json
eBird_hotspots = await FileAttachment("data/protected_lands_eBird.json").json();

land_names = {

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

};

call_eBird = function() {

  let txt = "";  
  let url = "https://api.ebird.org/v2/data/obs/US/recent?back=14&hotspot=true&r=";

  // check for valid hotspts
  let valid_hotspots = results.map(e => eBird_hotspots[e]);
  let some_valid = valid_hotspots.some(e => e !== undefined && e !== ' ');
  // console.log(some_valid)
  
  if (some_valid) { 
  
    // txt = txt + url + results.map(e => eBird_hotspots.hotspot_id[eBird_hotspots.fed_land.indexOf(e)])
    txt = txt + url + valid_hotspots

    return fetch(txt, {
      headers: {
        'x-ebirdapitoken': eBird_api_key,
      }
    })
    .then(res => {
      let bird_sightings = res.json();
      // console.log(bird_sightings);
      return bird_sightings;
    });
    
  } else { 
  
    return null
    
  };

};

viewof lands = Inputs.select(land_names, { label: "Public Lands:" });

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

buildResultsContainer = {

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

};

viewof eBird_api_key = Inputs.password({label: "eBird API Key:", value: ""})

viewof runAPI = Inputs.button("Run", {reduce: call_eBird, value: null});

buildeBirdContainer = {

  d3.select(".eBird-container")
    .append("div")
    .attr("class", "eBird")
    .append("p");
  
  d3.select(".eBird-container")
    .insert("label", ".eBird")
    .text("Recent bird(s):");

};

container = {

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

  return x.node();
}

public_lands = {
  
  // let map = L.map(container, {minZoom: 0, maxZoom: 16}); // define zoom level globally, but decided to do this on a layer by layer basis
  // https://developers.arcgis.com/documentation/mapping-apis-and-services/reference/zoom-levels-and-scale/#conversion-tool
  // LOD is the zoom level, if not specified use the conversion tool to translate min / max scale to zoom level
  
  let map = L.map(container);
  
  // add basemap layers
  const usgs = "<a href='https://www.usgs.gov/'>U.S. Geological Survey</a> | <a href='https://www.usgs.gov/laws/policies_notices.html'>Policies</a>";
  
  const OSM_Basemap = L.tileLayer(
  'https://tile.openstreetmap.org/{z}/{x}/{y}.png', 
  { 
    attribution: "&copy; <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>",
    ext: 'png',
    minZoom: 0,
    maxZoom: 19
  });
  
  // const MassGIS_Basemap = L.esri.tiledMapLayer({ 
    // url: 'https://tiles.arcgis.com/tiles/hGdibHYSPO59RG1h/arcgis/rest/services/MassGISBasemap/MapServer', 
    // attribution: "<a href='https://massgis.maps.arcgis.com/home/user.html?user=MassGIS'>MassGIS, Mass. Executive Office of Technology Services and Security</a>",
    // ext: 'png',
    // minZoom: 7, 
    // maxZoom: 19
  // });
  const MassGIS_Basemap = L.tileLayer(
  'https://tiles.arcgis.com/tiles/hGdibHYSPO59RG1h/arcgis/rest/services/MassGISBasemap/MapServer/tile/{z}/{y}/{x}', 
  {
    attribution: "<a href='https://massgis.maps.arcgis.com/home/user.html?user=MassGIS'>MassGIS, Mass. Executive Office of Technology Services and Security</a>",
    ext: 'png',
    minZoom: 7, 
    maxZoom: 19
  });
  
  const USGS_Img = L.tileLayer(
  'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryTopo/MapServer/tile/{z}/{y}/{x}',
  {
    attribution: usgs,
    ext: 'png',
    minZoom: 0,
    maxZoom: 16
  });
  
  const USGS_Topo = L.tileLayer(
  'https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/tile/{z}/{y}/{x}', 
  {
    attribution: usgs,
    ext: 'png',
    minZoom: 0,
    maxZoom: 16
  }).addTo(map);
  
  // USGS Hydrography layer
  const USGS_Hydro = L.tileLayer.wms('https://basemap.nationalmap.gov/arcgis/services/USGSHydroCached/MapServer/WmsServer', {
    attribution: usgs,
    layers: '0',
    format: 'image/png',
    transparent: true,
    minZoom: 0,
    maxZoom: 17
  });

  // Define your base maps object
  const baseMaps = {
    "USGS Topo": USGS_Topo,
    "USGS Imagery Topo": USGS_Img,
    "MassGIS": MassGIS_Basemap,
    "OSM": OSM_Basemap
  };

  // Define your overlay maps object
  const overlayMaps = {
    "USGS Hydrography": USGS_Hydro
  };

  // Pass overlayMaps as the SECOND argument to L.control.layers
  L.control.layers(baseMaps, overlayMaps, { position: 'topleft' }).addTo(map);
  
  L.control.scale().addTo(map);
  
  map.setView([39.0, -77.0], 6);

  return map; 

};

styles = ({
  basic: {
    weight: 1,
    fillColor: "#888888",
    fillOpacity: 0.3,
    color: "#555555",
    opacity: 0.6
  },
  highlight: {
    weight: 2,
    fillColor: "#3093CF", /* Brand Cyan */
    fillOpacity: 0.6,
    color: "#3093CF",
    opacity: 0.9
  },
  select: {
    weight: 2,
    fillColor: "#E6AA04", /* Brand Orange */
    fillOpacity: 0.5,
    color: "#E6AA04",
    opacity: 0.9
  },
  select_co: {
    weight: 4,
    fillColor: "#E6AA04", /* Brand Orange */
    fillOpacity: 0.8,
    color: "#E6AA04",
    opacity: 1.0
  }
});

// main variable for tracking public land selection
mutable results = [];

geojson = {

  // indexOf returns index number if e exists, -1 otherwise
  const idx = (e) => { return results.indexOf(e.feature.properties.Unit_Nm); };
  
  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.Unit_Nm);

    };
          
  };
  
  const pop = (e) => {
  
    const txt = `
      <div class="popup">
        <h4> Public Land </h4>
        <ul>
          <li> <b>Name:</b> ${e.properties.Unit_Nm} </li>
          <li> <b>Type:</b> ${e.properties.Own_Type} </li>
          <li> <b>Agency:</b> ${e.properties.Own_Name} </li>
          <li> <b>State:</b> ${e.properties.State_Nm} </li>
          <li> <b>Size (acres):</b> ${e.properties.GIS_Acres} </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(fed_public_lands, { 
    style: styles.basic, 
    onEachFeature: onEachFeature
  }).addTo(public_lands);
  
  return layer;

}

mutable trigger = [0];

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

// Add public land name to results-container in side panel
displayResults = {

  trigger;

  let txt = "";
  
  if (results.length > 0) { results.map(e => txt = txt + e + "<br>") };
  
  d3.select(".results")
    .selectAll("p")
    .filter((d,i) => { return i == 0 })
    .html(txt);

};

// Add sightings to eBird-container in side panel
displayeBird = {

  // let d = updateLand[0];
  let txt = "";

  if (runAPI == null) {
    txt = txt + "No hotspots selected or none found.";
  } else if (runAPI.length == 0) {
    txt = txt + "No recent sightings <br> To update, click Run again.";
  } else if (runAPI.length > 0) { 
    // sites selected
    const hotspots = [...new Set(runAPI.map(e => (e.locName)))];
    // console.log(hotspots);
    txt = txt + `${hotspots.length} ${hotspots.length === 1 ? 'hotspot' : 'hotspots'} queried (max is 10). Sightings below.<br><br>`;
    
    // data 
    let byName = d3.rollups(runAPI, v => d3.sum(v, d => d.howMany), d => d.comName); 
    let byName_v2 = byName.map(function(d) {
      if (d[1] == 0) {
        d[1] = 'undefined';
      } 
      return(d)});
    byName_v2.forEach((e, index, array) => {
      txt += `${e[0]}: ${e[1]}`;
      if (index < array.length - 1) {
        txt += "<br>";
      }
    });
    // byName_v2.map(e => txt = txt + e[0] + ": " + e[1] + "<br>");
    // runAPI.map(e => txt = txt + e.comName + ": " + e.howMany + "<br>");
  };
  // console.log(txt);
  
  d3.select(".eBird")
    .selectAll("p")
    .filter((d,i) => { return i == 0 })
    .html(txt);

};

geojson.eachLayer(e => {
      
  let p = e.feature.properties;
  let d = updateLand[0];
  let b = updateLand[1];
  let i = results.indexOf(p.Unit_Nm);
  
  if (p.Unit_Nm == b) {
  
    if (d == "add") {
    
      if (i < 0) {
  
        // e.setStyle(styles.select);
        if (["Chesapeake and Ohio Canal National Historical Park", "Air Line State Park Trail, Colchester Spur"].includes(b)) {
          e.setStyle(styles.select_co);
        } else {
          e.setStyle(styles.select);
        };
        results.push(p.Unit_Nm);
        mutable trigger += 1;
        public_lands.fitBounds(e.getBounds());

      };
  
    } else { 

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

});

The boundaries for public lands are approximate and were obtained from the PAD-US database or elsewhere. Public land, here, refers to land that is accessible to the public and not necessarily public property.