Highlight polygon in Leaflet

Question

How can I hide(opacity) all polygons, and only show the one with ID 73 [click example code]: https://jsfiddle.net/etrv684u/1/

HTML:

<div id="map"></div>
<button id="highlight">highlight left triangle</button>

CSS:

#map {
  height:90vh;
  width:820px;
}

JS:

// center of the map
var center = [40.8990418, 29.1568548];

// Create the map
var map = L.map('map', { pmIgnore: false }).setView(center, 9);

//Add Leaflet-Geoman controls with some options to the map  
map.pm.addControls({
  position: 'topleft',
  drawCircleMarker: false,
  rotateMode: false,
});

// JSON to map
let data = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[28.539734,40.840356],[28.935242,40.813315],[28.685303,41.174338],[28.539734,40.840356]]]}},{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[29.369202,40.948411],[29.663086,41.021041],[29.138489,41.232249],[29.369202,40.948411]]]}}]};

var group = L.featureGroup().addTo(map);

L.geoJSON(data, {
    onEachFeature: colorlayer,
    style: {
        color: "#00008c",
        opacity: 0.6,
        fillColor: '#333333',
        fillOpacity: 0
    }
}).addTo(group);

function colorlayer(feature, layer) {
    layer.on('click', function (e) {
            alert(this._leaflet_id);
    });
}


document.querySelector('#highlight').addEventListener('click', function(){
    //hide all polygons except 1 polygon
})

// Set up the OSM layer
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
}).addTo(map);

Answer 1

To identify which polygon you want to select, you need to assign some id to polygon features:

let data = {
  "type":"FeatureCollection",
  "features":[
    {
      "type":"Feature",
      "id": 1,
      "properties":{},
      "geometry": {"type":"Polygon","coordinates":[[[28.539734,40.840356],[28.935242,40.813315],[28.685303,41.174338],[28.539734,40.840356]]]}
    },
    {
      "type":"Feature",
      "id": 2,
      "properties":{},
      "geometry":{"type":"Polygon","coordinates":[[[29.369202,40.948411],[29.663086,41.021041],[29.138489,41.232249],[29.369202,40.948411]]]}
    }
  ]
};

One possibility to display only selected polygon is to use filter option, where you let through only the polygon with the selected id. This means on every change of selected id you have to clear GeoJSON layer and add data again:

Relevant part of the code could then look something like this:

var selectedFeature = null;

function filter(feature) {
  return(!selectedFeature || (selectedFeature == feature.id));
}

var geoJSON = L.geoJSON(data, {
    onEachFeature: colorlayer,
    style: {
        color: "#00008c",
        opacity: 0.6,
        fillColor: '#333333',
        fillOpacity: 0
    },
    filter: filter
}).addTo(group);

document.querySelector('#highlight').addEventListener('click', function(){
  selectedFeature = 1;
  geoJSON.clearLayers();
  geoJSON.addData(data);
});

Second possibility is to use style option function to set opacity of nonselected features to 0. Here again style function has to be set each time selected id is changed.

Relevant part of the code could then look something like this:

var selectedFeature = null;

function style(feature) {
  var opacity = (!selectedFeature || (selectedFeature == feature.id)) ? 0.6 : 0;
  return({
    color: "#00008c",
    opacity: opacity,
    fillColor: '#333333',
    fillOpacity: 0
  });
}

var geoJSON = L.geoJSON(data, {
  onEachFeature: colorlayer,
  style: style
}).addTo(group);

function colorlayer(feature, layer) {
  layer.on('click', function (e) {
    alert(this._leaflet_id);
  });
}
  
document.querySelector('#highlight').addEventListener('click', function(){
  selectedFeature = 1;
  geoJSON.setStyle(style);
});