public drawRobotsOnMap()

in ui/src/Map.tsx [163:217]


    public drawRobotsOnMap(xRange: any, yRange: any, svg: any, robots: Robot[]) {
        
        const robotElements = svg.selectAll("g.robot")
            .data(robots, (d: Robot) => {
                return d.id
            });

        // existing robot elements
        const robotCircles = robotElements.select("circle.robotCircle");
      
        robotCircles
            .transition()
            .duration(this.positionUpdateIntervalInMs) 
            .attr("class", "robotCircle")
            .attr("pointer-events", "none")
            .attr("r", (d: Robot) => this.getRobotSize(d.id))
            .attr("cx", (d: Robot) => xRange(d.telemetry.position.x))
            .attr("cy", (d: Robot) => yRange(d.telemetry.position.y))
            .style("fill", (d: Robot) => this.getRobotColor(d.telemetry.status.toString()));

        const robotLabels = robotElements.select("text.robotLabel");
        robotLabels.text((d: Robot) => d.id)
            .transition()
            .duration(this.positionUpdateIntervalInMs)
            .attr("pointer-events", "none")
            .attr("class", "robotLabel")
            .attr("x", (d: Robot) => xRange(d.telemetry.position.x) + (this.getRobotSize(d.id) / 2))
            .attr("y", (d: Robot) => yRange(d.telemetry.position.y) - this.getRobotSize(d.id));

        // new robot elements
        const robotEntry = robotElements
            .enter()
            .append("g")
            .attr("class", "robot");
        
        robotEntry.append("circle")
            .attr("pointer-events", "none")
            .attr("class", "robotCircle")
            .attr("r", (d: Robot) => this.getRobotSize(d.id))
            .attr("cx", (d: Robot) => xRange(d.telemetry.position.x))
            .attr("cy", (d: Robot) => yRange(d.telemetry.position.y))
            .style("fill", (d: Robot) => this.getRobotColor(d.telemetry.status.toString()))

        robotEntry.append("text")
            .text((d: Robot) => d.id)
            .attr("pointer-events", "none")
            .attr("class", "robotLabel")
            .attr("x", (d: Robot) => xRange(d.telemetry.position.x) + (this.getRobotSize(d.id) / 2))
            .attr("y", (d: Robot) => yRange(d.telemetry.position.y) - this.getRobotSize(d.id))

        // remove old robot elements
        robotElements.exit().remove();

        return robotElements;
    }