CODEWITHSUNDEEP
javascriptleaflet
Hyo
Hyo

Reputation: 23

how to delete marker on leaflet Javascript after calling the function

I'm trying to delete popup icon after calling below BusStopMrker function on leaflet map. When I use "mymap.removeLayer()" this is return an error that being used to by instance.

I've created a var marker as name of "marker_1" for deleting it, but it seems like it's not stored on it every single time when i call the function "BusSTopMarker". the previous Layer information seems like disappear.

and Also tried to using console that calling mymap and find layers using mymap._layers and delete it each, but the popup icons are still on the map.

what I'm targeting is that when I call the "BusStopMarker", I'd like to delete previous marker.

please see my code and please help me on this matter

var mymap = L.map('mapid').setView([1.35362664583092, 103.83422172361446], 13);
var mymap_layer01 = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'mytoken...'
}).addTo(mymap);


function BusStopMarker(BusStopCode, Description, Latitude, Longitude) {
var marker_1 = L.marker()
    console.log("Marker: ",marker_1)
        if (Object.keys(mymap._layers).length >= 2) {

          console.log("marker existing")
          mymap.removeLayer(marker_1)
          console.log("mymap: ", mymap)
          //mymap_layer01
        };

        var marker_1 = L.marker(
             [Latitude, Longitude],
             {}
        ).addTo(mymap);


        var icon_1 = L.AwesomeMarkers.icon(
                {"extraClasses": "fa-rotate-0", "icon": "glyphicon glyphicon-map-marker", "iconColor": "white", "markerColor": "red", "prefix": "glyphicon"}
            );
        marker_1.setIcon(icon_1);
        
    
        var popup_1 = L.popup({"maxWidth": "100%"});
        var html_1 = $(`<div id="html_1" style="width: 100.0%; height: 100.0%;">Bus Stop ID :<b>`+BusStopCode +`</b></div>`)[0];
        popup_1.setContent(html_1);
        marker_1.bindPopup(popup_1);
        marker_1.bindTooltip(
                `<div><b>`+ Description  +`</b></div>`,
                {"sticky": true}
            );
        mymap.setView([Latitude, Longitude]);
        };

Thanks in advance.

Upvotes: 0

Views: 118

Answers (1)

Falke Design
Falke Design

Reputation: 11338

Make the variable marker_1 global, so that you can access it with the next function execution and remove it from the map:

var marker_1 = null;

function BusStopMarker(BusStopCode, Description, Latitude, Longitude) {
    if (marker_1) {
        mymap.removeLayer(marker_1);
    }

    var icon_1 = L.AwesomeMarkers.icon({
        "extraClasses": "fa-rotate-0",
        "icon": "glyphicon glyphicon-map-marker",
        "iconColor": "white",
        "markerColor": "red",
        "prefix": "glyphicon"
    });

    var marker_1 = L.marker(
        [Latitude, Longitude], {
            icon: icon_1
        }
    ).addTo(mymap);

    var popup_1 = L.popup({
        "maxWidth": "100%"
    });
    var html_1 = $(`<div id="html_1" style="width: 100.0%; height: 100.0%;">Bus Stop ID :<b>` + BusStopCode + `</b></div>`)[0];
    popup_1.setContent(html_1);
    marker_1.bindPopup(popup_1);
    marker_1.bindTooltip(
        `<div><b>` + Description + `</b></div>`, {
            "sticky": true
        }
    );
    mymap.setView([Latitude, Longitude]);
};

Upvotes: 0

Related Questions