MapBox draw Polygon of Feature on Click

Question

So my idea seems pretty straight forward to me but I struggle nevertheless. What I want to do is basically click on any point of my map and draw a polygon on the main feature, i.e. if I click on a park or a building that specific polygon is displayed and highlighted.

I used a lot of this code: https://www.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures-around-point/

But instead of giving it a set of geojson I want my javascript to select to needed geojson data on mousover (eventhough i am not sure whether that works in general). Right now my code snipped compiles but doesn't show anything.

In a later step I want to collect all polygons of the same feature, i.e. all parks, and display them as highlighted polygons and then export them as a svg file which only consists of the map representations of the feature clicked on. Maybe someone has an idea for that as well?

Thanks in regard :)

This is my javascript as of now:

//Set AccessToken from MapBox
mapboxgl.accessToken = 'pk.eyJ1IjoidG1pbGRuZXIiLCJhIjoiY2o1NmlmNWVnMG5rNzMzcjB5bnV3YTlnbiJ9.r0BCga0qhRaHh0CnDdcGBQ';

//Setup starting view point at Uni-Bremen campus
var map = new mapboxgl.Map({
	container: 'content-map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [8.85307, 53.10810],
    zoom: 16
});


//Add a search bar -> hidden for presentation
/*map.addControl(new MapboxGeocoder({
    accessToken: mapboxgl.accessToken
}));*/

//Function to show all Features of a certian point
map.on('mousemove', function (e) {
    var features = map.queryRenderedFeatures(e.point);
    document.getElementById('features').innerHTML = JSON.stringify(features, null, 2);
    console.log(JSON.stringify(features, null, 2));

    drawPolygon();
});



//Draw a Polygon
function drawPolygon () {

	//set boundary box as 5px rectangle area around clicked point
	var bbox = [[e.point.x - 5, e.point.y - 5], [e.pont.x + 5, e.point.y + 5]];

	//set the data on pointer using the bbox
	var data = map.queryRenderedFeatures(bbox);

	map.on('load', function() {
		
		var dataSource = 'school';

		//set school to the feature and use 'setJsonData' as data source.
		map.addSource(dataSource, {
			'type': 'geojson',
			'data': data
		});
		//adding a new layer for the general display
		map.addLayer({
			'id': 'dataSet',
			'type': 'fill',
			'source': dataSource,
			'source-layer': 'original',
			'paint': {
				'fill-outline-color': 'rgba(0,0,0,0.1)',
				'fill-color': 'rgba(0,0,0,0.1)'
			}
		}, 'place-city-sm' ); //place polygon under these labels

		
		//adding a new layer for the polygon to be drawn
		map.addLeyer({
			'id': 'dataSet-highlighted',
			'type': 'fill',
			'source': dataSource,
			'source-layer': 'original',
			'paint': {
            	'fill-outline-color': '#484896',
           		'fill-color': '#6e599f',
            	'fill-opacity': 0.75
            },
            'filter': ['in', 'FIPS', '']
		}, 'place-city-sm'); //place polygon under these labels

		
		//action on click to show the polygon and change their color
		map.on('click', function (e) {
			
			//retrieve data from 'dataSource'
			var dataFromSource = map.queryRenderedFeatures(bbox, {layers: ['dataSource'] });


			// Run through the selected features and set a filter
        	// to match features with unique FIPS codes to activate
       		// the `counties-highlighted` layer.
			var filter = dataSource.reduce(function(memo, dataSource) {
				memo.push(dataSource, properties.FIPS);
				return memo;
			} ['in', 'FIPS'] );
			
			map.setFilter('dataSet-highlighted', filter);
		});


	});
}

i am just gonna add my codepen i created for this, might help to see what i did -> codepen.io/callmethomas/pen/RZqXzv — Thomas Mildner

mapsam mapsam · Accepted Answer · 2017-09-01T19:49:04

I'm not 100% sure what you're asking, but my interpretation is that you'd like to specifically style certain types of geometry when you hover over them, such as "parks". You're on the right path, where using map.queryRenderedFeatures() is great. I've put together an example using the same Mapbox Streets style that queries only the building layer and looks for type university on mouseover.

When the interaction encounters a proper feature, it updates the source data with the new feature, which then updates the school-hover layer.

Check out the pen here: https://codepen.io/mapsam/pen/oemqKb

In a later step I want to collect all polygons of the same feature, i.e. all parks, and display them as highlighted polygons and then export them as a svg file which only consists of the map representations of the feature clicked on.

I won't go into file exports, but just remember that all results returned from map.queryRenderedFeatures are specific to the single vector tile you are querying, which can lead to issues on tile boundaries where a polygon isn't fully covered by your current query.

Check out this example where we are highlighting features with similar data, which should allow you get all of the necessary geometries and export to SVG.

Cheers!

MapBox draw Polygon of Feature on Click

1 Answers