How to change edges (lines) color when filtering by a drop down menu javascript

Viewed 93

I have a folim map drawing by a python code.I have a drop down menu on the left of the map. When selecting the Lane (input) value :

  • all edges associated to a Lanes value=1 should be colored as "#FF0000"
  • all edges associated to a Lane value=2 should be colored as "#FFF933" Could you please help me?

Here mis my folium output: https://jsfiddle.net/aba2s/v5zLacoy/1/

    {% load static %}
    {% block content %}

    <div class="row h-100">
        <div class="col-md-2" id="destinationDiv">
        </div>

        <div class="col-md-10">
          {% include 'visualization/visualization.html' %}
        </div>

        <div class="form-group w-75 mx-auto">
            <label for="linkSelector" class="sr-only">Links</label>
            <select id="linkSelector" class="form-control">
                <option value="none">Links...</option>
                <option value="lanes">Lanes (input)</option>
                <option value="length">Length (input)</option>
            </select>
       </div>
    </div>

    <script src="{% static '/js/api/changeMapData.js' %}"></script>
    
    {% endblock %}

My Javascript code which will fetch the data from the api.

function changeMapData(){

  fetch("http://127.0.0.1:8000/api/edges/")
    .then(response => {
        return response.json()
      })
    .then((data) => {
      var linkSelector = document.getElementById('linkSelector')
      switch (linkSelector.value) {
        case "Lanes(input)":
          if($(edges.lanes)==1){
            // Set all edges color = "#FF0000"  with number of lanes=1
              edges.setStyle
              ({
                'fillColor': "#FF0000",
                'color': "#FF0000"
              });
            }

          if($(edges.lanes)==2){
              // Set all edges color = "#FFF933", with number of lanes=2
              edges.setStyle
              ({
                'fillColor': "#FFF933",
                'color': "#FFF933"
              });
            }

      }
    });
}

My edges data (two first edges). From the api

[
    {
        "id": 1,
        "edge_id": 1,
        "name": "Out 1 - E",
        "length": 4.0,
        "speed": 50.0,
        "lanes": 2,
        "param1": 3000.0,
        "param2": null,
        "param3": null,
        "road_type": 2,
        "source": 1,
        "target": 2
    },
    {
        "id": 2,
        "edge_id": 2,
        "name": "Out 1 - NE",
        "length": 4.0,
        "speed": 50.0,
        "lanes": 1,
        "param1": 3000.0,
        "param2": null,
        "param3": null,
        "road_type": 2,
        "source": 1,
        "target": 3
    },

My html page containing the map.

enter image description here

0 Answers
Related