nickpeihl/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Display a map</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.7.0/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 src="https://unpkg.com/@mapbox/geo-viewport@0.4.0/geo-viewport.js"></script>
    <script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
    <script>
      var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'https://tiles.maps.elastic.co/styles/osm-bright/style.json', // stylesheet location
        center: [0, 0], // starting position [lng, lat]
        zoom: 0, // starting zoom
        renderWorldCopies: true,
      });

      var center = [20, 15];
      var zoom = 1;

      var sizes = {
        '2560x1440': [2560, 1440],
        '1920x1080': [1920, 1080],
        '1366x768': [1366, 768],
      };

      map.on('load', function(e) {
        Object.keys(sizes).forEach(function(k, i) {
          var bounds = geoViewport.bounds(center, zoom, sizes[k], 512);
          // var polygon = turf.bboxPolygon(bounds);
          // polygon.properties = {
          //   w: sizes[k][0],
          //   h: sizes[k][1]
          // };
          var multiline = [
            [
              [bounds[0], bounds[3]],
              [bounds[2], bounds[3]],
            ],
            [
              [bounds[2], bounds[1]],
              [bounds[0], bounds[1]],
            ],
          ];

          console.log(k, sizes[k][0] / sizes[k][1]);
          map.addSource(k, {
            type: 'geojson',
            data: {
              type: 'Feature',
              geometry: {
                type: 'MultiLineString',
                coordinates: multiline,
              },
              properties: {
                w: sizes[k][0],
                h: sizes[k][1],
                resolution: k
              },
            },
          });
          map.addLayer({
            id: k,
            type: 'line',
            source: k,
            paint: {
              'line-color': [
                'interpolate',
                ['linear'],
                ['get', 'h'],
                750,
                '#00ff00',
                1500,
                '#ff0000',
              ],
              'line-width': ['interpolate', ['linear'], ['get', 'h'], 750, 4, 1500, 9],
            },
          });

          var popup = new mapboxgl.Popup({
            closeButton: false,
            closeOnClick: false,
          });

          map.on('mouseenter', k, function(e) {
            // Change the cursor style as a UI indicator.
            map.getCanvas().style.cursor = 'pointer';

            var coordinates = e.lngLat;
            var description = e.features[0].properties.resolution;

            // Ensure that if the map is zoomed out such that multiple
            // copies of the feature are visible, the popup appears
            // over the copy being pointed to.
            while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
              coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
            }

            // Populate the popup and set its coordinates
            // based on the feature found.
            popup
              .setLngLat(coordinates)
              .setHTML(description)
              .addTo(map);
          });

          map.on('mouseleave', k, function() {
            map.getCanvas().style.cursor = '';
            popup.remove();
          });
        });
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Display a map</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v1.7.0/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 src="https://unpkg.com/@mapbox/geo-viewport@0.4.0/geo-viewport.js"></script>
	<script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
	<script>
	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'https://tiles.maps.elastic.co/styles/osm-bright/style.json', // stylesheet location
	center: [0, 0], // starting position [lng, lat]
	zoom: 0, // starting zoom
	renderWorldCopies: true,
	});

	var center = [20, 15];
	var zoom = 1;

	var sizes = {
	'2560x1440': [2560, 1440],
	'1920x1080': [1920, 1080],
	'1366x768': [1366, 768],
	};

	map.on('load', function(e) {
	Object.keys(sizes).forEach(function(k, i) {
	var bounds = geoViewport.bounds(center, zoom, sizes[k], 512);
	// var polygon = turf.bboxPolygon(bounds);
	// polygon.properties = {
	// w: sizes[k][0],
	// h: sizes[k][1]
	// };
	var multiline = [
	[
	[bounds[0], bounds[3]],
	[bounds[2], bounds[3]],
	],
	[
	[bounds[2], bounds[1]],
	[bounds[0], bounds[1]],
	],
	];

	console.log(k, sizes[k][0] / sizes[k][1]);
	map.addSource(k, {
	type: 'geojson',
	data: {
	type: 'Feature',
	geometry: {
	type: 'MultiLineString',
	coordinates: multiline,
	},
	properties: {
	w: sizes[k][0],
	h: sizes[k][1],
	resolution: k
	},
	},
	});
	map.addLayer({
	id: k,
	type: 'line',
	source: k,
	paint: {
	'line-color': [
	'interpolate',
	['linear'],
	['get', 'h'],
	750,
	'#00ff00',
	1500,
	'#ff0000',
	],
	'line-width': ['interpolate', ['linear'], ['get', 'h'], 750, 4, 1500, 9],
	},
	});

	var popup = new mapboxgl.Popup({
	closeButton: false,
	closeOnClick: false,
	});

	map.on('mouseenter', k, function(e) {
	// Change the cursor style as a UI indicator.
	map.getCanvas().style.cursor = 'pointer';

	var coordinates = e.lngLat;
	var description = e.features[0].properties.resolution;

	// Ensure that if the map is zoomed out such that multiple
	// copies of the feature are visible, the popup appears
	// over the copy being pointed to.
	while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
	coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
	}

	// Populate the popup and set its coordinates
	// based on the feature found.
	popup
	.setLngLat(coordinates)
	.setHTML(description)
	.addTo(map);
	});

	map.on('mouseleave', k, function() {
	map.getCanvas().style.cursor = '';
	popup.remove();
	});
	});
	});
	</script>
	</body>
	</html>