2

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.

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>
  • Yes I have seen this exemple, but being very new to javascript, I have a hard time applying it to my case, I can understand the method to follow but putting it into code is the problem. a helping hand to start ? – Ayogo Jul 11 '18 at 17:52
  • All points will be green and shown until you change the choice in the select. then they will be filtered and colored. – Bill Chappell Jul 11 '18 at 18:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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