Multiple KML length calculator

```

KML Road Length Calculator

Select one or more KML files. Use the checkboxes in the table to calculate the total length of selected roads.

---

🛣️ Individual Road Lengths

Select	File Name	Road Name	Length

Total Selected Length: 0.00 meters / 0.00 km

🛣️ KML Road Length Calculator – Explanation

📌 Introduction

The KML Road Length Calculator is a web-based tool that allows users to upload KML files, visualize road data on a map, and calculate the length of roads dynamically.

• Upload one or more KML files
• Display roads on an interactive map
• Calculate individual and total road lengths
• Select/deselect roads using checkboxes

🏗️ HTML Structure

The interface consists of:

• Buttons for adding and clearing files
• File input for selecting KML files
• A table showing road details
• A summary section for total length
• A map container

<button id="add-kml-btn">Add KML File(s)</button>
<input type="file" id="kml-files" multiple>
<table id="results-table"></table>
<div id="map"></div>

🗺️ Map Initialization

The application uses Leaflet.js to create an interactive map and load OpenStreetMap tiles.

var map = L.map('map').setView([0, 0], 2);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'OpenStreetMap contributors'
}).addTo(map);

📦 Global Variables

var totalLength = 0;
var filesToProcess = 0;
var kmlLayers = L.featureGroup().addTo(map);

These variables store total length, track file processing, and manage map layers.

🎯 Event Handling

Add Button

addKmlButton.addEventListener('click', function() {
    fileInput.click();
});

Clear Button

clearButton.addEventListener('click', function() {
    kmlLayers.clearLayers();
    tableBody.innerHTML = '';
    map.setView([0, 0], 2);
    recalculateTotal();
});

Checkbox Selection

tableBody.addEventListener('change', function(event) {
    if (event.target.classList.contains('road-checkbox')) {
        recalculateTotal();
    }
});

📂 File Processing

Files are read using the FileReader API and parsed using the Omnivore library.

var reader = new FileReader();

reader.onload = function(e) {
    var kmlLayer = omnivore.kml.parse(e.target.result);
};

📏 Road Length Calculation

Main Function

function calculatePolylineLength(layer) {
    var length = 0;
    var latlngs = layer.getLatLngs();
}

Distance Calculation

points[i].distanceTo(points[i + 1]);

This calculates distance between coordinates and sums them to get total road length.

📊 Table Row Creation

checkbox.dataset.length = lengthInMeters;

Each road entry includes a checkbox and stores its length using a data attribute.

🔄 Dynamic Total Calculation

var checkedBoxes = document.querySelectorAll('.road-checkbox:checked');

checkedBoxes.forEach(function(box) {
    newTotal += parseFloat(box.dataset.length);
});

Only selected roads are included in the total length calculation.

📺 Output Display

outputElement.textContent = `${meters} meters / ${km} km`;

Displays total length in meters and kilometers.

🚀 How to Use

1. Click Add KML File(s)
2. Select one or more KML files
3. View roads on map
4. Use checkboxes to include/exclude roads
5. See total length update automatically
6. Click Clear All to reset

⚙️ Dependencies

• Leaflet.js (map rendering)
• Leaflet Omnivore (KML parsing)
• OpenStreetMap tiles