I'm using a OpenLayers to add dots on the map from a search result. I can add them just fine, but I want to clear/remove the layer when the user does another search. I've tried using RemoveFeature(), using Destroy(), etc but everything I tried doesn't work.

What am I doing wrong?

/

        var USGSimagery = new ol.layer.Tile({
            myattribute: 'USGSimagery',
            source: new ol.source.TileWMS(({
                url: '',
                params: {
                    'LAYERS': 0
                }
            }))
        });

        var view = new ol.View({
            //projection:projection
            center: ol.proj.transform(
                [-12934933.3971171, 5405304.89115131], 'EPSG:3857', 'EPSG:3857'),
            zoom: 18
        })


        var geolocStyle = new ol.style.Style({
            image: new ol.style.Icon(({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                opacity: 1,
                src: 'images/icon.png'
            }))
        });


        var map = new ol.Map({
            layers: [USGSimagery],
            loadTilesWhileInteracting: true,
            target: document.getElementById('map'),
            view: view
        });


        var searchResultsStyle = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 6,
                fill: new ol.style.Fill({
                    color: '#3399CC'
                }),
                stroke: new ol.style.Stroke({
                    color: '#fff',
                    width: 2
                })
            })
        });

        var TestSearchResults = [{ 'Name': "R0045000030", 'X': "-12934933.3971171", 'Y': "5405304.89115131" },
        { 'Name': "R0238000050", 'X': "-12934887.0227854", 'Y': "5405285.39954225" },
        { 'Name': "R0310260660", 'X': "-12934830.2731638", 'Y': "5405249.69762986" }];

        var SearchDots = [];
        for (var i = 0; i < TestSearchResults.length; i++)
        {
            var item = TestSearchResults[i];

            var positionFeature = new ol.Feature({
                geometry: new ol.geom.Point([item["X"], item["Y"]]),
                name: item['Name']
            });
            positionFeature.setStyle(searchResultsStyle);

            SearchDots.push(positionFeature);
        }

        var featuresSearchResults = new ol.layer.Vector({
            map: map,
            source: new ol.source.Vector({
                features: SearchDots
            })
        });

        function DeleteResults()
        {
            // Delete Search Vectors from Map

            featuresSearchResults.destroy();
        }

I'm using a OpenLayers to add dots on the map from a search result. I can add them just fine, but I want to clear/remove the layer when the user does another search. I've tried using RemoveFeature(), using Destroy(), etc but everything I tried doesn't work.

What am I doing wrong?

http://jsfiddle/9Lzc1uu2/6/

        var USGSimagery = new ol.layer.Tile({
            myattribute: 'USGSimagery',
            source: new ol.source.TileWMS(({
                url: 'http://raster.nationalmap.gov/arcgis/services/Orthoimagery/USGS_EROS_Ortho_SCALE/ImageServer/WMSServer',
                params: {
                    'LAYERS': 0
                }
            }))
        });

        var view = new ol.View({
            //projection:projection
            center: ol.proj.transform(
                [-12934933.3971171, 5405304.89115131], 'EPSG:3857', 'EPSG:3857'),
            zoom: 18
        })


        var geolocStyle = new ol.style.Style({
            image: new ol.style.Icon(({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                opacity: 1,
                src: 'images/icon.png'
            }))
        });


        var map = new ol.Map({
            layers: [USGSimagery],
            loadTilesWhileInteracting: true,
            target: document.getElementById('map'),
            view: view
        });


        var searchResultsStyle = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 6,
                fill: new ol.style.Fill({
                    color: '#3399CC'
                }),
                stroke: new ol.style.Stroke({
                    color: '#fff',
                    width: 2
                })
            })
        });

        var TestSearchResults = [{ 'Name': "R0045000030", 'X': "-12934933.3971171", 'Y': "5405304.89115131" },
        { 'Name': "R0238000050", 'X': "-12934887.0227854", 'Y': "5405285.39954225" },
        { 'Name': "R0310260660", 'X': "-12934830.2731638", 'Y': "5405249.69762986" }];

        var SearchDots = [];
        for (var i = 0; i < TestSearchResults.length; i++)
        {
            var item = TestSearchResults[i];

            var positionFeature = new ol.Feature({
                geometry: new ol.geom.Point([item["X"], item["Y"]]),
                name: item['Name']
            });
            positionFeature.setStyle(searchResultsStyle);

            SearchDots.push(positionFeature);
        }

        var featuresSearchResults = new ol.layer.Vector({
            map: map,
            source: new ol.source.Vector({
                features: SearchDots
            })
        });

        function DeleteResults()
        {
            // Delete Search Vectors from Map

            featuresSearchResults.destroy();
        }

• javascript
• gis
• openlayers-3

• When I atttempt to run this in jsfiddle I get an error: "Uncaught ReferenceError: DeleteResults is not defined" – GrantD71 Commented Dec 8, 2015 at 22:29
• That's because jsfiddle wrappes the javascript inside onload. Updated the new link. – Kathy Judd Commented Dec 8, 2015 at 22:55

1 Answer 1

The appropriate way to destroy features of a layer in OpenLayers 3 is to get the layer source, then clear the source:

    function DeleteResults()
    {
        // Delete Search Vectors from Map

        featuresSearchResults.getSource().clear();
    };

Api Reference