<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<div id="map" style="width: 100%; height: 500px; border-radius: 8px;"></div>

<script>
var map = L.map('map').setView([48.115, 17.110], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// Tieto dve testovacie zóny sme natvrdo zapísali do kódu - netreba nič nahrávať
var mojeData = {
  "type": "FeatureCollection",
  "features": [
    { "type": "Feature", "properties": { "FID": 9568, "hodnota": 0.221 }, "geometry": { "type": "Polygon", "coordinates": [[[17.110, 48.115], [17.112, 48.115], [17.112, 48.117], [17.110, 48.117], [17.110, 48.115]]] } },
    { "type": "Feature", "properties": { "FID": 9569, "hodnota": 0.850 }, "geometry": { "type": "Polygon", "coordinates": [[[17.112, 48.115], [17.114, 48.115], [17.114, 48.117], [17.112, 48.117], [17.112, 48.115]]] } }
  ]
};

function getColor(d) { return d > 0.7 ? '#800026' : '#238B45'; }

L.geoJSON(mojeData, {
    style: function(feature) { return { fillColor: getColor(feature.properties.hodnota), weight: 1, color: 'white', fillOpacity: 0.6 }; },
    onEachFeature: function(feature, layer) {
        layer.bindPopup("<strong>Zóna ID: " + feature.properties.FID + "</strong><br>Riziko: " + feature.properties.hodnota);
    }
}).addTo(map);
</script>