Dibujo de multiples rutas en un mapa dinamico hecho

js/viajes.js

@@ -151,5 +151,85 @@ class Viajes{
         return htmlOutput;
       }
 
+      cargarArchivosKML(files) {
+        const mainElement = document.querySelector("main");
+
+        // Limpiamos el main por si ya tenía algo
+        while (mainElement.firstChild) {
+            mainElement.removeChild(mainElement.firstChild);
+        }
+
+        mapboxgl.accessToken = 'pk.eyJ1IjoidW8yOTEwNDciLCJhIjoiY2xxOW1uOHd4MWcyNjJpcDdqcDFrZmRoNSJ9.wRJntK8K2RqcAqRrw0XE2g';
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: 'mapbox://styles/mapbox/streets-v9',
+            center: [this.longitud, this.latitud],
+            zoom: 14
+        });
+
+        var i = 0;
+        for (const file of files) {
+            const lector = new FileReader();
+
+            lector.onload = (event) => {
+                const resultXML = event.target.result;
+                this.procesarKML(resultXML, map, i);
+                i++;
+            };
+
+            lector.readAsText(file);
+        }
+    }
+
+    procesarKML(xmlContent, map, nRuta) {
+        const xmlDoc = $.parseXML(xmlContent);
+        const $xml = $(xmlDoc);
+
+        const puntos = [];
+
+        $xml.find('Placemark').each(function () {
+            const coordenadas = $(this).find('coordinates').text().split(' ');
+
+            coordenadas.forEach(coord => {
+                const [longitud, latitud, altitud] = coord.split(',').map(parseFloat);
+                puntos.push([longitud, latitud, altitud]);
+            });
+        });
+
+        const primerPunto = puntos[0];
+
+        // Añadir la ruta al mapa centrando en el primer punto
+        map.on('load', function () {
+            map.addLayer({
+                'id': 'ruta' + nRuta,
+                'type': 'line',
+                'source': {
+                    'type': 'geojson',
+                    'data': {
+                        'type': 'Feature',
+                        'properties': {},
+                        'geometry': {
+                            'type': 'LineString',
+                            'coordinates': puntos
+                        }
+                    }
+                },
+                'layout': {
+                    'line-join': 'round',
+                    'line-cap': 'round'
+                },
+                'paint': {
+                    'line-color': '#' + (Math.random() * 0xFFFFFF << 0).toString(16),
+                    'line-width': 8
+                }
+            });
+
+            // Centrar el mapa en el primer punto
+            map.flyTo({
+                center: primerPunto,
+                zoom: 10
+            });
+        });
+    }
 
 }

viajes.css

@@ -1,5 +1,5 @@
 
 main { 
-    width: 100em; 
-    height: 100em; 
+    width: 70em; 
+    height: 70em; 
 }

viajes.html

@@ -52,9 +52,15 @@ <h2>Viajes</h2>
 </section>
 
 <p>
+    Mostrar XML de rutas:
     <input type="file" onchange="viajes.readInputFile(this.files);">
 </p>
 
+<p>
+    Cargar ruta en formato Kml:
+    <input type="file" onchange="viajes.cargarArchivosKML(this.files);" accept=".kml" multiple>
+</p>
+
 <!-- Lleva id para poder poner el mapa dinamico -->
 <main id="map">