sienki-jenki/Mapbox image-replacement demo

## Mapbox image-replacement demo
<!DOCTYPE html>
<html>
<head>
    <title>Mapbox GL JS debug page</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel='stylesheet' href='../dist/mapbox-gl.css' />
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
</head>

<body>
<div id='map'></div>

<script src='../dist/mapbox-gl-dev.js'></script>
<script src='../debug/access_token_generated.js'></script>
<script>

var map = window.map = new mapboxgl.Map({
    container: 'map',
    zoom: 12.5,
    center: [-122.4194, 37.7749],
    style: 'mapbox://styles/mapbox/streets-v11',
    hash: true
});

const frameCount = 20;
let currentImage = 0;

function getPath(currentImage) {
    return `https://picsum.photos/id/${currentImage}/1000/1000`;
}

map.on('load', () => {
    map.addSource('radar', {
        type: 'image',
        url: getPath(0),
        coordinates: [
            [-100.425, 46.437],
            [-70.516, 46.437],
            [-70.516, 20.936],
            [-100.425, 20.936]
        ]
    });
    map.addLayer({
        id: 'radar-layer',
        'type': 'raster',
        'source': 'radar',
        'paint': {
            'raster-fade-duration': 0
        }
    });

    setInterval(() => {
        currentImage = (currentImage + 1) % frameCount;
        map.getSource('radar').updateImage({url: getPath(currentImage)});
    }, 10);
});

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Mapbox GL JS debug page</title>
	<meta charset='utf-8'>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<link rel='stylesheet' href='../dist/mapbox-gl.css' />
	<style>
	body { margin: 0; padding: 0; }
	html, body, #map { height: 100%; }
	</style>
	</head>

	<body>
	<div id='map'></div>

	<script src='../dist/mapbox-gl-dev.js'></script>
	<script src='../debug/access_token_generated.js'></script>
	<script>

	var map = window.map = new mapboxgl.Map({
	container: 'map',
	zoom: 12.5,
	center: [-122.4194, 37.7749],
	style: 'mapbox://styles/mapbox/streets-v11',
	hash: true
	});

	const frameCount = 20;
	let currentImage = 0;

	function getPath(currentImage) {
	return `https://picsum.photos/id/${currentImage}/1000/1000`;
	}

	map.on('load', () => {
	map.addSource('radar', {
	type: 'image',
	url: getPath(0),
	coordinates: [
	[-100.425, 46.437],
	[-70.516, 46.437],
	[-70.516, 20.936],
	[-100.425, 20.936]
	]
	});
	map.addLayer({
	id: 'radar-layer',
	'type': 'raster',
	'source': 'radar',
	'paint': {
	'raster-fade-duration': 0
	}
	});

	setInterval(() => {
	currentImage = (currentImage + 1) % frameCount;
	map.getSource('radar').updateImage({url: getPath(currentImage)});
	}, 10);
	});

	</script>
	</body>
	</html>