I have a bus network with 2 GeoJSONs : one for stations (points) and the other for lines between them.
I have 3 selects :first one to select the bus line and filter the stations on the other two that are for origin and destination stations.
What I want to do is to dynamically filter the bus lines on the first select and the bus stations on the last two selects.
Something like this : User selects L1 on first select > Map only shows Line 1 (both geojsons, points and lines) and hide the other Lines that were showing. User selects Station x on select 2 and Station y on select 3 > Map only shows these stations and the ones in between (both geojsons, points and lines).
Stations GeoJSON (not complete) :
var station ={
"type": "FeatureCollection",
"name": "test",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 0, "nom": "JAMAA EL FNA", "ligne": "L1", "ville": "MARRAKECH", "direction": "A" }, "geometry": { "type": "Point", "coordinates": [ -7.991506070410076, 31.624380871588261 ] } },
{ "type": "Feature", "properties": { "id": 1, "nom": "KOUTOUBIA", "ligne": "L1", "ville": "MARRAKECH", "direction": "A" }, "geometry": { "type": "Point", "coordinates": [ -7.993921192850516, 31.62551706188404 ] } },
{ "type": "Feature", "properties": { "id": 2, "nom": "HOTE DE VILLE", "ligne": "L1", "ville": "MARRAKECH", "direction": "A" }, "geometry": { "type": "Point", "coordinates": [ -7.997800602958748, 31.627492814514493 ] } },
{ "type": "Feature", "properties": { "id": 3, "nom": "R.P BERDII", "ligne": "L1", "ville": "MARRAKECH", "direction": "A" }, "geometry": { "type": "Point", "coordinates": [ -8.003733858117105, 31.630010280990067 ] } },
{ "type": "Feature", "properties": { "id": 4, "nom": "GRAND POSTE", "ligne": "L1", "ville": "MARRAKECH", "direction": "A" }, "geometry": { "type": "Point", "coordinates": [ -8.009040991276375, 31.633004916540266 ] } },
{ "type": "Feature", "properties": { "id": 5, "nom": "CAREE EDEN", "ligne": "L1", "ville": "MARRAKECH", "direction": "A" }, "geometry": { "type": "Point", "coordinates": [ -8.011327830139466, 31.634311225216251 ] } },....
Lines GeoJSON (not complete) :
var lignemarrakech = {
"type": "FeatureCollection",
"name": "ligne",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 0, "ligne_bus": "L1", "direction": "A", "from_st": null, "to_st": null, "ville": "MARRAKECH" }, "geometry": { "type": "LineString", "coordinates": [ [ -7.991506070410076, 31.624380871588261 ], [ -7.99177772113954, 31.62455510452893 ], [ -7.992132146977649, 31.624680377597475 ], [ -7.992359514496435, 31.624737319845583 ], [ -7.992653754814866, 31.624862592668791 ], [ -7.993295733691442, 31.625147303003317 ], [ -7.993583286729908, 31.625306740410121 ], [ -7.993921192850516, 31.62551706188404 ] ] } },
{ "type": "Feature", "properties": { "id": 1, "ligne_bus": "L1", "direction": "A", "from_st": null, "to_st": null, "ville": "MARRAKECH" }, "geometry": { "type": "LineString", "coordinates": [ [ -7.993929771507931, 31.625520494421043 ], [ -7.993921192850516, 31.62551706188404 ], [ -7.994251765813826, 31.625734485234361 ], [ -7.994613027718003, 31.625968537122866 ], [ -7.994699416434219, 31.626022034614714 ], [ -7.995311990967388, 31.626396516196305 ], [ -7.995618278233972, 31.626550320694935 ], [ -7.995971686618494, 31.626730873477591 ], [ -7.99655284707304, 31.627018419778416 ], [ -7.997188982165176, 31.627279216817595 ], [ -7.997597365187289, 31.627433019856959 ], [ -7.997800602958748, 31.627492814514493 ] ] } },
{ "type": "Feature", "properties": { "id": 2, "ligne_bus": "L1", "direction": "A", "from_st": null, "to_st": null, "ville": "MARRAKECH" }, "geometry": { "type": "LineString", "coordinates": [ [ -7.997800602958748, 31.627492814514493 ], [ -7.998131404523898, 31.627586822642048 ], [ -7.998704711458787, 31.62774731223368 ], [ -7.999246604315053, 31.627847618087841 ], [ -7.999898446446502, 31.627981359058502 ], [ -8.000487460420704, 31.628188657183067 ], [ -8.001194277189745, 31.628529695028082 ], [ -8.001987482675004, 31.628984410209988 ], [ -8.00258435016886, 31.629345505977 ], [ -8.002796395199573, 31.629499305600273 ], [ -8.002835662797853, 31.629606296492579 ], [ -8.002859223356822, 31.629659791892589 ], [ -8.002906344474757, 31.629686539581062 ], [ -8.002984879671317, 31.629726661099347 ], [ -8.00307912190719, 31.629733348017368 ], [ -8.003181217662718, 31.629726661099347 ], [ -8.003401116213087, 31.629820277908031 ], [ -8.003733858117105, 31.630010280990067 ] ] } },...
This is what I could do for the first select :
$('#selectLine').on('change', function() {
console.log("chosen_line= " + this.value);
chosen_line = this.value;
filterLines();
if (chosen_line= 'L1'){
L.geoJSON(lignemarrakech, {
filter: function(feature, layer) {
return feature.properties.ligne='L1';
}
}).addTo(mymap);
}
else{
}
});
Beside the fact that it's not generalised, it doesn't work as intended (show only L1 when L1 is selected), it just display all the lines again on top.