Published
Edited
Feb 13, 2021
1 fork
class Feature {
constructor(id) {
this.type = 'Feature';
this.properties = {'ID':id,'label':'','info':'','status':'','val':-1,'units':''};
}
id() {return this.properties.ID}
info() {return this.properties}
addProp(name,value) {
try {
this.properties[name] = value;
return (`${name}: ${value} added to Feature ID: ${this.id()}`); }
catch { (`Could NOT add ${name}: ${value}!`) }
}
addProps(arr) {
try { arr.forEach(d => this.properties[d[0]] = d[1])}
catch { return (`Could NOT add ${arr} to ${this.id()}`) }
}
}
// Feature is passed ID as argument
f = new Feature('PNC-ST-50')
f.type
f.id()
f.info()
f.addProp('stat','10 mg/L')
class GeoPoint extends Feature {
constructor(id,[lon,lat]) {
super(id);
this.properties.EPSG = 4326, this.properties.source = '', this.properties.crs = 'WGS 84';
this.geometry = {'type':'Point','coordinates':[lon,lat]};
}
geo() {return this.geometry.coordinates}
crs() {return [(`EPSG:${this.properties.EPSG}`),this.properties.crs]}
}
// GeoPoint aka gp, is passed id and [lon,lat] coordinates as an array
gp = new GeoPoint(44436,[-85,42])
gp.crs()
gp.geo()
// addProp method adds a key:value pair to this.properties
gp.addProp('turbFNU',5.5)
// addProps add multiples properties in an arrays of [key,value] arrays
{
const arr = [['DOmgl',7.5],['tempF',72]]
gp.addProps(arr);
return gp
}
class FeatureCollection {
constructor(meta) {
this.type = 'FeatureCollection';
this.metadata = meta;
this.features = [];
}
geoType() { try {return this.features[0].geometry.type}
catch {return "It doesn't appear their are any features yet..."} }
fCount() {return this.features.length};
fProps() {try {return this.features[0].properties}
catch {return "It doesn't appear their are any features yet..."} }
fPush(feature) {
try { this.features.push(feature);
return `Added Feature Number ${this.fCount()}`; }
catch { return "Cannot add ${feature} to Feature Collection"} }
}
geo = new FeatureCollection('This is a test of the Feature Collection Service!')
geo.fCount()
geo.fPush(gp)
// could add a method to FeatureCollection that allows direct consumption of a GeoJSON
data2 = {
const url = (`https://www.purpleair.com/json?show=2045`);
const type = 'json'
const data = d3[type](url, d3.autoType);
return data;
}
data3 = new Data(`https://www.purpleair.com/json?show=2045`,'json')
data3.properties()
{
let arr = []
for(let x in await data3.data) {
arr.push(x)
}
return arr;
}
{
return await Object.entries(data3.data)
}
data3.data
data3.test()
class Data {
constructor(url, format) {
this.data = d3[format](url, d3.autoType)
}
async test() {
const check = ['results','activities'];
let keys = Object.keys(await this.data)
//keys.forEach();
keys.forEach(d =>
// arr.forEach(d => this.properties[d[0]] = d[1])
const found = keys.some(r => check.includes(r))
return found;
}
async properties() {
return new Promise((resolve, reject) => {resolve(Object.entries(this.data))});
}
// don't touch this it this.works!!!
myPromise() {
const self = this;
const myPromises = new Promise(function(resolve, reject) {resolve(self.data)});
return myPromises;
}
}
map = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
// Now we create a map object and add a layer to it.
let map = L.map(container).setView([42, -85], 10);
let usgsLayer = L.tileLayer('https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}', { maxZoom: 20, attribution: 'Tiles courtesy of the <a href="https://usgs.gov/">U.S. Geological Survey</a>' }).addTo(map);
L.geoJSON(geo, {
onEachFeature: function(feature,layer) {layer.bindPopup (`<h1>${feature.properties.ID} - ${feature.properties.label}</h1>
<ul><li>Status: ${feature.properties.status}</li>
<li>Sensor Value: ${feature.properties.val}</li>
<li>Units: ${feature.properties.units}</li>
<li>Info: ${feature.properties.info}</li></ul>`); }
}).addTo(map);
}
d3=require('d3')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
