hrishioa/maptest.html

## maptest.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Display a map on a webpage</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css" rel="stylesheet">
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js"></script>
  <style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    // To try:
    // Run updateMarkers with values 10, 50, and 150 with reorder true and false
    // Run updateUnimportantProperty with values 10, 50, and 150 with reorder true and false

    mapboxgl.accessToken = 'pk.eyJ1IjoiZGJ1ZGltaXIiLCJhIjoiY2tqajd1ZmQzNnp2YzJ4cndqaTR3bW04ciJ9.EniTp3uj-4HChSWIHLeVpg';
    const map = new mapboxgl.Map({
      container: 'map', // container ID
      style: 'mapbox://styles/mapbox/streets-v11', // style URL
      center: [-74.5, 40], // starting position [lng, lat]
      // zoom: 9 // starting zoom
    });

    let markers = [];
    let markerCount = 300;

    //Thank you Stackoverflow
    function shuffle(array) {
      let currentIndex = array.length,  randomIndex;

      // While there remain elements to shuffle...
      while (currentIndex != 0) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex--;

        // And swap it with the current element.
        [array[currentIndex], array[randomIndex]] = [
        array[randomIndex], array[currentIndex]];
      }

      return array;
    }

    function generateMarkers(count) {
      markers = [];
      for(let i=0;i<count;i++) {
        markers.push({
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [
            (Math.random()*360)-180, (Math.random()*360)-180
            ]
          },
          'properties': {
            'id': i,
            'title': `Icon ${i+1}`,
            'unimportantProperty': Math.random()+" is a number"
          }
        });
      }
    }

    function updateMarkers(count, reorder) {
      markers = shuffle(markers);

      for(let i=0;i<count;i++) {
        markers[i].geometry.coordinates= [(Math.random()*360)-180, (Math.random()*360)-180]
      }

      if(reorder)
        markers = markers.sort((a,b) => a.properties.id - b.properties.id);

      map.getSource('points').setData({
            'type': 'FeatureCollection',
            'features': markers
          });
    }

    function updateUnimportantProperty(count, reorder) {
      markers = shuffle(markers);

      for(let i=0;i<count;i++) {
        markers[i].properties.unimportantProperty= Math.random()+" is a number"
      }

      if(reorder)
        markers = markers.sort((a,b) => a.properties.id - b.properties.id);

      map.getSource('points').setData({
            'type': 'FeatureCollection',
            'features': markers
          });
    }

    map.on('load', () => {
      // Add an image to use as a custom marker
      map.loadImage(
      'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',
      (error, image) => {
        if (error) throw error;
        map.addImage('custom-marker', image);
        // Add a GeoJSON source with 2 points
        generateMarkers(markerCount);
        map.addSource('points', {
          'type': 'geojson',
          'data': {
            'type': 'FeatureCollection',
            'features': markers
          }
        });

        // Add a symbol layer
        map.addLayer({
          'id': 'points',
          'type': 'symbol',
          'source': 'points',
          'layout': {
            'icon-image': 'custom-marker',
            // get the title name from the source's "title" property
            'text-field': ['get', 'title'],
            'text-font': [
            'Open Sans Semibold',
            'Arial Unicode MS Bold'
            ],
            'text-offset': [0, 1.25],
            'text-anchor': 'top'
          }
        });
      }
      );
    });
  </script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Display a map on a webpage</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
	<link href="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css" rel="stylesheet">
	<script src="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js"></script>
	<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script>
	// To try:
	// Run updateMarkers with values 10, 50, and 150 with reorder true and false
	// Run updateUnimportantProperty with values 10, 50, and 150 with reorder true and false

	mapboxgl.accessToken = 'pk.eyJ1IjoiZGJ1ZGltaXIiLCJhIjoiY2tqajd1ZmQzNnp2YzJ4cndqaTR3bW04ciJ9.EniTp3uj-4HChSWIHLeVpg';
	const map = new mapboxgl.Map({
	container: 'map', // container ID
	style: 'mapbox://styles/mapbox/streets-v11', // style URL
	center: [-74.5, 40], // starting position [lng, lat]
	// zoom: 9 // starting zoom
	});

	let markers = [];
	let markerCount = 300;

	//Thank you Stackoverflow
	function shuffle(array) {
	let currentIndex = array.length, randomIndex;

	// While there remain elements to shuffle...
	while (currentIndex != 0) {

	// Pick a remaining element...
	randomIndex = Math.floor(Math.random() * currentIndex);
	currentIndex--;

	// And swap it with the current element.
	[array[currentIndex], array[randomIndex]] = [
	array[randomIndex], array[currentIndex]];
	}

	return array;
	}

	function generateMarkers(count) {
	markers = [];
	for(let i=0;i<count;i++) {
	markers.push({
	'type': 'Feature',
	'geometry': {
	'type': 'Point',
	'coordinates': [
	(Math.random()360)-180, (Math.random()360)-180
	]
	},
	'properties': {
	'id': i,
	'title': `Icon ${i+1}`,
	'unimportantProperty': Math.random()+" is a number"
	}
	});
	}
	}

	function updateMarkers(count, reorder) {
	markers = shuffle(markers);

	for(let i=0;i<count;i++) {
	markers[i].geometry.coordinates= [(Math.random()360)-180, (Math.random()360)-180]
	}

	if(reorder)
	markers = markers.sort((a,b) => a.properties.id - b.properties.id);

	map.getSource('points').setData({
	'type': 'FeatureCollection',
	'features': markers
	});
	}

	function updateUnimportantProperty(count, reorder) {
	markers = shuffle(markers);

	for(let i=0;i<count;i++) {
	markers[i].properties.unimportantProperty= Math.random()+" is a number"
	}

	if(reorder)
	markers = markers.sort((a,b) => a.properties.id - b.properties.id);

	map.getSource('points').setData({
	'type': 'FeatureCollection',
	'features': markers
	});
	}

	map.on('load', () => {
	// Add an image to use as a custom marker
	map.loadImage(
	'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',
	(error, image) => {
	if (error) throw error;
	map.addImage('custom-marker', image);
	// Add a GeoJSON source with 2 points
	generateMarkers(markerCount);
	map.addSource('points', {
	'type': 'geojson',
	'data': {
	'type': 'FeatureCollection',
	'features': markers
	}
	});

	// Add a symbol layer
	map.addLayer({
	'id': 'points',
	'type': 'symbol',
	'source': 'points',
	'layout': {
	'icon-image': 'custom-marker',
	// get the title name from the source's "title" property
	'text-field': ['get', 'title'],
	'text-font': [
	'Open Sans Semibold',
	'Arial Unicode MS Bold'
	],
	'text-offset': [0, 1.25],
	'text-anchor': 'top'
	}
	});
	}
	);
	});
	</script>

	</body>
	</html>