使用Javascript通过按钮添加和清除geojson？

Question

I need a function that can add and clear geojson with a button click. I have the following code but it doesn't work:

    <input type="button" value="ruta vista imss" onclick="rutavistaimss()" >

    <script>
        var rutavs = { 
                        "type": "Feature",
                        "properties": {
                                        "name": "ruta vista imss"
                                      },
                        "geometry": {
                                     "type": "LineString",
                                     "coordinates": rutavistaimsscoords
                                    }
                     };

var rutavistaimss1 = L.geoJson(rutavs);

let flag = true

function rutavistaimss() {
  if (flag) {
    // your logic
    map.addLayer( rutavistaimss1 ); 
  }
  flag = !flag
  map.removeLayer( rutavistaimss1 );
}
    </script>

I think I may need to use Jquery or something?

Answer 1

You always remove the layer, update your Code to:

let flag = true

function rutavistaimss() {
  if (flag) {
    // your logic
    map.addLayer( rutavistaimss1 ); 
  }else{  // <-- Add this else
    map.removeLayer( rutavistaimss1 );
  }

  flag = !flag
}

Answer 2

Or without needing a flag variable:

function rutavistaimss() {
if (map.hasLayer( rutavistaimss1 )) {
    map.removeLayer( rutavistaimss1 )
  }
else {
  map.addLayer( rutavistaimss1 )
  }
}