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=1should be colored as"#FF0000" - all edges associated to a
Lane value=2should 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.
