ms747/airbnb.html

## airbnb.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Clustered Mapbox Map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js'></script>
                <script src="https://unpkg.com/supercluster@8.0.0/dist/supercluster.min.js"></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
<div id='map'></div>
<script>
        let now = performance.now();

        mapboxgl.accessToken = 'pk.eyJ1IjoibmV1cmFsbmV4dCIsImEiOiJjbG84Z25jeWkwMWllMmtxYzduOGI3M3RzIn0.N-OEPvf5V2rOI0URnKPUrA';

        const map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/streets-v11',
                center: [73.85525117586494, 18.52027645666641],
                zoom: 10,
        });

        map.on("load", function() {
                console.log("loading map took:", performance.now() - now, "ms");

                map.addSource("tier1", {
                        type: "geojson",
                        data: {
                                type: 'FeatureCollection',
                                features: []
                        },
                });

                map.addSource("tier2", {
                        type: "geojson",
                        data: {
                                type: 'FeatureCollection',
                                features: []
                        },
                });

                map.addSource("tier3", {
                        type: "geojson",
                        data: {
                                type: 'FeatureCollection',
                                features: []
                        },
                });

                map.addLayer({
                        id: 'tier1Entries',
                        type: 'circle',
                        source: 'tier1',
                        paint: {
                                'circle-color': '#ff0000',
                                'circle-radius': 4,
                                'circle-stroke-width': 1,
                                'circle-stroke-color': '#fff'
                        }
                });

                map.addLayer({
                        id: 'tier2Entries',
                        type: 'circle',
                        source: 'tier2',
                        minzoom: 12,
                        paint: {
                                'circle-color': '#00ff00',
                                'circle-radius': 4,
                                'circle-stroke-width': 1,
                                'circle-stroke-color': '#fff'
                        }
                });

                map.addLayer({
                        id: 'tier3Entries',
                        type: 'circle',
                        source: 'tier3',
                        minzoom: 14,
                        paint: {
                                'circle-color': '#0000ff',
                                'circle-radius': 4,
                                'circle-stroke-width': 1,
                                'circle-stroke-color': '#fff'
                        }
                });

                now = performance.now();
                fetch("http://140.238.242.140:5000/")
                        .then(res => res.json())
                        .then(res => {
                                console.log("fetching data took:", performance.now() - now, "ms");
                                now = performance.now();
                                map.getSource("tier1").setData(res[0]);
                                map.getSource("tier2").setData(res[1]);
                                map.getSource("tier3").setData(res[2]);
                                console.log("setting data took:", performance.now() - now, "ms");
                        });
        });

        /*
        map.on('moveend', function() {
                console.log(Math.trunc(map.getZoom()));
        });
        */

        map.on('click', function(e) {
                const lngLat = e.lngLat;
                console.log(`Longitude: ${lngLat.lng}, Latitude: ${lngLat.lat}`);
        });

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>Clustered Mapbox Map</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js'></script>
	<script src="https://unpkg.com/supercluster@8.0.0/dist/supercluster.min.js"></script>
	<link href='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
	</style>
	</head>
	<body>
	<div id='map'></div>
	<script>
	let now = performance.now();

	mapboxgl.accessToken = 'pk.eyJ1IjoibmV1cmFsbmV4dCIsImEiOiJjbG84Z25jeWkwMWllMmtxYzduOGI3M3RzIn0.N-OEPvf5V2rOI0URnKPUrA';

	const map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v11',
	center: [73.85525117586494, 18.52027645666641],
	zoom: 10,
	});

	map.on("load", function() {
	console.log("loading map took:", performance.now() - now, "ms");

	map.addSource("tier1", {
	type: "geojson",
	data: {
	type: 'FeatureCollection',
	features: []
	},
	});

	map.addSource("tier2", {
	type: "geojson",
	data: {
	type: 'FeatureCollection',
	features: []
	},
	});

	map.addSource("tier3", {
	type: "geojson",
	data: {
	type: 'FeatureCollection',
	features: []
	},
	});

	map.addLayer({
	id: 'tier1Entries',
	type: 'circle',
	source: 'tier1',
	paint: {
	'circle-color': '#ff0000',
	'circle-radius': 4,
	'circle-stroke-width': 1,
	'circle-stroke-color': '#fff'
	}
	});

	map.addLayer({
	id: 'tier2Entries',
	type: 'circle',
	source: 'tier2',
	minzoom: 12,
	paint: {
	'circle-color': '#00ff00',
	'circle-radius': 4,
	'circle-stroke-width': 1,
	'circle-stroke-color': '#fff'
	}
	});

	map.addLayer({
	id: 'tier3Entries',
	type: 'circle',
	source: 'tier3',
	minzoom: 14,
	paint: {
	'circle-color': '#0000ff',
	'circle-radius': 4,
	'circle-stroke-width': 1,
	'circle-stroke-color': '#fff'
	}
	});

	now = performance.now();
	fetch("http://140.238.242.140:5000/")
	.then(res => res.json())
	.then(res => {
	console.log("fetching data took:", performance.now() - now, "ms");
	now = performance.now();
	map.getSource("tier1").setData(res[0]);
	map.getSource("tier2").setData(res[1]);
	map.getSource("tier3").setData(res[2]);
	console.log("setting data took:", performance.now() - now, "ms");
	});
	});

	/*
	map.on('moveend', function() {
	console.log(Math.trunc(map.getZoom()));
	});
	*/

	map.on('click', function(e) {
	const lngLat = e.lngLat;
	console.log(`Longitude: ${lngLat.lng}, Latitude: ${lngLat.lat}`);
	});

	</script>

	</body>
	</html>