remove layer in OpenLayers

Question

I am working with OpenLayers. adding vector layer on checkbox click with lat lng. but I am trying to remove that layer with same lat and lng. but not working.

Any help will be appreciated.

var map;
var mapLat = 29.566;
var mapLng = -98.376;

var mapDefaultZoom = 17;

function initialize_map() {
  map = new ol.Map({
    target: "map",
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM({
          url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
        })
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([mapLng, mapLat]),
      zoom: mapDefaultZoom
    })
  });
}

function add_map_point(action, lat, lng) {

  var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
      })]
    }),
    style: new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.5, 0.5],
        anchorXUnits: "fraction",
        anchorYUnits: "fraction",
        src: "https://img.icons8.com/officexs/16/000000/filled-flag.png"
      })
    })
  });

  if (action === 1) {
    map.addLayer(vectorLayer);
  } else {
    map.removeLayer(vectorLayer);
  }
}

Answer 1

As you calling add_map_point() function and that function always creating new instance of vectorLayer. Now when you are removing layer, so again it create new instance but that not added in you map.

So instead of doing this define vectorLayer once time and when your checkbox value changes, based on checkbox value apply your condition for adding/removing layer.

You can remove layer by two way :-

1. One way you can directly pass vectorLayer as you defined in first.

   map.removeLayer(vectorLayer);
   

2. Second way you can set name of your vector-layer and after that you can remove the by getting vector layer name.

   map.getLayers().forEach(layer => {
     if (layer.get('name') && layer.get('name') == 'flag_vectorLayer'){
         map.removeLayer(layer)
     }
   });
   

Please below working code snippet.

CODE SNIPPET

var map,
  mapLat = 22.719568,
  mapLng = 75.857727,
  mapDefaultZoom = 17,
  vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform([75.85734861628751, 22.72062520082595], 'EPSG:4326', 'EPSG:3857')),
      })]
    }),
    style: new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.5, 0.5],
        anchorXUnits: "fraction",
        anchorYUnits: "fraction",
        src: "//img.icons8.com/officexs/16/000000/filled-flag.png"
      })
    })
  });

vectorLayer.set('name', 'flag_vectorLayer');

map = new ol.Map({
  target: "map",
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM({
        url: "//a.tile.openstreetmap.org/{z}/{x}/{y}.png"
      })
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([mapLng, mapLat]),
    zoom: mapDefaultZoom
  })
});

function add_map_point(evt) {
  if (evt.checked) {
    map.addLayer(vectorLayer);
  } else {
    map.removeLayer(vectorLayer);
  }
}

#map {
  height: 100%;
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">

<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<title>OpenLayers example</title>
<div><input type="checkbox" onchange="add_map_point(this)" />Add/Remove point</div>

<div id="map"></div>