malwoodsantoro · March 4, 2022 04:48
diff --git a/index.html b/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.12.0/mapbox-gl.js"></script>
  <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%;
    }

    #instructions {
      display: block;
      position: relative;
      margin: 20px auto;
      width: 50%;
      height: 40px;
      padding: 10px;
      border: none;
      border-radius: 3px;
      font-size: 16px;
      text-align: center;
      color: #fff;
      background: #578E90;
    }
  </style>
 </head>

 <body>
  <div id="map"></div>
  <button id="instructions">Click four times (nw, sw, se, ne) to add image</button>
  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
    var 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: 4 // starting zoom
    });

    var imageCounter = 0; 
    var northWest;
    var southWest;
    var southEast;

    map.on('click', function(e){
      imageCounter += 1;
      if (imageCounter === 1) {
        northWest = e.lngLat.toArray();
      } else if (imageCounter === 2) {
        southWest = e.lngLat.toArray();
      } else if (imageCounter === 3) {
        southEast = e.lngLat.toArray();
      } else if (imageCounter === 4) {
        map.addSource('my-data', {
          'type': 'image',
          'url': 'https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif',
          'coordinates': [
            northWest,
            southWest,
            southEast,
            e.lngLat.toArray()
          ]
        });

        map.addLayer({
          'id': 'image-layer',
          'type': 'raster',
          'source': 'my-data',
        });
      }
    });
  </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.12.0/mapbox-gl.js"></script>
	<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%;
	}

	#instructions {
	display: block;
	position: relative;
	margin: 20px auto;
	width: 50%;
	height: 40px;
	padding: 10px;
	border: none;
	border-radius: 3px;
	font-size: 16px;
	text-align: center;
	color: #fff;
	background: #578E90;
	}
	</style>
	</head>

	<body>
	<div id="map"></div>
	<button id="instructions">Click four times (nw, sw, se, ne) to add image</button>
	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
	var 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: 4 // starting zoom
	});

	var imageCounter = 0;
	var northWest;
	var southWest;
	var southEast;

	map.on('click', function(e){
	imageCounter += 1;
	if (imageCounter === 1) {
	northWest = e.lngLat.toArray();
	} else if (imageCounter === 2) {
	southWest = e.lngLat.toArray();
	} else if (imageCounter === 3) {
	southEast = e.lngLat.toArray();
	} else if (imageCounter === 4) {
	map.addSource('my-data', {
	'type': 'image',
	'url': 'https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif',
	'coordinates': [
	northWest,
	southWest,
	southEast,
	e.lngLat.toArray()
	]
	});

	map.addLayer({
	'id': 'image-layer',
	'type': 'raster',
	'source': 'my-data',
	});
	}
	});
	</script>

	</body>

	</html>