ArcGIS Javascript - Feature Layer

446
2
03-09-2020 03:02 AM
IanMagero
New Contributor III

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


 });








});





}
0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Ian,

It looks like you are creating the feature layer from clientside features.

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#timeInfo 

The timeInfo property, along with its startField and endField properties, must be set at the time of layer initialization if it is being set for a GeoJSONLayerCSVLayer or FeatureLayer initialized from client-side features.

IanMagero
New Contributor III

I have set the endField property but the problem still persists

0 Kudos