[GIS] Map.addLayer() is not working

htmljavascriptleaflet

I am creating an app with leaflet that shows a route on a map based on the button clicked. For example when you click on "button1", the associated route is successfully displayed on the map (i.e. map.addLayer(route1Data); works). When you click on either button2 or button3, the route for button1 should be removed. For some reason map.removeLayer(route1Data) is not working.

I am testing button1 at this time.

Why is the layer not being removed?

Steps, 1. whichRoute() –> 2. Tracks() –> vlocation()

See scripts below:

HTML

<html>
<head>
<title>Route Chooser</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/black-tie/jquery-ui.css" type="text/css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" charset="utf-8"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script type="text/javascript" src="../js/chooseRoute.js"></script>

    <script type="text/javascript">
    var vdata;
    $(document).ready(function() 
    {
        whichRoute();
    }); //end of ready

</script>
</head>
<body>
<div id='bttnSelect'>
    <button class='rtbttn' id='rt1' name='rt1' data-name="route_1">Route 1</button>
    <button class='rtbttn' id='rt2' name='rt2' data-name="route_2">Route 2</button>
    <button class='rtbttn' id='rt3' name='rt3' data-name="route_3">Route 3</button>
</div>

<div id="map_canvas" style="width: 1400px; height: 600px"></div>

<script>

    var map = new L.Map('map_canvas',{doubleClickZoom:false,zoomControl:false}).setView(new L.LatLng(11.2269,  -60.60760), 12);
    mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; ' + mapLink,
        maxZoom: 18,
        }).addTo(map);

        var osmURL = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; 
        var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        var osmLayer = L.tileLayer(osmURL, {attribution: 'Map data &copy; ' + mapLink});

    var currentRoute;
    function vlocation(locx, xx){

        var vdatax = locx;
        console.log('value current route before: ',currentRoute);
        if (currentRoute) map.removeLayer(currentRoute);
        var currentRoute = L.polyline(vdatax);
        console.log('value current route after: ', currentRoute);
        map.addLayer(currentRoute);//For show

} //end vloc

</script>

</body>
</html>

Javascript

function tracks(xx){
$.ajax({
    url:"../php/vTrackerv2.php", 
    type: "POST",
    dataType: 'json',
    //cache: false,
    success:function(rdata)
    {
        var locData = [];
        for (x=0; x< rdata.length-27; x++) {
            var loc = [];
            loc.push(parseFloat(rdata[x].latitude)); 
            loc.push(parseFloat(rdata[x].longitude));
            locData.push(loc);
        }
    vlocation(locData,xx);
    }, //end success
  });
};


function whichRoute(){
$('#bttnSelect').on('click', function(event) {
    // Retrieve the 'name' data attribute of the <a/> tag that the user clicked.
    var bttnClicked = $(event.target).closest('button').data('name');
    if (bttnClicked == 'route_1'){
        console.log("You clicked on:", bttnClicked);
        tracks(1);
    }

    if (bttnClicked == 'route_2'){
        tracks(2);
        console.log("You clicked on:", bttnClicked);
    }

    if (bttnClicked == 'route_3'){
        tracks(3);
        console.log("You clicked on:", bttnClicked);
    }

  });
}

Best Answer

The route1Data you are trying to remove is not the original route data that was added.

You need to declare your layer outside of vlocation.

I modified vlocation to the follow and it adds and removes the layer in my fiddle.

var currentRoute;
function vlocation(locx, xx) {
    var vdatax = locx;
    if (currentRoute) map.removeLayer(currentRoute);

    if (xx == 1) {
        currentRoute = L.polyline(vdatax);
        map.addLayer(currentRoute);
    }
    if (xx == 2) {
        currentRoute = L.polyline(vdatax);

    }
    if (xx == 3) {
        currentRoute = L.polyline(vdatax);

    }
} //end vloc

Here's a link to the fiddle too.

Related Question