95 lines
3.3 KiB
HTML
95 lines
3.3 KiB
HTML
{% extends "layout.html" %}
|
|
{% block content %}
|
|
<div class='row mb-4'><div class="col-2">Linea:</div><div class="col"><select name="rutaid" id="lineaselect" onchange="send_data(this);">
|
|
{%- for k, val in recorridos.items() %}
|
|
{%- if loop.first %}
|
|
<option selected=selected value='{{k}}'>{{val}}</option>
|
|
{%- else %}
|
|
<option value='{{k}}'>{{val}}</option>
|
|
{%- endif %}
|
|
{%- endfor %}
|
|
</select></div></div>
|
|
<div id="map"></div>
|
|
<div id="mensaje"></div>
|
|
|
|
{% endblock content %}
|
|
|
|
{% block js %}
|
|
<script>
|
|
function initMapRecorridos(data) {
|
|
|
|
var center = {lat: data[`latitude`], lng: data[`longitude`]};
|
|
var map = new google.maps.Map(document.getElementById('map'), {
|
|
zoom: 10,
|
|
center: center,
|
|
mapId: '7e5605b96eebbb2',
|
|
});
|
|
|
|
var infowindow = new google.maps.InfoWindow({});
|
|
var marker;
|
|
|
|
data[`paradas`].forEach(e => {
|
|
marker = new google.maps.Marker({ position: new google.maps.LatLng(e[`latitude`], e[`longitude`]), map: map, title: e[`codigo`], });
|
|
|
|
if (e[`lineas`] == 0){
|
|
marker.setIcon('https://maps.gstatic.com/mapfiles/ms2/micons/ltblue-dot.png');
|
|
} else if (e[`lineas`] == 1){
|
|
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/purple-dot.png');
|
|
} else if (e[`lineas`] < 5){
|
|
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
|
|
} else if (e[`lineas`] < 20){
|
|
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
|
|
} else if (e[`lineas`] < 40){
|
|
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/yellow-dot.png');
|
|
} else if (e[`lineas`] < 50){
|
|
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
|
|
} else {
|
|
marker.setIcon('https://maps.gstatic.com/mapfiles/ms2/micons/pink-dot.png');
|
|
}
|
|
|
|
google.maps.event.addListener(marker, 'click', (function (marker) {
|
|
return function () {
|
|
infowindow.setContent(`${e[`mensaje`]}}`);
|
|
infowindow.open(map, marker);
|
|
}
|
|
})(marker));
|
|
});
|
|
|
|
const flightPath = new google.maps.Polyline({
|
|
path: data[`recorrido`],
|
|
geodesic: false,
|
|
strokeColor: data[`color`],
|
|
strokeOpacity: 1.0,
|
|
strokeWeight: 2,
|
|
});
|
|
flightPath.setMap(map);
|
|
|
|
$("#mensaje").html(data[`mensaje`]);
|
|
}
|
|
|
|
function send_data(selectitem) {
|
|
|
|
$.ajax({
|
|
type: `POST`,
|
|
data: {"rutaid": selectitem.value},
|
|
url: "{{url_for('main.ruta_recorrido')}}",
|
|
success: function(response) {initMapRecorridos(response);}
|
|
});
|
|
}
|
|
|
|
$.ajax({
|
|
type: `POST`,
|
|
data: {"rutaid": "{{recorridos[0]}}"},
|
|
url: "{{url_for('main.ruta_recorrido')}}",
|
|
success: function(response) {initMapRecorridos(response);}
|
|
});
|
|
|
|
$(document).ready(function() {
|
|
$("#lineaselect").change();
|
|
// you need to specify id of combo to set right combo, if more than one combo
|
|
});
|
|
|
|
</script>
|
|
|
|
{% endblock js %}
|