2e:null 2f:["$","title",null,{"children":"St Joseph River USGS Gage Explorer | E. Kerney | Observable"}] 34:Tc20,function* stJoeMap() { // Method for yielding DOM in Observable let container = DOM.element('div', { style: `width:940px;height:600px` }); yield container; // Choose baseMap and create Leaflet map object const baseMap = L.tileLayer(m.POS[0],m.POS[1]) let map = L.map(container).setView([42, -85.5], 9); baseMap.addTo(map); // Create LatLon on mouseClick const popup = L.popup(); const onMapClick = (e) => {popup.setLatLng(e.latlng) .setContent(`You clicked the map at:

${e.latlng.toString()}

`).openOn(map)}; map.on('click', onMapClick); // Styling for geojson layers, colors SF buildings based on height const simplePolygon = {"color":"#00ebc4", "weight":.75, "opacity":.7, "fillOpacity":0}; const gageStyle = (feature) => { const d = feature.properties.status; const gColor = d == 'LOW' ? 'red' : d == 'MUCH BELOW NORMAL' ? 'orangered' : d == 'BELOW NORMAL' ? 'orange' : d == 'NORMAL' ? 'green' : d == 'ABOVE NORMAL' ? 'darkblue' : d == 'MUCH ABOVE NORMAL' ? 'black': 'grey'; return { radius: 15, fillColor: gColor, color: "grey", weight: 3, fillOpacity: 0.8}; }; // Highlight features on mouseOver const highlightFeature = (e) => { const layer = e.target; layer.setStyle({ weight: 4, color: '#32cfb1', dashArray: '', fillOpacity: 0.6 }); layer.bringToFront(); info.update(layer.feature.properties); } // Un-highlight with mouseOut const resetHighlight = (e) => { layer1.resetStyle(e.target); info.update(); } // zoom to feature onClick const zoomToFeature = (e) => map.fitBounds(e.target.getBounds()); // Bind popups to each feature, bPop - buildings, pPop - Parcels function bPop (feature,layer) { const p = feature.properties; console.log(p); layer.bindPopup(`

${p.info}

Gage Status: ${p.status}
Discharge: ${p.stationInfo.siteFlow} ft3/sec
Gage Height: ${p.stationInfo.gageHeight} ft
Station ID: ${p.ID}

STATION STATUS:

'+props.status +'

= Object.entries(dailyStats)[x][1]? (stationList[z].gagePercent = Object.entries(dailyStats)[x][0], stationList[z].gageStatus = usgsLabels[stationList[z].gagePercent]):""; } const stationRecord = {"ID": stationList[z].siteCode, "stationInfo": stationList[z], "dailyStats": dailyStats}; stationData.push(stationRecord); }; return stationData; }; return gageStatus(stationData); }37:T68f,function getGage (gage) { const props = gage.properties; const statCol = {"p05":'red', "p10":'orangered', "p20":'orange', "p25":'orange', "p50":'green', "p75": 'green', "p80":'blue', "p90":'darkblue', "p95":'#00034d'}; const statBor = {"p05":'13px solid red', "p10":'13px solid redorange', "p20":'13px solid orange', "p25":'13px solid orange', "p50":'13px solid green', "p75": '13px solid green', "p80":'13px solid blue', "p90":'13px solid darkblue', "p95":'13px solid #00034d'}; const divStyle = [{'textAlign':'center'}, {'fontFamily':'Arial, Helvetica, sans-serif'},{'background-color':'#2e2e2e'},{'margin':'0px'},{'padding':'15px'}]; const txtStyles = [[{'color':'#0069cc'},{'margin':'4px'},{'lineHeight':'35px'}], [{'color':'#045c72'},{},{'margin':'0px'}, {'lineHeight':'15px'}], [{'color':statCol[props.stationInfo.gagePercent]},{},{'margin':'7px'}, {'lineHeight':'32px'}], [{'color':'#8fbeff'},{'fontSize':'20px'},{'margin':'0px'},{'lineHeight':'25px'}], [{'color':'#8fbeff'},{'fontSize':'18px'},{'margin':'2px'},{'lineHeight':'25px'}]]; const txtSizes = ['H1','P','H1','P','P']; const txt = [props.info, (`Current Status for USGS Gage: ${props.ID}`),props.stationInfo.gageStatus, (`FLOW: ${props.stationInfo.siteFlow} cfs - HEIGHT: ${props.stationInfo.gageHeight} ft`), (`Daily Mean: ${props.dailyStats.mean} cfs - Min: ${props.dailyStats.minFlow} cfs - Max: ${props.dailyStats.maxFlow} cfs`) ]; const widget1 = new Widget(props.ID, divStyle); widget1.addBorder(statBor[props.stationInfo.gagePercent]); txtStyles.forEach( (d,i) => widget1.addText(txtSizes[i],txt[i],d) ); return widget1.div; }38:T434,function* stationList (data) { let cont = DOM.element('div', { style: `width:960px;` }); yield cont; const divStyle = [{'textAlign':'left'}, {'fontFamily':'Arial, Helvetica, sans-serif'},{'margin': '10px'}, {'padding':'10px'},{'color':'darkblue'},{'borderRadius':'25px'},{'list-style-type': 'square'}, {'box-shadow': '5px 8px #e3e3e3'}]; const statCol = {"p05":'red', "p10":'orangered', "p20":'orange', "p25":'orange', "p50":'green', "p75": 'green', "p80":'blue', "p90":'darkblue', "p95":'#00034d'}; const widg = new Widget('list',divStyle); widg.addBorder('5px solid lightblue'); widg.addText('H2','St. Joseph River Gages Summary',[{'color':'darkblue'}]) data.features.forEach(d => { const props = d.properties; const txt = [(`${props.info} - ${props.ID} - ${props.stationInfo.gageStatus} - ${props.stationInfo.siteFlow} cfs`)]; const styles = [{'color':statCol[props.stationInfo.gagePercent]},{'font-weight': 'bold'}]; widg.addList('LI', txt, styles); }) cont.appendChild(widg.div); }39:T750,async function* basinStatus (data) { let cont = DOM.element('div', { style: `width:530px;height:276px` }); yield cont; const divStyle = [{'textAlign':'center'}, {'fontFamily':'Arial, Helvetica, sans-serif'}, {'background-color':''},{'margin':'0px'},{'padding':'30px'},{'borderRadius':'25px'}]; let statAcc=[{'s':'p05','num':0},{'s':'p10','num':0},{'s':'p20','num':0},{'s':'p25','num':0}, {'s':'p50','num':0},{'s':'p75','num':0},{'s':'p80','num':0},{'s':'p90','num':0},{'s':'p95','num':0}]; const usgsLabels = {"p05":'LOW', "p10":'MUCH BELOW NORMAL', "p20":'BELOW NORMAL', "p25":'BELOW NORMAL', "p50":'NORMAL', "p75": 'NORMAL', "p80":'ABOVE NORMAL', "p90":'ABOVE NORMAL', "p95":'MUCH ABOVE NORMAL'}; const statCol = {"p05":'red', "p10":'redorange', "p20":'orange', "p25":'orange', "p50":'green', "p75": 'green', "p80":'blue', "p90":'darkblue', "p95":'#00034d'}; const statBor = {"p05":'15px solid red', "p10":'15px solid redorange', "p20":'15px solid orange', "p25":'15px solid orange', "p50":'15px solid green', "p75": '15px solid green', "p80":'15px solid blue', "p90":'15px solid darkblue', "p95":'15px solid #00034d'}; data.features.forEach(d => { statAcc.forEach(e => d.properties.stationInfo.gagePercent == e.s ? e.num++ : ''); }); const getMedian = statAcc.reduce((a,d) => { a.num == 0 ? a = d : (a.num < d.num ? a = d : ''); return a; }); const widg = new Widget('indicator',divStyle); const medianTxt = usgsLabels[getMedian.s]; const styles = [{'color':statCol[getMedian.s]},{'font-weight': 'bold'},{'font-size':'50px'}]; widg.addText('H3','St. Joseph Basin Median Gage Status'); widg.addBorder(statBor[getMedian.s]); widg.addText('H1', medianTxt, styles); widg.addText('H3',(`Gages Reporting: ${(data.features.length)}`)); cont.appendChild(widg.div); console.log(getMedian); }3a:T435,function* stationList2 (data) { let cont = DOM.element('div', { style: `width:960px;` }); yield cont; const divStyle = [{'textAlign':'left'}, {'fontFamily':'Arial, Helvetica, sans-serif'},{'margin': '10px'}, {'padding':'10px'},{'color':'darkblue'},{'borderRadius':'25px'},{'list-style-type': 'square'}, {'box-shadow': '5px 8px #e3e3e3'}]; const statCol = {"p05":'red', "p10":'orangered', "p20":'orange', "p25":'orange', "p50":'green', "p75": 'green', "p80":'blue', "p90":'darkblue', "p95":'#00034d'}; const widg = new Widget('list',divStyle); widg.addBorder('5px solid lightblue'); widg.addText('H2','St. Joseph River Gages Summary',[{'color':'darkblue'}]) data.features.forEach(d => { const props = d.properties; const txt = [(`${props.info} - ${props.ID} - ${props.stationInfo.gageStatus} - ${props.stationInfo.siteFlow} cfs`)]; const styles = [{'color':statCol[props.stationInfo.gagePercent]},{'font-weight': 'bold'}]; widg.addList('LI', txt, styles); }) cont.appendChild(widg.div); }3b:T873,// Leaflet Basemaps m = { const maps = {'POS':['https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',{ attribution: '© OpenStreetMap contributors © CARTO',subdomains: 'abcd',maxZoom: 19}], 'OSM':['https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ attribution: '© OpenStreetMap contributors'}], 'SMO':['https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png',{ maxZoom: 20, attribution: '© Stadia Maps, © OpenMapTiles © OpenStreetMap contributors'}], 'MOB':['https://tile.thunderforest.com/mobile-atlas/{z}/{x}/{y}.png?apikey=fd0a294ce65c4a7fa0cf857cec97c13c', { attribution: '© Thunderforest, © OpenStreetMap contributors',maxZoom: 22 }], 'TON':['https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}',{ attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors',subdomains: 'abcd',minZoom: 0,maxZoom: 20,ext: 'png'}], 'TER':['https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}{r}.{ext}', { attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors',subdomains: 'abcd',minZoom: 0,maxZoom: 18,ext: 'png'}], 'DRK':['https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap contributors © CARTO',subdomains: 'abcd',maxZoom: 19}], }; return maps; }3c:[] 32:{"id":"ce9aaf1b3fdb2b65","slug":"fork-of-st-joseph-river-usgs-gage-explorer","title":"St Joseph River USGS Gage Explorer","thumbnail":"1a992a7a53d13989f90672972ba7700335c382e1c6bc5cb2adb11cdb9a66509e","access_level":"public","create_time":"$D2021-09-15T16:28:20.448Z","update_time":"$D2022-11-28T02:11:26.615Z","view_time":null,"first_public_time":"$D2022-07-04T02:28:35.116Z","has_unpublished_edits":null,"fork":{"id":"64c3712af81f6bbe","slug":"st-joseph-river-usgs-gage-explorer","title":"St Joseph River USGS Gage Explorer","owner":{"id":"6773b9d940faa10e","login":"location-artistry","name":"E. Kerney"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6773b9d940faa10e","login":"location-artistry","name":"E. Kerney","avatar_url":"https://avatars-next.observableusercontent.com/6a41b9491e318e4761cdb6210d6adb0880ed593495f2090cabed95169e3165f2","tier":"starter_2024"},"version":2202,"publish_version":2202,"role":null,"authored":false,"authors":[{"type":"individual","id":"06ed914427a4c051","login":"location-artistry","name":"E. Kerney","avatar_url":"https://avatars-next.observableusercontent.com/6a41b9491e318e4761cdb6210d6adb0880ed593495f2090cabed95169e3165f2","tier":null}],"members":[{"type":"individual","id":"06ed914427a4c051","login":"location-artistry","name":"E. Kerney","avatar_url":"https://avatars-next.observableusercontent.com/6a41b9491e318e4761cdb6210d6adb0880ed593495f2090cabed95169e3165f2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"St Joseph River USGS Gage Explorer","cells":[{"id":0,"value":"md`# St Joseph River USGS Gage Explorer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1864,"value":"md`Experimenting with html widgets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`## Prototype Components for USGS Water Data Project\nProject Repository: \nhttps://github.com/Location-Artistry/WATER-DATA-SERVER/ \n\nComponents implemented in NHBP NIBI Dashboard: \nhttps://nhbptribe.maps.arcgis.com/apps/dashboards/0380b371a3174bd8b2edae17a6d8f30c`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"md`## Leaflet Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"{\n b2;\n return stJoeMap();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"viewof b2 = button({value: \"RELOAD MAP\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1776,"value":"basinStatus(geoData1); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1778,"value":"stationList(geoData1);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1783,"value":"drawWidgets(gageData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1105,"value":"md`### Custom Base Classes: \n* GeoFeature Collection - GeoJSON Structure (built on Feature/GeoPoint)\n* Widget - html widget, add div to DOM`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1124,"value":"md`### Data Sources: \n* USGS Gages as GeoFeature Collection\n * X - Notebook Implementation\n * X - Project Implementation\n* St Joseph Streams\n * Working on scalable method to match gages to streams`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"md`### Components/Features\n* X - Leaflet Map with symbolized Gages \n* X - Interactive Info Box div\n* X - Gage popup on click\n* X - Dynamic Gages Widget\n* Overall Status Widget\n* List/Table Gage Widget\n* Symbolized streams on map\n* Mapbox Map \n * Symbolized Gages\n * Symbolized Streams\n * Info Box`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"md`### Notes: \n* Add line and polygon to GeoFeature Collection Class\n* Add functionality to widget for lists, tables, media`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1172,"value":"md`### USGS Gage data Processing\n* Fetch USGS` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"req2 = {\n return {'params': {'stationlist':\"04096405,04096515,04097500,040975299,04097540,04099000,04100500,04101000,04101500,04101535,04101800,04102500,04099750\"}} \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"geoData1 = { \nconst geoData = async (data) => {\n const geo = new FeatureCollection('USGS Gaging Stations and Status for the St. Joeseph River, MI - Code by https://github.com/Nottawaseppi');\n data.forEach(d => {\n console.log(d);\n const gp = new GeoPoint(d.ID,[d.stationInfo.lon,d.stationInfo.lat],d);\n [gp.properties.source,gp.properties.info,gp.properties.status] = ['USGS/NHBP',d.stationInfo.siteName, d.stationInfo.gageStatus]\n console.log(gp);\n geo.fPush(gp);\n });\n return geo;\n };\n const geoStations = await geoData(gageStatus);\n return geoStations;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1209,"value":"md`### Create Widget Workflow`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"fetchData = async(stations) =>{\n const rawData = await fetch(`https://usgs-gage.firebaseapp.com/usgs-data-live/gageGeo/${stations}`);\n return await rawData.json();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1031,"value":"function* drawWidgets (data) {\n let cont = DOM.element('div', { style: `width:600px;` });\n yield cont;\n data.features.forEach(d => cont.appendChild(getGage(d)));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"md`Data coming from Project Firebase endpoint`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"gageData = fetchData('04096405,04097500,04099000,04101000,04101500')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1218,"value":"drawWidgets(gageData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"value":"md`Data Source: Notebook Data Processing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1538,"value":"md`### Added List functionality to Widget Class\nSummary table of all Basin Gages, text color emphasizes gage status`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1544,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1561,"value":"stationList(geoData1);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1599,"value":"md`### Average River Gage Indicator Widget`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1602,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1606,"value":"basinStatus(geoData1); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1167,"value":"md`## Custom Classes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1873,"value":"stationList2(geoData1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1869,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1911,"value":"class CardList {\n constructor(id, styles) {\n this.div = document.createElement('DIV');\n this.type = CardList;\n this.id = id;\n styles != null ? styles.forEach(d => this.div.style[Object.keys(d)]=Object.values(d)) : '';\n }\n type() {return this.type};\n id() {return this.id};\n \n addDiv(node, id, clsName) {\n node.className = clsName;\n node.id = id;\n this.div.appendChild(node);\n }\n \n addChildDiv(node, targetID, id, clsName) {\n //node.className = clsName;\n console.log(`node.id: ${node.id}`);\n console.log(`node: ${node}`);\n console.log(`targetID: ${targetID}`)\n node.id = id;\n const targetDIV = document.getElementById(targetID);\n console.log(targetDIV);\n //document.getElementById(targetID).appendChild(node); \n targetDIV.append(node);\n }\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2000,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"class Widget {\n constructor(id, styles, clsName) {\n this.div = document.createElement(\"DIV\");\n this.type = 'Widget';\n this.div.id = id;\n this.div.className = clsName;\n styles != null ? styles.forEach(d => this.div.style[Object.keys(d)]=Object.values(d)) : '';\n }\n type() {return this.type};\n //id() {return this.div.id};\n \n addText(size, txt, styles) {\n this.text = document.createElement(size);\n this.text.innerText = txt; \n styles != null ? styles.forEach(d => this.text.style[Object.keys(d)]=Object.values(d)) : '';\n this.div.appendChild(this.text);\n }\n addBorder(styles) {\n this.div.style.border = styles;\n }\n addList(type, txt, styles) {\n //styles != null ? this.div.style = styles : '';\n txt.forEach(d => {\n const node = document.createElement(type);\n node.appendChild(document.createTextNode(d));\n styles != null ? styles.forEach(d => node.style[Object.keys(d)]=Object.values(d)) : '';\n this.div.appendChild(node);\n });\n }\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"class Feature {\n constructor(id) {\n this.type = 'Feature';\n this.properties = {'ID':id,'label':'','info':'','status':'','val':-1,'units':''};\n }\n id() {return this.properties.ID}\n info() {return this.properties}\n addProp(name,value) {\n try {\n this.properties[name] = value;\n return (`${name}: ${value} added to Feature ID: ${this.id()}`); }\n catch { (`Could NOT add ${name}: ${value}!`) }\n }\n addProps(arr) {\n try { arr.forEach(d => this.properties[d[0]] = d[1])}\n catch { return (`Could NOT add ${arr} to ${this.id()}`) }\n }\n};\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"class GeoPoint extends Feature {\n constructor(id,[lon,lat],props = {}) {\n super(id);\n this.properties.EPSG = 4326, this.properties.source = '', this.properties.crs = 'WGS 84';\n this.geometry = {'type':'Point','coordinates':[lon,lat]};\n Object.entries(props).forEach(([d,i]) => (this.properties[d] = i));\n } \n geo() {return this.geometry.coordinates}\n crs() {return [(`EPSG:${this.properties.EPSG}`),this.properties.crs]}\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"class FeatureCollection {\n constructor(meta) {\n this.type = 'FeatureCollection';\n this.metadata = meta;\n this.features = [];\n }\n geoType() { try {return this.features[0].geometry.type}\n catch {return \"It doesn't appear their are any features yet...\"} }\n fCount() {return this.features.length};\n fProps() {try {return this.features[0].properties}\n catch {return \"It doesn't appear their are any features yet...\"} }\n fPush(feature) {\n try { this.features.push(feature);\n return `Added Feature Number ${this.fCount()}`; }\n catch { return \"Cannot add ${feature} to Feature Collection\"} }\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"md`## Appendices`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3=require('d3');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1157,"value":"md`Leaflet Basemap urls`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"md`Leaflet Mapping Library`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"L = require('leaflet@1.6.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"// CSS for SFmap info div\nhtml`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"getData = {\n const base = 'https://usgs-gage.firebaseapp.com/usgs-data-live/gageGeo/';\n const allSta = '04096405,04096515,04097500,040975299,04097540,04099000,04100500,04101000,04101500,04101535,04101800,04102500';\n const one = '04096405';\n const main = '04096405,04097500,04099000,04101000,04101500';\n const dataFetch = d3.json((`${base+allSta}`), d3.autoType);\n return dataFetch;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"req = {\n return {'params': {'stationlist':'04096405,04097500,04099000,04101000,04101500'}} \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 33:"$32:body"