Filtering GeoJSONs data using Selects values

Question

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.

Answer 1

This example may help. http://www.gistechsolutions.com/leaflet/DEMO/filter/filter.html You have to create a layer group, add your layer to the group, then the group to the map. On change, clear the layer from the group, remove the group from the map and then add the new (filtered)layer to the group and re add to the map.

My Data: http://www.gistechsolutions.com/leaflet/DEMO/Simple/BaseBallFinal.json download and put in web folder with HTMl file.

My Html file: Select from pick list colors will change and show filtered data.

<!DOCTYPE html>
<html>
<head>
    <title>GeoJSON Example</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<style>
#wrapper {
  margin: 0 auto;
  width: 100%;
}

#panel{
 float: left;
  width: 100%;
  height:50px;
background-color: #175B81;
color:white;
}

#map {
  float: left;
  width: 80%;
  height:600px;
}

</style>
</head>
<body>

<div id="wrapper">
    <div id="panel"><span class="p2"></span>

            <select id="league" onchange="LeagueSelect()">
              <option value="NL" >National</option>
              <option value="AL" >American</option>
            </select>

    </div>
  <div id="map">  </div>

</div>
<script>
var url = 'BaseBallFinal.json';  

    var map = L.map('map').setView([39.0, -98.26], 4); 

    var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{ 
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
    osm.addTo(map);

    var myData =  L.layerGroup([]);

    var bbTeam = L.geoJSON(null, {
            //onEachFeature: forEachFeature, //not used
            pointToLayer: function(feature, latlng) {

                return L.circleMarker(latlng, {
                radius:6,
                opacity: .5,
                color:'green',
                fillColor:  'green',
                fillOpacity: 0.8

                }).bindTooltip(feature.properties.Name);
            }
      });

    // Get GeoJSON data and create features.

        $.getJSON(url, function(data) {
            bbTeam.addData(data);
        });

    myData.addLayer(bbTeam);
    myData.addTo(map); 

    // Now working with filtered data...

    function LeagueSelect() {
        var choice = document.getElementById("league").value;
        console.log(choice);

        var theColor;

        switch(choice) {
            case 'NL':
                theColor = 'blue'
                break;
            case 'AL':
                theColor = 'red'
                break;
            default:
                theColor = 'green'
        }

        myData.clearLayers();
        map.removeLayer(myData);

        bbTeam = L.geoJSON(null, {
            //onEachFeature: forEachFeature, //not used
            pointToLayer: function(feature, latlng) {

                return L.circleMarker(latlng, {
                radius:6,
                opacity: .5,
                color:theColor,
                fillColor: theColor,
                fillOpacity: 0.8

                }).bindTooltip(feature.properties.Name);
            },
            filter: function(feature, layer) {   
                 return (feature.properties.League == choice );
            },

      });

    // Get GeoJSON data and create features.

        $.getJSON(url, function(data) {
            bbTeam.addData(data);
        });

    myData.addLayer(bbTeam);
    myData.addTo(map); 
    }

 </script>
</body>
</html>