Please provide general and any specific criticism of the following which is intended to provide a map of SF transit cars. The code can be viewed in the working version and also in a group of gists.
If this isn't the appropriate place or way to request a review please let me know. Feedback received so far indicates the solution is amateurish and I would like to better understand the better/preferred solutions--specifically what and where to focus. Overall this was a first-pass at a solution intended to reflect a productive day's work.
import './the-controls.js';
class TheMap extends HTMLElement{
constructor(){
super();
this.attachShadow({mode:'open'}).innerHTML = `
<style>
:host{display:block;width:100%;height:100%;}
svg{border:1px dotted #555;background:#0df;height:100%;width:100%;position:fixed;}
g[src*='neighborhoods']{fill:green;stroke:#ccff0033;stroke-width:4px;}
g[src*='arteries']{display:none;fill:none;stroke:#000;stroke-width:0.5;}
g[src*='freeways']{display:none;fill:none;stroke:#fff;stroke-opacity:0.7;stroke-width:0.5;}
g[src*='streets']{display:none;stroke:#fff;fill:none;stroke-opacity:0.8;stroke-width:0.2px;}
.show-freeways g[src*='freeways'],
.show-streets g[src*='streets'],
.show-arteries g[src*='arteries']{display:inline;}
.vehicles circle{fill:red;fill-opacity:0.7;}
.vehicles circle:hover{fill:#cf0;fill-opacity:1;stroke:#555;stroke-width:0.1;}
.vehicles text{display:none;fill:var(--dark);font-size:1rem;pointer-events:none;}
.vehicles g:active text,
.vehicles g:hover text{display:block;}
button{font-weight:bold;}
button.active{background-color:var(--dark);color:white;}
/*.vehicles g{transition:all 500ms;}*/
</style>
<svg>
<g class=layers></g>
<g class=overlay>
<foreignobject class="filter" x="2.5rem" y="2rem" width="150" height="100%">
<the-controls></the-controls>
</foreignobject>
</g>
</svg>
`;
this._setup = false;
this.map = d3.select(this.shadowRoot.querySelector('svg'))
this.layers = d3.select(this.shadowRoot.querySelector('.layers'))
this.controls = this.shadowRoot.querySelector('the-controls')
this.data = {
time: 0
//'http://webservices.nextbus.com/service/publicJSONFeed?command=vehicleLocations&a=sf-muni&t=0'
,tags: {}
,taglist: []
,vehicles: []
,timer: 0
,interval: 30
,scale: 100000
// San Francisco
,lon: -122.4, lat: 37.76
,projection: null
,pathprojector: null
//
,content: './sfmaps/neighborhoods.json ./sfmaps/arteries.json ./sfmaps/freeways.json ./sfmaps/streets.json'
}
this.addEventListener('change-active', this.vehicleDrawer)
}
tagisactive(active, tag){
if(tag.active) active[ tag.name ] = tag;
return active;
}
vehicleisactive(item){
return this[ item.routeTag ] ? true : false;
}
vehicleDrawer(){
// show the active-tag vehicles
var data = this.data, $, vehicleList = data.vehicles.filter(this.vehicleisactive,
data.taglist.reduce(this.tagisactive, {}) );
requestAnimationFrame(()=>{
// update
$ = this.layers
.select('g.vehicles')
.selectAll("g")
.data(vehicleList)
.each(this.vehicleDetails)
;
// enter
$.enter()
.append("g")
.each(this.vehicleDetails)
;
// exit
$.exit().remove();
})
}
//item = {dirTag:"7____O_F00", heading:"225", id:"6719", lat:"37.784794", lon:"-122.403969", predictable:"true", routeTag:"7", secsSinceReport:"17", speedKmHr:"19"}
vehicleDetails(item, i, vehicleList){
var $;
this.setAttribute('transform', `translate(${item.position[0]}, ${item.position[1]}) scale(0.5)`);
$ = this.querySelector('text');
if($){
$.textContent = item.routeTag;
}else{
this.innerHTML = `<circle cx=0 cy=0 r=5 /><text>${ item.routeTag }</text>`;
};
}
vehiclePostion(item){
item.position = this.projection([+item.lon, +item.lat]);
}
tagSorter(a,b){
return a.name < b.name ? -1 :(a.name > b.name ? 1 : 0);
}
updateFinish(res){
this.data.timer = setTimeout(()=>{ this.update(); }, 1000 * this.data.interval);
console.log('updated',res);
return res;
}
update(){
clearTimeout(this.data.timer);
d3.json(`http://webservices.nextbus.com/service/publicJSONFeed?command=vehicleLocations&a=sf-muni&t=${this.data.time}`)
.then((json)=>{
var taglist, data = this.data;
// get all the unique routeTags as a sorted list
taglist = json.vehicle.reduce(this.vehiclehash, data).taglist;
data.taglist = taglist = Array.from(new Set(taglist)).sort(this.tagSorter);
data.vehicles = json.vehicle;
// easier to interpret the position here than passing the pieces and parts around
data.vehicles.forEach(this.vehiclePostion, data)
this.vehicleDrawer();
this.controls.model = data;
return this.updateFinish(json);
}).catch((res)=>{
return this.updateFinish(json);
});
}
vehiclehash(data, item){
var name = item.routeTag, tag = data.tags[ name ];
if(!tag){
tag = data.tags[ name ] = {name:name, active:true};
};
data.taglist.push( tag );
item.tag = tag;
return data;
}
layerDrawer(json){
requestAnimationFrame(()=>{
var data = this.data, $;
$ = this.layers
.select(`g[src="${json.path}"]`)
.selectAll("path")
.data(json.features)
.attr("d", data.pathprojector)
;
$.enter()
.append("path")
.attr("d", data.pathprojector)
;
$.exit().remove();
});
}
// zooming adjusts transform and visible layers/detail
mapView(position={}){
cancelAnimationFrame(this._rafmap);
this._rafmap = requestAnimationFrame(()=>{
var z = position.k, view, layer, layers = this.layers;
// I don't know d3
view = layers._groups[0][0].classList;
layer = 'show-streets';
if(view.contains(layer)){
if(z <= 6) view.remove(layer);
}else if(z > 6){
view.add(layer);
};
layer = 'show-arteries';
if(view.contains(layer)){
if(z <= 3) view.remove(layer);
}else if(z > 3){
view.add(layer);
};
layer = 'show-freeways';
if(view.contains(layer)){
if(z <= 1.5) view.remove(layer);
}else if(z > 1.5){
view.add(layer);
};
layers.attr("transform", position);
});
}
connectedCallback(){
var data;
if(!this._setup){
// initial setup: projection, load and draw layers, start updating
data = this.data;
data.projection = d3.geoMercator().scale(data.scale).center([+data.lon, +data.lat]);
data.pathprojector = d3.geoPath().projection(data.projection);
this.map.call(
d3.zoom()
.scaleExtent([1,30])
.on('zoom', ()=>{ this.mapView(d3.event.transform) })
)
data.content.trim().split(/\s+/).map((path, i) => {
this.layers.append('g').attr('src', path)
d3.json(path)
.then((json)=>{
json.path = path;
this.layerDrawer(json);
return json;
})
.catch((err)=>{
console.warn('problem layer',path,err);
return err;
})
return path;
});
this.layers.append('g').attr('class','vehicles');
}
this.update();
}
disconnectedCallback(){
// stop updating
clearTimeout(this.data.timer);
}
}
window.customElements.define('the-map', TheMap);
class TheControls extends HTMLElement{
constructor(){
super();
this.attachShadow({mode:'open'});
// {tags: {N: {}...}, taglist: []}
this.data = {};
this.addEventListener('click', this.clicked);
}
clicked(e){
var $ = e.composedPath()[0], tags = this.data.tags, prev;
e.stopPropagation();
switch($.nodeName){
case 'INPUT':
switch($.value){
case 'all':
Array.from(this.shadowRoot.querySelectorAll('button')).forEach(($)=>{
tags[$.value].active = true;
$.classList.add('active');
});
break;
case 'clear':
Array.from(this.shadowRoot.querySelectorAll('button')).forEach(($)=>{
tags[$.value].active = false;
$.classList.remove('active');
});
break;
};
this._previous = '';
this.dispatchEvent(new CustomEvent('change-active', {detail: this.data, cancelable: true, composed: true, bubbles: true}));
break;
case 'BUTTON':
if(e.metaKey || e.ctrlKey){
prev = this.shadowRoot.querySelector(`button[value="${this._previous}"]`);
if(prev && prev !== $){
tags[prev.value].active = prev.classList.toggle('active');
}
};
this._previous = $.value;
tags[$.value].active = $.classList.toggle('active');
this.dispatchEvent(new CustomEvent('change-active', {detail: this.data, cancelable: true, composed: true, bubbles: true}));
break;
};
}
//<button value="10" class="active">10</button>
tagHTML(item){
return `<button value="${ item.name }" class="${ item.active ? 'active':'' }">${ item.name }</button>`
}
render(){
this.shadowRoot.innerHTML = `
<style>
button{font-weight:bold;}
button.active{background-color:var(--dark);color:white;}
</style>
<input type=button value=all>
<input type=button value=clear>
<br>
${ this.data.taglist.map(this.tagHTML).join(' ') }
`;
}
get model(){
return this.data;
}
set model(data){
this.data = data;
this.render();
return true;
}
}
window.customElements.define('the-controls', TheControls);
