I have built a map with two layers and the third layer is a feature layer which has data points. On initial load the first two layers load and the feature layer is added to the map once a user has selected a dropdown to pull in data from the DB.
The data is pulled and plotted to the map however when a user selects another option from the dropdown data is pulled and displayed on the map but with also the data from the previous selection that the user has selected.
I have set definitionExpression on the feature layer but the map still displays for both the selection. What might be the issue?
*I am using Esri Javascript Library v4.13.
Here is the code:
var selectedoption = document.getElementById("site_uuid");
selectedoption.addEventListener("change", function(){
var site_uuid = event.target.value;
$.ajax({
type : "GET",
url : '<?= Helper::url_base()?>Site/get_one/'+site_uuid,
dataType : "json"
}).done(function(response){
// Set the extent on the view
view.extent = new Extent({
xmin: response.xmin,
ymin: response.ymin,
xmax: response.xmax,
ymax: response.ymax,
spatialReference: {
wkid: 4326
}
});
//site data function defined below
data(site_uuid);
});
});
var data = function(site_uuid){
$.ajax({
type : "GET",
url:'<?=Helper::url_base() ?>public/featurelayerdata/'+site_uuid,
dataType : "json"
}).done(function(response){
const fields = [
new Field({
name: "id",
alias: "ObjectID",
type: "oid"
}), new Field ({
name: "site_name",
alias: "site_name",
type: "string"
}), new Field ({
name: "site_code",
alias: "site_code",
type: "string"
}),new Field ({
name: "longitude",
alias: "longitude",
type: "string"
}), new Field ({
name: "lattitude",
alias: "lattitude",
type: "string"
}), new Field ({
name: "time",
alias: "time",
type: "date"
})
];
const data = new FeatureLayer({
source: response,
definitionExpression:"site_code = '" + site_uuid + "'",
title: "_",
fields: fields,
popupTemplate: template,
timeInfo: {
startField: "time",
interval: {
unit: "years",
value: 1
}
},
renderer: {
type: "unique-value",
field: "type_data",
uniqueValueInfos: [{
value: "Unknown",
label:"<?=__('Unknown');?>",
symbol: {
type: "simple-marker",
color: "purple",
size: 6,
outline: {
width: 0.5,
color: "white"
}
}
}, {
value: "Information not recorded",
label: "<?=__('Information not recorded');?>",
symbol: {
type: "simple-marker",
color: "orange",
size: 6,
outline: {
width: 0.5,
color: "white"
}
}
},
{
value: "Other",
label: "<?=__('Other');?>",
symbol: {
type: "simple-marker",
color: "blue",
size: 6,
outline: {
width: 0.5,
color: "white"
}
}
}],
legendOptions : {
title: "<?=__('Legend');?>"
}
}
}
);
legend.layerInfos = [{
layer: data,
title: "<?=__('Legend');?>"
}];
view.ui.add(timeSlider, "manual");
map.add(data);
view.whenLayerView(data).then(function(lv) {
layerView = lv;
const fullTimeExtent = data.timeInfo.fullTimeExtent;
// set up time slider properties
// timeSlider.fullTimeExtent = fullTimeExtent;
const start = data.timeInfo.fullTimeExtent.start;
const end = data.timeInfo.fullTimeExtent.end;
const yr_start = new Date(start);
var yr_year = yr_start.getFullYear();
var yr_month = yr_start.getMonth();
var yr_day = yr_start.getDay();
var start_yr = new Date(yr_year, 0,1);
const d_start = new Date(start);
var year = d_start.getFullYear();
var month = d_start.getMonth();
var day = d_start.getDate();
var next_yr = new Date(year + 1, month, day);
const d_end = new Date(end);
var year = d_end.getFullYear();
var month = d_end.getMonth();
var day = d_end.getDay();
var next_yr_end = new Date(year + 1, month, day);
timeSlider.fullTimeExtent = {
start: start_yr,
end: next_yr_end
};
timeSlider.stops = {
interval: data.timeInfo.interval
};
timeSlider.values = [start,next_yr];
});
});
}
