{"id":2134,"date":"2023-04-17T16:29:53","date_gmt":"2023-04-17T16:29:53","guid":{"rendered":"https:\/\/geopick.cityai.space\/?page_id=2134"},"modified":"2023-05-26T17:26:41","modified_gmt":"2023-05-26T17:26:41","slug":"leaflet","status":"publish","type":"page","link":"https:\/\/geopick.cityai.space\/index.php\/tutorials\/medium\/leaflet\/","title":{"rendered":"Leaflet"},"content":{"rendered":"\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-111b3e9\" data-block-id=\"111b3e9\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-111b3e9-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-445681b\" data-block-id=\"445681b\"><style>@media screen and (min-width:768px){.stk-445681b{flex:1 1 66.7% !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-445681b-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-445681b-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-e2a6d89\" id=\"learning-objectives\" data-block-id=\"e2a6d89\"><h2 class=\"stk-block-heading__text\">Learning objectives:<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-a43078b\" data-block-id=\"a43078b\"><p class=\"stk-block-text__text\">At the end of the lesson, learners should be able to: <\/p><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Understand how to use Leaflet to display a map with OpenStreetMap tiles.<\/li>\n\n\n\n<li>Understand how to add markers and cluster them together with MarkerClusterGroup.<\/li>\n\n\n\n<li>Understand how to fetch and use GeoJSON data to add markers to the map.<\/li>\n\n\n\n<li>Understand how to change the marker color based on magnitude.<\/li>\n\n\n\n<li>Understand how to create a legend to indicate the magnitude of the earthquakes.<\/li>\n\n\n\n<li>Understand how to add a print button to the map.<\/li>\n<\/ul>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-0cd2c81\" data-block-id=\"0cd2c81\"><style>@media screen and (min-width:768px){.stk-0cd2c81{flex:1 1 33.3% !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-0cd2c81-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-0cd2c81-inner-blocks\">\n<nav class=\"wp-block-stackable-table-of-contents stk-block-table-of-contents stk-block stk-ef27aff\" data-block-id=\"ef27aff\"><p class=\"stk-table-of-contents__title\">Table of Contents<\/p><ul class=\"stk-table-of-contents__table\"><li><a href=\"#learning-objectives\">Learning objectives:<\/a><ul><li><a href=\"#overview\">Overview:<\/a><\/li><li><a href=\"#requirements\">Requirements:<\/a><\/li><\/ul><\/li><li><a href=\"#step-1-create-a-new-html-file\">Step 1: Create a new HTML file<\/a><\/li><li><a href=\"#step-2-loading-required-libraries-and-initializing-map\">Step 2: Loading Required Libraries and Initializing Map<\/a><\/li><li><a href=\"#step-3-fetch-earthquake-data-and-create-markers-with-popup-information\">Step 3: Fetch Earthquake Data and Create Markers with Popup Information<\/a><\/li><li><a href=\"#step-4-add-cartographic-elements-and-markers\">Step 4: Add Cartographic Elements and Markers<\/a><\/li><li><a href=\"#step-5-final-step-save-html\">Step 5: Final step. Save HTML<\/a><\/li><li><a href=\"#conclusion\">Conclusion:<\/a><\/li><\/ul><\/nav>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-2b4d817\" data-block-id=\"2b4d817\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-2b4d817-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-b9bc863\" data-block-id=\"b9bc863\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-b9bc863-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-b9bc863-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-3812598\" id=\"overview\" data-block-id=\"3812598\"><h3 class=\"stk-block-heading__text\">Overview:<\/h3><\/div>\n\n\n\n<p>This lesson teaches learners how to use Leaflet, an open-source JavaScript library, to display a map with OpenStreetMap tiles. Learners will also learn how to add markers to the map and cluster them together with MarkerClusterGroup. They will learn how to fetch and use GeoJSON data to add markers to the map and how to change the marker color based on magnitude. Additionally, learners will learn how to create a legend to indicate the magnitude of the earthquakes and how to add a print button to the map. By the end of the lesson, learners will be able to create a map that displays earthquake data for Kyrgyzstan between 2013 and 2023, including a legend that indicates the magnitude of each earthquake and a print button to print the map.<\/p>\n\n\n\n<div class=\"wp-block-stackable-button-group stk-block-button-group stk-block stk-5623ae0\" data-block-id=\"5623ae0\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-button-group\">\n<div class=\"wp-block-stackable-button stk-block-button stk-block stk-3dc54ea\" data-block-id=\"3dc54ea\"><style>.stk-3dc54ea .stk-button{background:var(--stk-global-color-98107,#7c75cc) !important}<\/style><a class=\"stk-link stk-button stk--hover-effect-darken\" href=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/cluster_leaflet.html\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"stk-button__inner-text\">Demo<\/span><\/a><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-938144e\" id=\"requirements\" data-block-id=\"938144e\"><h3 class=\"stk-block-heading__text\">Requirements:<\/h3><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A code editor such as Visual Studio Code, Sublime Text, Notepad++ or your favorite code editor.<\/li>\n\n\n\n<li>A web browser such as Google Chrome or Mozilla Firefox<\/li>\n\n\n\n<li>Basic knowledge of HTML, CSS, and JavaScript<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-a7093b2\" id=\"step-1-create-a-new-html-file\" data-block-id=\"a7093b2\"><h2 class=\"stk-block-heading__text\">Step 1: Create a new HTML file<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-30bd873\" data-block-id=\"30bd873\"><p class=\"stk-block-text__text\">We start by creating an HTML file and including the necessary CSS and JavaScript files. In this case, we need to include the Leaflet CSS and JavaScript files, as well as the Marker Cluster CSS and JavaScript files. We will also include our own CSS styles to customize the map.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;meta charset=&quot;utf-8&quot; \/&gt;\n\t&lt;title&gt;Leaflet - Intermediate&lt;\/title&gt;\n\t&lt;!-- Leaflet CSS --&gt;\n\t&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/unpkg.com\/leaflet@1.9.1\/dist\/leaflet.css&quot; \/&gt;\n\t&lt;!-- Marker Cluster CSS --&gt;\n\t&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet.markercluster\/1.5.1\/MarkerCluster.css&quot; \/&gt;\n\t&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet.markercluster\/1.5.1\/MarkerCluster.Default.css&quot; \/&gt;\n\t\n\t&lt;style&gt;\n\t\t#map {\n\t\t\theight: 800px;\n\t\t\twidth: 100%;\n\t\t}\n\t\t\n\t\t.map-header {\n            position: absolute;\n            top: 10px;\n            left: 50%;\n            transform: translateX(-50%);\n\t\t\tbackground-color: white;\n\t\t\topacity: 0.8;\n\t\t\tpadding: 10px;\n\t\t\tfont-size: 24px;\n\t\t\tfont-weight: bold;\n\t\t\tz-index: 9999;\n\t\t}\n\t\t.diamond {\n        width: 0;\n        height: 0;\n        border: 10px solid transparent;\n        border-top-color: currentColor;\n        transform: rotate(45deg);\n        }\n\n\t\t.legend {\n\t\t\tposition: absolute;\n\t\t\tbottom: 10px;\n\t\t\tleft: 10px;\n\t\t\tbackground-color: white;\n\t\t\topacity: 0.8;\n\t\t\tpadding: 10px;\n\t\t\tborder: 1px solid #ccc;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 18px;\n\t\t\tz-index: 9999;\n\t\t}\n\t\t\n\t\t.print-map {\n\t\t\tposition: absolute;\n\t\t\tbottom: 10px;\n\t\t\tright: 10px;\n\t\t\tz-index: 9999;\n\t\t}\n\t&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;div id=&quot;map&quot;&gt;&lt;\/div&gt;\n\t&lt;div class=&quot;map-header&quot;&gt;Kyrgyzstan Earthquakes the Last Decade 2013-2023&lt;\/div&gt;\n\t&lt;div class=&quot;legend&quot;&gt;\n\t\t&lt;p&gt;&lt;strong&gt;Magnitude Legend&lt;\/strong&gt;&lt;\/p&gt;\n\t\t&lt;div&gt;\n\t\t\t&lt;span style=&quot;background-color: #32a84e;&quot;&gt;\u00a0\u00a0\u00a0\u00a0&lt;\/span&gt; Magnitude less than 2.5\n\t\t&lt;\/div&gt;\n\t\t&lt;div&gt;\n\t\t\t&lt;span style=&quot;background-color: #8fce00;&quot;&gt;\u00a0\u00a0\u00a0\u00a0&lt;\/span&gt; Magnitude between 2.5 and 3.0\n\t\t&lt;\/div&gt;\n\t\t&lt;div&gt;\n\t\t\t&lt;span style=&quot;background-color: #ffff00;&quot;&gt;\u00a0\u00a0\u00a0\u00a0&lt;\/span&gt; Magnitude between 3.0 and 4.0\n\t\t&lt;\/div&gt;\n\t\t&lt;div&gt;\n\t\t\t&lt;span style=&quot;background-color: #ffa500;&quot;&gt;\u00a0\u00a0\u00a0\u00a0&lt;\/span&gt; Magnitude between 4.0 and 5.0\n\t\t&lt;\/div&gt;\n\t\t&lt;div&gt;\n\t\t\t&lt;span style=&quot;background-color: #cc0000;&quot;&gt;\u00a0\u00a0\u00a0\u00a0&lt;\/span&gt; Magnitude greater than 5.0\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n\t&lt;div class=&quot;print-map&quot;&gt;\n\t\t&lt;button onclick=&quot;window.print()&quot;&gt;Print Map&lt;\/button&gt;\n\t&lt;\/div&gt;\n    &lt;script&gt;\n          \/\/ Leaflet code will go here\n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;!<\/span><span style=\"color: #D8DEE9\">DOCTYPE<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">html<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;html&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">charset<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">utf-8<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;title&gt;<\/span><span style=\"color: #D8DEE9FF\">Leaflet - Intermediate<\/span><span style=\"color: #81A1C1\">&lt;\/title&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t&lt;!-- Leaflet CSS --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;link<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">rel<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">stylesheet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">href<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/unpkg.com\/leaflet@1.9.1\/dist\/leaflet.css<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t&lt;!-- Marker Cluster CSS --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;link<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">rel<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">stylesheet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">href<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet.markercluster\/1.5.1\/MarkerCluster.css<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;link<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">rel<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">stylesheet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">href<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet.markercluster\/1.5.1\/MarkerCluster.Default.css<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t#map <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">: 800<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t.map-header <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">absolute<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">top<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">left<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">50<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">transform<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #88C0D0\">translateX<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">50<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">white<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">opacity<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">0.8<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">padding<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">size<\/span><span style=\"color: #D8DEE9FF\">: 24<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">weight<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">bold<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">z<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">index<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">9999<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t.diamond <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">solid<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">transparent<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">top<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">currentColor<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">transform<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #88C0D0\">rotate<\/span><span style=\"color: #D8DEE9FF\">(45<\/span><span style=\"color: #D8DEE9\">deg<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t.legend <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">absolute<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">bottom<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">left<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">white<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">opacity<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">0.8<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">padding<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #D8DEE9FF\">: 1<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">solid<\/span><span style=\"color: #D8DEE9FF\"> #<\/span><span style=\"color: #D8DEE9\">ccc<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">size<\/span><span style=\"color: #D8DEE9FF\">: 14<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">line<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">: 18<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">z<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">index<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">9999<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t.print-map <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">absolute<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">bottom<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">right<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">z<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">index<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">9999<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;\/style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">id<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">map<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">map-header<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">Kyrgyzstan Earthquakes the Last Decade 2013-2023<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">legend<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;p&gt;&lt;strong&gt;<\/span><span style=\"color: #D8DEE9FF\">Magnitude Legend<\/span><span style=\"color: #81A1C1\">&lt;\/strong&gt;&lt;\/p&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #81A1C1\">&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-color: #32a84e;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/span&gt;<\/span><span style=\"color: #D8DEE9FF\"> Magnitude less than 2.5<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #81A1C1\">&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-color: #8fce00;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/span&gt;<\/span><span style=\"color: #D8DEE9FF\"> Magnitude between 2.5 and 3.0<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #81A1C1\">&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-color: #ffff00;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/span&gt;<\/span><span style=\"color: #D8DEE9FF\"> Magnitude between 3.0 and 4.0<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #81A1C1\">&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-color: #ffa500;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/span&gt;<\/span><span style=\"color: #D8DEE9FF\"> Magnitude between 4.0 and 5.0<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #81A1C1\">&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-color: #cc0000;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/span&gt;<\/span><span style=\"color: #D8DEE9FF\"> Magnitude greater than 5.0<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">print-map<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;button<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">onclick<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">window.print()<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">Print Map<\/span><span style=\"color: #81A1C1\">&lt;\/button&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">          \/\/ Leaflet code will go here<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;\/script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/html&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-b4672fa\" data-block-id=\"b4672fa\"><p class=\"stk-block-text__text\">This is an HTML code that creates a web page containing a Leaflet map displaying earthquake data for Kyrgyzstan from the last decade (2013-2023). The code imports the necessary CSS files for Leaflet and Marker Cluster. The style section contains CSS rules that define the size and position of the map, header, legend, and print button. The body section contains a div element with the ID &#8220;map&#8221; which will be used by Leaflet to render the map. It also contains a map header, a legend explaining the magnitude colors, and a print button to print the map. Overall, this HTML code sets up the structure of the web page and defines the CSS styles used to display the Leaflet map and additional content. The next step is to create a JavaScript file that will add interactivity to the map by fetching and displaying the earthquake data.<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-acf5e27\" id=\"step-2-loading-required-libraries-and-initializing-map\" data-block-id=\"acf5e27\"><h2 class=\"stk-block-heading__text\">Step 2: Loading Required Libraries and Initializing Map<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-4689b2a\" data-block-id=\"4689b2a\"><p class=\"stk-block-text__text\">1.In this step we will import the Leaflet and Marker Cluster libraries from the web using a Content Delivery Network (CDN). This means that the libraries are not hosted on the local machine, but instead are loaded from the internet.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!-- Leaflet JavaScript --&gt;\n&lt;script src=&quot;https:\/\/unpkg.com\/leaflet@1.9.1\/dist\/leaflet.js&quot;&gt;&lt;\/script&gt;\t\n&lt;!-- Marker Cluster JavaScript --&gt;\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet.markercluster\/1.5.1\/leaflet.markercluster.js&quot;&gt;&lt;\/script&gt;\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;!--<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">Leaflet<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">JavaScript<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">--&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;script<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">src<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/unpkg.com\/leaflet@1.9.1\/dist\/leaflet.js<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/script&gt;<\/span><span style=\"color: #D8DEE9FF\">\t<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;!--<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">Marker<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">Cluster<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">JavaScript<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">--&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;script<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">src<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet.markercluster\/1.5.1\/leaflet.markercluster.js<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/script&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-c0b62c1\" data-block-id=\"c0b62c1\"><p class=\"stk-block-text__text\">2.Next, an inline script is used to initialize the map. It creates a new Leaflet map instance, sets its center to <code>[41.2, 74.5]<\/code> with a zoom level of <code>7<\/code>, and assigns it to a variable called <code>map<\/code>. The third section adds OpenStreetMap tiles to the map. It calls the <code>L.tileLayer()<\/code> function with a URL to the OpenStreetMap tile server and adds it to the map using the <code>addTo()<\/code> method. The <code>maxZoom<\/code> option specifies the highest zoom level available, and the <code>attribution<\/code> option adds a link to the OpenStreetMap contributors.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;script&gt;\n    \/\/ Initialize the map\n    var map = L.map('map').setView([41.2, 74.5], 7);\n\t\n    \/\/ Add OpenStreetMap tiles\n    L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n    maxZoom: 19,\n    attribution: 'Map data \u00a9 &lt;a href=&quot;https:\/\/openstreetmap.org&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors'\n    }).addTo(map);\n&lt;\/script&gt;\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    \/\/ Initialize the map<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    var map = L.map(&#39;map&#39;).setView([41.2, 74.5], 7);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    \/\/ Add OpenStreetMap tiles<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    L.tileLayer(&#39;https:\/\/<\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9\">s<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">.tile.openstreetmap.org\/<\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9\">z<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">\/<\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9\">x<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">\/<\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9\">y<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">.png&#39;, <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">maxZoom<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">19<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #D8DEE9\">attribution<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Map data \u00a9 &lt;a href=&quot;https:\/\/openstreetmap.org&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">).addTo(map);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/script&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-ec81b8a\" id=\"step-3-fetch-earthquake-data-and-create-markers-with-popup-information\" data-block-id=\"ec81b8a\"><h2 class=\"stk-block-heading__text\">Step 3: Fetch Earthquake Data and Create Markers with Popup Information<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-f58df11\" data-block-id=\"f58df11\"><p class=\"stk-block-text__text\">1.Initialize a <code>markers<\/code> variable to an instance of <code>L.markerClusterGroup()<\/code>, which is a Leaflet plugin that groups markers together in clusters based on their proximity to each other.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"var markers = L.markerClusterGroup()\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">markers<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">L<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">markerClusterGroup<\/span><span style=\"color: #D8DEE9FF\">()<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-c3c89fb\" data-block-id=\"c3c89fb\"><p class=\"stk-block-text__text\">2.Fetch earthquake data from the USGS API by making a <code>fetch()<\/code> call to the API endpoint. The endpoint returns a GeoJSON object representing the earthquake data. Once the data is returned from the API, call the <code>json()<\/code> method on the response to convert the response body to a JSON object. Once the GeoJSON object is obtained, loop through each feature in the <code>features<\/code> array using the <code>forEach()<\/code> method. <\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"fetch('https:\/\/earthquake.usgs.gov\/fdsnws\/event\/1\/query.geojson?starttime=2013-03-05%2000:00:00&amp;endtime=2023-03-12%2023:59:59&amp;maxlatitude=43.232&amp;minlatitude=39.253&amp;maxlongitude=80.354&amp;minlongitude=69.28&amp;minmagnitude=2.5&amp;orderby=time')\n            .then(response =&gt; response.json())\n            .then(data =&gt; {\n                data.features.forEach(feature =&gt; {\n    \/\/ Code to handle each feature goes here\n});\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #88C0D0\">fetch<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/earthquake.usgs.gov\/fdsnws\/event\/1\/query.geojson?starttime=2013-03-05%2000:00:00&amp;endtime=2023-03-12%2023:59:59&amp;maxlatitude=43.232&amp;minlatitude=39.253&amp;maxlongitude=80.354&amp;minlongitude=69.28&amp;minmagnitude=2.5&amp;orderby=time<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">then<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">response<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">response<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">json<\/span><span style=\"color: #D8DEE9FF\">())<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">then<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">data<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #D8DEE9\">data<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">features<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">forEach<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">    <\/span><span style=\"color: #616E88\">\/\/ Code to handle each feature goes here<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-311a7c6\" data-block-id=\"311a7c6\"><p class=\"stk-block-text__text\">3.For each feature, create a new marker with a custom icon that indicates the magnitude of the earthquake. The marker is created using the <code>L.marker()<\/code> method, and the icon is set using the <code>icon<\/code> option. The <code>divIcon<\/code> option allows us to create a custom icon using HTML and CSS.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"fetch('https:\/\/earthquake.usgs.gov\/fdsnws\/event\/1\/query.geojson?starttime=2013-03-05%2000:00:00&amp;endtime=2023-03-12%2023:59:59&amp;maxlatitude=43.232&amp;minlatitude=39.253&amp;maxlongitude=80.354&amp;minlongitude=69.28&amp;minmagnitude=2.5&amp;orderby=time')\n            .then(response =&gt; response.json())\n            .then(data =&gt; {\n                data.features.forEach(feature =&gt; {\n    \/\/ Code to handle each feature goes here\n});\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #88C0D0\">fetch<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/earthquake.usgs.gov\/fdsnws\/event\/1\/query.geojson?starttime=2013-03-05%2000:00:00&amp;endtime=2023-03-12%2023:59:59&amp;maxlatitude=43.232&amp;minlatitude=39.253&amp;maxlongitude=80.354&amp;minlongitude=69.28&amp;minmagnitude=2.5&amp;orderby=time<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">then<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">response<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">response<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">json<\/span><span style=\"color: #D8DEE9FF\">())<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">then<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">data<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #D8DEE9\">data<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">features<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">forEach<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">    <\/span><span style=\"color: #616E88\">\/\/ Code to handle each feature goes here<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-0d1c970\" data-block-id=\"0d1c970\"><p class=\"stk-block-text__text\">4.Set the color of the marker based on the magnitude of the earthquake using a series of conditional statements.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"fetch('https:\/\/earthquake.usgs.gov\/fdsnws\/event\/1\/query.geojson?starttime=2013-03-05%2000:00:00&amp;endtime=2023-03-12%2023:59:59&amp;maxlatitude=43.232&amp;minlatitude=39.253&amp;maxlongitude=80.354&amp;minlongitude=69.28&amp;minmagnitude=2.5&amp;orderby=time')\n            .then(response =&gt; response.json())\n            .then(data =&gt; {\n                data.features.forEach(feature =&gt; {\n                    \n                    \/\/ Change marker color based on magnitude\n                    var color;\n                    if (feature.properties.mag &lt; 2.5) {\n                        color = 'green';\n                    } else if (feature.properties.mag &lt; 3) {\n                        color = 'light green';\n                    } else if (feature.properties.mag &lt; 4) {\n                        color = 'yellow';\n                    } else if (feature.properties.mag &lt; 5) {\n                        color = 'orange';\n                    } else {\n                        color = 'red';\n                    }\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #88C0D0\">fetch<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/earthquake.usgs.gov\/fdsnws\/event\/1\/query.geojson?starttime=2013-03-05%2000:00:00&amp;endtime=2023-03-12%2023:59:59&amp;maxlatitude=43.232&amp;minlatitude=39.253&amp;maxlongitude=80.354&amp;minlongitude=69.28&amp;minmagnitude=2.5&amp;orderby=time<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">then<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">response<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">response<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">json<\/span><span style=\"color: #D8DEE9FF\">())<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">then<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">data<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #D8DEE9\">data<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">features<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">forEach<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">                    <\/span><span style=\"color: #616E88\">\/\/ Change marker color based on magnitude<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">2.5<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                        <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">green<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">3<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                        <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">light green<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">4<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                        <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">yellow<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">5<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                        <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">orange<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                        <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">red<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-ac55ee8\" data-block-id=\"ac55ee8\"><p class=\"stk-block-text__text\">5. For each feature, create a new marker with a custom icon that indicates the magnitude of the earthquake. The marker is created using the <code>L.marker()<\/code> method, and the icon is set using the <code>icon<\/code> option. The <code>divIcon<\/code> option allows us to create a custom icon using HTML and CSS.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"var marker = L.marker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], {\n    icon: L.divIcon({\n        className: 'custom-div-icon',\n        html: &quot;&lt;div style='background-color:&quot; + color + &quot;' class='diamond'&gt;&lt;\/div&gt;&quot;,\n        iconSize: [20, 20],\n        iconAnchor: [10, 10]\n    })\n});\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">L<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">marker<\/span><span style=\"color: #D8DEE9FF\">([<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">geometry<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">coordinates<\/span><span style=\"color: #D8DEE9FF\">[<\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\">]<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">geometry<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">coordinates<\/span><span style=\"color: #D8DEE9FF\">[<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">]]<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">icon<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">L<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">divIcon<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">className<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">custom-div-icon<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">html<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">&lt;div style=&#39;background-color:<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">&#39; class=&#39;diamond&#39;&gt;&lt;\/div&gt;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">iconSize<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> [<\/span><span style=\"color: #B48EAD\">20<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">20<\/span><span style=\"color: #D8DEE9FF\">]<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">iconAnchor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> [<\/span><span style=\"color: #B48EAD\">10<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">10<\/span><span style=\"color: #D8DEE9FF\">]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-0cc9d86\" data-block-id=\"0cc9d86\"><p class=\"stk-block-text__text\">6. Bind a popup to the marker that displays the magnitude of the earthquake. The <code>toFixed()<\/code> method is used to round the magnitude to one decimal place. <\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"marker.bindPopup(&quot;&lt;b&gt;Magnitude: &lt;\/b&gt;&quot; + feature.properties.mag.toFixed(1));\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">bindPopup<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">&lt;b&gt;Magnitude: &lt;\/b&gt;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">toFixed<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\">))<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-4ec2e3b\" data-block-id=\"4ec2e3b\"><p class=\"stk-block-text__text\">7.Add the marker to the <code>markers<\/code> cluster group using the <code>addLayer()<\/code> method.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"markers.addLayer(marker);\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #D8DEE9\">markers<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addLayer<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-d8a42b1\" data-block-id=\"d8a42b1\"><p class=\"stk-block-text__text\">8.After all markers have been added to the <code>markers<\/code> cluster group, add the cluster group to the Leaflet map using the <code>addLayer()<\/code> method.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"map.addLayer(markers);\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #D8DEE9\">map<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addLayer<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">markers<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-3838607\" id=\"step-4-add-cartographic-elements-and-markers\" data-block-id=\"3838607\"><h2 class=\"stk-block-heading__text\">Step 4: Add Cartographic Elements and Markers<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-aa838a0\" data-block-id=\"aa838a0\"><p class=\"stk-block-text__text\">1. Sets the opacity of an element with class &#8220;map-header&#8221; to 0.8.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ Set the header opacity\nvar header = document.querySelector('.map-header');\nheader.style.opacity = '0.8';\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #616E88\">\/\/ Set the header opacity<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">header<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">document<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">querySelector<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">.map-header<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">header<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">style<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">opacity<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">0.8<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-ff967cf\" data-block-id=\"ff967cf\"><p class=\"stk-block-text__text\">2.Creates a Leaflet control object for a legend, and defines a function to add content to the legend when it is added to a Leaflet map. Within the legend function, creates an HTML element using Leaflet&#8217;s DOM utilities, adds content to it, and returns the element. This creates a legend that displays images and text describing different earthquake magnitudes.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ Create a legend\nvar legend = L.control({position: 'bottomleft'});\nlegend.onAdd = function(map) {\nvar div = L.DomUtil.create('div', 'info legend');\ndiv.innerHTML += '&lt;p&gt;&lt;strong&gt;Magnitude Legend&lt;\/strong&gt;&lt;\/p&gt;';\ndiv.innerHTML += '&lt;p&gt;&lt;img src=&quot;https:\/\/cdn.rawgit.com\/pointhi\/leaflet-color-markers\/master\/img\/marker-icon-2x-green.png&quot; alt=&quot;magnitude less than 2.5&quot;&gt;Magnitude less than 2.5&lt;\/p&gt;';\ndiv.innerHTML += '&lt;p&gt;&lt;img src=&quot;https:\/\/cdn.rawgit.com\/pointhi\/leaflet-color-markers\/master\/img\/marker-icon-2x-blue.png&quot; alt=&quot;magnitude between 2.5 and 3.0&quot;&gt;Magnitude between 2.5 and 3.0&lt;\/p&gt;';\ndiv.innerHTML += '&lt;p&gt;&lt;img src=&quot;https:\/\/cdn.rawgit.com\/pointhi\/leaflet-color-markers\/master\/img\/marker-icon-2x.&lt;\/p&gt;'; \" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #616E88\">\/\/ Create a legend<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">legend<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">L<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">control<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #88C0D0\">position<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">bottomleft<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">legend<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">onAdd<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">map<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">L<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">DomUtil<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">create<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">div<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">info legend<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">div<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">innerHTML<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">&lt;p&gt;&lt;strong&gt;Magnitude Legend&lt;\/strong&gt;&lt;\/p&gt;<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">div<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">innerHTML<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">&lt;p&gt;&lt;img src=&quot;https:\/\/cdn.rawgit.com\/pointhi\/leaflet-color-markers\/master\/img\/marker-icon-2x-green.png&quot; alt=&quot;magnitude less than 2.5&quot;&gt;Magnitude less than 2.5&lt;\/p&gt;<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">div<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">innerHTML<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">&lt;p&gt;&lt;img src=&quot;https:\/\/cdn.rawgit.com\/pointhi\/leaflet-color-markers\/master\/img\/marker-icon-2x-blue.png&quot; alt=&quot;magnitude between 2.5 and 3.0&quot;&gt;Magnitude between 2.5 and 3.0&lt;\/p&gt;<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9\">div<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">innerHTML<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">&lt;p&gt;&lt;img src=&quot;https:\/\/cdn.rawgit.com\/pointhi\/leaflet-color-markers\/master\/img\/marker-icon-2x.&lt;\/p&gt;<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-ee38895\" data-block-id=\"ee38895\"><p class=\"stk-block-text__text\">3. Adds a circle to a Leaflet map using latitude, longitude, and accuracy values. The circle is colored blue, has a fill opacity of 0.1, and has a radius equal to the accuracy value.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"L.circle([lat, lon], accuracy, {\n    color: 'blue',\n    fillOpacity: 0.1,\n    radius: accuracy\n}).addTo(mymap);\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #D8DEE9\">L<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">circle<\/span><span style=\"color: #D8DEE9FF\">([<\/span><span style=\"color: #D8DEE9\">lat<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">lon<\/span><span style=\"color: #D8DEE9FF\">]<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">accuracy<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">color<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">blue<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">fillOpacity<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.1<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">radius<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">accuracy<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addTo<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">mymap<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-952095f\" data-block-id=\"952095f\"><p class=\"stk-block-text__text\">4.Adds a popup to the circle, displaying the accuracy value to two decimal places.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"L.popup()\n    .setLatLng([lat, lon])\n    .setContent(&quot;Location accuracy: &quot; + accuracy.toFixed(2) + &quot; meters&quot;)\n    .openOn(mymap);\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #D8DEE9\">L<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">popup<\/span><span style=\"color: #D8DEE9FF\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">setLatLng<\/span><span style=\"color: #D8DEE9FF\">([<\/span><span style=\"color: #D8DEE9\">lat<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">lon<\/span><span style=\"color: #D8DEE9FF\">])<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">setContent<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Location accuracy: <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">accuracy<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">toFixed<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #B48EAD\">2<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\"> meters<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">openOn<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">mymap<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-c6fd2ed\" data-block-id=\"c6fd2ed\"><p class=\"stk-block-text__text\">5.Adds a Leaflet marker to the map at latitude 51.5 and longitude -0.09, using a custom green icon.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"L.marker([51.5, -0.09], {icon: greenIcon}).addTo(mymap);\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #D8DEE9\">L<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">marker<\/span><span style=\"color: #D8DEE9FF\">([<\/span><span style=\"color: #B48EAD\">51.5<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">0.09<\/span><span style=\"color: #D8DEE9FF\">]<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #88C0D0\">icon<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">greenIcon<\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addTo<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">mymap<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-1fcaf3c\" data-block-id=\"1fcaf3c\"><p class=\"stk-block-text__text\">Overall, this code sets the header opacity, creates a legend, adds a circle and popup to display location accuracy, and adds a marker to a Leaflet map.<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-e9ffa19\" id=\"step-5-final-step-save-html\" data-block-id=\"e9ffa19\"><h2 class=\"stk-block-heading__text\">Step 5: Final step. Save HTML<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-6b6b6ac\" data-block-id=\"6b6b6ac\"><p class=\"stk-block-text__text\">Finally, the code ends with an HTML element which specifies where the map will be displayed on the web page.<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-403358d\" data-block-id=\"403358d\"><p class=\"stk-block-text__text\"><em>Note that the code also includes comments which explain what each section of code does. These comments are denoted by the <code>\/\/<\/code> symbol.<\/em><\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" style=\"font-size:.875rem;line-height:1.25rem\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;meta charset=&quot;utf-8&quot; \/&gt;\n\t&lt;title&gt;Leaflet - Intermediate&lt;\/title&gt;\n\t&lt;!-- Leaflet CSS --&gt;\n\t&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/unpkg.com\/leaflet@1.9.1\/dist\/leaflet.css&quot; \/&gt;\n\t&lt;!-- Marker Cluster CSS --&gt;\n\t&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet.markercluster\/1.5.1\/MarkerCluster.css&quot; \/&gt;\n\t&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet.markercluster\/1.5.1\/MarkerCluster.Default.css&quot; \/&gt;\n\t\n\t&lt;style&gt;\n\t\t#map {\n\t\t\theight: 800px;\n\t\t\twidth: 100%;\n\t\t}\n\t\t\n\t\t.map-header {\n            position: absolute;\n            top: 10px;\n            left: 50%;\n            transform: translateX(-50%);\n\t\t\tbackground-color: white;\n\t\t\topacity: 0.8;\n\t\t\tpadding: 10px;\n\t\t\tfont-size: 24px;\n\t\t\tfont-weight: bold;\n\t\t\tz-index: 9999;\n\t\t}\n\t\t.diamond {\n        width: 0;\n        height: 0;\n        border: 10px solid transparent;\n        border-top-color: currentColor;\n        transform: rotate(45deg);\n        }\n\n\t\t.legend {\n\t\t\tposition: absolute;\n\t\t\tbottom: 10px;\n\t\t\tleft: 10px;\n\t\t\tbackground-color: white;\n\t\t\topacity: 0.8;\n\t\t\tpadding: 10px;\n\t\t\tborder: 1px solid #ccc;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 18px;\n\t\t\tz-index: 9999;\n\t\t}\n\t\t\n\t\t.print-map {\n\t\t\tposition: absolute;\n\t\t\tbottom: 10px;\n\t\t\tright: 10px;\n\t\t\tz-index: 9999;\n\t\t}\n\t&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;div id=&quot;map&quot;&gt;&lt;\/div&gt;\n\t&lt;div class=&quot;map-header&quot;&gt;Kyrgyzstan Earthquakes the Last Decade 2013-2023&lt;\/div&gt;\n\t&lt;div class=&quot;legend&quot;&gt;\n\t\t&lt;p&gt;&lt;strong&gt;Magnitude Legend&lt;\/strong&gt;&lt;\/p&gt;\n\t\t&lt;div&gt;\n\t\t\t&lt;span style=&quot;background-color: #32a84e;&quot;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt; Magnitude less than 2.5\n\t\t&lt;\/div&gt;\n\t\t&lt;div&gt;\n\t\t\t&lt;span style=&quot;background-color: #8fce00;&quot;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt; Magnitude between 2.5 and 3.0\n\t\t&lt;\/div&gt;\n\t\t&lt;div&gt;\n\t\t\t&lt;span style=&quot;background-color: #ffff00;&quot;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt; Magnitude between 3.0 and 4.0\n\t\t&lt;\/div&gt;\n\t\t&lt;div&gt;\n\t\t\t&lt;span style=&quot;background-color: #ffa500;&quot;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt; Magnitude between 4.0 and 5.0\n\t\t&lt;\/div&gt;\n\t\t&lt;div&gt;\n\t\t\t&lt;span style=&quot;background-color: #cc0000;&quot;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/span&gt; Magnitude greater than 5.0\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n\t&lt;div class=&quot;print-map&quot;&gt;\n\t\t&lt;button onclick=&quot;window.print()&quot;&gt;Print Map&lt;\/button&gt;\n\t&lt;\/div&gt;\n\t\n\t&lt;!-- Leaflet JavaScript --&gt;\n\t&lt;script src=&quot;https:\/\/unpkg.com\/leaflet@1.9.1\/dist\/leaflet.js&quot;&gt;&lt;\/script&gt;\t\n\t&lt;!-- Marker Cluster JavaScript --&gt;\n\t&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet.markercluster\/1.5.1\/leaflet.markercluster.js&quot;&gt;&lt;\/script&gt;\n\t\n    &lt;script&gt;\n\t\t\/\/ Initialize the map\n        var map = L.map('map').setView([41.2, 74.5], 7);\n\t\n\t\t\/\/ Add OpenStreetMap tiles\n\t\tL.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n\t\t\tmaxZoom: 19,\n\t\t\tattribution: 'Map data \u00a9 &lt;a href=&quot;https:\/\/openstreetmap.org&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors'\n\t\t}).addTo(map);\n\t\t\n        \/\/ Add markers with popup information about magnitude\n        var markers = L.markerClusterGroup();\n        fetch('https:\/\/earthquake.usgs.gov\/fdsnws\/event\/1\/query.geojson?starttime=2013-03-05%2000:00:00&amp;endtime=2023-03-12%2023:59:59&amp;maxlatitude=43.232&amp;minlatitude=39.253&amp;maxlongitude=80.354&amp;minlongitude=69.28&amp;minmagnitude=2.5&amp;orderby=time')\n            .then(response =&gt; response.json())\n            .then(data =&gt; {\n                data.features.forEach(feature =&gt; {\n                    \n                    \/\/ Change marker color based on magnitude\n                    var color;\n                    if (feature.properties.mag &lt; 2.5) {\n                        color = 'green';\n                    } else if (feature.properties.mag &lt; 3) {\n                        color = 'light green';\n                    } else if (feature.properties.mag &lt; 4) {\n                        color = 'yellow';\n                    } else if (feature.properties.mag &lt; 5) {\n                        color = 'orange';\n                    } else {\n                        color = 'red';\n                    }\n                    \n                    var marker = L.marker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], {icon: L.divIcon({\n                        className: 'custom-div-icon',\n                        html: &quot;&lt;div style='background-color:&quot; + color + &quot;' class='diamond'&gt;&lt;\/div&gt;&quot;,\n                        iconSize: [20, 20],\n                        iconAnchor: [10, 10]\n                    })});\n                    \n                    marker.bindPopup(&quot;&lt;b&gt;Magnitude: &lt;\/b&gt;&quot; + feature.properties.mag.toFixed(1));\n                    markers.addLayer(marker);\n                });\n                map.addLayer(markers);\n            });\n\t\t\n\t\t\/\/ Set the header opacity\n\t\tvar header = document.querySelector('.map-header');\n\t\theader.style.opacity = '0.8';\n\t\t\n\t\t\/\/ Create a legend\n\t\tvar legend = L.control({position: 'bottomleft'});\n\t\tlegend.onAdd = function(map) {\n\t\t\tvar div = L.DomUtil.create('div', 'info legend');\n\t\t\tdiv.innerHTML += '&lt;p&gt;&lt;strong&gt;Magnitude Legend&lt;\/strong&gt;&lt;\/p&gt;';\n\t\t\tdiv.innerHTML += '&lt;p&gt;&lt;img src=&quot;https:\/\/cdn.rawgit.com\/pointhi\/leaflet-color-markers\/master\/img\/marker-icon-2x-green.png&quot; alt=&quot;magnitude less than 2.5&quot;&gt;Magnitude less than 2.5&lt;\/p&gt;';\n\t\t\tdiv.innerHTML += '&lt;p&gt;&lt;img src=&quot;https:\/\/cdn.rawgit.com\/pointhi\/leaflet-color-markers\/master\/img\/marker-icon-2x-blue.png&quot; alt=&quot;magnitude between 2.5 and 3.0&quot;&gt;Magnitude between 2.5 and 3.0&lt;\/p&gt;';\n\t\t\tdiv.innerHTML += '&lt;p&gt;&lt;img src=&quot;https:\/\/cdn.rawgit.com\/pointhi\/leaflet-color-markers\/master\/img\/marker-icon-2x.&lt;\/p&gt;'; \n        \n        \/\/ Add a circle to the map to show the accuracy of the location\n        L.circle([lat, lon], accuracy, {\n            color: 'blue',\n            fillOpacity: 0.1,\n            radius: accuracy\n        }).addTo(mymap);\n\n        \/\/ Add a popup to the circle to show the accuracy value\n        L.popup()\n            .setLatLng([lat, lon])\n            .setContent(&quot;Location accuracy: &quot; + accuracy.toFixed(2) + &quot; meters&quot;)\n            .openOn(mymap);\n        }\n        \/\/ Add the marker to the map\n        L.marker([51.5, -0.09], {icon: greenIcon}).addTo(mymap);\n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;!<\/span><span style=\"color: #D8DEE9\">DOCTYPE<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">html<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;html&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">charset<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">utf-8<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;title&gt;<\/span><span style=\"color: #D8DEE9FF\">Leaflet - Intermediate<\/span><span style=\"color: #81A1C1\">&lt;\/title&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t&lt;!-- Leaflet CSS --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;link<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">rel<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">stylesheet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">href<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/unpkg.com\/leaflet@1.9.1\/dist\/leaflet.css<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t&lt;!-- Marker Cluster CSS --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;link<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">rel<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">stylesheet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">href<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet.markercluster\/1.5.1\/MarkerCluster.css<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;link<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">rel<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">stylesheet<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">href<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet.markercluster\/1.5.1\/MarkerCluster.Default.css<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t#map <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">: 800<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">100<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t.map-header <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">absolute<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">top<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">left<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">50<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #D8DEE9\">transform<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #88C0D0\">translateX<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #B48EAD\">50<\/span><span style=\"color: #81A1C1\">%<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">white<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">opacity<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">0.8<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">padding<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">size<\/span><span style=\"color: #D8DEE9FF\">: 24<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">weight<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">bold<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">z<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">index<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">9999<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t.diamond <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">solid<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">transparent<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">top<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">currentColor<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">transform<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #88C0D0\">rotate<\/span><span style=\"color: #D8DEE9FF\">(45<\/span><span style=\"color: #D8DEE9\">deg<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t.legend <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">absolute<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">bottom<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">left<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">background<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">white<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">opacity<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">0.8<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">padding<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">border<\/span><span style=\"color: #D8DEE9FF\">: 1<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">solid<\/span><span style=\"color: #D8DEE9FF\"> #<\/span><span style=\"color: #D8DEE9\">ccc<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">size<\/span><span style=\"color: #D8DEE9FF\">: 14<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">line<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">: 18<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">z<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">index<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">9999<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t.print-map <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">absolute<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">bottom<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">right<\/span><span style=\"color: #D8DEE9FF\">: 10<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">z<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">index<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">9999<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;\/style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/head&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">id<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">map<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">map-header<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">Kyrgyzstan Earthquakes the Last Decade 2013-2023<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">legend<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;p&gt;&lt;strong&gt;<\/span><span style=\"color: #D8DEE9FF\">Magnitude Legend<\/span><span style=\"color: #81A1C1\">&lt;\/strong&gt;&lt;\/p&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #81A1C1\">&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-color: #32a84e;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/span&gt;<\/span><span style=\"color: #D8DEE9FF\"> Magnitude less than 2.5<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #81A1C1\">&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-color: #8fce00;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/span&gt;<\/span><span style=\"color: #D8DEE9FF\"> Magnitude between 2.5 and 3.0<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #81A1C1\">&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-color: #ffff00;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/span&gt;<\/span><span style=\"color: #D8DEE9FF\"> Magnitude between 3.0 and 4.0<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #81A1C1\">&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-color: #ffa500;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/span&gt;<\/span><span style=\"color: #D8DEE9FF\"> Magnitude between 4.0 and 5.0<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #81A1C1\">&lt;span<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">style<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">background-color: #cc0000;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #81A1C1\">&lt;\/span&gt;<\/span><span style=\"color: #D8DEE9FF\"> Magnitude greater than 5.0<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">print-map<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">&lt;button<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">onclick<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">window.print()<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;<\/span><span style=\"color: #D8DEE9FF\">Print Map<\/span><span style=\"color: #81A1C1\">&lt;\/button&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t&lt;!-- Leaflet JavaScript --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;script<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">src<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/unpkg.com\/leaflet@1.9.1\/dist\/leaflet.js<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/script&gt;<\/span><span style=\"color: #D8DEE9FF\">\t<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t&lt;!-- Marker Cluster JavaScript --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">&lt;script<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">src<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet.markercluster\/1.5.1\/leaflet.markercluster.js<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">&gt;&lt;\/script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\/\/ Initialize the map<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        var map = L.map(&#39;map&#39;).setView([41.2, 74.5], 7);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\/\/ Add OpenStreetMap tiles<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\tL.tileLayer(&#39;https:\/\/<\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9\">s<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">.tile.openstreetmap.org\/<\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9\">z<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">\/<\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9\">x<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">\/<\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9\">y<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">.png&#39;, <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">maxZoom<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">19<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">attribution<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Map data \u00a9 &lt;a href=&quot;https:\/\/openstreetmap.org&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">).addTo(map);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        \/\/ Add markers with popup information about magnitude<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        var markers = L.markerClusterGroup();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        fetch(&#39;https:\/\/earthquake.usgs.gov\/fdsnws\/event\/1\/query.geojson?starttime=2013-03-05%2000:00:00&amp;endtime=2023-03-12%2023:59:59&amp;maxlatitude=43.232&amp;minlatitude=39.253&amp;maxlongitude=80.354&amp;minlongitude=69.28&amp;minmagnitude=2.5&amp;orderby=time&#39;)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            .then(response =&gt; response.json())<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            .then(data =&gt; <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #D8DEE9\">data<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">features<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">forEach<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">                    <\/span><span style=\"color: #616E88\">\/\/ Change marker color based on magnitude<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">2.5<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                        <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">green<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">3<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                        <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">light green<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">4<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                        <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">yellow<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">if<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">5<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                        <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">orange<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">else<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                        <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">red<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">L<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">marker<\/span><span style=\"color: #D8DEE9FF\">([<\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">geometry<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">coordinates<\/span><span style=\"color: #D8DEE9FF\">[<\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\">]<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">geometry<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">coordinates<\/span><span style=\"color: #D8DEE9FF\">[<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #D8DEE9FF\">]]<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #88C0D0\">icon<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">L<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">divIcon<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                        <\/span><span style=\"color: #88C0D0\">className<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">custom-div-icon<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                        <\/span><span style=\"color: #88C0D0\">html<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">&lt;div style=&#39;background-color:<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">color<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">&#39; class=&#39;diamond&#39;&gt;&lt;\/div&gt;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                        <\/span><span style=\"color: #88C0D0\">iconSize<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> [<\/span><span style=\"color: #B48EAD\">20<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">20<\/span><span style=\"color: #D8DEE9FF\">]<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                        <\/span><span style=\"color: #88C0D0\">iconAnchor<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> [<\/span><span style=\"color: #B48EAD\">10<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">10<\/span><span style=\"color: #D8DEE9FF\">]<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">bindPopup<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">&lt;b&gt;Magnitude: &lt;\/b&gt;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">feature<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">properties<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">mag<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">toFixed<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #D8DEE9FF\">))<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #D8DEE9\">markers<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addLayer<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">marker<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #D8DEE9\">map<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addLayer<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">markers<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\/\/ Set the header opacity<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\tvar header = document.querySelector(&#39;.map-header&#39;);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\theader.style.opacity = &#39;0.8&#39;;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\/\/ Create a legend<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\tvar legend = L.control(<\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9\">position<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">bottomleft<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\tlegend.onAdd = function(map) <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">div<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">L<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">DomUtil<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">create<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">div<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">info legend<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">div<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">innerHTML<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">&lt;p&gt;&lt;strong&gt;Magnitude Legend&lt;\/strong&gt;&lt;\/p&gt;<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">div<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">innerHTML<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">&lt;p&gt;&lt;img src=&quot;https:\/\/cdn.rawgit.com\/pointhi\/leaflet-color-markers\/master\/img\/marker-icon-2x-green.png&quot; alt=&quot;magnitude less than 2.5&quot;&gt;Magnitude less than 2.5&lt;\/p&gt;<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">div<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">innerHTML<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">&lt;p&gt;&lt;img src=&quot;https:\/\/cdn.rawgit.com\/pointhi\/leaflet-color-markers\/master\/img\/marker-icon-2x-blue.png&quot; alt=&quot;magnitude between 2.5 and 3.0&quot;&gt;Magnitude between 2.5 and 3.0&lt;\/p&gt;<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t\t<\/span><span style=\"color: #D8DEE9\">div<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">innerHTML<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">&lt;p&gt;&lt;img src=&quot;https:\/\/cdn.rawgit.com\/pointhi\/leaflet-color-markers\/master\/img\/marker-icon-2x.&lt;\/p&gt;<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">; <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ Add a circle to the map to show the accuracy of the location<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">L<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">circle<\/span><span style=\"color: #D8DEE9FF\">([<\/span><span style=\"color: #D8DEE9\">lat<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">lon<\/span><span style=\"color: #D8DEE9FF\">]<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">accuracy<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">color<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">blue<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">fillOpacity<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">0.1<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">radius<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">accuracy<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">addTo<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">mymap<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">        <\/span><span style=\"color: #616E88\">\/\/ Add a popup to the circle to show the accuracy value<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">L<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">popup<\/span><span style=\"color: #D8DEE9FF\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">setLatLng<\/span><span style=\"color: #D8DEE9FF\">([<\/span><span style=\"color: #D8DEE9\">lat<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">lon<\/span><span style=\"color: #D8DEE9FF\">])<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">setContent<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Location accuracy: <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">accuracy<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">toFixed<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #B48EAD\">2<\/span><span style=\"color: #D8DEE9FF\">) <\/span><span style=\"color: #81A1C1\">+<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\"> meters<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">openOn<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">mymap<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        \/\/ Add the marker to the map<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        L.marker([51.5, -0.09], <\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9\">icon<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">greenIcon<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">).addTo(mymap);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;\/script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/body&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">&lt;\/html&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-button-group stk-block-button-group stk-block stk-5ad6ddd\" data-block-id=\"5ad6ddd\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-button-group\">\n<div class=\"wp-block-stackable-button stk-block-button stk-block stk-d74d026\" data-block-id=\"d74d026\"><style>.stk-d74d026 .stk-button{background:var(--stk-global-color-98107,#7c75cc) !important}<\/style><a class=\"stk-link stk-button stk--hover-effect-darken\" href=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/cluster_leaflet.html\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"stk-button__inner-text\">Demo<\/span><\/a><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-c94c27a\" id=\"conclusion\" data-block-id=\"c94c27a\"><h2 class=\"stk-block-heading__text\">Conclusion:<\/h2><\/div>\n\n\n\n<p>In this lesson, we learned how to use Leaflet to create a map and display markers for earthquake data. We also learned how to use marker clustering to group nearby markers for improved performance. To display information about the magnitude of each earthquake, we used different colors for each magnitude range and created a legend to explain the color scheme. Additionally, we added a header to the map and a button to print the map. For learners, this code provides a foundation for creating interactive maps and customizing the appearance of markers and legends. Learners can experiment with different data sources, marker styles, and map features to create their own custom maps.<\/p>\n\n\n\n<p>Some of the key concepts covered in this lesson include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Uses Leaflet library to create an interactive map.<\/li>\n\n\n\n<li>Fetches earthquake data from USGS API.<\/li>\n\n\n\n<li>Utilizes marker clustering for better performance.<\/li>\n\n\n\n<li>Displays markers with different colors based on earthquake magnitude.<\/li>\n\n\n\n<li>Includes a legend to explain the color coding.<\/li>\n\n\n\n<li>Provides a &#8220;Print Map&#8221; button for printing the map.<\/li>\n<\/ul>\n\n\n\n<p>By following the examples and code provided in this lesson, learners will have a basic understanding of how to use Leaflet to create interactive maps for their web projects. For more information and examples, check out the Leaflet documentation and community resources.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Leaflet documentation: <a rel=\"noreferrer noopener\" href=\"https:\/\/leafletjs.com\/\" target=\"_blank\">https:\/\/leafletjs.com\/<\/a><\/li>\n\n\n\n<li>Leaflet documentation on markers: <a rel=\"noreferrer noopener\" href=\"https:\/\/leafletjs.com\/examples\/custom-icons\/\" target=\"_blank\">https:\/\/leafletjs.com\/examples\/custom-icons\/<\/a><\/li>\n\n\n\n<li>Leaflet documentation using GeoJSON with Leaflet: <a rel=\"noreferrer noopener\" href=\"https:\/\/leafletjs.com\/examples\/geojson\/\" target=\"_blank\">https:\/\/leafletjs.com\/examples\/geojson\/<\/a><\/li>\n\n\n\n<li>Leaflet documentation interactive Choropleth Map: <a href=\"https:\/\/leafletjs.com\/examples\/choropleth\/\">https:\/\/leafletjs.com\/examples\/choropleth\/<\/a><\/li>\n\n\n\n<li>Leaflet Sample: <a href=\"https:\/\/leafletjs.com\/examples.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/leafletjs.com\/examples.html<\/a><\/li>\n\n\n\n<li>Leaflet providers preview: <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/leaflet-extras\/leaflet-providers\" target=\"_blank\">Leaflet-providers pr<\/a><\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><\/li>\n<\/ul>\n<\/div><\/div><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learning objectives: At the end of the lesson, learners should be able to: Table of Contents Learning objectives: Overview: Requirements:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1306,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-2134","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages\/2134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/comments?post=2134"}],"version-history":[{"count":17,"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages\/2134\/revisions"}],"predecessor-version":[{"id":2396,"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages\/2134\/revisions\/2396"}],"up":[{"embeddable":true,"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages\/1306"}],"wp:attachment":[{"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/media?parent=2134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}