<!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ő - OpenLayers</title>
    <!-- OpenLayers CSS https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/ol.min.css-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.3.0/ol.css">
    <!-- OpenLayers JavaScript https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/ol.js -->
    <script src="https://cdn.jsdelivr.net/npm/ol@v7.3.0/dist/ol.js"></script>

    <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;
        }
        .draw-controls {
            margin-bottom: 15px;
        }
        .draw-btn {
            margin: 2px;
            padding: 5px 10px;
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 3px;
            cursor: pointer;
        }
        .draw-btn:hover {
            background-color: #e8e8e8;
        }
        .draw-btn.active {
            background-color: #3498db;
            color: white;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>Térképi Szerkesztő - OpenLayers</h1>
    </div>
    
    <div id="container">
        <div id="map"></div>
        <div id="sidebar">
            <div class="info">
                <h2>Használat</h2>
                <p>Válassz egy rajzolási eszközt, majd rajzolj a térképen. Ezután exportálhatod az eredményt.</p>
            </div>
            
            <h2>Rajzolási eszközök</h2>
            <div class="draw-controls">
                <button id="btn-point" class="draw-btn">Pont</button>
                <button id="btn-line" class="draw-btn">Vonal</button>
                <button id="btn-polygon" class="draw-btn">Poligon</button>
                <button id="btn-circle" class="draw-btn">Kör</button>
                <button id="btn-rectangle" class="draw-btn">Téglalap</button>
                <button id="btn-modify" class="draw-btn">Módosítás</button>
                <button id="btn-delete" class="draw-btn">Törlés</button>
                <button id="btn-none" class="draw-btn active">Navigáció</button>
            </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ő - OpenLayers használatával
    </div>


    
    <script>
        // Globális változók
        let map, source, vector, draw, modify, snap, select;
        let currentInteraction = null;
        let drawType = 'None';
        
        // Térkép inicializálása
        function initMap() {
            // Vektorforrás az alakzatok tárolásához
            source = new ol.source.Vector();
            
            // Vektorréteg
            vector = new ol.layer.Vector({
                source: source,
                style: new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: 'rgba(51, 153, 204, 0.2)'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#3399CC',
                        width: 2
                    }),
                    image: new ol.style.Circle({
                        radius: 7,
                        fill: new ol.style.Fill({
                            color: '#3399CC'
                        })
                    })
                })
            });
            
            // OpenLayers térkép létrehozása
            map = new ol.Map({
                target: 'map',
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.OSM()
                    }),
                    vector
                ],
                view: new ol.View({
                    center: ol.proj.fromLonLat([19.040, 47.498]), // Budapest
                    zoom: 13
                })
            });
            
            // Interakciók inicializálása
            initInteractions();
            
            // Eseményfigyelők hozzáadása
            addEventListeners();
            
            // Alakzatok számának frissítése
            updateShapeCount();
        }
        
        // Interakciók inicializálása
        function initInteractions() {
            // Kiválasztás interakció
            select = new ol.interaction.Select();
            map.addInteraction(select);
            
            // Módosítás interakció (inaktív alapértelmezetten)
            modify = new ol.interaction.Modify({
                source: source
            });
            
            // Snap interakció a pontosabb rajzoláshoz
            snap = new ol.interaction.Snap({
                source: source
            });
            map.addInteraction(snap);
        }
        
        // Rajzolási interakció létrehozása
        function createDrawInteraction(type) {
            let geometryFunction;
            let drawOptions = {
                source: source,
                type: type
            };
            
            // Speciális geometria típusok kezelése
            if (type === 'Circle') {
                drawOptions.type = 'Circle';
            } else if (type === 'Rectangle') {
                drawOptions.type = 'Circle';
                geometryFunction = ol.interaction.Draw.createBox();
                drawOptions.geometryFunction = geometryFunction;
            }
            
            // Interakció létrehozása
            draw = new ol.interaction.Draw(drawOptions);
            
            // Feature hozzáadása után frissítjük a számlálót
            draw.on('drawend', function() {
                updateShapeCount();
            });
            
            return draw;
        }
        
        // Aktív interakció beállítása
        function setActiveInteraction(interactionType) {
            // Előző interakció eltávolítása
            if (currentInteraction) {
                map.removeInteraction(currentInteraction);
            }
            
            // Módosítás interakció eltávolítása, ha aktív volt
            map.removeInteraction(modify);
            
            // Új interakció beállítása
            if (interactionType === 'None') {
                // Nincs interakció, csak navigáció
                currentInteraction = null;
                drawType = 'None';
            } else if (interactionType === 'Modify') {
                // Módosítás mód
                map.addInteraction(modify);
                currentInteraction = modify;
                drawType = 'Modify';
            } else if (interactionType === 'Delete') {
                // Törlés mód
                // Kiválasztott feature törlésére használjuk a select interakciót
                select.on('select', function(e) {
                    // Töröljük a kiválasztott elemeket
                    e.selected.forEach(function(feature) {
                        source.removeFeature(feature);
                    });
                    updateShapeCount();
                });
                currentInteraction = select;
                drawType = 'Delete';
            } else {
                // Rajzolási mód
                currentInteraction = createDrawInteraction(interactionType);
                map.addInteraction(currentInteraction);
                drawType = interactionType;
            }
            
            // Actív gomb kiemelése
            updateActiveButton();
        }
        
        // Aktív gomb frissítése
        function updateActiveButton() {
            document.querySelectorAll('.draw-btn').forEach(function(btn) {
                btn.classList.remove('active');
            });
            
            // Az aktív gombot kiemeljük
            let buttonId = '';
            switch (drawType) {
                case 'Point': buttonId = 'btn-point'; break;
                case 'LineString': buttonId = 'btn-line'; break;
                case 'Polygon': buttonId = 'btn-polygon'; break;
                case 'Circle': buttonId = 'btn-circle'; break;
                case 'Rectangle': buttonId = 'btn-rectangle'; break;
                case 'Modify': buttonId = 'btn-modify'; break;
                case 'Delete': buttonId = 'btn-delete'; break;
                default: buttonId = 'btn-none'; break;
            }
            
            if (buttonId) {
                document.getElementById(buttonId).classList.add('active');
            }
        }
        
        // Alakzatok számának frissítése
        function updateShapeCount() {
            const count = source.getFeatures().length;
            let 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>';
        }
        
        // Exportálás GeoJSON formátumba
        function exportToGeoJSON() {
            const features = source.getFeatures();
            
            if (features.length === 0) {
                return { type: "FeatureCollection", features: [] };
            }
            
            // Geometriai objektumok klónozása és átalakítása GeoJSON-ba
            const geoJsonFeatures = features.map(function(feature) {
                // Klónozás, hogy ne módosítsuk az eredeti objektumot
                const clone = feature.clone();
                
                // Körök átalakítása poligonná (OpenLayers körök nem kompatibilisek GeoJSON-nal)
                const geom = clone.getGeometry();
                if (geom instanceof ol.geom.Circle) {
                    // Poligonná alakítás a kör köré
                    const polygon = ol.geom.Polygon.fromCircle(geom, 64);
                    clone.setGeometry(polygon);
                }
                
                // Geometria transzformálása EPSG:3857-ből EPSG:4326-ba (WGS84)
                const transformedGeom = clone.getGeometry().transform('EPSG:3857', 'EPSG:4326');
                clone.setGeometry(transformedGeom);
                
                return clone;
            });
            
            // GeoJSON formátum létrehozása
            const writer = new ol.format.GeoJSON();
            const geoJsonStr = writer.writeFeatures(geoJsonFeatures);
            
            return JSON.parse(geoJsonStr);
        }
        
        // GeoJSON átalakítása KML formátumba - saját implementáció
        function geoJSONtoKML(geojson) {
            // KML fejléc
            let 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) {
                    const featureType = feature.geometry.type;
                    let styleUrl = "";
                    const 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 (let 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
                    else if (featureType === 'GeometryCollection') {
                        kml += '    <description>Komplex geometria típus</description>\n';
                    }
                    
                    kml += '  </Placemark>\n';
                });
            }
            
            kml += '</Document>\n';
            kml += '</kml>';
            
            return kml;
        }
        
        // Eseményfigyelők hozzáadása
        function addEventListeners() {
            // Rajzolási eszközök eseménykezelői
            document.getElementById('btn-point').addEventListener('click', function() {
                setActiveInteraction('Point');
            });
            
            document.getElementById('btn-line').addEventListener('click', function() {
                setActiveInteraction('LineString');
            });
            
            document.getElementById('btn-polygon').addEventListener('click', function() {
                setActiveInteraction('Polygon');
            });
            
            document.getElementById('btn-circle').addEventListener('click', function() {
                setActiveInteraction('Circle');
            });
            
            document.getElementById('btn-rectangle').addEventListener('click', function() {
                setActiveInteraction('Rectangle');
            });
            
            document.getElementById('btn-modify').addEventListener('click', function() {
                setActiveInteraction('Modify');
            });
            
            document.getElementById('btn-delete').addEventListener('click', function() {
                setActiveInteraction('Delete');
            });
            
            document.getElementById('btn-none').addEventListener('click', function() {
                setActiveInteraction('None');
            });
            
            // Műveletek eseménykezelői
            document.getElementById('clear-all').addEventListener('click', function() {
                source.clear();
                updateShapeCount();
                document.getElementById('export-output').value = '';
            });
            
            document.getElementById('export-geojson').addEventListener('click', function() {
                const geojson = exportToGeoJSON();
                document.getElementById('export-output').value = JSON.stringify(geojson, null, 2);
            });
            
            document.getElementById('export-kml').addEventListener('click', function() {
                const geojson = exportToGeoJSON();
                const kml = geoJSONtoKML(geojson);
                document.getElementById('export-output').value = kml;
            });
            
            document.getElementById('save-file').addEventListener('click', function() {
                const content = document.getElementById('export-output').value;
                if (!content) {
                    alert('Először exportáld az alakzatokat!');
                    return;
                }
                
                let type = "application/json"; // Alapértelmezett GeoJSON
                let 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";
                }
                
                const blob = new Blob([content], { type: type });
                const link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = filename;
                
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        }
        
        // Térkép és funkciók inicializálása
        document.addEventListener('DOMContentLoaded', function() {
            initMap();
        });
    </script>
</body>
</html>