crazycapivara/render-graphhopper-spt.html

## render-graphhopper-spt.html
<html>
    <head>
        <title>graphhopper-csv-d3-deckgl</title>

        <script src="https://d3js.org/d3-collection.v1.min.js"></script>
        <script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
        <script src="https://d3js.org/d3-dsv.v1.min.js"></script>
        <script src="https://d3js.org/d3-request.v1.min.js"></script>

        <script src="https://unpkg.com/deck.gl@7.0.11/dist.min.js"></script>

        <!--
        <script src="js/d3-collection.v1.min.js"></script>
        <script src="js/d3-dispatch.v1.min.js"></script>
        <script src="js/d3-dsv.v1.min.js"></script>
        <script src="js/d3-request.v1.min.js"></script>

        <script src="js/deck.gl.dist.min.js"></script>
        -->

        <style>
            body, select {
                font-family: Helvetica, Arial, sans-serif;
                font-size: 11px;
            }

            #deckWidget {
                width: 100%;
                height: 800;
            }

            #overlay {
                position: absolute;
                padding: 4px;
                margin: 8px;
                color: #fff;
                background: rgba(0, 0, 0, 0.8);
                z-index: 9;
            }

            select {
                border: none;
            }

            #config {
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div id="config">
            time limit
            <select id="timeLimit">
                <option value=1800>1800</option>
                <option value=3600>3600</option>
                <option value=7200>7200</option>
            </select>
        </div>
        <div id=overlay>
            <div id="progress"></div>
            <div id="tooltip"></div>
        </div>
        <div id="deckWidget"></div>
        <script>
            // globals
            var LAT = 52.321911;
            var LNG = 10.393066;
            var TIME_LIMIT = 4200;

            var deckWidget = new deck.DeckGL({
                container: "deckWidget",
                mapboxApiAccessToken: "",
                longitude: LNG,
                latitude: LAT,
                zoom: 8,
                layers: [],
                pickingRadius: 5,
                onClick: (info, evt) => {
                    var lngLat = info.lngLat;
                    console.log(lngLat);
                    updateLayer(makeRequestString(lngLat[1], lngLat[0], getTimeLimit()));
                },
                style: { background: "black" }
            });

            var render = function(data) {
                var lineLayer = new deck.LineLayer({
                    data: data,
                    getWidth: 3,
                    getSourcePosition: d => [d.prev_longitude, d.prev_latitude],
                    getTargetPosition: d => [ d.longitude, d.latitude],
                    getColor: d => d.time < 3600 * 1000 ? [240, 140, 10] : [140, 140, 10],
                    pickable: true,
                    onHover: info => {
                        var tooltip = document.getElementById("tooltip");
                        tooltip.innerHTML = info.object ? info.object.time / 1000 : "";
                    }
                });
                deckWidget.setProps({ layers: [lineLayer] });
            }

            var updateLayer = function(url) {
                d3.csv(url, formatRow, function(error, data) {
                    if (!error) {
                        // console.log(data);
                        render(data);
                    }
                }).on("progress", evt => {
                    var loaded_mb = evt.loaded / 1024 / 1024;
                    // console.log(loaded_mb);
                    document.getElementById("progress").innerHTML = loaded_mb.toFixed(1) + " MB";
                });
            };

            var formatRow = function(row) {
                if (row.time > 0) {
                    return d3.autoType(row);
                }
            };

            var makeRequestString = function(lat, lng, timeLimit) {
                return `http://localhost:8989/spt?point=${lat},${lng}&time_limit=${timeLimit}&columns=prev_longitude,prev_latitude,longitude,latitude,time`;
            };

            var getTimeLimit = function() {
                var el = document.getElementById("timeLimit");
                var value = el.options[el.selectedIndex].value;
                return Number(value);
            }

            // updateLayer(makeRequestString(LAT, LNG, TIME_LIMIT));
            updateLayer(makeRequestString(LAT, LNG, getTimeLimit()));
        </script>
    </body>
</html>
	<html>
	<head>
	<title>graphhopper-csv-d3-deckgl</title>

	<script src="https://d3js.org/d3-collection.v1.min.js"></script>
	<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
	<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
	<script src="https://d3js.org/d3-request.v1.min.js"></script>

	<script src="https://unpkg.com/deck.gl@7.0.11/dist.min.js"></script>

	<!--
	<script src="js/d3-collection.v1.min.js"></script>
	<script src="js/d3-dispatch.v1.min.js"></script>
	<script src="js/d3-dsv.v1.min.js"></script>
	<script src="js/d3-request.v1.min.js"></script>

	<script src="js/deck.gl.dist.min.js"></script>
	-->

	<style>
	body, select {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	}

	#deckWidget {
	width: 100%;
	height: 800;
	}

	#overlay {
	position: absolute;
	padding: 4px;
	margin: 8px;
	color: #fff;
	background: rgba(0, 0, 0, 0.8);
	z-index: 9;
	}

	select {
	border: none;
	}

	#config {
	padding: 10px;
	}
	</style>
	</head>
	<body>
	<div id="config">
	time limit
	<select id="timeLimit">
	<option value=1800>1800</option>
	<option value=3600>3600</option>
	<option value=7200>7200</option>
	</select>
	</div>
	<div id=overlay>
	<div id="progress"></div>
	<div id="tooltip"></div>
	</div>
	<div id="deckWidget"></div>
	<script>
	// globals
	var LAT = 52.321911;
	var LNG = 10.393066;
	var TIME_LIMIT = 4200;

	var deckWidget = new deck.DeckGL({
	container: "deckWidget",
	mapboxApiAccessToken: "",
	longitude: LNG,
	latitude: LAT,
	zoom: 8,
	layers: [],
	pickingRadius: 5,
	onClick: (info, evt) => {
	var lngLat = info.lngLat;
	console.log(lngLat);
	updateLayer(makeRequestString(lngLat[1], lngLat[0], getTimeLimit()));
	},
	style: { background: "black" }
	});

	var render = function(data) {
	var lineLayer = new deck.LineLayer({
	data: data,
	getWidth: 3,
	getSourcePosition: d => [d.prev_longitude, d.prev_latitude],
	getTargetPosition: d => [ d.longitude, d.latitude],
	getColor: d => d.time < 3600 * 1000 ? [240, 140, 10] : [140, 140, 10],
	pickable: true,
	onHover: info => {
	var tooltip = document.getElementById("tooltip");
	tooltip.innerHTML = info.object ? info.object.time / 1000 : "";
	}
	});
	deckWidget.setProps({ layers: [lineLayer] });
	}

	var updateLayer = function(url) {
	d3.csv(url, formatRow, function(error, data) {
	if (!error) {
	// console.log(data);
	render(data);
	}
	}).on("progress", evt => {
	var loaded_mb = evt.loaded / 1024 / 1024;
	// console.log(loaded_mb);
	document.getElementById("progress").innerHTML = loaded_mb.toFixed(1) + " MB";
	});
	};

	var formatRow = function(row) {
	if (row.time > 0) {
	return d3.autoType(row);
	}
	};

	var makeRequestString = function(lat, lng, timeLimit) {
	return `http://localhost:8989/spt?point=${lat},${lng}&time_limit=${timeLimit}&columns=prev_longitude,prev_latitude,longitude,latitude,time`;
	};

	var getTimeLimit = function() {
	var el = document.getElementById("timeLimit");
	var value = el.options[el.selectedIndex].value;
	return Number(value);
	}

	// updateLayer(makeRequestString(LAT, LNG, TIME_LIMIT));
	updateLayer(makeRequestString(LAT, LNG, getTimeLimit()));
	</script>
	</body>
	</html>