2

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);
3
  • thanks edited the question. Nov 30, 2023 at 16:44
  • And how do you plan to show again the hidden polygons?
    – TomazicM
    Nov 30, 2023 at 18:18
  • I don't, I just need to show 1 polygon each time for animation purposes, thanks Nov 30, 2023 at 18:50

1 Answer 1

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);
});
1
  • wow! such a good help, thank you very much for your effort Nov 30, 2023 at 21:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.