diff --git a/src/app/pages/tecnalia-module/bus-od/bus-od.component.html b/src/app/pages/tecnalia-module/bus-od/bus-od.component.html
index a1d97c22826e733c7f615bd5fe1e7ac5c847c7f2..0838e2966d97492e80345925933429afa4fd6cd6 100644
--- a/src/app/pages/tecnalia-module/bus-od/bus-od.component.html
+++ b/src/app/pages/tecnalia-module/bus-od/bus-od.component.html
@@ -1,21 +1,39 @@
<div id="page" class="row">
- <div class="col-md-1" id='left' style="min-width:240px;">
- <div id="middle-div" style="width:100%;padding-top:10px;">
- <label style="font-weight: bold;">Bus Lines:</label>
- <select id="lineasCB" style="width:100%"></select>
- <button style="bottom:0px;left:0px;width:100%;z-index:1000;padding-top:10px;" (click)="get_line();">Get Line</button>
+ <div class="col-md-1" id='left' style="min-width:240px;">
+ <div id="top-div" style="width:100%;padding-top:10px;">
+ <label style="font-weight: bold;">Type Processing:</label>
+ <div class="row">
+ <div>Per Line</div>
+ <label class="switch">
+ <input id="typeCB" type="checkbox" unchecked (click)="change_type();"/>
+ <span class="slider round"></span>
+ </label>
+ <div> Per Trip </div>
+ </div>
</div>
- <hr>
- <div id='tableDiv' style='width:100%;padding-top:20px'>
+
+ <div id="middle-div" style="width:100%;padding-top:10px;">
+ <div id="busLineChooser">
+ <label style="font-weight: bold;">Bus Lines:</label>
+ <select id="lineasCB" style="width:100%"></select>
+ <button style="bottom:0px;left:0px;width:100%;z-index:1000;padding-top:10px;" (click)="get_line();">Get Line</button>
+ </div>
+ <hr>
+ <div id='tableDiv' style='width:100%;padding-top:20px'>
+ </div>
</div>
</div>
- <div class="col-md-8">
- <div id='top-right' style='height:420px;'>
- <div leaflet #map [leafletOptions]="options" (leafletMapReady)="onMapReady($event)"
+ <div class="col-md-10">
+ <div id='top-right_1' style='height:420px;'>
+ <div leaflet #map1 [leafletOptions]="options1" (leafletMapReady)="onMapReady1($event)"
style='top:0px;border:1px solid #000;height:413px'></div>
</div>
+ <div id='top-right_2' style='height:900px;display:none'>
+ <div leaflet #map2 [leafletOptions]="options2" (leafletMapReady)="onMapReady2($event)"
+ style='top:0px;border:1px solid #000;height:893px'></div>
+ </div>
<div id='bottom-right' style='padding-left:10px;padding-top:10px'>
<div id="chartDiv" style="top:10px;height: 420px;border:1px solid #000;padding-top:10px">
<chart style="height:420px" type="line" [data]="chart_config.data" [options]="chart_config.options"></chart>
diff --git a/src/app/pages/tecnalia-module/bus-od/bus-od.component.ts b/src/app/pages/tecnalia-module/bus-od/bus-od.component.ts
index 33e1d12c2ea0c485cd9069ba93bb532bb00ec544..bdcf15ff06c10353133be87042c4353f7327db05 100644
--- a/src/app/pages/tecnalia-module/bus-od/bus-od.component.ts
+++ b/src/app/pages/tecnalia-module/bus-od/bus-od.component.ts
@@ -8,6 +8,8 @@ import * as d3 from 'd3';
import { max } from 'rxjs/operators';
import { DocumentRef } from 'ngx-owl-carousel-o/lib/services/document-ref.service';
import { json } from 'd3';
+import { GetStopsService } from '../services/get-stops.service';
+import { ODMSCatalogue } from '../../data-catalogue/model/odmscatalogue';
@Component({
selector: 'ngx-bus-od',
@@ -18,6 +20,7 @@ import { json } from 'd3';
export class BusOdComponent implements OnInit {
constructor(
private getLinesService: GetLinesService,
+ private getStopsService: GetStopsService,
private getLineService: GetLineService,
configService: ConfigService, private http: HttpClient
) { this.apiURL = configService.getSettings("bus_od_api_base_url"); }
@@ -26,339 +29,465 @@ export class BusOdComponent implements OnInit {
private apiURL: any;
chart_config: any = {}
- private map: L.Map;
-
+ private map1: L.Map;
+ private map2: L.Map;
private static BIO_LON: number = -2.9356732032001926;
private static BIO_LAT: number = 43.26201529732467;
- private dict_stps_seq: object = {};
+ private dict_stps_seq: object = {};
private dict_stps_name: object = {};
private path: any = null;
private markers: any = [];
- private dict_inis: object = {};
+ private markers2: any = [];
+ private dict_inis: object = {};
private dict_inis_I: object = {};
+ private stops: any = {};
+ private stop_lines: object = {};
+ private line_stops: object = {};
+ private lines_map2: any = [];
-
- options = {
+ options1 = {
layers: [
- L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', { maxZoom: 18 } )//,
- //L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' }),
+ L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', { maxZoom: 18 })//,
],
zoom: 12,
- center: L.latLng({ lat: 43.26201529732467, lng: -2.9356732032001926 }),
+ center: L.latLng({ lat: BusOdComponent.BIO_LAT, lng: BusOdComponent.BIO_LON }),
+ };
+
+ options2 = {
+ layers: [
+ L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', { maxZoom: 18 })//,
+ ],
+ zoom: 14,
+ center: L.latLng({ lat: BusOdComponent.BIO_LAT, lng: BusOdComponent.BIO_LON }),
};
- onMapReady(map: L.Map) {
- this.map = map;
+ onMapReady1(map1: L.Map) {
+ this.map1 = map1;
setTimeout(() => { }, 50);
- this.map.createPane("paneLow").style.zIndex = '250'; // between tiles and overlays
- this.map.createPane("paneHigh").style.zIndex = '450'; // between overlays and shadows
+ this.map1.createPane("paneLow").style.zIndex = '250'; // between tiles and overlays
+ this.map1.createPane("paneHigh").style.zIndex = '450'; // between overlays and shadows
+ }
+
+ onMapReady2(map2: L.Map) {
+ this.map2 = map2;
+ setTimeout(() => { }, 50);
+ this.map2.createPane("paneLow").style.zIndex = '250'; // between tiles and overlays
+ this.map2.createPane("paneHigh").style.zIndex = '450'; // between overlays and shadows
}
ngOnInit(): void {
this.load_lineas();
+ this.load_stops();
+ }
+
+ change_type(): void {
+ let typeCB: any = document.getElementById('typeCB');
+ console.log('change_type()::: typeCB.selected=' + typeCB.checked);
+ if ( typeCB.checked ) {
+ document.getElementById('busLineChooser').style.display = 'none';
+ document.getElementById('chartDiv').style.display = 'none';
+ document.getElementById('top-right_1').style.display = 'none';
+ document.getElementById('top-right_2').style.display = 'block';
+ this.map2.invalidateSize();
+ } else {
+ document.getElementById('busLineChooser').style.display = 'block';
+ document.getElementById('chartDiv').style.display = 'block';
+ document.getElementById('top-right_2').style.display = 'none';
+ document.getElementById('top-right_1').style.display = 'block';
+ this.map1.invalidateSize();
+ }
}
load_lineas(): void {
- this.getLinesService.getValues().subscribe(res => this.addLinesToCB(res), err => console.log("load_lineas()::: err="+err));
+ this.getLinesService.getValues().subscribe(res => this.addLinesToCB(res), err => console.log("load_lineas()::: err=" + err));
+ }
+
+ load_stops(): void{
+ this.getStopsService.getValues().subscribe(res => this.addStopsToMap2(res), err => console.log("load_stops()::: err=" + err));
}
addLinesToCB(lines: any): void {
var sel: HTMLSelectElement = <HTMLSelectElement>document.getElementById("lineasCB");
for (let k = 0; k < lines.length; k++) {
- //console.log(k+'\t'+lines[k]);
- let newOption = new Option(lines[k],lines[k]);
- sel.add(newOption,undefined)
+ let newOption = new Option(lines[k], lines[k]);
+ sel.add(newOption, undefined)
}
}
get_line(): void {
let sel: HTMLSelectElement = <HTMLSelectElement>document.getElementById("lineasCB");
let linea = sel.selectedOptions[0].value;
- console.log("get_line()::: line="+linea);
- this.getLineService.getValues(linea).subscribe(res => this.processLine(res), err => console.log("get_line()::: err="+err));
+ console.log("get_line()::: line=" + linea);
+ this.getLineService.getValues(linea).subscribe(res => this.processLine(res), err => console.log("get_line()::: err=" + err));
+ }
+
+ addStopsToMap2(data: any){
+ this.markers2 = {};
+ let lmarks = {};
+ this.stop_lines = {};
+ this.stops = {};
+ this.line_stops = {};
+ for (let i = 0; i < data.length; i++) {
+ let ele:object = data[i];
+ let id:number = ele['stop'];
+ let lat:number = ele['lat'];
+ let lon:number = ele['lon'];
+ let sq:number = ele['seq'];
+ let line:string = ele['line'];
+ if ( id in this.stop_lines ){
+ this.stop_lines[id].push(line);
+ }else{
+ this.stop_lines[id] = [];
+ this.stop_lines[id].push(line);
+ }
+ if ( line in this.line_stops ){
+ //this.line_stops[line].push(id);
+ this.line_stops[line].splice(sq, 0, id);
+ }else{
+ this.line_stops[line] = [];
+ //this.line_stops[line].push(id);
+ this.line_stops[line].splice(sq, 0, id);
+ }
+ if ( !(id in lmarks) ){
+ this.add_marker2(sq, id, lat, lon);
+ lmarks[id] = 1;
+ }
+ this.stops[id] = ele;
+ }
}
- processLine(data: any){
+ processLine(data: any) {
//console.log('processLine::: data='+JSON.stringify(data));
///////////////////////////////////////////////////////////////////////////////
let sel: HTMLSelectElement = <HTMLSelectElement>document.getElementById("lineasCB");
let linea = sel.selectedOptions[0].value;
- //console.log("get_line()::: line="+linea);
- //console.log("init.js.get_line()::: SUCCESS");
- //console.log("init.js.get_line()::: data="+JSON.stringify(data));
- let nodes = [{'id':-4,'name':'-4'},{'id':-3,'name':'-3'},{'id':-2,'name':'-2'},{'id':-1,'name':'-1'}];
+ let nodes = [{ 'id': -4, 'name': '-4' }, { 'id': -3, 'name': '-3' }, { 'id': -2, 'name': '-2' }, { 'id': -1, 'name': '-1' }];
this.dict_stps_seq = {};
this.dict_stps_seq[-4] = -4;
this.dict_stps_seq[-3] = -3;
this.dict_stps_seq[-2] = -2;
this.dict_stps_seq[-1] = -1;
let latLons = [];
- /*
- for (let [key, value] of Object.entries(this.markers)){
- //value.remove(this.map);
- this.map.removeLayer(value);
- }*/
- for(let key in this.markers){
+
+ for (let key in this.markers) {
let val = this.markers[key];
- this.map.removeLayer(val);
+ this.map1.removeLayer(val);
}
- this.markers = {};
+ this.markers = {};
this.dict_stps_name = {};
- if ( this.path !== null){this.path.remove(this.map);}
- for(let i=0;i<data['stops'].length;i++){
- let ele = data['stops'][i];
- let sq = ele['seq'];
- let id = ele['stop_id'];
- let lat = ele['lat'];
- let lon = ele['lon'];
- let nme = ele['name'];
- let nele = {'id':sq, 'name':id, 'name2':nme};
- this.dict_stps_seq[id] = sq;
- this.dict_stps_name[id] = nme;
- //console.log('sq='+sq+'\tid='+id);
- latLons.push({'lat':lat,'lng':lon});
- nodes.push(nele);
- this.add_marker(sq,id,lat,lon);
- }
+ if (this.path !== null) { this.path.remove(this.map1); }
+ for (let i = 0; i < data['stops'].length; i++) {
+ let ele = data['stops'][i];
+ let sq = ele['seq'];
+ let id = ele['stop_id'];
+ let lat = ele['lat'];
+ let lon = ele['lon'];
+ let nme = ele['name'];
+ let nele = { 'id': sq, 'name': id, 'name2': nme };
+ this.dict_stps_seq[id] = sq;
+ this.dict_stps_name[id] = nme;
+ //console.log('sq='+sq+'\tid='+id);
+ latLons.push({ 'lat': lat, 'lng': lon });
+ nodes.push(nele);
+ this.add_marker(sq, id, lat, lon);
+ }
this.add_line(latLons);
/////////////////////////////////////////////////////
let links = [];
- this.dict_inis = {};
+ this.dict_inis = {};
this.dict_inis_I = {};
- for (let i=0;i<data['od'].length;i++){
- let ele = data['od'][i];
- //console.log(i+":\t"+ele);
- let ini = ele['ini_stop'];
- let end = ele['end_stop'];
- let val = ele['value'];
- let link = {'source':this.dict_stps_seq[ini], 'target':this.dict_stps_seq[end], 'value':val};
- //console.log('source='+ini+'\t'+dict_stps[ini]);
- //console.log('source='+end+'\t'+dict_stps[end]);
- //console.log('.............................................');
- links.push(link);
- if ( ! (ini in this.dict_inis) ){
- this.dict_inis[ini] = {};
- this.dict_inis_I[this.dict_stps_seq[ini]] = {};
- this.dict_inis[ini][end] = val;
- this.dict_inis_I[this.dict_stps_seq[ini]][this.dict_stps_seq[end]] = val;
- }
- else{
- this.dict_inis[ini][end] = val;
- this.dict_inis_I[this.dict_stps_seq[ini]][this.dict_stps_seq[end]] = val;
- }
+ for (let i = 0; i < data['od'].length; i++) {
+ let ele = data['od'][i];
+ //console.log(i+":\t"+ele);
+ let ini = ele['ini_stop'];
+ let end = ele['end_stop'];
+ let val = ele['value'];
+ let link = { 'source': this.dict_stps_seq[ini], 'target': this.dict_stps_seq[end], 'value': val };
+ //console.log('source='+ini+'\t'+dict_stps[ini]);
+ //console.log('source='+end+'\t'+dict_stps[end]);
+ //console.log('.............................................');
+ links.push(link);
+ if (!(ini in this.dict_inis)) {
+ this.dict_inis[ini] = {};
+ this.dict_inis_I[this.dict_stps_seq[ini]] = {};
+ this.dict_inis[ini][end] = val;
+ this.dict_inis_I[this.dict_stps_seq[ini]][this.dict_stps_seq[end]] = val;
+ }
+ else {
+ this.dict_inis[ini][end] = val;
+ this.dict_inis_I[this.dict_stps_seq[ini]][this.dict_stps_seq[end]] = val;
+ }
}
//console.log('links='+JSON.stringify(links));
document.getElementById("chartDiv").innerHTML = "";
- this.plot_chart(linea,nodes,links,this);
+ this.plot_chart(linea, nodes, links, this);
}
-
- add_line(latLons: any){
- console.log('bus-od.components.ts.add_line::: latLons='+JSON.stringify(latLons));
- this.path = L.polyline( latLons,{
- color: '#ffa600',
- fillColor: "#ffa600",
+
+ add_line(latLons: any) {
+ console.log('bus-od.components.ts.add_line::: latLons=' + JSON.stringify(latLons));
+ this.path = L.polyline(latLons, {
+ color: '#ffa600',
+ fillColor: "#ffa600",
fillOpacity: 1.0,
weight: 2
- }).addTo(this.map);
+ }).addTo(this.map1);
}
- add_marker(seq:number,id:number,lt:number,ln:number){
- let clr_back = "484848";
- let clr_border = "484848";
- let clr_text = "FFFFFF";
- let licon = L.icon({iconUrl: "http://www.googlemapsmarkers.com/v1/"+id+"/"+clr_back+"/"+clr_text+"/"+clr_border} );
- const marker = L.marker([lt, ln],{icon: licon}).addTo(this.map);
- marker['id'] = id;
+
+ add_marker(seq: number, id: number, lt: number, ln: number) {
+ let clr_back = "484848";
+ let clr_border = "7d7d7d";
+ let clr_text = "FFFFFF";
+ let licon = L.icon({ iconUrl: "http://www.googlemapsmarkers.com/v1/" + id + "/" + clr_back + "/" + clr_text + "/" + clr_border });
+ const marker = L.marker([lt, ln], { icon: licon }).addTo(this.map1);
+ marker['id'] = id;
marker['seq'] = seq;
- this.markers[id] = marker;
+ this.markers[id] = marker;
+ }
+
+ generate_latLons_for_line(lin:string){
+ let latLons = [];
+ for(let k=0;k<this.line_stops[lin].length;k++){
+ let stp_id = this.line_stops[lin][k];
+ let stp = this.stops[stp_id];
+ let ltln = [stp['lat'], stp['lon']];
+ latLons.push(ltln);
+ }
+ return latLons;
+ }
+
+
+ plot_lines(lines:any){
+ for(let l=0;l<lines.length;l++){
+ let latLons = this.generate_latLons_for_line(lines[l]);
+ let val = L.polyline(latLons, {
+ color: '#ffa600',
+ fillColor: "#ffa600",
+ fillOpacity: 1.0,
+ weight: 2
+ }).addTo(this.map2);
+ //val.bringToFront();
+ this.lines_map2.push(val);
+ }
+ }
+
+ add_marker2(seq: number, id: number, lt: number, ln: number) {
+ let clr_back = "484848";
+ let clr_border = "7d7d7d";
+ let clr_text = "FFFFFF";
+ let licon = L.icon({ iconUrl: "http://www.googlemapsmarkers.com/v1/" + id + "/" + clr_back + "/" + clr_text + "/" + clr_border });
+
+ //const marker = L.marker([lt, ln], { icon: licon }).addTo(this.map2);
+
+ const marker = new L.Marker([lt, ln], {
+ icon: new L.DivIcon({
+ className: 'my-div-icon',
+ html: '<span class="my-div-span" style="background-color:rgba(100, 100, 100, 0.3);color:rgba(255,255,255,0.6)">'+id+'</span>'
+ })
+ }).addTo(this.map2);
+
+ marker['id'] = id;
+ marker['seq'] = seq;
+ marker['bocomp'] = this;
+ marker.on('click',
+ function(event){
+ for( let l=0;l<this.bocomp.lines_map2.length;l++){
+ let val = this.bocomp.lines_map2[l];
+ this.bocomp.map2.removeLayer(val);
+ }
+ this.bocomp.lines_map2 = [];
+ this.bocomp.plot_lines(this.bocomp.stop_lines[this.id]);
+ });
+ this.markers2[id] = marker;
}
- plot_chart(llinea:any,lnodes:any,llinks:any,bocomp:any){
+ plot_chart(llinea: any, lnodes: any, llinks: any, bocomp: any) {
// set the dimensions and margins of the graph
- var margin = {top: 270, right: 210, bottom: 20, left: 30},
- width = 1200 - margin.left - margin.right,
- height = 420 - margin.top - margin.bottom;
+ var margin = { top: 270, right: 210, bottom: 20, left: 30 },
+ width = 1200 - margin.left - margin.right,
+ height = 420 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#chartDiv")
- .append("svg")
- .attr("width", width + margin.left + margin.right)
- .attr("height", height + margin.top + margin.bottom)
- .append("g")
- .attr("transform",
- "translate(" + margin.left + "," + margin.top + ")");
+ .append("svg")
+ .attr("width", width + margin.left + margin.right)
+ .attr("height", height + margin.top + margin.bottom)
+ .append("g")
+ .attr("transform",
+ "translate(" + margin.left + "," + margin.top + ")");
// List of node names
- var allNodes = lnodes.map(function(d:any){return d.name;});
- console.log('plot_chart::: allNodes='+JSON.stringify(allNodes));
+ var allNodes = lnodes.map(function (d: any) { return d.name; });
+ console.log('plot_chart::: allNodes=' + JSON.stringify(allNodes));
// A linear scale to position the nodes on the X axis
var x = d3.scalePoint().range([0, width]).domain(allNodes);
-
+
// Add the circle for the nodes
var nodes = svg
- .selectAll("mynodes")
- .data(lnodes)
- .enter()
- .append("circle")
- .attr("cx", function(d:any){ return(x(d.name)); })
- .attr("cy", height-30)
- .attr("r", 8)
- .style("fill", "#ffa600");
+ .selectAll("mynodes")
+ .data(lnodes)
+ .enter()
+ .append("circle")
+ .attr("cx", function (d: any) { return (x(d.name)); })
+ .attr("cy", height - 30)
+ .attr("r", 8)
+ .style("fill", "#ffa600");
// And give them a label
var labels = svg
- .selectAll("mylabels")
- .data(lnodes)
- .enter()
- .append("text")
- .attr("x", function(d:any){ return(x(d.name)); })
- .attr("y", height-10)
- .text(function(d:any){ return(d.name); })
- .style("text-anchor", "middle")
- //.attr("transform", "rotate(10)");
-
+ .selectAll("mylabels")
+ .data(lnodes)
+ .enter()
+ .append("text")
+ .attr("x", function (d: any) { return (x(d.name)); })
+ .attr("y", height - 10)
+ .text(function (d: any) { return (d.name); })
+ .style("text-anchor", "middle")
+ //.attr("transform", "rotate(10)");
+
// Add links between nodes. Here is the tricky part.
// In my input data, links are provided between nodes -id-, NOT between node names.
// So I have to do a link between this id and the name
var idToNode = {};
- lnodes.forEach(function (n:any) {
+ lnodes.forEach(function (n: any) {
idToNode[n.id] = n;
});
// Cool, now if I do idToNode["2"].name I've got the name of the node with id 2
// Add the links
var links = svg
- .selectAll('mylinks')
- .data(llinks)
- .enter()
- .append('path')
- .attr('d', function (d:any) {
-
- let start = x(idToNode[d.source].name); // X position of start node on the X axis
- let end = x(idToNode[d.target].name); // X position of end node
- return ['M', start, height-30, // the arc starts at the coordinate x=start, y=height-30 (where the starting node is)
- 'A', // This means we're gonna build an elliptical arc
- (start - end)/2, ',', // Next 2 lines are the coordinates of the inflexion point. Height of this point is proportional with start - end distance
- (start - end)/2, 0, 0, ',',
- start < end ? 1 : 0, end, ',', height-30] // We always want the arc on top. So if end is before start, putting 0 here turn the arc upside down.
- .join(' ');
- })
- .style("fill", "none")
- .attr("stroke", "black")
- .attr("stroke-width", 1);
+ .selectAll('mylinks')
+ .data(llinks)
+ .enter()
+ .append('path')
+ .attr('d', function (d: any) {
+
+ let start = x(idToNode[d.source].name); // X position of start node on the X axis
+ let end = x(idToNode[d.target].name); // X position of end node
+ return ['M', start, height - 30, // the arc starts at the coordinate x=start, y=height-30 (where the starting node is)
+ 'A', // This means we're gonna build an elliptical arc
+ (start - end) / 2, ',', // Next 2 lines are the coordinates of the inflexion point. Height of this point is proportional with start - end distance
+ (start - end) / 2, 0, 0, ',',
+ start < end ? 1 : 0, end, ',', height - 30] // We always want the arc on top. So if end is before start, putting 0 here turn the arc upside down.
+ .join(' ');
+ })
+ .style("fill", "none")
+ .attr("stroke", "black")
+ .attr("stroke-width", 1);
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Add the highlighting functionality ///////////////////////////////////////////////////////////////////////////////////////////////
nodes
- .on('mouseover', function (d:any) {
- // Highlight the nodes: every node is green except of him
- nodes.style('fill', "#B8B8B8");
- d3.select(this).style('fill', '#ffa600');
- console.log("mouseover d="+JSON.stringify(d)+"\t this="+JSON.stringify(this));
- let e2 = this["__data__"]
- bocomp.highlight_stop(e2.name, e2.name2, bocomp);
- // Highlight the connections
- links
- .style('stroke', function (link_d:any) { return link_d.source === e2.id ? '#ffa600' : '#b8b8b8';})
- .style('stroke-width', function (link_d:any) { return link_d.source === e2.id ? bocomp.dict_inis_I[link_d.source][link_d.target]/10.0 : 1;});
- })
- .on('mouseout', function (d:any) {
- nodes.style('fill', "#ffa600");
- links
- .style('stroke', 'black')
- .style('stroke-width', '1');
- bocomp.highlight_stop(null, null, bocomp);
- });
+ .on('mouseover', function (d: any) {
+ // Highlight the nodes: every node is green except of him
+ nodes.style('fill', "#B8B8B8");
+ d3.select(this).style('fill', '#ffa600');
+ console.log("mouseover d=" + JSON.stringify(d) + "\t this=" + JSON.stringify(this));
+ let e2 = this["__data__"]
+ bocomp.highlight_stop(e2.name, e2.name2, bocomp);
+ // Highlight the connections
+ links
+ .style('stroke', function (link_d: any) { return link_d.source === e2.id ? '#ffa600' : '#b8b8b8'; })
+ .style('stroke-width', function (link_d: any) { return link_d.source === e2.id ? bocomp.dict_inis_I[link_d.source][link_d.target] / 10.0 : 1; });
+ })
+ .on('mouseout', function (d: any) {
+ nodes.style('fill', "#ffa600");
+ links
+ .style('stroke', 'black')
+ .style('stroke-width', '1');
+ bocomp.highlight_stop(null, null, bocomp);
+ });
// text hover nodes
svg
- .append("text")
- .attr("text-anchor", "middle")
- .style("fill", "#B8B8B8")
- .style("font-size", "17px")
- .attr("x", -160)
- .attr("y", -220)
- .html("Bus Line: "+llinea);
+ .append("text")
+ .attr("text-anchor", "middle")
+ .style("fill", "#B8B8B8")
+ .style("font-size", "17px")
+ .attr("x", -160)
+ .attr("y", -220)
+ .html("Bus Line: " + llinea);
///////////////////////////////////////////////////////////////////////////////////////////////
}
- tableCreate(name:any, name2:any, bocomp:any) {
+ tableCreate(name: any, name2: any, bocomp: any) {
let dd = document.getElementById('tableDiv');
dd.innerHTML = "";
- if ( name2 !== null ){
- let tbl = document.createElement('table');
- tbl.style.width = '100%';
- tbl.style.border = '1px solid black';
- let tr = tbl.insertRow();
- let td = tr.insertCell();
- td.appendChild(document.createTextNode(name2));
- td.style.border = '1px solid black';
- let tbl2 = document.createElement('table');
- tbl2.style.width = '100%';
- tbl2.style.border = '1px solid black';
-
- let table_values = [];
- console.log("tableCreate::: dict_inis="+JSON.stringify(bocomp.dict_inis));
- console.log("tableCreate::: dict_inis="+JSON.stringify(bocomp.dict_inis));
- for ( let key in bocomp.dict_inis[name]){
- let value = bocomp.dict_inis[name][key];
- let keyS = key;
- if ( Number(key) > 0 ){
- keyS = key+": "+bocomp.dict_stps_name[key];
- }
- let sq = bocomp.dict_stps_seq[key];
- let added = false;
- let ele = [keyS,value,sq];
- for(let i=0;i<table_values.length;i++){
- let osq = table_values[i][2];
- if ( osq > sq ){
- table_values.splice(i,0,ele);
- added = true;
- break;
- }
- }
- if ( !added ){
- table_values.push(ele);
- }
+ if (name2 !== null) {
+ let tbl = document.createElement('table');
+ tbl.style.width = '100%';
+ tbl.style.border = '1px solid black';
+ let tr = tbl.insertRow();
+ let td = tr.insertCell();
+ td.appendChild(document.createTextNode(name2));
+ td.style.border = '1px solid black';
+ let tbl2 = document.createElement('table');
+ tbl2.style.width = '100%';
+ tbl2.style.border = '1px solid black';
+
+ let table_values = [];
+ console.log("tableCreate::: dict_inis=" + JSON.stringify(bocomp.dict_inis));
+ console.log("tableCreate::: dict_inis=" + JSON.stringify(bocomp.dict_inis));
+ for (let key in bocomp.dict_inis[name]) {
+ let value = bocomp.dict_inis[name][key];
+ let keyS = key;
+ if (Number(key) > 0) {
+ keyS = key + ": " + bocomp.dict_stps_name[key];
+ }
+ let sq = bocomp.dict_stps_seq[key];
+ let added = false;
+ let ele = [keyS, value, sq];
+ for (let i = 0; i < table_values.length; i++) {
+ let osq = table_values[i][2];
+ if (osq > sq) {
+ table_values.splice(i, 0, ele);
+ added = true;
+ break;
+ }
}
- console.log('tableCreate::: name ='+name);
- console.log('tableCreate::: name2 ='+name2);
- console.log('tableCreate::: dict_inis[name] ='+JSON.stringify(bocomp.dict_inis[name]));
- console.log('tableCreate::: table_values ='+JSON.stringify(table_values));
- for(let k=0;k<table_values.length;k++){
- let keyS = table_values[k][0];
- let value = table_values[k][1];
- tr = tbl2.insertRow();
- tr.style.width='100%';
- tr.style.border = '1px solid black';
- td = tr.insertCell();
- td.appendChild(document.createTextNode(keyS));
- td.style.border = '1px solid black';
- td = tr.insertCell();
- td.appendChild(document.createTextNode(value));
- td.style.border = '1px solid black';
+ if (!added) {
+ table_values.push(ele);
}
- dd.appendChild(tbl);
- dd.appendChild(tbl2);
+ }
+ console.log('tableCreate::: name =' + name);
+ console.log('tableCreate::: name2 =' + name2);
+ console.log('tableCreate::: dict_inis[name] =' + JSON.stringify(bocomp.dict_inis[name]));
+ console.log('tableCreate::: table_values =' + JSON.stringify(table_values));
+ for (let k = 0; k < table_values.length; k++) {
+ let keyS = table_values[k][0];
+ let value = table_values[k][1];
+ tr = tbl2.insertRow();
+ tr.style.width = '100%';
+ tr.style.border = '1px solid black';
+ td = tr.insertCell();
+ td.appendChild(document.createTextNode(keyS));
+ td.style.border = '1px solid black';
+ td = tr.insertCell();
+ td.appendChild(document.createTextNode(value));
+ td.style.border = '1px solid black';
+ }
+ dd.appendChild(tbl);
+ dd.appendChild(tbl2);
}
-}
+ }
- highlight_stop(name: any, name2:any, bocomp: any){
- console.log('highlight_stop::: name='+name+ '\t\tname2='+name2);
- let clr_back = "484848";
- let clr_back2 = "ffa600";
- let clr_border = "484848";
- let clr_border2 = "ffa600";
- let clr_text = "FFFFFF";
- let clr_text2 = "ffa600";
- for (let key in this.markers){
+ highlight_stop(name: any, name2: any, bocomp: any) {
+ console.log('highlight_stop::: name=' + name + '\t\tname2=' + name2);
+ let clr_back = "484848";
+ let clr_back2 = "ffa600";
+ let clr_border = "484848";
+ let clr_border2 = "ffa600";
+ let clr_text = "FFFFFF";
+ let clr_text2 = "ffa600";
+ for (let key in this.markers) {
let mark = this.markers[key];
- if ( mark.id === name ){
- mark.icon = L.icon({iconUrl:"http://www.googlemapsmarkers.com/v1/"+mark.id+"/"+clr_back+"/"+clr_text+"/"+clr_border2});
- }else{
- mark.icon = L.icon({iconUrl:"http://www.googlemapsmarkers.com/v1/"+mark.id+"/"+clr_back+"/"+clr_text+"/"+clr_border});
- }
+ if (mark.id === name) {
+ mark.icon = L.icon({ iconUrl: "http://www.googlemapsmarkers.com/v1/" + mark.id + "/" + clr_back + "/" + clr_text + "/" + clr_border2 });
+ } else {
+ mark.icon = L.icon({ iconUrl: "http://www.googlemapsmarkers.com/v1/" + mark.id + "/" + clr_back + "/" + clr_text + "/" + clr_border });
+ }
}
bocomp.tableCreate(name, name2, bocomp);
-}
+ }
+
@@ -373,7 +502,6 @@ export class BusOdComponent implements OnInit {
-