diff --git a/src/pages/mapas/Rutas.svelte b/src/pages/mapas/Rutas.svelte index bcee8f7..ef4cc4e 100644 --- a/src/pages/mapas/Rutas.svelte +++ b/src/pages/mapas/Rutas.svelte @@ -22,6 +22,7 @@ let iconPartida = null let iconTermino = null let iconParada = null + let iconAutobus = null let L = null // leaflet.js let marker1 = null let marker2 = null @@ -33,7 +34,8 @@ let codigo = null let ver_buses = false let ver_paraderos = false - let markers = [] + let markers_paraderos = [] + let markers_buses = [] onMount(() => { create_map() }) @@ -64,6 +66,14 @@ popupAnchor: [0, -16] }) } + if (!iconAutobus) { + iconAutobus = L.icon({ + iconUrl: imagenAutobus, + iconSize: [32, 32], + iconAnchor: [16, 32], + popupAnchor: [0, -16] + }) + } if (!myMap) { myMap = L.map(elMap) L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', @@ -113,7 +123,7 @@ async function onMostrarParaderos(ver_paraderos) { // 1. eliminar marcadores anteriores - markers.forEach(marker => marker.remove()) + markers_paraderos.forEach(marker => marker.remove()) if (!ver_paraderos || !id_linea) return; @@ -127,13 +137,13 @@ const html = `${title}
${location}` marker.bindTooltip(html) - markers.push(marker) + markers_paraderos.push(marker) } } async function onMostrarBuses(ver_buses) { // 1. eliminar marcadores anteriores - // markers.forEach(marker => marker.remove()) + markers_buses.forEach(marker => marker.remove()) if (!ver_buses || !id_linea) return; @@ -141,15 +151,15 @@ console.log({ buses }) // 2. crear marcadores - // for (let mark of paraderos) { - // const { stop_lat: lat, stop_lon: lng } = mark - // const marker = L.marker([lat, lng], { icon: iconParada }).addTo(myMap) - // const { id_paradero: title, stop_name: location } = mark; - // const html = `${title}
${location}` + for (let mark of buses) { + const { latitude: lat, longitude: lng } = mark + const marker = L.marker([lat, lng], { icon: iconAutobus }).addTo(myMap) + const html = `${mark.Patente_vehiculo}
Velocidad: ${mark.speed}` - // marker.bindTooltip(html) - // markers.push(marker) - // } + marker.bindTooltip(html) + markers_buses.push(marker) + console.log({ marker }) + } }