malwoodsantoro · December 19, 2020 00:51
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
  <meta charset="utf-8" />
  <title>Draw plugin and qrf </title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
 </head>

 <body>
  <style>
    .places-box {
      height: 200px;
      width: 150px;
      position: absolute;
      bottom: 40px;
      right: 10px;
      background-color: #20B2AA;
      color: #fff;
      padding: 15px;
      text-align: center;
      font-size: 20px;
    }

  </style>

  <script src='https://unpkg.com/@turf/turf/turf.min.js'></script>
  <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.js"></script>
  <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.css"
    type="text/css" />
  <div id="map"></div>
  <div class="places-box">
    <p>Draw a polygon around places.</p>
    <div id="calculated-places"></div>
  </div>

  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
    var map = new mapboxgl.Map({
      container: 'map', // container id
      style: 'mapbox://styles/mapbox/streets-v11', //hosted style id
      center: [-80.00364074801722, 40.44017624226467], // starting position
      zoom: 18 // starting zoom
    });

    var draw = new MapboxDraw({
      displayControlsDefault: false,
      controls: {
        polygon: true,
        trash: true
      }
    });

    map.addControl(draw);

    map.on('draw.create', updatePOIs);
    map.on('draw.delete', updatePOIs);
    map.on('draw.update', updatePOIs);

    function updatePOIs(e) {
      var data = draw.getAll();
      var answer = document.getElementById('calculated-places');
      if (data.features.length > 0) {

        var bbox = turf.bbox(data)
        var southWestPointPixel = map.project([bbox[0], bbox[1]]);
        var northEastPointPixel = map.project([bbox[2], bbox[3]]);
        var features = map.queryRenderedFeatures([southWestPointPixel, northEastPointPixel], { layers: ['poi-label'] })

        var filteredFeatures = features.reduce(function (accumulator, feature) {
          if (turf.booleanPointInPolygon(feature, data.features[0])) {
            accumulator.push(feature);
          };
          return accumulator;
        }, []);

        answer.innerHTML =
          '<p><strong>' +
          filteredFeatures.length +
          '</strong></p><p>POIs selected</p>';
      } else {
        answer.innerHTML = '';
        if (e.type !== 'draw.delete')
          alert('Use the draw tools to draw a polygon!');
      }
    }
  </script>

 </body>

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

	<head>
	<meta charset="utf-8" />
	<title>Draw plugin and qrf </title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css" rel="stylesheet" />
	<style>
	body {
	margin: 0;
	padding: 0;
	}

	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	}
	</style>
	</head>

	<body>
	<style>
	.places-box {
	height: 200px;
	width: 150px;
	position: absolute;
	bottom: 40px;
	right: 10px;
	background-color: #20B2AA;
	color: #fff;
	padding: 15px;
	text-align: center;
	font-size: 20px;
	}

	</style>

	<script src='https://unpkg.com/@turf/turf/turf.min.js'></script>
	<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.js"></script>
	<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.css"
	type="text/css" />
	<div id="map"></div>
	<div class="places-box">
	<p>Draw a polygon around places.</p>
	<div id="calculated-places"></div>
	</div>

	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'mapbox://styles/mapbox/streets-v11', //hosted style id
	center: [-80.00364074801722, 40.44017624226467], // starting position
	zoom: 18 // starting zoom
	});

	var draw = new MapboxDraw({
	displayControlsDefault: false,
	controls: {
	polygon: true,
	trash: true
	}
	});

	map.addControl(draw);

	map.on('draw.create', updatePOIs);
	map.on('draw.delete', updatePOIs);
	map.on('draw.update', updatePOIs);

	function updatePOIs(e) {
	var data = draw.getAll();
	var answer = document.getElementById('calculated-places');
	if (data.features.length > 0) {

	var bbox = turf.bbox(data)
	var southWestPointPixel = map.project([bbox[0], bbox[1]]);
	var northEastPointPixel = map.project([bbox[2], bbox[3]]);
	var features = map.queryRenderedFeatures([southWestPointPixel, northEastPointPixel], { layers: ['poi-label'] })

	var filteredFeatures = features.reduce(function (accumulator, feature) {
	if (turf.booleanPointInPolygon(feature, data.features[0])) {
	accumulator.push(feature);
	};
	return accumulator;
	}, []);

	answer.innerHTML =
	'<p><strong>' +
	filteredFeatures.length +
	'</strong></p><p>POIs selected</p>';
	} else {
	answer.innerHTML = '';
	if (e.type !== 'draw.delete')
	alert('Use the draw tools to draw a polygon!');
	}
	}
	</script>

	</body>

	</html>