How to change icon-size in mapbox gl on click? - mapbox-gl-js

Question

I want to change the icon-size on map click based on the turf-nearest. How do i accomplish this? nearestBuilding.properties['icon-size'] = 0.2; does not work.
var retail = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
title: 'TEST',
description: 'TEST'
},
geometry: {
type: 'Point',
coordinates: [121.051779, 14.550224]
}
},
{
type: 'Feature',
properties: {
title: 'TEST',
description: 'TEST'
},
geometry: {
type: 'Point',
coordinates: [121.04568958282472, 14.552170837008527]
}
}
]
};
map.on('load', function() {
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Wiki_Loves_Earth_map_marker.svg/600px-Wiki_Loves_Earth_map_marker.svg.png', function(error, image) {
if (error) throw error;
map.addImage('marker', image);
map.addLayer({
id: 'retail',
type: 'symbol',
source: {
type: 'geojson',
data: retail
},
layout: {
'icon-image': 'marker',
'icon-size': 0.1
},
paint: { }
});
});
});
var marker = null;
map.on('click', function(e){
if(marker != null) {
marker.remove();
}
var currentLocation = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [e.lngLat.lng, e.lngLat.lat]
}
};
var el = document.createElement('div');
el.className = 'currLocMarker';
marker = new mapboxgl.Marker(el, { offset: [-50 / 2, -50 / 2] })
.setLngLat(currentLocation.geometry.coordinates)
.addTo(map);
var currentLocation = turf.point([e.lngLat.lng, e.lngLat.lat]);
var nearestBuilding = turf.nearest(currentLocation, retail);
var distance = turf.distance(currentLocation, nearestBuilding);
if (distance <= 0.5) {
nearestBuilding.properties['icon-size'] = 0.2;
}
});

Answer 1

Since icon-size supports data-driven styling(https://www.mapbox.com/mapbox-gl-js/style-spec/#layout-symbol-icon-size), have you tried doing that, with an identity function from the property on each feature? You would configure this inside the layout, instead just hard-coding 0.1.
More docs on data-driven styling is here - https://www.mapbox.com/mapbox-gl-js/style-spec/#function-type