AnsweredAssumed Answered

ArcGIS Javascript - Feature Layer

Question asked by IanMagero on Mar 9, 2020
Latest reply on Mar 10, 2020 by IanMagero

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];


});








});





}

Outcomes