{"id":18614,"date":"2024-09-09T09:00:37","date_gmt":"2024-09-09T08:00:37","guid":{"rendered":"https:\/\/letrat.eu\/?p=18614"},"modified":"2025-10-17T21:43:07","modified_gmt":"2025-10-17T20:43:07","slug":"leaflet-maps-disaster-map-test","status":"publish","type":"post","link":"https:\/\/letrat.eu\/?p=18614","title":{"rendered":"Leaflet &#038; Maps (Disaster Map &#8211; Test)"},"content":{"rendered":"<p>\u2026<em>testing the integration of data-points in maps, by using Leaflet\u2019s 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\u2019t something \u2018new\u2019, it can be done by using Google maps, Meta maps, Microsoft Maps etc., we just wanted to make our own simple solution, clean, unpolluted : ) \u2013 S. Guraziu, Sky Division &#038; Logios, 2025)<\/em><\/p>\n<p>See also:<br \/>\nThe Three Gorges Dam \u2013 A Monument of Power and Sacrifice<br \/>\n[ <a href=\"https:\/\/letrat.eu\/?p=18615\">https:\/\/letrat.eu\/?p=18615<\/a> ]<br \/>\n&nbsp;<\/p>\n<div id=\"disasterMap\" style=\"width:100%;max-width:800px;height:620px;margin:10px auto;border:1px solid #ccc\"><\/div>\n<p><script>\n\/\/<![CDATA[\nfunction initMap() {\n    \/\/ NATURAL DISASTERS DATA WITH COORDINATES\n   \n\n\nvar disasterData = [\n    \/\/ Earthquakes\n    {name: \"1906 San Francisco Earthquake\", year: 1906, casualties: \"3,000+\", type: \"earthquake\", magnitude: \"7.9\", lat: 37.77, lng: -122.42},\n    {name: \"1976 Tangshan Earthquake\", year: 1976, casualties: \"242,000+\", type: \"earthquake\", magnitude: \"7.6\", lat: 39.63, lng: 118.18},\n    {name: \"1908 Messina Earthquake\", year: 1908, casualties: \"80,000+\", type: \"earthquake\", magnitude: \"7.1\", lat: 38.18, lng: 15.55},\n    {name: \"2005 Kashmir Earthquake\", year: 2005, casualties: \"87,000+\", type: \"earthquake\", magnitude: \"7.6\", lat: 34.45, lng: 73.65},\n    {name: \"2010 Haiti Earthquake\", year: 2010, casualties: \"160,000+\", type: \"earthquake\", magnitude: \"7.0\", lat: 18.44, lng: -72.57},\n    {name: \"1923 Great Kant\u014d Earthquake\", year: 1923, casualties: \"105,000+\", type: \"earthquake\", magnitude: \"7.9\", lat: 35.33, lng: 139.15},\n    {name: \"2001 Gujarat Earthquake\", year: 2001, casualties: \"20,000+\", type: \"earthquake\", magnitude: \"7.7\", lat: 23.40, lng: 70.28},\n    {name: \"1999 \u0130zmit Earthquake\", year: 1999, casualties: \"17,000+\", type: \"earthquake\", magnitude: \"7.6\", lat: 40.70, lng: 29.91},\n    {name: \"1970 Ancash Earthquake\", year: 1970, casualties: \"70,000+\", type: \"earthquake\", magnitude: \"7.9\", lat: -9.25, lng: -77.52},\n    {name: \"1935 Quetta Earthquake\", year: 1935, casualties: \"30,000+\", type: \"earthquake\", magnitude: \"7.7\", lat: 30.18, lng: 67.00},\n\n    \/\/ Tsunamis\n    {name: \"2004 Indian Ocean Tsunami\", year: 2004, casualties: \"227,898\", type: \"tsunami\", magnitude: \"9.1\", lat: -4.14, lng: 96.12},\n    {name: \"2011 T\u014dhoku Earthquake &#038; Tsunami\", year: 2011, casualties: \"15,897\", type: \"tsunami\", magnitude: \"9.1\", lat: 38.25, lng: 141.00},\n    {name: \"1755 Lisbon Tsunami\", year: 1755, casualties: \"60,000+\", type: \"tsunami\", magnitude: \"8.5\", lat: 38.70, lng: -9.20},\n    {name: \"1883 Krakatoa Tsunami\", year: 1883, casualties: \"36,000+\", type: \"tsunami\", magnitude: \"6.0\", lat: -6.10, lng: 105.42},\n    {name: \"1896 Meiji-Sanriku Tsunami\", year: 1896, casualties: \"22,000+\", type: \"tsunami\", magnitude: \"7.6\", lat: 39.50, lng: 144.00},\n    {name: \"1960 Valdivia Tsunami\", year: 1960, casualties: \"6,000+\", type: \"tsunami\", magnitude: \"9.5\", lat: -38.24, lng: -73.05},\n    {name: \"1946 Aleutian Tsunami\", year: 1946, casualties: \"165+\", type: \"tsunami\", magnitude: \"8.6\", lat: 53.49, lng: -163.06},\n    {name: \"1993 Hokkaid\u014d Tsunami\", year: 1993, casualties: \"197\", type: \"tsunami\", magnitude: \"7.8\", lat: 42.85, lng: 139.20},\n    {name: \"2006 Java Tsunami\", year: 2006, casualties: \"802\", type: \"tsunami\", magnitude: \"7.7\", lat: -9.22, lng: 107.32},\n    {name: \"2018 Sulawesi Tsunami\", year: 2018, casualties: \"4,340\", type: \"tsunami\", magnitude: \"7.5\", lat: -0.18, lng: 119.84},\n\n    \/\/ Volcanic Eruptions\n    {name: \"1883 Krakatoa Eruption\", year: 1883, casualties: \"36,000+\", type: \"volcano\", VEI: \"6\", lat: -6.10, lng: 105.42},\n    {name: \"79 AD Mount Vesuvius Eruption\", year: 79, casualties: \"16,000+\", type: \"volcano\", VEI: \"5\", lat: 40.82, lng: 14.43},\n    {name: \"1815 Mount Tambora Eruption\", year: 1815, casualties: \"71,000+\", type: \"volcano\", VEI: \"7\", lat: -8.25, lng: 118.00},\n    {name: \"1902 Mount Pel\u00e9e Eruption\", year: 1902, casualties: \"30,000+\", type: \"volcano\", VEI: \"4\", lat: 14.82, lng: -61.17},\n    {name: \"1985 Nevado del Ruiz Eruption\", year: 1985, casualties: \"23,000+\", type: \"volcano\", VEI: \"3\", lat: 4.89, lng: -75.32},\n    {name: \"1991 Mount Pinatubo Eruption\", year: 1991, casualties: \"847\", type: \"volcano\", VEI: \"6\", lat: 15.13, lng: 120.35},\n    {name: \"2010 Eyjafjallaj\u00f6kull Eruption\", year: 2010, casualties: \"0\", type: \"volcano\", VEI: \"4\", lat: 63.63, lng: -19.62},\n    {name: \"1783 Laki Eruption\", year: 1783, casualties: \"9,000+\", type: \"volcano\", VEI: \"6\", lat: 64.07, lng: -18.25},\n    {name: \"1912 Novarupta Eruption\", year: 1912, casualties: \"0\", type: \"volcano\", VEI: \"6\", lat: 58.27, lng: -155.16},\n    {name: \"1980 Mount St. Helens Eruption\", year: 1980, casualties: \"57\", type: \"volcano\", VEI: \"5\", lat: 46.20, lng: -122.18},\n\n    \/\/ Hurricanes\/Cyclones\/Typhoons\n    {name: \"2005 Hurricane Katrina\", year: 2005, casualties: \"1,836\", type: \"hurricane\", category: \"5\", lat: 29.95, lng: -90.07},\n    {name: \"1970 Bhola Cyclone\", year: 1970, casualties: \"300,000+\", type: \"hurricane\", category: \"3\", lat: 22.50, lng: 91.20},\n    {name: \"1991 Bangladesh Cyclone\", year: 1991, casualties: \"138,000+\", type: \"hurricane\", category: \"5\", lat: 22.50, lng: 91.20},\n    {name: \"2008 Cyclone Nargis\", year: 2008, casualties: \"138,000+\", type: \"hurricane\", category: \"4\", lat: 16.00, lng: 94.50},\n    {name: \"1900 Galveston Hurricane\", year: 1900, casualties: \"8,000+\", type: \"hurricane\", category: \"4\", lat: 29.30, lng: -94.80},\n    {name: \"1928 Okeechobee Hurricane\", year: 1928, casualties: \"4,000+\", type: \"hurricane\", category: \"5\", lat: 27.20, lng: -80.80},\n    {name: \"1935 Labor Day Hurricane\", year: 1935, casualties: \"408\", type: \"hurricane\", category: \"5\", lat: 24.60, lng: -81.40},\n    {name: \"1992 Hurricane Andrew\", year: 1992, casualties: \"65\", type: \"hurricane\", category: \"5\", lat: 25.50, lng: -80.30},\n    {name: \"2013 Typhoon Haiyan\", year: 2013, casualties: \"6,300+\", type: \"hurricane\", category: \"5\", lat: 11.00, lng: 125.00},\n    {name: \"2017 Hurricane Maria\", year: 2017, casualties: \"3,059\", type: \"hurricane\", category: \"5\", lat: 18.20, lng: -66.50},\n\n    \/\/ Floods\n    {name: \"1931 China Floods\", year: 1931, casualties: \"2,500,000+\", type: \"flood\", area: \"Yangtze River\", lat: 30.60, lng: 114.30},\n    {name: \"1887 Yellow River Flood\", year: 1887, casualties: \"900,000+\", type: \"flood\", area: \"Yellow River\", lat: 34.90, lng: 114.50},\n    {name: \"1938 Yellow River Flood\", year: 1938, casualties: \"500,000+\", type: \"flood\", area: \"Yellow River\", lat: 34.90, lng: 114.50},\n    {name: \"2004 Indian Ocean Flood\", year: 2004, casualties: \"227,898\", type: \"flood\", cause: \"Tsunami\", lat: -4.14, lng: 96.12},\n    {name: \"2010 Pakistan Floods\", year: 2010, casualties: \"1,985\", type: \"flood\", duration: \"5 months\", lat: 30.00, lng: 70.00},\n    {name: \"1993 Mississippi Flood\", year: 1993, casualties: \"50\", type: \"flood\", duration: \"5 months\", lat: 38.80, lng: -90.70},\n    {name: \"1953 North Sea Flood\", year: 1953, casualties: \"2,551\", type: \"flood\", countries: \"6 affected\", lat: 52.00, lng: 4.00},\n    {name: \"1966 Florence Flood\", year: 1966, casualties: \"101\", type: \"flood\", damage: \"Art treasures\", lat: 43.77, lng: 11.26},\n    {name: \"2005 Mumbai Floods\", year: 2005, casualties: \"1,094\", type: \"flood\", rainfall: \"944mm\/24h\", lat: 19.08, lng: 72.88},\n    {name: \"2011 Thailand Floods\", year: 2011, casualties: \"815\", type: \"flood\", duration: \"5 months\", lat: 13.75, lng: 100.50},\n\n    \/\/ Other Disasters\n    {name: \"1937 Hindenburg Disaster\", year: 1937, casualties: \"36\", type: \"accident\", cause: \"Airship fire\", lat: 40.03, lng: -74.33},\n    {name: \"1984 Bhopal Gas Tragedy\", year: 1984, casualties: \"3,787+\", type: \"industrial\", cause: \"Gas leak\", lat: 23.28, lng: 77.41},\n    {name: \"1986 Chernobyl Disaster\", year: 1986, casualties: \"31+\", type: \"nuclear\", level: \"7\", lat: 51.39, lng: 30.10},\n    {name: \"2011 Fukushima Disaster\", year: 2011, casualties: \"573+\", type: \"nuclear\", level: \"7\", lat: 37.42, lng: 141.03},\n    {name: \"2003 European Heat Wave\", year: 2003, casualties: \"70,000+\", type: \"heatwave\", countries: \"16 affected\", lat: 48.86, lng: 2.35},\n    {name: \"1930s Dust Bowl\", year: 1935, casualties: \"7,000+\", type: \"drought\", duration: \"8 years\", lat: 37.00, lng: -100.00},\n    {name: \"1986 Lake Nyos Disaster\", year: 1986, casualties: \"1,746\", type: \"limnic\", cause: \"CO2 release\", lat: 6.44, lng: 10.30},\n    {name: \"1952 London Smog\", year: 1952, casualties: \"12,000+\", type: \"pollution\", duration: \"5 days\", lat: 51.51, lng: -0.13},\n    {name: \"1995 Chicago Heat Wave\", year: 1995, casualties: \"739\", type: \"heatwave\", duration: \"5 days\", lat: 41.88, lng: -87.63},\n    {name: \"2003 Bam Earthquake\", year: 2003, casualties: \"26,271\", type: \"earthquake\", magnitude: \"6.6\", lat: 29.10, lng: 58.35}\n];\n\n\n\n\n    \/\/ Function to get color based on disaster type\nfunction getDisasterColor(type) {\n    return type == \"earthquake\" ? \"#E74C3C\" :\n           type == \"tsunami\" ? \"#3498DB\" :  \n           type == \"hurricane\" ? \"#F39C12\" :\n           type == \"volcano\" ? \"#8E44AD\" : \/\/ Purple for volcanoes\n           type == \"flood\" ? \"#2980B9\" :   \/\/ Dark blue for floods\n           \"#95A5A6\";\n}\n\n    \/\/ Function to get larger size for more severe disasters\n    function getDisasterSize(casualties) {\n        var count = parseInt(casualties.replace(\/\\D\/g, '')) || 0;\n        if (count > 100000) return 12;      \/\/ Large circle\n        if (count > 10000) return 9;        \/\/ Medium circle\n        return 6;                           \/\/ Small circle\n    }\n\n    \/\/ Create the map centered on the world\n    var map = L.map('disasterMap').setView([20, 0], 2);\n\n    \/\/ Centered on China\n    \/\/var map = L.map('disasterMap').setView([35.0, 105.0], 4) \n    \n    \/\/ Use the 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 Map'\n    }).addTo(map);\n\n    \/\/ Add visible circle markers for each disaster\n    disasterData.forEach(function(disaster) {\n        \/\/ Create circle marker\n        var circle = L.circleMarker([disaster.lat, disaster.lng], {\n            color: getDisasterColor(disaster.type),\n            fillColor: getDisasterColor(disaster.type),\n            fillOpacity: 0.7,\n            radius: getDisasterSize(disaster.casualties)\n        }).addTo(map);\n\n\n\/\/ Create popup content\n        var popupContent = `\n            <strong>${disaster.name}<\/strong> (${disaster.year})<br \/>\n            Type: <strong>${disaster.type}<\/strong><br \/>\n            Casualties: <strong>${disaster.casualties}<\/strong><br \/>\n            ${disaster.magnitude ? 'Magnitude: <strong>' + disaster.magnitude + '<\/strong><br \/>' : ''}\n            ${disaster.category ? 'Category: <strong>' + disaster.category + '<\/strong><br \/>' : ''}\n            Location: ${disaster.lat.toFixed(2)}\u00b0, ${disaster.lng.toFixed(2)}\u00b0\n        `;\n\n        \/\/ Bind popup to circle\n        circle.bindPopup(popupContent);\n    });\n\n\n\n\/\/ Add legend\nvar legend = L.control({position: 'bottomright'});\nlegend.onAdd = function(map) {\n    var div = L.DomUtil.create('div', 'info legend');\n    \/\/ Add styling for better readability\n    div.style.backgroundColor = 'rgba(255, 255, 255, 0.65)';\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.1)';\n    div.innerHTML = `\n        \n\n<h4>Disaster Types<\/h4>\n\n\n        \n\n<div><span style=\"background:#E74C3C; width:15px; height:15px; display:inline-block; border-radius:50%; margin-right:5px;\"><\/span> Earthquake<\/div>\n\n\n        \n\n<div><span style=\"background:#3498DB; width:15px; height:15px; display:inline-block; border-radius:50%; margin-right:5px;\"><\/span> Tsunami<\/div>\n\n\n        \n\n<div><span style=\"background:#F39C12; width:15px; height:15px; display:inline-block; border-radius:50%; margin-right:5px;\"><\/span> Hurricane<\/div>\n\n\n        \n\n<div><span style=\"background:#95A5A6;width:15px;height:15px;display:inline-block;border-radius:50%;margin-right:5px;\"><\/span> Other<\/div>\n\n\n         \n\n<div style=\"font-size:11px; color:#666; line-height:1.3; margin-top:8px;\">\n                \u26ab 1931 China Floods:<br \/>2.5M+ casualties, Yangtze River basin<br \/>\n                \u26ab 1976 Tangshan Earthquake:<br \/>242K+ casualties, deadliest of century<br \/>\n                \u26ab 2004 Indian Ocean Tsunami:<br \/>227K+ casualties across 14 countries\n                <\/div>\n\n\n        <small>Larger circles = More casualties<\/small>\n    `;\n    return div;\n};\nlegend.addTo(map);\n\n\n}\n\n\/\/ Load the map\nif (window.topojson) {\n    initMap();\n} else {\n    window.addEventListener('load', initMap);\n}\n\/\/]]>\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u2026testing the integration of data-points in maps, by using Leaflet\u2019s 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\u2019t something&hellip; <a href=\"https:\/\/letrat.eu\/?p=18614\" 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-18614","post","type-post","status-publish","format-standard","hentry","category-skyd"],"_links":{"self":[{"href":"https:\/\/letrat.eu\/index.php?rest_route=\/wp\/v2\/posts\/18614","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=18614"}],"version-history":[{"count":0,"href":"https:\/\/letrat.eu\/index.php?rest_route=\/wp\/v2\/posts\/18614\/revisions"}],"wp:attachment":[{"href":"https:\/\/letrat.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=18614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/letrat.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=18614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/letrat.eu\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=18614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}