Aernor Aernor - 23 days ago 8
Javascript Question

Remove all features from data layer

I used something like:

var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
center: {lat: -28, lng: 137.883}
});

map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
}

google.maps.event.addDomListener(window, 'load', initialize);


to load a geojson shape file to the map.data layer of my map. In the shape file, there are a couple of 'feature' classes defining polygons to be drawn on the map. Up until here I have no problems.

Later on though, I want to load another geojson file over the other one (replacing the drawn 'features' on the map). When you just load another file over the other one it just redraws it over the other one. How on earth do you clear the map.data layer of all the features before loading in the new geojson shape file?

I've tried using
map.data.remove(feature)

with a loop, but I can't seem to get all the features from the map.data layer.

Answer

This will iterate over all the features and remove them from map.data.

map.data.forEach(function(feature) {
    // If you want, check here for some constraints.
    map.data.remove(feature);
});

Edit 1: Explanation Map data forEach function use callbacks, so you have to give a callback function as parameter:

var callback = function(){ alert("Hi, I am a callback"); }; 
map.data.forEach(callback);

Now for each element in data it will show an alert. It's also possible to give callbacks with parameter, like in the code shown above.

   var callback = function(feature) {
        // If you want, check here for some constraints.
        map.data.remove(feature);
   };
   map.data.forEach(callback);

Further explanation and examples: http://recurial.com/programming/understanding-callback-functions-in-javascript/