src/component/busMap.js
// Render vehicle icons based on the location
Render vehicle icons based on the location
Render vehicle icons based on the location
async drawVehiclePosition() {
        const {routes, vehicle} = this.state
        const response = await fetch(vehicleDataURL)
        const vehicleData = await response.json()
        let vehiclePositions = vehicleData.vehicle
        d3.selectAll('.tooltip').remove()
        let vehicleTooltip = d3.select(".vehicle-tooltip")
                    .append("div")
                    .attr("class", "tooltip")
                    .style("opacity", 0)
        if(vehicleData && vehicleData.lastTime) {
            lasttime = vehicleData.lastTime.time
        }
        this.setTimer(lasttime)
        if(routes && routes.length) {
            vehiclePositions = this.filterVehicleData(vehiclePositions, routes)
        }
        let pathJSON = this.generatePathJSON(vehiclePositions)
        d3.selectAll('.vehicle-path').remove()
        d3.selectAll('.sf-bus').remove()
        let vehiclesPlot = vehicle
                    .selectAll('path')
                    .data(vehiclePositions)
                    .enter()
                    .append('svg:image')
                    .attr('class','sf-bus')
                    .attr('xlink:href','https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/MTS_Bus_icon.svg/500px-MTS_Bus_icon.svg.png')
                    .attr('x', (d) => {
						return mapProjection([d.lon,d.lat])[0]; 
					})
                    .attr('y', (d) => { 
						return mapProjection([d.lon,d.lat])[1]; 
                    })
                    .attr('width',10)
                    .attr('height',10)
                    .attr('id', (d) => {
                        return d.id 
                    })
                    .style("cursor", "pointer")
                    .on("mouseover", function(d) {	
                        vehicleTooltip.transition()		
                            .duration(100)		
                            .style("opacity", .9)		
                        vehicleTooltip.html(`Vehicle ID - ${d.id}<br/> Route - ${d.routeTag}<br/> Speed - ${d.speedKmHr} km/hr`)	
                        })
                    .attr('d', this.state.path);
                vehiclesPlot.exit().remove();
        this.drawVehiclePath(pathJSON)
        this.setState({loader: false})
    }
async drawVehiclePosition ( ) { const { routes , vehicle } = this . state const response = await fetch ( vehicleDataURL ) const vehicleData = await response . json ( ) let vehiclePositions = vehicleData . vehicle d3 . selectAll ( '.tooltip' ) . remove ( ) let vehicleTooltip = d3 . select ( ".vehicle-tooltip" ) . append ( "div" ) . attr ( "class" , "tooltip" ) . style ( "opacity" , 0 ) if ( vehicleData && vehicleData . lastTime ) { lasttime = vehicleData . lastTime . time } this . setTimer ( lasttime ) if ( routes && routes . length ) { vehiclePositions = this . filterVehicleData ( vehiclePositions , routes ) } let pathJSON = this . generatePathJSON ( vehiclePositions ) d3 . selectAll ( '.vehicle-path' ) . remove ( ) d3 . selectAll ( '.sf-bus' ) . remove ( ) let vehiclesPlot = vehicle . selectAll ( 'path' ) . data ( vehiclePositions ) . enter ( ) . append ( 'svg:image' ) . attr ( 'class' , 'sf-bus' ) . attr ( 'xlink:href' , 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/MTS_Bus_icon.svg/500px-MTS_Bus_icon.svg.png' ) . attr ( 'x' , ( d ) => { return mapProjection ( [ d . lon , d . lat ] ) [ 0 ] ; } ) . attr ( 'y' , ( d ) => { return mapProjection ( [ d . lon , d . lat ] ) [ 1 ] ; } ) . attr ( 'width' , 10 ) . attr ( 'height' , 10 ) . attr ( 'id' , ( d ) => { return d . id } ) . style ( "cursor" , "pointer" ) . on ( "mouseover" , function ( d ) { vehicleTooltip . transition ( ) . duration ( 100 ) . style ( "opacity" , .9 ) vehicleTooltip . html ( ` ${ d . id } ${ d . routeTag } ${ d . speedKmHr } ` ) } ) . attr ( 'd' , this . state . path ) ; vehiclesPlot . exit ( ) . remove ( ) ; this . drawVehiclePath ( pathJSON ) this . setState ( { loader : false } ) }
Render vehicle icons based on the location
Render vehicle icons based on the location