[GIS] Removing layer and redrawing it again in Leaflet

geojsonjavascriptjqueryleafletmapbox

I have a geoJSON polygon in my map and I want to update its color after changing the values by getting a JSON value. So I wrote the below code which changes the property value successfully.

var map = L.map('map').setView([1.3096622448984000, 103.7689017333800], 10);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'mapbox.light'
    }).addTo(map);
    map.doubleClickZoom.disable();




    // get color depending on population density value
    function getColor(d) {
        return  d > 2000 ? '#000080' :
                d > 100  ? '#6fdc6f' :
                d > 500  ? '#6fdc6f' :
                d > 100  ? '#6fdc6f' :
                d > 50   ? '#6fdc6f' :
                d > 20   ? '#6fdc6f' :
                d > 10   ? '#6fdc6f' :
                           '#FFEDA0';

    }

    function style(feature) {
        return {
            weight: 2,
            opacity: 1,
            color: '#999',
            fillOpacity: 0.7,
            fillColor: getColor(feature.properties.state1)
        };
    }

    var geojson = L.geoJson(campus, {
        style: style,
    }).addTo(map);

    function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });


    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
    }

    info.update(layer.feature.properties);

    }
function resetHighlight(e) {
    geojson.resetStyle(e.target);
     info.update();
}
function zoomToFeature(e) {
    map.fitBounds(e.target.getBounds());
    map.doubleClickZoom.disable();
}


function searchText(e,feature)
{
     var layer = e.target;
     var search = {
            'zone': layer.feature.properties.name,
            'zone_id':layer.feature.id
             };
                $.ajax({
                    type: "POST",
                    contentType : 'application/json; charset=utf-8',
                    dataType : 'json',
                    url: "http://posturl/",
                    data: JSON.stringify(search), // Note it is important
                    success :function(result) {
                     // do what ever you want with data
                     //  alert("suc");

                   },
                    error:function(error){
                     //alert("success");
                      }
                });
 }


var lastClickedLayer;

function onMapClick(e,feature) {


    var layer = e.target;

    $("#grid_name").html(layer.feature.properties.name);


    searchText(e,feature);





}



function mapupdatecolor(startDate,endDate,e){
     console.log(endDate);
    $.getJSON('http://dataurl', function(data) {
        console.log(data);
        for (i = 0; i <24; i++) { 

            console.log("1 time state1 in console--"+campus['features'][i]['properties']['state1']);
            campus['features'][i]['properties']['state1']=data[i].state1;
            console.log("2 time state1 in console after change--"+campus['features'][i]['properties']['state1']);

        }


     map.removeLayer(geojson);

    var geojson = L.geoJson(campus, {
        style: style,
    }).addTo(map);

    });


}


function onEachFeature(feature, layer) {



    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        //click: zoomToFeature
        click:onMapClick

    });

}

geojson = L.geoJson(campus, {
    style: style,
    onEachFeature: onEachFeature
}).addTo(map);

var info = L.control();

info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    this.update();
    return this._div;
};


// method that we will use to update the control based on feature properties passed
info.update = function (props) {
    this._div.innerHTML = '<h4><b>Zones<b></h4>' +  (props ?
        '<b>' + props.name + '</b><br />'  
        : 'Hover over a zone');


};


info.addTo(map);

The campus variable will be in another script as

var campus = {


        "type":"FeatureCollection","features":[
            {
                        "type": "Feature",
                        "id":"87",
                        "properties": {
                            "name": "CHANGI POINT(SOUTH)",
                            "state1":"10"
                        },
                        "geometry": {
                            "type": "MultiPolygon",
                            "coordinates": [
                                [
                                    [
                                        [103.981,1.32749],[103.986,1.32528],[103.986,1.32528],[103.986,1.3251],[103.986,1.32508],[103.99,1.32301],[103.995,1.32166],[104.001,1.32121],[104.005,1.32192],[104.01,1.32296],[104.017,1.32545],[104.026,1.32538],[104.033,1.32558],[104.033,1.31493],[104.031,1.31479],[104.028,1.31473],[104.028,1.31731],[104.028,1.31954],[104.023,1.31957],[104.023,1.31506],[104.019,1.31509],[104.011,1.31456],[104.004,1.31003],[104.001,1.30937],[103.991,1.31284],[103.983,1.31127],[103.983,1.31238],[103.985,1.31369],[103.984,1.31591],[103.982,1.3163],[103.976,1.31493],[103.975,1.31596],[103.976,1.32187],[103.976,1.32439],[103.976,1.32623],[103.976,1.32666],[103.977,1.32676],[103.977,1.32748],[103.978,1.32787],[103.979,1.32797],[103.979,1.32792],[103.981,1.32749]
                                        ]

                                        ]
                            ]
                        }

                    }

]};

So I want to remove the layer and redraw it again. I am triggering the mapudatecolor function in the event below (another script)

     clickApply: function(e) {
    var startDate = $('#reportrange').data('daterangepicker').startDate._d;
    var endDate = $('#reportrange').data('daterangepicker').endDate._d;

    var start_date = new Date(startDate);
    var end_date=new Date(endDate);
    var start = moment(start_date).format("YYYY-MM-DD HH:mm:ss");
    var end = moment(end_date).format("YYYY-MM-DD HH:mm:ss");







    mapupdatecolor(start,end);




    this.hide();
    this.element.trigger('apply.daterangepicker', this);

}

The state1 properties is updated but the color is only not changing.

     1 time state1 in console--100
     2 time state1 in console after change--2137
     1 time state1 in console--9
     2 time state1 in console after change--1951
     1 time state1 in console--30
     2 time state1 in console after change--1592

I get the error in

fillColor: getColor(feature.properties.state1)

cannot read property properties

Are these lines correct

 map.removeLayer(geojson);

        var geojson = L.geoJson(campus, {
            style: style,
        }).addTo(map);

I am new to Javascript.

Best Answer

Finally found how to solve

map.removeLayer(L.geoJson);

        var geojson = L.geoJson(campus, {
            style: style,
             onEachFeature: onEachFeature
        }).addTo(map);

It worked like a charm

Related Solutions

Add/Remove GeoJSON Layers Using Leaflet – Interactive Map Customization

Try this instead:

function getJson(simp){  //Removed unneeded arguments here
    var url = 'file' + simp + '.json';
    map.removeLayer(geojsonLayer);
    //geojsonLayer.clearLayers();  I don't believe this needed.
    $.getJSON(url, function(data){
        geojsonLayer = L.geoJson(data, {
            style: defaultStyle,
            onEachFeature: onEachFeature
        });
        geojsonLayer.addTo(map);
    });
}

And for your calling function:

map.on('zoomend', function(e) {
    if (map.getZoom() >= 7 && map.getZoom() <= 10) {
        if (simpCounter == 0 || simpCounter == 2) {
        getJson(60);
        simpCounter = 1;
        }
    } else if (map.getZoom() >= 11) {
        if (simpCounter == 0 || simpCounter == 1) {
        getJson(35);
        simpCounter = 2;
        }
    } else if (map.getZoom() <= 7) { //Return to original data
        if (simpCounter == 1 || simpCounter == 2) {
        getJson(XX); //Fill out with correct file name
        simpCounter = 0;
        }
    }
});

When you are passing the arguments map, geojsonLayer and defaultStyle in the call getJson(defaultStyle, map, 60, geojsonLayer); you are creating new instances of the objects. You then perform work on the instances which may reflect on the screen but once it get back to the 'main loop' it basically forgets everything it just did and returns to the previous state.

Since I am guessing you defined defaultStyle, map, and the initial geojsonLayer population in the global scope you just have to call them, no need to pass them. With the adjustments I made it changes the global map so changes persist after function calls finish.

This solution worked for me. You can see the entire file contents I made here: http://pastebin.com/yMYQJ2jK

I also define a final zoom level for 1-7 so you can see you initial JSON data when you return to the initial zoom level, otherwise it is lost and is never called back unless you reload the page!

[GIS] How to modify features during runtime, in a GeoJSON feature group on Leaflet

I have written down a small code to modify geojson feature style on runtime using leaflet. you can try it on jsFiddle or use the following code test locally.

I hope it will help.

Here is the code:

<!DOCTYPE html>
<html>
<head>
<title>Leaflet Coloring Geojson Features</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
<style>
#map {
    width: 800px;
    height: 500px;
}
.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}
.info h4 {
    margin: 0 0 5px;
    color: #777;
}
.legend {
    text-align: left;
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://leafletjs.com/dist/leaflet.js"></script> 
<script type="text/javascript" src="http://leafletjs.com/examples/us-states.js"></script> 
<script type="text/javascript">
    $(document).ready(function () {
        init_map();
        init_geojson();
        $("#btn").on('click', function () {
            var stateName = $('#statename').val();
            console.log(stateName);
            init_geojson(stateName);
        });
    });
    var map, geojson, sn;

    function init_map() {
        map = L.map('map').setView([37.8, -96], 4);
        L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade',
            key: 'BC9A493B41014CAABB98F0471D759707'
        }).addTo(map);
        geojson = L.geoJson(statesData, {
            style: style
            //onEachFeature: onEachFeature,
        }).addTo(map);
    }

    function init_geojson(n) {
        console.log(geojson.options);
        map.removeLayer(geojson);
        if (n != "") {
            sn = n;
            console.log(sn);
            geojson = L.geoJson(statesData, {
                style: style
            }).addTo(map);
        }
    }

    function style(feature) {
        console.log(sn);
        if (sn == feature.properties.name) {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.3,
                fillColor: '#ff0000'
            };
        } else {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.3,
                fillColor: '#666666'
            };
        }
    }
</script>
<input type="text" id="statename" value="Alaska">
<input type="button" id="btn" value="Set Color"/>
</body>
</html>

Best Answer

Related Solutions

Add/Remove GeoJSON Layers Using Leaflet – Interactive Map Customization

[GIS] How to modify features during runtime, in a GeoJSON feature group on Leaflet

Related Question