Published
Edited
Apr 14, 2021
Insert cell
md`# index.html`
Insert cell
<!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',
center: [-98, 38.88],
minZoom: 2,
zoom: 3
});

map.on('load', function() {
var canvas = map.getCanvasContainer();

// Variable to hold the starting xy coordinates
// when `mousedown` occured.
var start;

// Variable to hold the current xy coordinates
// when `mousemove` or `mouseup` occurs.
var current;

// Variable for the draw box element.
var box;

// Add a custom vector tileset source. The tileset used in
// this example contains a feature for every county in the U.S.
// Each county contains four properties. For example:
// {
// COUNTY: "Uintah County",
// FIPS: 49047,
// median-income: 62363,
// population: 34576
// }
map.addSource('counties', {
'type': 'vector',
'url': 'mapbox://mapbox.82pkq93d'
});

map.addLayer({
'id': 'counties',
'type': 'fill',
'source': 'counties',
'source-layer': 'original',
'paint': {
'fill-outline-color': 'rgba(0,0,0,0.1)',
'fill-color': 'rgba(0,0,0,0.1)'
}
},
'settlement-label'
); // Place polygon under these labels.

map.addLayer({
'id': 'counties-highlighted',
'type': 'fill',
'source': 'counties',
'source-layer': 'original',
'paint': {
'fill-outline-color': '#484896',
'fill-color': '#6e599f',
'fill-opacity': 0.75
},
'filter': ['in', 'FIPS', '']
},
'settlement-label'
); // Place polygon under these labels.

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)
// console.log(bbox[0]);
var southWestPointPixel = map.project([bbox[0], bbox[1]]);
var northEastPointPixel = map.project([bbox[2], bbox[3]]);
var features = map.queryRenderedFeatures([southWestPointPixel, northEastPointPixel], {
layers: ['counties']
})
console.log(features);
// var filteredFeatures = features.reduce(function(accumulator, feature) {
// if (turf.booleanPointInPolygon(feature, data.features[0])) {
// accumulator.push(feature);
// };
// return accumulator;
// }, []);

var filteredFeatures = features.reduce(
function(memo, feature) {
memo.push(feature.properties.FIPS);
console.log(feature);
return memo;
},
['in', 'FIPS']
);
map.setFilter('counties-highlighted', filteredFeatures);

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>

Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more