{"id":1597,"date":"2023-04-06T07:24:49","date_gmt":"2023-04-06T07:24:49","guid":{"rendered":"https:\/\/geopick.cityai.space\/?page_id=1597"},"modified":"2023-04-26T13:43:27","modified_gmt":"2023-04-26T13:43:27","slug":"leaflet","status":"publish","type":"page","link":"https:\/\/geopick.cityai.space\/index.php\/tutorials\/basic-2\/leaflet\/","title":{"rendered":"Leaflet"},"content":{"rendered":"\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-ab83470\" data-block-id=\"ab83470\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-ab83470-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-570b06f\" data-block-id=\"570b06f\"><style>@media screen and (min-width:768px){.stk-570b06f{flex:1 1 calc(66.66699999999999% - var(--stk-column-gap,0px) * 1 \/ 2 ) !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-570b06f-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-570b06f-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-fc06f4c\" id=\"learning-objectives\" data-block-id=\"fc06f4c\"><h2 class=\"stk-block-heading__text\">Learning Objectives:<\/h2><\/div>\n\n\n\n<p>At the end of the lesson, learners should be able to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Identify the location and geography of Kyrgyzstan<\/li>\n\n\n\n<li>Understand how to add and customize a map using Leaflet<\/li>\n\n\n\n<li>Understand how to add markers and popups to a map<\/li>\n\n\n\n<li>Understand how to add and change the base map of a 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-bdc2219\" data-block-id=\"bdc2219\"><style>@media screen and (min-width:768px){.stk-bdc2219{flex:1 1 calc(33.333% - var(--stk-column-gap,0px) * 1 \/ 2 ) !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-bdc2219-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-bdc2219-inner-blocks\">\n<nav class=\"wp-block-stackable-table-of-contents stk-block-table-of-contents stk-block stk-e222f08\" data-block-id=\"e222f08\"><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-set-up-the-map-container\">Step 2: Set up the map container<\/a><\/li><li><a href=\"#step-3-add-markers-with-popups\">Step 3: Add markers with popups<\/a><\/li><li><a href=\"#step-4-final-step-save-html\">Step 4: 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-14741be\" data-block-id=\"14741be\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-14741be-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-6ca159f\" data-block-id=\"6ca159f\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-6ca159f-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-6ca159f-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-1ed71df\" id=\"overview\" data-block-id=\"1ed71df\"><h3 class=\"stk-block-heading__text\">Overview:<\/h3><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-4afeaee\" data-block-id=\"4afeaee\"><p class=\"stk-block-text__text\">Leaflet is a popular open-source JavaScript library for creating interactive maps on the web. It provides an easy-to-use API that makes it simple to add markers, popups, and various other features to your map. With Leaflet, you can display map data from various sources, such as OpenStreetMap, Google Maps, or your own custom tilesets. In this tutorial, we&#8217;ll explore the basics of using Leaflet to create an interactive map with custom markers and popups. We&#8217;ll also take a look at how to switch between different base maps and add a layer control to our map.<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-button-group stk-block-button-group stk-block stk-75cad7e\" data-block-id=\"75cad7e\"><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-9f035e5\" data-block-id=\"9f035e5\"><style>.stk-9f035e5 .stk-button{background:#7c75cc !important}<\/style><a class=\"stk-link stk-button stk--hover-effect-darken\" href=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/Basic_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-0dc5086\" id=\"requirements\" data-block-id=\"0dc5086\"><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<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-7697e6d\" id=\"step-1-create-a-new-html-file\" data-block-id=\"7697e6d\"><h2 class=\"stk-block-heading__text\">Step 1: Create a new HTML file<\/h2><\/div>\n\n\n\n<p>Create a new HTML file and save it with a name of your choice. In this example, we will name it <code>index.html<\/code>. Add the following code to the HTML file:<\/p>\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;title&gt;Leaflet - Basic&lt;\/title&gt;\n\t&lt;meta charset=&quot;utf-8&quot; \/&gt;\n\t&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n\t&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.9.1\/leaflet.css&quot; \/&gt;\n\t&lt;style&gt;\n\t\thtml, body {\n\t\t\theight: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t#map {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t}\n\t&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;div id=&quot;map&quot;&gt;&lt;\/div&gt;\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.9.1\/leaflet.js&quot;&gt;&lt;\/script&gt;\n&lt;script&gt;\n\t\/\/ 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;title&gt;<\/span><span style=\"color: #D8DEE9FF\">Leaflet - Basic<\/span><span style=\"color: #81A1C1\">&lt;\/title&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;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">viewport<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">content<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">width=device-width, initial-scale=1.0<\/span><span style=\"color: #ECEFF4\">&quot;<\/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\/1.9.1\/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<\/span><span style=\"color: #81A1C1\">&lt;style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\thtml, body <\/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\">: <\/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\t<\/span><span style=\"color: #D8DEE9\">margin<\/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\">\t\t<\/span><span style=\"color: #81A1C1\">}<\/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\">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\t<\/span><span style=\"color: #D8DEE9\">height<\/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<\/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: #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: #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\/1.9.1\/leaflet.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: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\/\/ Leaflet code will go here<\/span><\/span>\n<span class=\"line\"><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-ba49cdc\" data-block-id=\"ba49cdc\"><p class=\"stk-block-text__text\">This HTML code sets up the basic structure for your Leaflet map, including a container for the map, a link to the Leaflet CSS file, and a link to the Leaflet JavaScript file.<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-1f13616\" id=\"step-2-set-up-the-map-container\" data-block-id=\"1f13616\"><h2 class=\"stk-block-heading__text\">Step 2: Set up the map container<\/h2><\/div>\n\n\n\n<p>1.First, we set up the container for your Leaflet map. Add the following JavaScript code inside the &lt;script&gt; tags in your HTML file:<\/p>\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=\"\/\/ Initialize the map\nvar map = L.map('map').setView([42.70, 74.53], 7);\" 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\">\/\/ Initialize the map<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">map<\/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\">map<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">map<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">setView<\/span><span style=\"color: #D8DEE9FF\">([<\/span><span style=\"color: #B48EAD\">42.70<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">74.53<\/span><span style=\"color: #D8DEE9FF\">]<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">7<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This code initializes the map and sets the initial view to a specific location and zoom level. In this example, the location is set to [42.70, 74.53] which is the latitude and longitude of the city of Bishkek, Kyrgyzstan. The zoom level is set to 7, which is a good starting point for viewing a larger region.<\/p>\n\n\n\n<p>2.Next, we can add one or more base map layers to the map using the <code>L.tileLayer()<\/code> function. This function takes a URL template and options for the layer.For example, to add the OpenStreetMap standard layer, you can use the following code:<\/p>\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 osm = L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n    attribution: '\u00a9 &lt;a href=&quot;https:\/\/www.openstreetmap.org\/&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors'\n}).addTo(map);\" 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\">osm<\/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\">tileLayer<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png<\/span><span style=\"color: #ECEFF4\">&#39;<\/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\">attribution<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\u00a9 &lt;a href=&quot;https:\/\/www.openstreetmap.org\/&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors<\/span><span style=\"color: #ECEFF4\">&#39;<\/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\">map<\/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-ac93c06\" data-block-id=\"ac93c06\"><p class=\"stk-block-text__text\">This code creates a new tile layer object with a URL template that points to the OpenStreetMap tile server, and adds it to the map object. The attribution option specifies the attribution text that will be displayed on the map.<\/p><\/div>\n\n\n\n<p>3.We can add additional base maps by creating new <code>L.tileLayer()<\/code> objects with different URL templates and options. For example:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro alignwide\" 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 OpenStreetMap_Mapnik = L.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n    maxZoom: 19,\n    attribution: '&copy; &lt;a href=&quot;https:\/\/www.openstreetmap.org\/&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors'\n});\nvar Stadia_OSMBright = L.tileLayer('https:\/\/tiles.stadiamaps.com\/tiles\/osm_bright\/{z}\/{x}\/{y}{r}.png', {\n    maxZoom: 20,\n    attribution: '&copy; &lt;a href=&quot;https:\/\/stadiamaps.com\/&quot;&gt;Stadia Maps&lt;\/a&gt;, &copy; &lt;a href=&quot;https:\/\/openmaptiles.org\/&quot;&gt;OpenMapTiles&lt;\/a&gt; &copy; &lt;a href=&quot;http:\/\/openstreetmap.org&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors'\n});\nvar CartoDB_DarkMatter = L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/dark_all\/{z}\/{x}\/{y}{r}.png', {\n    attribution: '&copy; &lt;a href=&quot;https:\/\/www.openstreetmap.org\/&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors &copy; &lt;a href=&quot;https:\/\/carto.com\/attributions&quot;&gt;CARTO&lt;\/a&gt;',\n    subdomains: 'abcd',\n    maxZoom: 20\n});\nvar Stamen_Watercolor = L.tileLayer('https:\/\/stamen-tiles-{s}.a.ssl.fastly.net\/watercolor\/{z}\/{x}\/{y}.{ext}', {\n    attribution: 'Map tiles by &lt;a href=&quot;http:\/\/stamen.com&quot;&gt;Stamen Design&lt;\/a&gt;, &lt;a href=&quot;http:\/\/creativecommons.org\/licenses\/by\/3.0&quot;&gt;CC BY 3.0&lt;\/a&gt; &mdash; Map data &copy; &lt;a href=&quot;https:\/\/www.openstreetmap.org\/&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors',\n    subdomains: 'abcd',\n    minZoom: 1,\n    maxZoom: 16,\n    ext: 'jpg'\n});\n\tvar USGS_USImagery = L.tileLayer('https:\/\/basemap.nationalmap.gov\/arcgis\/rest\/services\/USGSImageryOnly\/MapServer\/tile\/{z}\/{y}\/{x}', {\n\t\tmaxZoom: 20,\n\t\tattribution: 'Tiles courtesy of the &lt;a href=&quot;https:\/\/usgs.gov\/&quot;&gt;U.S. Geological Survey&lt;\/a&gt;'\n\t});\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\">OpenStreetMap_Mapnik<\/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\">tileLayer<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png<\/span><span style=\"color: #ECEFF4\">&#39;<\/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\">maxZoom<\/span><span style=\"color: #ECEFF4\">:<\/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: #88C0D0\">attribution<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\u00a9 &lt;a href=&quot;https:\/\/www.openstreetmap.org\/&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">Stadia_OSMBright<\/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\">tileLayer<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/tiles.stadiamaps.com\/tiles\/osm_bright\/{z}\/{x}\/{y}{r}.png<\/span><span style=\"color: #ECEFF4\">&#39;<\/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\">maxZoom<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">20<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">attribution<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\u00a9 &lt;a href=&quot;https:\/\/stadiamaps.com\/&quot;&gt;Stadia Maps&lt;\/a&gt;, \u00a9 &lt;a href=&quot;https:\/\/openmaptiles.org\/&quot;&gt;OpenMapTiles&lt;\/a&gt; \u00a9 &lt;a href=&quot;http:\/\/openstreetmap.org&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">CartoDB_DarkMatter<\/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\">tileLayer<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/{s}.basemaps.cartocdn.com\/dark_all\/{z}\/{x}\/{y}{r}.png<\/span><span style=\"color: #ECEFF4\">&#39;<\/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\">attribution<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\u00a9 &lt;a href=&quot;https:\/\/www.openstreetmap.org\/&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors \u00a9 &lt;a href=&quot;https:\/\/carto.com\/attributions&quot;&gt;CARTO&lt;\/a&gt;<\/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\">subdomains<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">abcd<\/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\">maxZoom<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">20<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">Stamen_Watercolor<\/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\">tileLayer<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/stamen-tiles-{s}.a.ssl.fastly.net\/watercolor\/{z}\/{x}\/{y}.{ext}<\/span><span style=\"color: #ECEFF4\">&#39;<\/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\">attribution<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Map tiles by &lt;a href=&quot;http:\/\/stamen.com&quot;&gt;Stamen Design&lt;\/a&gt;, &lt;a href=&quot;http:\/\/creativecommons.org\/licenses\/by\/3.0&quot;&gt;CC BY 3.0&lt;\/a&gt; \u2014 Map data \u00a9 &lt;a href=&quot;https:\/\/www.openstreetmap.org\/&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors<\/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\">subdomains<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">abcd<\/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\">minZoom<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">maxZoom<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">16<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">ext<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">jpg<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">USGS_USImagery<\/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\">tileLayer<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/basemap.nationalmap.gov\/arcgis\/rest\/services\/USGSImageryOnly\/MapServer\/tile\/{z}\/{y}\/{x}<\/span><span style=\"color: #ECEFF4\">&#39;<\/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\">\t\t<\/span><span style=\"color: #88C0D0\">maxZoom<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">20<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #88C0D0\">attribution<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Tiles courtesy of the &lt;a href=&quot;https:\/\/usgs.gov\/&quot;&gt;U.S. Geological Survey&lt;\/a&gt;<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-46e026b\" data-block-id=\"46e026b\"><p class=\"stk-block-text__text\">4. Lastly, we create a <code>baseMaps<\/code> object that contains all the different base map layers that we want to include in our map. This object uses the names of the layers as keys and the layers themselves as values.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro alignwide\" 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=\"\tvar baseMaps = {\n\t\t&quot;OpenStreetMap&quot;: OpenStreetMap_Mapnik,\n\t\t&quot;Stadia OSM Bright&quot;: Stadia_OSMBright,\n\t\t&quot;CartoDB Dark Matter&quot;: CartoDB_DarkMatter,\n\t\t&quot;Stamen Watercolor&quot;: Stamen_Watercolor,\n\t\t&quot;USGS US Imagery&quot;: USGS_USImagery\n\t};\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: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">var<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">baseMaps<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">OpenStreetMap<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">OpenStreetMap_Mapnik<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Stadia OSM Bright<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">Stadia_OSMBright<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">CartoDB Dark Matter<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">CartoDB_DarkMatter<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Stamen Watercolor<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">Stamen_Watercolor<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">USGS US Imagery<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">USGS_USImagery<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-a3ddd3e\" data-block-id=\"a3ddd3e\"><p class=\"stk-block-text__text\">5.We then create a <code>L.control.layers<\/code> control and add it to the map. This control takes in the <code>baseMaps<\/code> object we just created and creates a set of radio buttons that allow the user to switch between different base maps.<\/p><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro alignwide\" 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.control.layers(baseMaps).addTo(map);\" 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: #D8DEE9\">control<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">layers<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #D8DEE9\">baseMaps<\/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\">map<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>The following resource you can find a complete list of base maps provided by Leaflet and detailed information on how to use them.<\/p>\n\n\n\n<p><a href=\"https:\/\/leaflet-extras.github.io\/leaflet-providers\/preview\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/leaflet-extras.github.io\/leaflet-providers\/preview\/<\/a><\/p>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-ceca114\" id=\"step-3-add-markers-with-popups\" data-block-id=\"ceca114\"><h2 class=\"stk-block-heading__text\">Step 3: Add markers with popups<\/h2><\/div>\n\n\n\n<p>Now that we have our map and base layers set up, let&#8217;s add some markers to the map with popups that show additional information about the locations. In this example, we&#8217;ll add three markers with popups.<\/p>\n\n\n\n<p>1.First, we&#8217;ll create the markers Djengish Chokusu using the <code>L.marker()<\/code> method and passing in the coordinates for each location. We&#8217;ll then use the <code>.addTo(map)<\/code> method to add the markers to the map.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro alignwide\" 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 marker1 = L.marker([42.036136, 80.129324]).addTo(map);\" 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\">marker1<\/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: #B48EAD\">42.036136<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #B48EAD\">80.129324<\/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\">map<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>2.Next, we use the .bindPopup() method to add a popup to each marker. The popup content is defined as an HTML string, which we create by using a combination of text and images. We also add some custom styling to the popup container and the image to ensure that it displays correctly on the map.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro alignwide\" 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=\"marker1.bindPopup(&quot;&lt;div class='popup-container'&gt;&lt;h4&gt;Djengish Chokusu&lt;\/h4&gt;&lt;img class='popup-image' src='https:\/\/tinypic.host\/images\/2023\/03\/27\/landscape-gf0257ef8c_640.jpg' \/&gt;&lt;p&gt;Jengish Chokusu, also known as Peak Pobeda, is the highest peak in the Tian Shan mountain range, located on the border between Kyrgyzstan and China. Standing at 7,439 meters tall, it is one of the most challenging peaks for mountaineers to climb. Despite its difficulty, it is a popular destination for experienced climbers seeking a thrilling adventure in one of the most beautiful mountain ranges in the world.&lt;\/p&gt;&quot;);\" 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\">marker1<\/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;div class=&#39;popup-container&#39;&gt;&lt;h4&gt;Djengish Chokusu&lt;\/h4&gt;&lt;img class=&#39;popup-image&#39; src=&#39;https:\/\/tinypic.host\/images\/2023\/03\/27\/landscape-gf0257ef8c_640.jpg&#39; \/&gt;&lt;p&gt;Jengish Chokusu, also known as Peak Pobeda, is the highest peak in the Tian Shan mountain range, located on the border between Kyrgyzstan and China. Standing at 7,439 meters tall, it is one of the most challenging peaks for mountaineers to climb. Despite its difficulty, it is a popular destination for experienced climbers seeking a thrilling adventure in one of the most beautiful mountain ranges in the world.&lt;\/p&gt;<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>3.Steps 1 and 2 are repeated for the Tashrabat marker and the Canyon Skazka&nbsp; markers, with different coordinates, colors, and Popup.<\/p>\n\n\n\n<p>The description of the markers and a link to their images:<\/p>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-abbaf64\" data-block-id=\"abbaf64\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-abbaf64-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-3fb56f0\" data-block-id=\"3fb56f0\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-3fb56f0-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-3fb56f0-inner-blocks\">\n<p class=\"has-text-align-center\"><strong>Jengish Chokusu<\/strong><\/p>\n\n\n\n<div class=\"wp-block-stackable-image stk-block-image stk-block stk-8588984\" data-block-id=\"8588984\"><figure class=\"stk-img-wrapper stk-image--shape-stretch\"><img fetchpriority=\"high\" decoding=\"async\" class=\"stk-img wp-image-1604\" src=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/landscape-gf0257ef8c_640.jpg\" width=\"640\" height=\"427\" srcset=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/landscape-gf0257ef8c_640.jpg 640w, https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/landscape-gf0257ef8c_640-300x200.jpg 300w, https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/landscape-gf0257ef8c_640-600x400.jpg 600w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/figure><\/div>\n\n\n\n<p>Jengish Chokusu, also known as Peak Pobeda, is the highest peak in the Tian Shan mountain range, located on the border between Kyrgyzstan and China. Standing at 7,439 meters tall, it is one of the most challenging peaks for mountaineers to climb. Despite its difficulty, it is a popular destination for experienced climbers seeking a thrilling adventure in one of the most beautiful mountain ranges in the world.<\/p>\n\n\n\n<p>Image URL : <a href=\"https:\/\/tinypic.host\/images\/2023\/03\/27\/landscape-gf0257ef8c_640.jpg\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/tinypic.host\/images\/2023\/03\/27\/landscape-gf0257ef8c_640.jpg<\/a><\/p>\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-548a94b\" data-block-id=\"548a94b\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-548a94b-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-548a94b-inner-blocks\">\n<p class=\"has-text-align-center\"><strong>Tahrabat<\/strong><\/p>\n\n\n\n<div class=\"wp-block-stackable-image stk-block-image stk-block stk-92b4c0b\" data-block-id=\"92b4c0b\"><figure class=\"stk-img-wrapper stk-image--shape-stretch\"><img decoding=\"async\" class=\"stk-img wp-image-1606\" src=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/kirghizia-gda7e3e8d3_640.jpg\" width=\"640\" height=\"425\" srcset=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/kirghizia-gda7e3e8d3_640.jpg 640w, https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/kirghizia-gda7e3e8d3_640-300x199.jpg 300w, https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/kirghizia-gda7e3e8d3_640-600x398.jpg 600w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/figure><\/div>\n\n\n\n<p>Tashrabat, also known as Stone Rabat, is a historic caravanserai located in the southern part of Kyrgyzstan. The structure dates back to the 15th century and was used as a resting place for travelers along the Silk Road. Visitors to Tashrabat can explore the ancient building and learn about the history of the Silk Road.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Image URL: <a href=\"https:\/\/tinypic.host\/images\/2023\/03\/27\/kirghizia-gda7e3e8d3_640.jpg\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/tinypic.host\/images\/2023\/03\/27\/kirghizia-gda7e3e8d3_640.jpg<\/a><\/p>\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-cc0031f\" data-block-id=\"cc0031f\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-cc0031f-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-cc0031f-inner-blocks\">\n<p class=\"has-text-align-center\"><strong>Canyon Skazka<\/strong><\/p>\n\n\n\n<div class=\"wp-block-stackable-image stk-block-image stk-block stk-dfba553\" data-block-id=\"dfba553\"><style>.stk-dfba553 .stk-img-wrapper{width:100% !important;height:244px !important}<\/style><figure class=\"stk-img-wrapper stk-image--shape-stretch\"><img decoding=\"async\" class=\"stk-img wp-image-1607\" src=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/aydin-hassan-AQakIZ2G4IM-unsplash1.jpg\" width=\"640\" height=\"457\" srcset=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/aydin-hassan-AQakIZ2G4IM-unsplash1.jpg 640w, https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/aydin-hassan-AQakIZ2G4IM-unsplash1-300x214.jpg 300w, https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/aydin-hassan-AQakIZ2G4IM-unsplash1-600x428.jpg 600w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/figure><\/div>\n\n\n\n<p>Canyon Skazka, also known as the Fairy Tale Canyon, is a unique geological formation located in the Issyk-Kul region. The canyon is known for its colorful rock formations, which resemble fairy tale characters. Visitors to the canyon can hike through the stunning landscape and admire the unique rock formations.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Image URL: <a href=\"https:\/\/tinypic.host\/images\/2023\/03\/27\/aydin-hassan-AQakIZ2G4IM-unsplash.jpg\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/tinypic.host\/images\/2023\/03\/27\/aydin-hassan-AQakIZ2G4IM-unsplash.jpg<\/a><\/p>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<p>Note: Regarding copyright of the images, the code comments include information about the source of each image and a URL where the image can be found. It&#8217;s important to check the copyright status of each image and ensure that you have permission to use it in your web application.<\/p>\n\n\n\n<p>Note: All images used in this tutorial are hosted on TinyPic, a free image hosting service. While this can be a convenient way to share images for personal use, it&#8217;s worth noting that there are potential disadvantages to using third-party image hosting services. These can include issues with image quality, reliability, and privacy. As always, it&#8217;s important to carefully consider the benefits and drawbacks of any tool or service before using it for your own projects. If you&#8217;d like to learn more about TinyPic you can check out this URL address: <a href=\"https:\/\/tinypic.host\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/tinypic.host\/<\/a><\/p>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-c778808\" id=\"step-4-final-step-save-html\" data-block-id=\"c778808\"><h2 class=\"stk-block-heading__text\">Step 4: Final step. Save HTML<\/h2><\/div>\n\n\n\n<p>Finally, the code ends with an HTML element which specifies where the map will be displayed on the web page.<\/p>\n\n\n\n<p><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>\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;title&gt;Leaflet - Basic&lt;\/title&gt;\n\t&lt;meta charset=&quot;utf-8&quot; \/&gt;\n\t&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n\t&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.9.1\/leaflet.css&quot; \/&gt;\n\t&lt;style&gt;\n\t\thtml, body {\n\t\t\theight: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t#map {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t}\n\t\t.popup-container {\n\t\tmax-width: 300px; \/* set maximum width of popup container *\/\n\t\t}\n\n\t\t.popup-image {\n\t\tmax-width: 100%; \n\t\theight: auto; \n\t\t}\n\t&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;div id=&quot;map&quot;&gt;&lt;\/div&gt;\n\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/leaflet\/1.9.1\/leaflet.js&quot;&gt;&lt;\/script&gt;\n&lt;script&gt;\n\t\/\/ Initialize the map\n\tvar map = L.map('map').setView([42.70, 74.53], 7);\n\n\t\/\/ Add base map layers\n\tvar osm = L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n\t\t\tattribution: '\u00a9 &lt;a href=&quot;https:\/\/www.openstreetmap.org\/copyright&quot;&gt;OpenStreetMap&lt;\/a&gt;'\n\t\t}).addTo(map);\n\n\tvar OpenStreetMap_Mapnik = L.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n\t\tmaxZoom: 19,\n\t\tattribution: '\u00a9 &lt;a href=&quot;https:\/\/www.openstreetmap.org\/copyright&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors'\n\t});\n\tvar Stadia_OSMBright = L.tileLayer('https:\/\/tiles.stadiamaps.com\/tiles\/osm_bright\/{z}\/{x}\/{y}{r}.png', {\n\t\tmaxZoom: 20,\n\t\tattribution: '\u00a9 &lt;a href=&quot;https:\/\/stadiamaps.com\/&quot;&gt;Stadia Maps&lt;\/a&gt;, \u00a9 &lt;a href=&quot;https:\/\/openmaptiles.org\/&quot;&gt;OpenMapTiles&lt;\/a&gt; \u00a9 &lt;a href=&quot;http:\/\/openstreetmap.org&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors'\n\t});\n\tvar CartoDB_DarkMatter = L.tileLayer('https:\/\/{s}.basemaps.cartocdn.com\/dark_all\/{z}\/{x}\/{y}{r}.png', {\n\t\tattribution: '\u00a9 &lt;a href=&quot;https:\/\/www.openstreetmap.org\/copyright&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors \u00a9 &lt;a href=&quot;https:\/\/carto.com\/attributions&quot;&gt;CARTO&lt;\/a&gt;',\n\t\tsubdomains: 'abcd',\n\t\tmaxZoom: 20\n\t});\n\tvar Stamen_Watercolor = L.tileLayer('https:\/\/stamen-tiles-{s}.a.ssl.fastly.net\/watercolor\/{z}\/{x}\/{y}.{ext}', {\n\t\tattribution: 'Map tiles by &lt;a href=&quot;http:\/\/stamen.com&quot;&gt;Stamen Design&lt;\/a&gt;, &lt;a href=&quot;http:\/\/creativecommons.org\/licenses\/by\/3.0&quot;&gt;CC BY 3.0&lt;\/a&gt; \u2014 Map data \u00a9 &lt;a href=&quot;https:\/\/www.openstreetmap.org\/copyright&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors',\n\t\tsubdomains: 'abcd',\n\t\tminZoom: 1,\n\t\tmaxZoom: 16,\n\t\text: 'jpg'\n\t});\n\tvar USGS_USImagery = L.tileLayer('https:\/\/basemap.nationalmap.gov\/arcgis\/rest\/services\/USGSImageryOnly\/MapServer\/tile\/{z}\/{y}\/{x}', {\n\t\tmaxZoom: 20,\n\t\tattribution: 'Tiles courtesy of the &lt;a href=&quot;https:\/\/usgs.gov\/&quot;&gt;U.S. Geological Survey&lt;\/a&gt;'\n\t});\n\t\/\/ Add base map layer control\n\tvar baseMaps = {\n\t\t&quot;OpenStreetMap&quot;: OpenStreetMap_Mapnik,\n\t\t&quot;Stadia OSM Bright&quot;: Stadia_OSMBright,\n\t\t&quot;CartoDB Dark Matter&quot;: CartoDB_DarkMatter,\n\t\t&quot;Stamen Watercolor&quot;: Stamen_Watercolor,\n\t\t&quot;USGS US Imagery&quot;: USGS_USImagery\n\t};\n\tL.control.layers(baseMaps).addTo(map);\n\n\t\/\/ Add markers with popup\n\t\/\/ Image by SLioy19 from Pixabay, url https:\/\/pixabay.com\/images\/id-5597553\/\n\tvar marker1 = L.marker([42.036136, 80.129324]).addTo(map);\n\tmarker1.bindPopup(&quot;&lt;div class='popup-container'&gt;&lt;h4&gt;Djengish Chokusu&lt;\/h4&gt;&lt;img class='popup-image' src='https:\/\/tinypic.host\/images\/2023\/03\/27\/landscape-gf0257ef8c_640.jpg' \/&gt;&lt;p&gt;Jengish Chokusu, also known as Peak Pobeda, is the highest peak in the Tian Shan mountain range, located on the border between Kyrgyzstan and China. Standing at 7,439 meters tall, it is one of the most challenging peaks for mountaineers to climb. Despite its difficulty, it is a popular destination for experienced climbers seeking a thrilling adventure in one of the most beautiful mountain ranges in the world.&lt;\/p&gt;&quot;);\n\n\t\/\/ Image by Walter Frehner from Pixabay, url:https:\/\/pixabay.com\/images\/id-5129659\/\n\tvar marker2 = L.marker([40.875314, 75.268655]).addTo(map);\n\tmarker2.bindPopup(&quot;&lt;div class='popup-container'&gt;&lt;h4&gt;Tashrabat&lt;\/h4&gt;&lt;img class='popup-image' src='https:\/\/tinypic.host\/images\/2023\/03\/27\/kirghizia-gda7e3e8d3_640.jpg' \/&gt;&lt;p&gt;Tashrabat, also known as Stone Rabat, is a historic caravanserai located in the southern part of Kyrgyzstan. The structure dates back to the 15th century and was used as a resting place for travelers along the Silk Road. Visitors to Tashrabat can explore the ancient building and learn about the history of the Silk Road.&lt;\/p&gt;&lt;\/div&gt;&quot;);\n\t\n\t\/\/ Image by Aydin Hassan on Unsplash, url: https:\/\/unsplash.com\/photos\/AQakIZ2G4IM?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditShareLink\n\tvar marker3 = L.marker([42.156379, 77.354346]).addTo(map);\n\tmarker3.bindPopup(&quot;&lt;div class='popup-container'&gt;&lt;h4&gt;Canyon Skazka&lt;\/h4&gt;&lt;img class='popup-image' src='https:\/\/tinypic.host\/images\/2023\/03\/27\/aydin-hassan-AQakIZ2G4IM-unsplash.jpg' \/&gt;&lt;p&gt;Canyon Skazka, also known as the Fairy Tale Canyon, is a unique geological formation located in the Issyk-Kul region. The canyon is known for its colorful rock formations, which resemble fairy tale characters. Visitors to the canyon can hike through the stunning landscape and admire the unique rock formations.&lt;\/p&gt;&quot;);\n\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;title&gt;<\/span><span style=\"color: #D8DEE9FF\">Leaflet - Basic<\/span><span style=\"color: #81A1C1\">&lt;\/title&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;meta<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">name<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">viewport<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">content<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">width=device-width, initial-scale=1.0<\/span><span style=\"color: #ECEFF4\">&quot;<\/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\/1.9.1\/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<\/span><span style=\"color: #81A1C1\">&lt;style&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\thtml, body <\/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\">: <\/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\t<\/span><span style=\"color: #D8DEE9\">margin<\/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\">\t\t<\/span><span style=\"color: #81A1C1\">}<\/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\">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\t<\/span><span style=\"color: #D8DEE9\">height<\/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.popup-container <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #D8DEE9\">max<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9\">width<\/span><span style=\"color: #D8DEE9FF\">: 300<\/span><span style=\"color: #D8DEE9\">px<\/span><span style=\"color: #D8DEE9FF\">; <\/span><span style=\"color: #616E88\">\/* set maximum width of popup container *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t.popup-image <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #D8DEE9\">max<\/span><span style=\"color: #81A1C1\">-<\/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: #D8DEE9\">height<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">auto<\/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: #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>\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\/1.9.1\/leaflet.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: #81A1C1\">&lt;script&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\/\/ Initialize the map<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\tvar map = L.map(&#39;map&#39;).setView([42.70, 74.53], 7);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\/\/ Add base map layers<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\tvar osm = 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\">\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\">\u00a9 &lt;a href=&quot;https:\/\/www.openstreetmap.org\/copyright&quot;&gt;OpenStreetMap&lt;\/a&gt;<\/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>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\tvar OpenStreetMap_Mapnik = L.tileLayer(&#39;https:\/\/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<\/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<\/span><span style=\"color: #D8DEE9\">attribution<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\u00a9 &lt;a href=&quot;https:\/\/www.openstreetmap.org\/copyright&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\tvar Stadia_OSMBright = L.tileLayer(&#39;https:\/\/tiles.stadiamaps.com\/tiles\/osm_bright\/<\/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: #D8DEE9\">r<\/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<\/span><span style=\"color: #D8DEE9\">maxZoom<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">20<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #D8DEE9\">attribution<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\u00a9 &lt;a href=&quot;https:\/\/stadiamaps.com\/&quot;&gt;Stadia Maps&lt;\/a&gt;, \u00a9 &lt;a href=&quot;https:\/\/openmaptiles.org\/&quot;&gt;OpenMapTiles&lt;\/a&gt; \u00a9 &lt;a href=&quot;http:\/\/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<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\tvar CartoDB_DarkMatter = 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\">.basemaps.cartocdn.com\/dark_all\/<\/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: #D8DEE9\">r<\/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<\/span><span style=\"color: #D8DEE9\">attribution<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\u00a9 &lt;a href=&quot;https:\/\/www.openstreetmap.org\/copyright&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors \u00a9 &lt;a href=&quot;https:\/\/carto.com\/attributions&quot;&gt;CARTO&lt;\/a&gt;<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #D8DEE9\">subdomains<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">abcd<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #D8DEE9\">maxZoom<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">20<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\tvar Stamen_Watercolor = L.tileLayer(&#39;https:\/\/stamen-tiles-<\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9\">s<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">.a.ssl.fastly.net\/watercolor\/<\/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\">.<\/span><span style=\"color: #81A1C1\">{<\/span><span style=\"color: #D8DEE9\">ext<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">&#39;, <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\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 tiles by &lt;a href=&quot;http:\/\/stamen.com&quot;&gt;Stamen Design&lt;\/a&gt;, &lt;a href=&quot;http:\/\/creativecommons.org\/licenses\/by\/3.0&quot;&gt;CC BY 3.0&lt;\/a&gt; \u2014 Map data \u00a9 &lt;a href=&quot;https:\/\/www.openstreetmap.org\/copyright&quot;&gt;OpenStreetMap&lt;\/a&gt; contributors<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #D8DEE9\">subdomains<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">abcd<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #D8DEE9\">minZoom<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">1<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #D8DEE9\">maxZoom<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">16<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #D8DEE9\">ext<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">jpg<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\tvar USGS_USImagery = L.tileLayer(&#39;https:\/\/basemap.nationalmap.gov\/arcgis\/rest\/services\/USGSImageryOnly\/MapServer\/tile\/<\/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\">y<\/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\">&#39;, <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #D8DEE9\">maxZoom<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #B48EAD\">20<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #D8DEE9\">attribution<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Tiles courtesy of the &lt;a href=&quot;https:\/\/usgs.gov\/&quot;&gt;U.S. Geological Survey&lt;\/a&gt;<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\/\/ Add base map layer control<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\tvar baseMaps = <\/span><span style=\"color: #81A1C1\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">OpenStreetMap<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">OpenStreetMap_Mapnik<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Stadia OSM Bright<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">Stadia_OSMBright<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">CartoDB Dark Matter<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">CartoDB_DarkMatter<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Stamen Watercolor<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">Stamen_Watercolor<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\t<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">USGS US Imagery<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\">: <\/span><span style=\"color: #D8DEE9\">USGS_USImagery<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><span style=\"color: #81A1C1\">}<\/span><span style=\"color: #D8DEE9FF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\tL.control.layers(baseMaps).addTo(map);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\/\/ Add markers with popup<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\/\/ Image by SLioy19 from Pixabay, url https:\/\/pixabay.com\/images\/id-5597553\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\tvar marker1 = L.marker([42.036136, 80.129324]).addTo(map);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\tmarker1.bindPopup(&quot;<\/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\">&#39;<\/span><span style=\"color: #A3BE8C\">popup-container<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">&gt;&lt;h4&gt;<\/span><span style=\"color: #D8DEE9FF\">Djengish Chokusu<\/span><span style=\"color: #81A1C1\">&lt;\/h4&gt;&lt;img<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">popup-image<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">src<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/tinypic.host\/images\/2023\/03\/27\/landscape-gf0257ef8c_640.jpg<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;&lt;p&gt;<\/span><span style=\"color: #D8DEE9FF\">Jengish Chokusu, also known as Peak Pobeda, is the highest peak in the Tian Shan mountain range, located on the border between Kyrgyzstan and China. Standing at 7,439 meters tall, it is one of the most challenging peaks for mountaineers to climb. Despite its difficulty, it is a popular destination for experienced climbers seeking a thrilling adventure in one of the most beautiful mountain ranges in the world.<\/span><span style=\"color: #81A1C1\">&lt;\/p&gt;<\/span><span style=\"color: #D8DEE9FF\">&quot;);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\/\/ Image by Walter Frehner from Pixabay, url:https:\/\/pixabay.com\/images\/id-5129659\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\tvar marker2 = L.marker([40.875314, 75.268655]).addTo(map);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\tmarker2.bindPopup(&quot;<\/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\">&#39;<\/span><span style=\"color: #A3BE8C\">popup-container<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">&gt;&lt;h4&gt;<\/span><span style=\"color: #D8DEE9FF\">Tashrabat<\/span><span style=\"color: #81A1C1\">&lt;\/h4&gt;&lt;img<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">popup-image<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">src<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/tinypic.host\/images\/2023\/03\/27\/kirghizia-gda7e3e8d3_640.jpg<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;&lt;p&gt;<\/span><span style=\"color: #D8DEE9FF\">Tashrabat, also known as Stone Rabat, is a historic caravanserai located in the southern part of Kyrgyzstan. The structure dates back to the 15th century and was used as a resting place for travelers along the Silk Road. Visitors to Tashrabat can explore the ancient building and learn about the history of the Silk Road.<\/span><span style=\"color: #81A1C1\">&lt;\/p&gt;&lt;\/div&gt;<\/span><span style=\"color: #D8DEE9FF\">&quot;);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\t\/\/ Image by Aydin Hassan on Unsplash, url: https:\/\/unsplash.com\/photos\/AQakIZ2G4IM?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditShareLink<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\tvar marker3 = L.marker([42.156379, 77.354346]).addTo(map);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">\tmarker3.bindPopup(&quot;<\/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\">&#39;<\/span><span style=\"color: #A3BE8C\">popup-container<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #81A1C1\">&gt;&lt;h4&gt;<\/span><span style=\"color: #D8DEE9FF\">Canyon Skazka<\/span><span style=\"color: #81A1C1\">&lt;\/h4&gt;&lt;img<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">class<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">popup-image<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">src<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">https:\/\/tinypic.host\/images\/2023\/03\/27\/aydin-hassan-AQakIZ2G4IM-unsplash.jpg<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">\/&gt;&lt;p&gt;<\/span><span style=\"color: #D8DEE9FF\">Canyon Skazka, also known as the Fairy Tale Canyon, is a unique geological formation located in the Issyk-Kul region. The canyon is known for its colorful rock formations, which resemble fairy tale characters. Visitors to the canyon can hike through the stunning landscape and admire the unique rock formations.<\/span><span style=\"color: #81A1C1\">&lt;\/p&gt;<\/span><span style=\"color: #D8DEE9FF\">&quot;);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><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-472e094\" data-block-id=\"472e094\"><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-d84a910\" data-block-id=\"d84a910\"><style>.stk-d84a910 .stk-button{background:#7c75cc !important}<\/style><a class=\"stk-link stk-button stk--hover-effect-darken\" href=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/Basic_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-a7331e2\" id=\"conclusion\" data-block-id=\"a7331e2\"><h2 class=\"stk-block-heading__text\">Conclusion<\/h2><\/div>\n\n\n\n<p>In this lesson, learners were introduced to Leaflet, a JavaScript library for interactive maps. They learned how to create and customize a map by adding base layers, markers, and popups. The lesson covered different types of base layers, including OpenStreetMap, Stadia OSM Bright, CartoDB Dark Matter, Stamen Watercolor, and USGS US Imagery. The learners also learned how to add markers to the map and attach popups containing additional information such as images, text, and links.<\/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>Initializing a map with a specific location and zoom level<\/li>\n\n\n\n<li>Adding base layers to the map using different tile providers<\/li>\n\n\n\n<li>Creating markers and binding popups to them with additional information<\/li>\n\n\n\n<li>Styling popups with custom CSS<\/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 href=\"https:\/\/leafletjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">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 on layer groups and layers control :<a rel=\"noreferrer noopener\" href=\"https:\/\/leafletjs.com\/examples\/layers-control\/\" target=\"_blank\">https:\/\/leafletjs.com\/examples\/layers-control\/<\/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 preview<\/a><\/li>\n<\/ul>\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":1442,"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-1597","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages\/1597","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=1597"}],"version-history":[{"count":22,"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages\/1597\/revisions"}],"predecessor-version":[{"id":2248,"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages\/1597\/revisions\/2248"}],"up":[{"embeddable":true,"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages\/1442"}],"wp:attachment":[{"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/media?parent=1597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}