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 © <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.
