Eliminación de la capa añadida mediante leaflet y Cartodb

Question

He añadido una capa a un mapa a través de Leaflet. En realidad es un círculo alrededor de un punto. Se añade perfectamente. Me gustaría que se eliminara cuando hago clic en un determinado botón. Así es como estoy creando el círculo. Lo añado a un grupo, ya que hay casos en los que hay varios círculos y me gustaría eliminarlos todos a la vez.

    var five_mile = L.circle([latitude,longitude], 11046,{
    fillColor:'#1d5492',
  fillOpacity:'0.3',
  stroke:false,
  clickable:false
})
 map_object.addLayer(five_mile);
 assetLayerGroup.addLayer(five_mile);
 var layers = assetLayerGroup.getLayers();
  console.log(layers);

El registro de la consola me muestra que hay datos de la capa en el assetLayerGroup.

Para eliminar la capa, hago esto:

$('#remove_cir').click(function() {
  assetLayerGroup.clearLayers();
});

#remove_cir es el ID del botón en el que hago clic para eliminar los círculos del grupo. No se produce ningún error cuando hago clic en él, pero el círculo no se elimina.

¿Qué me falta?

Answer 1

Creo que es porque estás añadiendo la capa dos veces, una directamente al mapa (si eso es lo que map_object es), y luego de nuevo al grupo de capas.

Esto debería funcionar:

$('#remove_cir').click(function() {
    assetLayerGroup.eachLayer(function(layer) { map_object.removeLayer(layer) });
    assetLayerGroup.clearLayers();
});

Pero sería mejor añadir la capa y el grupo de capas al mapa de otra manera.

// on instantiation add it to the map as an empty layer group
assetLayerGroup = L.layerGroup([]).addTo(map_object); 

// then add layers to the layer group, but not to the map
// with this, clear layers should work on the layer group as you have above
assetLayerGroup.addLayer(five_mile);