<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Térképi szerkesztő</title>
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />
    <!-- Leaflet Draw CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        #header {
            background-color: #3498db;
            color: white;
            padding: 10px 20px;
            text-align: center;
        }
        #container {
            display: flex;
            height: calc(100vh - 110px);
        }
        #map {
            flex: 1;
            height: 100%;
        }
        #sidebar {
            width: 300px;
            padding: 10px;
            background-color: #f5f5f5;
            overflow-y: auto;
        }
        .button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 15px;
            margin: 5px 0;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
        }
        .button:hover {
            background-color: #2980b9;
        }
        #footer {
            background-color: #3498db;
            color: white;
            padding: 10px;
            text-align: center;
        }
        textarea {
            width: 100%;
            height: 150px;
            margin-top: 10px;
            padding: 5px;
            resize: none;
            font-family: monospace;
            font-size: 12px;
        }
        h2 {
            margin-top: 10px;
            margin-bottom: 5px;
        }
        .info {
            margin-bottom: 10px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>Térképi Szerkesztő</h1>
    </div>
    
    <div id="container">
        <div id="map"></div>
        <div id="sidebar">
            <div class="info">
                <h2>Használat</h2>
                <p>Használd a bal oldali eszköztárat a rajzoláshoz. A rajzolás befejezése után itt exportálhatod az eredményt.</p>
            </div>
            
            <h2>Alakzatok</h2>
            <div id="shape-count">
                <p>Nincs alakzat a térképen</p>
            </div>
            
            <h2>Műveletek</h2>
            <button class="button" id="clear-all">Összes törlése</button>
            <button class="button" id="export-geojson">Exportálás GeoJSON</button>
            <button class="button" id="export-kml">Exportálás KML</button>
            <button class="button" id="save-file">Mentés fájlba</button>
            
            <h2>Exportált formátum:</h2>
            <textarea id="export-output" readonly placeholder="Itt jelenik meg az exportált tartalom..."></textarea>
        </div>
    </div>
    
    <div id="footer">
        Térképi Szerkesztő - Leaflet és Leaflet.Draw használatával
    </div>

    <!-- Leaflet JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
    <!-- Leaflet Draw JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
    
    <script>
        // Térkép inicializálása
        var map = L.map('map').setView([47.498, 19.040], 13); // Budapest
        
        // Alaptérkép betöltése
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        
        // FeatureGroup az alakzatok tárolásához
        var drawnItems = new L.FeatureGroup();
        map.addLayer(drawnItems);
        
        // Rajzoló vezérlő hozzáadása
        var drawControl = new L.Control.Draw({
            draw: {
                polyline: true,
                polygon: true,
                circle: true,
                marker: true,
                rectangle: true
            },
            edit: {
                featureGroup: drawnItems,
                remove: true
            }
        });
        map.addControl(drawControl);
        
        // Alakzatok számolása és kijelzése
        function updateShapeCount() {
            var count = 0;
            drawnItems.eachLayer(function() {
                count++;
            });
            
            var countText = "Nincs alakzat a térképen";
            if (count === 1) {
                countText = "1 alakzat a térképen";
            } else if (count > 1) {
                countText = count + " alakzat a térképen";
            }
            
            document.getElementById('shape-count').innerHTML = '<p>' + countText + '</p>';
        }
        
        // Új alakzat rajzolása esemény
        map.on('draw:created', function(e) {
            var layer = e.layer;
            drawnItems.addLayer(layer);
            updateShapeCount();
        });
        
        // Alakzat szerkesztése esemény
        map.on('draw:edited', function() {
            updateShapeCount();
        });
        
        // Alakzat törlése esemény
        map.on('draw:deleted', function() {
            updateShapeCount();
        });
        
        // Összes alakzat törlése
        document.getElementById('clear-all').addEventListener('click', function() {
            drawnItems.clearLayers();
            updateShapeCount();
            document.getElementById('export-output').value = '';
        });
        
        // Exportálás GeoJSON formátumba
        document.getElementById('export-geojson').addEventListener('click', function() {
            var data = drawnItems.toGeoJSON();
            document.getElementById('export-output').value = JSON.stringify(data, null, 2);
        });
        
        // GeoJSON átalakítása KML formátumba - saját implementáció a tokml.js nélkül
        function geoJSONtoKML(geojson) {
            // KML fejléc
            var kml = '<?xml version="1.0" encoding="UTF-8"?>\n';
            kml += '<kml xmlns="http://www.opengis.net/kml/2.2">\n';
            kml += '<Document>\n';
            kml += '  <name>Térképi alakzatok</name>\n';
            
            // Stílusok definiálása
            kml += '  <Style id="polygonStyle">\n';
            kml += '    <LineStyle>\n';
            kml += '      <color>ff0000ff</color>\n';  // piros
            kml += '      <width>2</width>\n';
            kml += '    </LineStyle>\n';
            kml += '    <PolyStyle>\n';
            kml += '      <color>660000ff</color>\n';  // piros, félig átlátszó
            kml += '    </PolyStyle>\n';
            kml += '  </Style>\n';
            
            kml += '  <Style id="lineStyle">\n';
            kml += '    <LineStyle>\n';
            kml += '      <color>ff0000ff</color>\n';  // piros
            kml += '      <width>3</width>\n';
            kml += '    </LineStyle>\n';
            kml += '  </Style>\n';
            
            kml += '  <Style id="pointStyle">\n';
            kml += '    <IconStyle>\n';
            kml += '      <scale>1.0</scale>\n';
            kml += '    </IconStyle>\n';
            kml += '  </Style>\n';
            
            // Végigmegyünk a feature-ökön
            if (geojson.features && geojson.features.length > 0) {
                geojson.features.forEach(function(feature, index) {
                    var featureType = feature.geometry.type;
                    var styleUrl = "";
                    var coordinates = feature.geometry.coordinates;
                    
                    kml += '  <Placemark>\n';
                    kml += '    <name>Alakzat ' + (index + 1) + '</name>\n';
                    
                    // Típus alapján megfelelő stílus és koordináták
                    if (featureType === 'Point') {
                        styleUrl = '#pointStyle';
                        kml += '    <styleUrl>' + styleUrl + '</styleUrl>\n';
                        kml += '    <Point>\n';
                        kml += '      <coordinates>' + coordinates[0] + ',' + coordinates[1] + '</coordinates>\n';
                        kml += '    </Point>\n';
                    } 
                    else if (featureType === 'LineString') {
                        styleUrl = '#lineStyle';
                        kml += '    <styleUrl>' + styleUrl + '</styleUrl>\n';
                        kml += '    <LineString>\n';
                        kml += '      <coordinates>\n        ';
                        
                        coordinates.forEach(function(coord) {
                            kml += coord[0] + ',' + coord[1] + ' ';
                        });
                        
                        kml += '\n      </coordinates>\n';
                        kml += '    </LineString>\n';
                    } 
                    else if (featureType === 'Polygon') {
                        styleUrl = '#polygonStyle';
                        kml += '    <styleUrl>' + styleUrl + '</styleUrl>\n';
                        kml += '    <Polygon>\n';
                        kml += '      <outerBoundaryIs>\n';
                        kml += '        <LinearRing>\n';
                        kml += '          <coordinates>\n            ';
                        
                        // Külső gyűrű
                        coordinates[0].forEach(function(coord) {
                            kml += coord[0] + ',' + coord[1] + ' ';
                        });
                        
                        kml += '\n          </coordinates>\n';
                        kml += '        </LinearRing>\n';
                        kml += '      </outerBoundaryIs>\n';
                        
                        // Belső gyűrűk (ha vannak)
                        if (coordinates.length > 1) {
                            for (var i = 1; i < coordinates.length; i++) {
                                kml += '      <innerBoundaryIs>\n';
                                kml += '        <LinearRing>\n';
                                kml += '          <coordinates>\n            ';
                                
                                coordinates[i].forEach(function(coord) {
                                    kml += coord[0] + ',' + coord[1] + ' ';
                                });
                                
                                kml += '\n          </coordinates>\n';
                                kml += '        </LinearRing>\n';
                                kml += '      </innerBoundaryIs>\n';
                            }
                        }
                        
                        kml += '    </Polygon>\n';
                    }
                    // Egyéb geometria típusok, pl. Circle, amit Leaflet Polygon-ként kezel
                    else if (featureType === 'GeometryCollection') {
                        // Komplex geometriák kezelése...
                        // Egyszerűsítés miatt most kihagyjuk
                        kml += '    <description>Komplex geometria típus</description>\n';
                    }
                    
                    kml += '  </Placemark>\n';
                });
            }
            
            kml += '</Document>\n';
            kml += '</kml>';
            
            return kml;
        }
        
        // Exportálás KML formátumba - saját implementáció
        document.getElementById('export-kml').addEventListener('click', function() {
            var data = drawnItems.toGeoJSON();
            var kml = geoJSONtoKML(data);
            document.getElementById('export-output').value = kml;
        });
        
        // Mentés fájlba
        document.getElementById('save-file').addEventListener('click', function() {
            var content = document.getElementById('export-output').value;
            if (!content) {
                alert('Először exportáld az alakzatokat!');
                return;
            }
            
            var type = "application/json"; // Alapértelmezett GeoJSON
            var filename = "terkep_alakzatok.geojson";
            
            // Ha KML-t tartalmaz, módosítjuk a típust
            if (content.includes('<?xml') || content.includes('<kml')) {
                type = "application/vnd.google-earth.kml+xml";
                filename = "terkep_alakzatok.kml";
            }
            
            var blob = new Blob([content], { type: type });
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = filename;
            
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
        
        // Kezdeti állapot beállítása
        updateShapeCount();
    </script>
</body>
</html