{"id":18616,"date":"2025-09-07T09:00:26","date_gmt":"2025-09-07T08:00:26","guid":{"rendered":"https:\/\/letrat.eu\/?p=18616"},"modified":"2026-02-01T15:14:53","modified_gmt":"2026-02-01T14:14:53","slug":"republic-of-kosovo-hydrography-map-test-1","status":"publish","type":"post","link":"https:\/\/letrat.eu\/?p=18616","title":{"rendered":"Republic of Kosovo &#8211; Hydrography (Map Test 1)"},"content":{"rendered":"<p><em>&#8230;testing the integration of data-points in maps, by using Leaflet&#8217;s scripts (behind which stands Volodymyr Agafonkin, an Ukrainian, from Kyiv). It can be expanded and used for many things involving interactive maps and geo-spatial elements. Of course, this isn&#8217;t something &#8216;new&#8217;, it can be done by using Google maps, Meta maps, Microsoft Maps etc., we just wanted to make our own simple solution, clean, unpolluted : ) &#8211; S. Guraziu, Sky Division &#038; Logios, 2025)<\/em><\/p>\n<p>See also:<br \/>\n<strong>The Three Gorges Dam &#8211; A Monument of Power and Sacrifice<\/strong><br \/>\n[ https:\/\/letrat.eu\/?p=18615 ]<br \/>\n&nbsp;<\/p>\n<div id=\"kos_hydroMap\" style=\"width:100%;max-width:800px;height:620px;margin:10px auto;border:1px solid #ccc\"><\/div>\n<p><script>\n\/\/<![CDATA[\nfunction initMap() {\n\n\/\/ Create the map centered on the world\n    \/\/var map = L.map('kos_hydroMap').setView([20, 0], 2);\n\n\n\n    \/\/ Centered on Wuhan\n    \/\/var map = L.map('kos_hydroMap').setView([42.6833, 20.2667], 8); \n     var map = L.map('kos_hydroMap').setView([42.938512, 20.629282], 14);\n\n\nL.tileLayer('https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/World_Imagery\/MapServer\/tile\/{z}\/{y}\/{x}', {\nattribution: 'Esri'\n}).addTo(map);\n\n\/\/ Clean Esri map\n\/\/L.tileLayer('https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/World_Topo_Map\/MapServer\/tile\/{z}\/{y}\/{x}', {\n\/\/attribution: 'Esri, OpenStreet'\n\/\/}).addTo(map);\n\n\n    \/\/ Create layer groups\n    var hydrographyLayer = L.layerGroup();    \/\/ Water bodies (lakes, rivers)\n    var engineeringLayer = L.layerGroup();    \/\/ Engineering projects\n    var floodLayer = L.layerGroup();          \/\/ Historical floods\n    var historicalLayer = L.layerGroup();     \/\/ Ancient historical sites\n\n    \/\/ Add all layers to map\n    hydrographyLayer.addTo(map);\n    engineeringLayer.addTo(map);\n    floodLayer.addTo(map);\n    historicalLayer.addTo(map);\n\n    \/\/ Color palette function\n    function getColorByType(type) {\n        return type === \"hydrography\" ? \"#3498DB\" :   \/\/ Blue - Water bodies\n               type === \"engineering\" ? \"#27AE60\" :   \/\/ Green - Engineering\n               type === \"flood\" ? \"#E74C3C\" :         \/\/ Red - Floods\n               type === \"historical\" ? \"#8E44AD\" :    \/\/ Purple - Historical\n               \"#95A5A6\";                             \/\/ Gray - Other\n    }\n\n    \/\/ Size function based on importance\n    function getSizeByImportance(importance) {\n        return importance === \"major\" ? 10 :\n               importance === \"medium\" ? 8 :\n               importance === \"minor\" ? 6 :\n               4;\n    }\n\n    \n\n\n\n\/\/ 1. HYDROGRAPHY DATA (Lakes, Rivers)\n    var hydrographyData = [\n\n {\n        name: \"Ujman Lake (Liqeni i Ujmanit)\", \n        type: \"lake\",\n        lat: 42.938512, \n        lng: 20.629282,\n        note: \"Coordinates: 42\u00b057'42'N 20\u00b034'1'E | Location: North Kosovo, and Serbia | Basin Countries: Kosovo, Serbia | Primary Inflows: Ibar River | Primary Outflows: Ibar River | Length: 16.5 km | Width: 1.10 km | Surface Area: 11.9 km\u00b2 | Max Depth: 105 m | Elevation: 694 m | Type: Reservoir | Volume: 380,000 m\u00b3 | World Rank: #2445\"\n    },\n{\n    name: \"Badovc Lake (Liqeni i Badovcit)\", \n    type: \"lake\",\n        lat: 42.619840, \n        lng: 21.236624,\n    note: \"Coordinates: 42.6234\u00b0N 21.2412\u00b0E | Location: Gra\u00e7anica, Kosovo | Basin Country: Kosovo | Primary Inflows: Gra\u00e7anica River | Catchment Area: 109 km\u00b2 | Length: 4.6 km | Width: 0.5 km | Surface Area: 2.57 km\u00b2 | Max Depth: 30 m | Elevation: 655 m | Type: Reservoir, Artificial lake near Prishtina, used for water supply | Volume: 26 million m\u00b3 | World Rank: #4291\"\n},\n{\n    name: \"Batllava Lake (Liqeni i Batllav\u00ebs)\", \n    type: \"lake\",\n    lat: 42.821667, \n    lng: 21.307778,\n    note: \"Coordinates: 42\u00b049'18'N 21\u00b018'28'E | Location: Podujev\u00eb, Kosovo | Basin Country: Kosovo | Primary Inflows: Batllava River | Length: 6 km | Width: 700 m | Surface Area: 3.27 km\u00b2 | Average Depth: 35 m | Max Depth: 48 m | Elevation: 648 m | Type: Reservoir | World Rank: #3727\"\n},\n    {\n        name: \"Dukagjini Lake\", \n        type: \"lake\",\n        lat: 42.483882, \n        lng: 20.420756,\n        note: \"Lake in western Kosovo's Dukagjini region\"\n    },\n{\n    name: \"Shutman Lake (Liqeni i Shutmanit)\", \n    type: \"lake\",\n    lat: 41.920278, \n    lng: 20.734167,\n    note: \"Coordinates: 41\u00b055'13'N 20\u00b044'3'E | Location: Dragash, Kosovo | Basin Country: Kosovo | Type: Natural, Glacial lake | Length: 160 m | Width: 100 m | Max Depth: 1.10 m | Elevation: 2070 m\",\n    image: \"https:\/\/letrat.eu\/wp-content\/uploads\/2025\/07\/skyd7_liqeni_i_shutmanit_1600_px_opt1_ph-300x230.jpg\"\n},\n{\n    name: \"Gjeravica Lakes (Liqenet e Gjeravic\u00ebs)\", \n    type: \"lake\",\n     lat: 42.530814, \n     lng: 20.135116,\n    note: \"Coordinates: 42\u00b031'51'N 20\u00b08'6'E | Location: Gjeravica mountain, Kosovo | Basin Country: Kosovo | Primary Outflows: Erenik river | Length: 240 m | Width: 120 m | Surface Area: 0.02 km\u00b2 | Average Depth: 1.7 m | Max Depth: 4 m | Elevation: 2200 m | Type: Natural, Glacial lake | World Rank: #6800\"\n},\n    {\n        name: \"G\u00ebrmia Swimming Pool\", \n        type: \"pool\",\n        lat: 42.673582, \n        lng: 21.200662,\n        note: \"Swimming facility in G\u00ebrmia Park\"\n    },\n    {\n        name: \"Ilixha e Banj\u00ebs\", \n        type: \"thermal-spring\",\n        lat: 42.464382, \n        lng: 20.777969,\n        note: \"Natural thermal springs with therapeutic properties\"\n    }\n];\n\n    \/\/ 2. ENGINEERING MARVELS DATA\n    var engineeringData = [\n\n    {\n        name: \"Pristina Airport\", \n        type: \"airport\",\n        lat: 42.574508, \n        lng: 21.029613,\n        note: \"Adem Jashari Prishtina International Airport\"\n    }\n    ];\n\n    \/\/ 3. HISTORICAL FLOOD DATA\n    var floodData = [\n        {\n            year: 1931, \n            name: \"Yangtze River Cataclysmic Flood\",\n            casualties: \"2.5M+\", \n            importance: \"major\",\n            lat: 30.595105, \n            lng: 114.299179,\n            note: \"Deadliest natural disaster of 20th century, inundated 180,000 km\u00b2\"\n        },\n        {\n            year: 1954,\n            name: \"Great Yangtze Flood\", \n            casualties: \"30,000+\",\n            importance: \"major\",\n            lat: 30.595105, \n            lng: 114.299179,\n            note: \"Prompted first serious plans for Three Gorges Dam\"\n        }\n    ];\n\n\n\n    \/\/ 4. HISTORICAL SITES DATA\n    var historicalData = [\n        {\n            name: \"Dujiangyan Ancient System\",\n            year: -256,\n            type: \"historical\",\n            importance: \"major\",\n            lat: 31.004444, \n            lng: 103.605278,\n            note: \"2,200-year-old irrigation system still functioning today, UNESCO site\"\n        },\n        {\n            name: \"Fengjie Ancient Town\",\n            year: 0,\n            type: \"historical\",\n            importance: \"medium\",\n            lat: 31.046200, \n            lng: 109.523900,\n            note: \"Historic town at the entrance to the Qutang Gorge\"\n        }\n\n    ];\n\n\n\n\n\n\n\n\n\n\n    function addToLayer(dataArray, layer, category) {\n        dataArray.forEach(function(item) {\n            var circle = L.circleMarker([item.lat, item.lng], {\n                color: getColorByType(category),\n                fillColor: getColorByType(category),\n                fillOpacity: 0.8,\n                radius: getSizeByImportance(item.importance || \"medium\"),\n                weight: 2\n            }).addTo(layer);\n\n\n\nvar popupContent = `<strong>${item.name}<\/strong>`;\nif (item.year) popupContent += ` (${item.year})`;\npopupContent += `<br \/>`;\n\nif (item.image) {\n    popupContent += `<img decoding=\"async\" src=\"${item.image}\" style=\"width:100%; max-height:150px; object-fit:cover; border-radius:5px; margin:5px 0;\"><br \/>`;\n}\n\nif (item.area) popupContent += `Area: <strong>${item.area}<\/strong><br \/>`;\nif (item.length) popupContent += `Length: <strong>${item.length}<\/strong><br \/>`;\nif (item.scale) popupContent += `Scale: <strong>${item.scale}<\/strong><br \/>`;\nif (item.casualties) popupContent += `Casualties: <strong>${item.casualties}<\/strong><br \/>`;\n\n\/\/ Add the note with proper line breaks\npopupContent += item.note.replace(\/\\|\/g, '<br \/>');\n\ncircle.bindPopup(popupContent);\n        });\n    }\n\n\n    addToLayer(hydrographyData, hydrographyLayer, \"hydrography\");\n    addToLayer(engineeringData, engineeringLayer, \"engineering\");\n    addToLayer(floodData, floodLayer, \"flood\");\n    addToLayer(historicalData, historicalLayer, \"historical\");\n\n    var overlayMaps = {\n        \"\ud83c\udf0a Water Bodies\": hydrographyLayer,\n        \"\ud83c\udfd7\ufe0f Engineering Projects\": engineeringLayer,\n        \"\ud83c\udf0a Historical Floods\": floodLayer,\n        \"\ud83c\udfdb\ufe0f Historical Sites\": historicalLayer\n    };\n    \n    L.control.layers(null, overlayMaps, {position: 'topright', collapsed: true}).addTo(map);\n\n    var legend = L.control({position: 'bottomright'});\n    legend.onAdd = function(map) {\n        var div = L.DomUtil.create('div', 'info legend');\n        div.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';\n        div.style.padding = '12px';\n        div.style.borderRadius = '8px';\n        div.style.border = '1px solid #ddd';\n        div.style.boxShadow = '0 2px 6px rgba(0,0,0,0.2)';\n        \n        div.innerHTML = `\n            \n\n<h4 style=\"margin:0 0 10px 0; border-bottom:1px solid #eee; padding-bottom:5px;\">Map Legend<\/h4>\n\n\n            \n\n<div><span style=\"background:#3498DB; width:12px; height:12px; display:inline-block; border-radius:50%; margin-right:5px;\"><\/span> Water Bodies<\/div>\n\n\n            \n\n<div><span style=\"background:#27AE60; width:12px; height:12px; display:inline-block; border-radius:50%; margin-right:5px;\"><\/span> Engineering Projects<\/div>\n\n\n            \n\n<div><span style=\"background:#E74C3C; width:12px; height:12px; display:inline-block; border-radius:50%; margin-right:5px;\"><\/span> Historical Floods<\/div>\n\n\n            \n\n<div><span style=\"background:#8E44AD; width:12px; height:12px; display:inline-block; border-radius:50%; margin-right:5px;\"><\/span> Historical Sites<\/div>\n\n\n            \n\n<hr style=\"margin:8px 0;\">\n            <small>Circle size indicates importance<\/small>\n        `;\n        return div;\n    };\n    legend.addTo(map);\n}\n\nif (window.topojson) {\n    initMap();\n} else {\n    window.addEventListener('load', initMap);\n}\n\/\/]]>\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8230;testing the integration of data-points in maps, by using Leaflet&#8217;s scripts (behind which stands Volodymyr Agafonkin, an Ukrainian, from Kyiv). It can be expanded and used for many things involving interactive maps and geo-spatial elements. Of course, this isn&#8217;t something&hellip; <a href=\"https:\/\/letrat.eu\/?p=18616\" class=\"more-link\">Lexo <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[],"class_list":["post-18616","post","type-post","status-publish","format-standard","hentry","category-skyd"],"_links":{"self":[{"href":"https:\/\/letrat.eu\/index.php?rest_route=\/wp\/v2\/posts\/18616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/letrat.eu\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/letrat.eu\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/letrat.eu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/letrat.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=18616"}],"version-history":[{"count":0,"href":"https:\/\/letrat.eu\/index.php?rest_route=\/wp\/v2\/posts\/18616\/revisions"}],"wp:attachment":[{"href":"https:\/\/letrat.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=18616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/letrat.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=18616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/letrat.eu\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=18616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}