CODEWITHSUNDEEP
javascriptgoogle-mapsgeojson
Ian
Ian

Reputation: 51

Removing GeoJson Layers from Google Maps

I'm trying to remove an array of GeoJson layers from Google Maps using the turf.js library for smoothing of the poly-lines.

I can create the layer fine and add them to the map, but when I try and remove the layers I get the following error code: 

Uncaught TypeError: a.getId is not a function

To add the layers I do this, looping through my GeoJson file...

else if(Type==="LineString" && Pype==="isobar") {
//DO ISOBARS STUFF=================================
//GET LNG/LAT======================================
CorrLEN     = dataID1.features[i].geometry.coordinates.length;
var Corrds =[];
var Corrs =[];
var LNGLAT ={};
var CORRS  = new Object();
var  x=0;
for (x=0;x<CorrLEN;x++){
var  a = x-1;
LNGLAT = (dataID1.features[i].geometry.coordinates[x]); 
Corrds.push(LNGLAT);
}
//=================================================================
//GET COLOUR INFO===================================================
var STCL = dataID1.features[i].properties.strokeColor;
var STOP = dataID1.features[i].properties.strokeOpacity;
var STSW = dataID1.features[i].properties.strokeWeight;
//=================================================================
LL     = turf.linestring(Corrds);  
curved = turf.bezier(LL,20000, 0.35);  
curved.properties = {weight:STSW,color:STCL};
map.data.setStyle(function(feature) {
return {strokeWeight:feature.getProperty('weight'),
        strokeColor: feature.getProperty('color')
       };            
 });
IsoBars.push(curved);

I then use the following functions to add or remove the layers

//SHOW ISOBARS (works fine)
function ShowIsoBars() {
for (var i = 0; i < IsoBars.length; i++) { 
map.data.addGeoJson(IsoBars[i]);
}} 

//HIDE ISOBARS (Gets the error) Uncaught TypeError: a.getId is not a function
function HideIsoBars() {
for (var i = 0; i < IsoBars.length; i++) { 
map.data.remove(IsoBars[i]);
}}

Many thanks in advance,

Upvotes: 1

Views: 1841

Answers (2)

Adam
Adam

Reputation: 1159

I found rather than removing all objects from the layer. It was easier to destroy and recreate the layer, which circumvents the error:

  //Remove layer from map if it exists
  if (mapLayer != null) {

    mapLayer.setMap(null);
  }

  //create new layer
  mapLayer = new window.google.maps.Data({ map: googleMap });

Upvotes: 0

Ian
Ian

Reputation: 51

I found a solution by taking the new smoothed coordinates and then using them in a new google.maps.Polyline like so

 var Path =[];
 var  x=0;
 for (x=0;x<CorrLEN;x++){
 Path.push(new google.maps.LatLng(curved.geometry.coordinates[x][1],curved.geometry.coordinates[x][0])); 
 } 
 var IsoBar = new google.maps.Polyline({
           path: Path,
           geodesic: true,
           strokeColor: STCL,
           strokeOpacity: STOP,
           strokeWeight: STSW
           });

 IsoBars.push(IsoBar);

And then I can use the the following functions to show or hide the layers

function ShowIsoBars() {
for (var i = 0; i < IsoBars.length; i++) { 
IsoBars[i].setMap(map);
}}

function HideIsoBars() {
for (var i = 0; i < IsoBars.length; i++) { 
IsoBars[i].setMap(null);
}}

Upvotes: 1

Related Questions