malwoodsantoro · March 4, 2022 04:45
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
  <title>ap1</title>
  <meta charset='utf-8'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    #features {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 25%;
      overflow: auto;
      background: rgba(255, 255, 255, 0.8);
    }

    #divID {
      border-width: 10px;
      border-color: #000080;
      border-style: solid;
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -100px;
      width: 200px;
      height: 200px;
      z-index: 2;
    }

    #featureProperties {
      outline: 5px solid black;
      padding: 20px;
      margin: 5px;
      font-family: Arial;
    }
  </style>
 </head>

 <body>
  <div id="divID"></div>
  <div id='map' tabindex=0></div>
  <div id="features"></div>
  <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
    var map = new mapboxgl.Map({
      container: 'map',
      zoom: 14,
      center: [-70.28830547331387, 43.67880765293333],
      style: 'mapbox://styles/mapbox/streets-v11',
      bearing: 45
    });

    displayProperties = () => {
      var point = map.project(map.getCenter());
      var width = 200;
      var height = 200;

      var features = map.queryRenderedFeatures([
        [point.x - width / 2, point.y - height / 2],
        [point.x + width / 2, point.y + height / 2]
      ], { layers: ['poi-label'] });

      features.map(function (feat, i) {
        document.getElementById('features').innerHTML += '<div id="featureProperties" arialabel= "' + feat.properties.name + '" tabindex="' + (i + 1) + '">' + (i + 1) + '. ' + feat.properties.name + '<br>' + feat.properties.type + '</div>'
      });
    }

    bindDirectionKeys = () => {
      var bearing = map.getBearing()

      document.onkeydown = function (event) {
        switch (event.keyCode) {
          //West
          case 37:
            document.getElementById('features').innerHTML = 'Moving ' + bearingToDirection(bearing - 90)
            break;
          //North 
          case 38:
            document.getElementById('features').innerHTML = 'Moving ' + bearingToDirection(bearing)
            break;
          //East
          case 39:
            document.getElementById('features').innerHTML = 'Moving ' + bearingToDirection(bearing + 90)
            break;
          //South
          case 40:
            document.getElementById('features').innerHTML = 'Moving ' + bearingToDirection(bearing + 180)
            break;
        }
      };
    }


    bearingToDirection = (bearing) => {
      var positiveBearing = makeBearingPositive(bearing)

      switch (true) {
        case (positiveBearing < 30):
          return "North";

        case (positiveBearing <= 60):
          return "Northeast";

        case (positiveBearing <= 120):
          return "East";

        case (positiveBearing <= 150):
          return "Southeast";

        case (positiveBearing <= 210):
          return "South";

        case (positiveBearing <= 240):
          return "Southwest";

        case (positiveBearing <= 300):
          return "West";

        case (positiveBearing <= 330):
          return "Northwest"

        case (positiveBearing <= 360):
          return "North"

        default:
          console.log('Default');
      }
    }

    makeBearingPositive = (bearing) => {
      if (bearing < 0) {
        return bearing += 360
      } else {
        return bearing
      }
    }

    map.once('idle', function () {
      //retrieve and display properties on initial load of the map 
      displayProperties();
      bindDirectionKeys();

      map.on('moveend', function () {
        //clear features on each map move 
        document.getElementById('features').innerHTML = '';
        displayProperties();
      });
    });

  </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>ap1</title>
	<meta charset='utf-8'>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
	<style>
	body {
	margin: 0;
	padding: 0;
	}

	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	}

	#features {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 25%;
	overflow: auto;
	background: rgba(255, 255, 255, 0.8);
	}

	#divID {
	border-width: 10px;
	border-color: #000080;
	border-style: solid;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -100px;
	margin-left: -100px;
	width: 200px;
	height: 200px;
	z-index: 2;
	}

	#featureProperties {
	outline: 5px solid black;
	padding: 20px;
	margin: 5px;
	font-family: Arial;
	}
	</style>
	</head>

	<body>
	<div id="divID"></div>
	<div id='map' tabindex=0></div>
	<div id="features"></div>
	<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
	var map = new mapboxgl.Map({
	container: 'map',
	zoom: 14,
	center: [-70.28830547331387, 43.67880765293333],
	style: 'mapbox://styles/mapbox/streets-v11',
	bearing: 45
	});

	displayProperties = () => {
	var point = map.project(map.getCenter());
	var width = 200;
	var height = 200;

	var features = map.queryRenderedFeatures([
	[point.x - width / 2, point.y - height / 2],
	[point.x + width / 2, point.y + height / 2]
	], { layers: ['poi-label'] });

	features.map(function (feat, i) {
	document.getElementById('features').innerHTML += '<div id="featureProperties" arialabel= "' + feat.properties.name + '" tabindex="' + (i + 1) + '">' + (i + 1) + '. ' + feat.properties.name + '<br>' + feat.properties.type + '</div>'
	});
	}

	bindDirectionKeys = () => {
	var bearing = map.getBearing()

	document.onkeydown = function (event) {
	switch (event.keyCode) {
	//West
	case 37:
	document.getElementById('features').innerHTML = 'Moving ' + bearingToDirection(bearing - 90)
	break;
	//North
	case 38:
	document.getElementById('features').innerHTML = 'Moving ' + bearingToDirection(bearing)
	break;
	//East
	case 39:
	document.getElementById('features').innerHTML = 'Moving ' + bearingToDirection(bearing + 90)
	break;
	//South
	case 40:
	document.getElementById('features').innerHTML = 'Moving ' + bearingToDirection(bearing + 180)
	break;
	}
	};
	}


	bearingToDirection = (bearing) => {
	var positiveBearing = makeBearingPositive(bearing)

	switch (true) {
	case (positiveBearing < 30):
	return "North";

	case (positiveBearing <= 60):
	return "Northeast";

	case (positiveBearing <= 120):
	return "East";

	case (positiveBearing <= 150):
	return "Southeast";

	case (positiveBearing <= 210):
	return "South";

	case (positiveBearing <= 240):
	return "Southwest";

	case (positiveBearing <= 300):
	return "West";

	case (positiveBearing <= 330):
	return "Northwest"

	case (positiveBearing <= 360):
	return "North"

	default:
	console.log('Default');
	}
	}

	makeBearingPositive = (bearing) => {
	if (bearing < 0) {
	return bearing += 360
	} else {
	return bearing
	}
	}

	map.once('idle', function () {
	//retrieve and display properties on initial load of the map
	displayProperties();
	bindDirectionKeys();

	map.on('moveend', function () {
	//clear features on each map move
	document.getElementById('features').innerHTML = '';
	displayProperties();
	});
	});

	</script>
	</body>

	</html>