kkdd/README.md

## README.md

      
    Raw
  

              README.md
            
          
    getting trips-json files

$ cat trips.json 
[{"vendor":0,"path":[[139.8007914,35.5144044],[139.9108676,35.4396142]],"timestamps":[0,600]},{"vendor":1,"path":[[139.9108139,35.439529],[139.8008987,35.5140027]],"timestamps":[0,600]}]
$ wget https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/trips/trips-v7.json

  
## index.html
<html>
	<head>
		<script src="https://unpkg.com/deck.gl@^8.6.5/dist.min.js"></script>
		<script src="https://unpkg.com/@deck.gl/carto@^8.6.5/dist.min.js"></script>
		<script src="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.js"></script>
		<link href="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.css" rel="stylesheet" />
		<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
		<style>
			body { margin:0; padding:0; }
			#map { position:absolute; top:0; bottom:0; width:100%; background-color: black;}
		</style>
	</head>
	<body><div id='map'></div></body>
	<script type="text/javascript">
		const ANIMATION_SPEED = 20;
		const INITIAL_PAUSE = 1;
		const colors = {0: [253, 128, 93], 'others': [23, 184, 190]};

		const getColor = i => {
			if (typeof i === 'undefined' || !(i in colors)) {i = 'others'};
			return colors[i];
		}

		new deck.DeckGL({
			container: 'map',
			mapStyle: deck.carto.BASEMAP.DARK_MATTER,
			initialViewState: {longitude: 60, latitude: 0, zoom: 1}
		});

		drawTrips([{"vendor":0,"path":[[139.8007914,35.5144044],[139.9108676,35.4396142]],"timestamps":[0,600]},{"vendor":1,"path":[[139.9108139,35.439529],[139.8008987,35.5140027]],"timestamps":[0,600]}]);

		const setDropArea = (area) => {
			area.ondragover = () => false;
			area.ondrop = async event => {
				event.preventDefault();
				const promises = [];
				for (const file of event.dataTransfer.files) {
					if (file.name.split('.').pop() == 'json') {
						promises.push(file.text());
					}
				}
				const results = await Promise.all(promises);
				drawTrips(results.map(JSON.parse).flat());
				return false;
			};
		}
		setDropArea(document.getElementById('map'));

		function bbox(json) {
			let points = [];
			for (let e of json){
				points = points.concat(e.path);
			}
			const b = turf.bbox(turf.multiPoint(points))
			return [[b[0], b[3]], [b[2], b[1]]];
		}

		function interval_timestamps(json) {
			let timestamps = [];
			for (let e of json){
				timestamps = timestamps.concat(e.timestamps);
			}
			return [Math.min(...timestamps), Math.max(...timestamps)];
		}

		function drawTrips(json) {
			const interval = interval_timestamps(json);
			interval[0] -= ANIMATION_SPEED * INITIAL_PAUSE;
			const view = new deck.WebMercatorViewport({width: document.body.clientWidth, height: document.body.clientHeight});

			deck.carto.setDefaultCredentials({
				username: 'public',
				apiKey: 'default_public',
			});

			const deckgl = new deck.DeckGL({
				container: 'map',
				mapStyle: deck.carto.BASEMAP.DARK_MATTER,
				initialViewState: view.fitBounds(bbox(json)),
				controller: true
			});

			const map = deckgl.getMapboxMap();
			map.addControl(new mapboxgl.ScaleControl({
				maxWidth: 160,
				unit: 'metric'
			}));

			let time = 0;
			const RATE_ANIMATION_FRAME = 50;
			function animate() {
				time = (time + ANIMATION_SPEED/RATE_ANIMATION_FRAME) % (interval[1] - interval[0]);
				window.requestAnimationFrame(animate);
			}

			setInterval(() => {
				deckgl.setProps({
					layers: [
						new deck.TripsLayer({
							id: 'trips-layer',
							data: json,
							getPath: d => d.path,
							getTimestamps: d => d.timestamps,
							getColor: d => getColor(d.vendor),
							opacity: 0.8,
							widthMinPixels: 3,
							jointRounded: true,
							capRounded: true,
							trailLength: 180,
							currentTime: time + interval[0],
							shadowEnabled: false
						})
					]
				});
			}, 50);

			window.requestAnimationFrame(animate);
		}
	</script>
</html>
	<html>
	<head>
	<script src="https://unpkg.com/deck.gl@^8.6.5/dist.min.js"></script>
	<script src="https://unpkg.com/@deck.gl/carto@^8.6.5/dist.min.js"></script>
	<script src="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.js"></script>
	<link href="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.css" rel="stylesheet" />
	<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; background-color: black;}
	</style>
	</head>
	<body><div id='map'></div></body>
	<script type="text/javascript">
	const ANIMATION_SPEED = 20;
	const INITIAL_PAUSE = 1;
	const colors = {0: [253, 128, 93], 'others': [23, 184, 190]};

	const getColor = i => {
	if (typeof i === 'undefined' \|\| !(i in colors)) {i = 'others'};
	return colors[i];
	}

	new deck.DeckGL({
	container: 'map',
	mapStyle: deck.carto.BASEMAP.DARK_MATTER,
	initialViewState: {longitude: 60, latitude: 0, zoom: 1}
	});

	drawTrips([{"vendor":0,"path":[[139.8007914,35.5144044],[139.9108676,35.4396142]],"timestamps":[0,600]},{"vendor":1,"path":[[139.9108139,35.439529],[139.8008987,35.5140027]],"timestamps":[0,600]}]);

	const setDropArea = (area) => {
	area.ondragover = () => false;
	area.ondrop = async event => {
	event.preventDefault();
	const promises = [];
	for (const file of event.dataTransfer.files) {
	if (file.name.split('.').pop() == 'json') {
	promises.push(file.text());
	}
	}
	const results = await Promise.all(promises);
	drawTrips(results.map(JSON.parse).flat());
	return false;
	};
	}
	setDropArea(document.getElementById('map'));

	function bbox(json) {
	let points = [];
	for (let e of json){
	points = points.concat(e.path);
	}
	const b = turf.bbox(turf.multiPoint(points))
	return [[b[0], b[3]], [b[2], b[1]]];
	}

	function interval_timestamps(json) {
	let timestamps = [];
	for (let e of json){
	timestamps = timestamps.concat(e.timestamps);
	}
	return [Math.min(...timestamps), Math.max(...timestamps)];
	}

	function drawTrips(json) {
	const interval = interval_timestamps(json);
	interval[0] -= ANIMATION_SPEED * INITIAL_PAUSE;
	const view = new deck.WebMercatorViewport({width: document.body.clientWidth, height: document.body.clientHeight});

	deck.carto.setDefaultCredentials({
	username: 'public',
	apiKey: 'default_public',
	});

	const deckgl = new deck.DeckGL({
	container: 'map',
	mapStyle: deck.carto.BASEMAP.DARK_MATTER,
	initialViewState: view.fitBounds(bbox(json)),
	controller: true
	});

	const map = deckgl.getMapboxMap();
	map.addControl(new mapboxgl.ScaleControl({
	maxWidth: 160,
	unit: 'metric'
	}));

	let time = 0;
	const RATE_ANIMATION_FRAME = 50;
	function animate() {
	time = (time + ANIMATION_SPEED/RATE_ANIMATION_FRAME) % (interval[1] - interval[0]);
	window.requestAnimationFrame(animate);
	}

	setInterval(() => {
	deckgl.setProps({
	layers: [
	new deck.TripsLayer({
	id: 'trips-layer',
	data: json,
	getPath: d => d.path,
	getTimestamps: d => d.timestamps,
	getColor: d => getColor(d.vendor),
	opacity: 0.8,
	widthMinPixels: 3,
	jointRounded: true,
	capRounded: true,
	trailLength: 180,
	currentTime: time + interval[0],
	shadowEnabled: false
	})
	]
	});
	}, 50);

	window.requestAnimationFrame(animate);
	}
	</script>
	</html>