3

I have a vector layer in GeoServer which basically has 14 line/fields/polyline attributes

I want the list of only those stations in the 2nd dropdown of end station which are actually related

Like 5 out of 14 lines in the shapefile (highlighted with yellow) are originating/starting from New Delhi.

enter image description here

FID     Start_station         End_Station
306     New Delhi             Ambala
307     New Delhi             Rohtak
1230    New Delhi             Saharanpur
1231    New Delhi             Hapur
1232    New Delhi             Aligarh

I am fetching the attributes from column named FROM_ in the shapefile in the dropdown as

var select_from = $('#from_station');
var from_station_Array = new Array();
Railway_Layer.getSource().on('addfeature', function (e) {
  const name = e.feature.get('FROM_');
  var value_station_from = String(name);
  if (jQuery.inArray(value_station_from, from_station_Array) == -1) {
    select_from.append(
      "<option class='ddindent'>" + value_station_from + '</option>'
    );
    from_station_Array.push(value_station_from);
  }
  // console.log('FROM_ station names are ', name);
});

enter image description here

& I am fetching the attributes from column named TO in the shapefile in the dropdown as

var select_to = $('#to_station');
var to_station_Array = new Array();
Railway_Layer.getSource().on('addfeature', function (e) {
  const name = e.feature.get('TO');
  var value_station_to = String(name);
  if (jQuery.inArray(value_station_to, to_station_Array) == -1) {
    select_to.append(
      "<option class='ddindent'>" + value_station_to + '</option>'
    );
    to_station_Array.push(value_station_to);
  }

  // console.log('TO_ station names are ', name);
});

I want if I Select New Delhi from 1st dropdown, then only these 5 stations viz: Ambala, Rohtak, Saharanpur, Hapur, Aligarh whose originating point is New Delhi should appear in the 2nd dropdown, instead of whole list.

Currently, the whole list appears here in the 2nd dropdown.

In case if I select New Delhi from 1st dropdown, and any value, to whom New Delhi is not related i.e. not an originating point then the query does not run.

e.g: if I select New Delhi from 1st dropdown & Kurukshetra from 2nd, it will not work, as New Delhi in the shapefile does not have Kurukshetraas its related attribute

enter image description here

Manually assigning them values and then Mapping with JQuery is not feasible as there are lot of stations, which keep on changing/updating.

so basically, How to map values from a column based on another column in the shapefile?

Refer to this URL for working Fiddle

4
  • Should selection of To Station be allowed if From Station is not selected yet?
    – TomazicM
    Commented Feb 13, 2022 at 17:53
  • It may be either ways/both ways, if we select From Station first then, only related/relevant stations should appear in To Station dropdown, or if we select To Station first, then only related stations should appear in From station dropdown. that way we don't need to block selection of To Station Commented Feb 13, 2022 at 18:36
  • This will get things very complicated. If you first select To Station, you then limit what is available in From Station. But if you then select from From Station you will have to limit what is available in To Station and so on. Might be confusing for end user.
    – TomazicM
    Commented Feb 13, 2022 at 19:27
  • Okay, @TomazicM, Then the first option that you suggested is good to go.. i.e. Selection of To Station should not be allowed until some value from From Station is not selected. Commented Feb 13, 2022 at 19:31

1 Answer 1

3

There are a few things you have to do to make it work:

  • Set variable featureNames with all the travel relations as global, so it will be available for filtering To Station when From Station is selected.
  • Initially build only From Station options, To Station field should be disabled.
  • When From Station is selected, clear any previous To Station drop down options and then loop through featureNames and build drop down options for To Station from those end stations which have origin in selected From Station.

That's how relevant part of the code could then look:

function addStationOption(value_station, station_Array, select) {
  if (jQuery.inArray(value_station, station_Array) == -1) {
    select.append(
      "<option class='ddindent'>" + value_station + '</option>'
    );
    station_Array.push(value_station);
  }
}

var select_from = $('#from_station');
var from_station_Array = new Array();
var select_to = $('#to_station');
var to_station_Array = new Array();
var featureNames = [];

Railway_Layer.getSource().on('addfeature', function (e) {
  var feature, name, value_station, FID, start_station, end_station;
  
  feature = e.feature;
  name = feature.get('FROM_');
  value_station = String(name);
  addStationOption(value_station, from_station_Array, select_from);

  FID = feature.get('FID_IMD');
  start_station = feature.get('FROM_');
  end_station = feature.get('TO');
  featureNames.push({
    FID: FID,
    start_station: start_station,
    end_station: end_station
  });
});

Railway_Layer.getSource().on('change', function (ev) {
  if (Railway_Layer.getSource().getState() !== 'ready') return;

  $('#myTable').DataTable({
    fixedHeader: {
      header: true,
      footer: true
    },
    data: featureNames,
    columns: [
      { data: 'FID' },
      { data: 'start_station' },
      { data: 'end_station' }
    ],
    scrollY: 300,
    paging: false
  });
});

select_to.prop('disabled', true);
select_from.change(function() {
  var selection = this.value;
  to_station_Array = [];
  select_to.empty();
  select_to.append('<option value="">To Station</option>');
  select_to.prop('disabled', (selection.length == 0));
  
  if (selection.length == 0) return;
  
  featureNames.forEach(function(feature) {
    if (feature.start_station == selection) {
      addStationOption(feature.end_station, to_station_Array, select_to);
    }
  });
});

select_to.change(function() {
  var selection = this.value;
  if (selection.length == 0)
    console.log('No end station selection');
  else {
    console.log('End station selected: ', selection);
  }
});

And one remark: this is not really a GIS related question, but pure HTML/JS one, so please in the future post this kind of questions on StackOverflow site.

1
  • Here I put because features were being called from GeoJson, but Sure, I will keep that in mind in future. Thanks for your time. Commented Feb 13, 2022 at 23:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.