lab_jupyter_launch_site_location.ipynb

{
  "metadata": {
    "kernelspec": {
      "name": "python",
      "display_name": "Python (Pyodide)",
      "language": "python"
    },
    "language_info": {
      "codemirror_mode": {
        "name": "python",
        "version": 3
      },
      "file_extension": ".py",
      "mimetype": "text/x-python",
      "name": "python",
      "nbconvert_exporter": "python",
      "pygments_lexer": "ipython3",
      "version": "3.8"
    },
    "prev_pub_hash": "0f9db842b41c859223722809f8be602f5df9334348bd206b11e3af58c30eb345"
  },
  "nbformat_minor": 4,
  "nbformat": 4,
  "cells": [
    {
      "cell_type": "markdown",
      "source": "<p style=\"text-align:center\">\n    <a href=\"https://skills.network/?utm_medium=Exinfluencer&utm_source=Exinfluencer&utm_content=000026UJ&utm_term=10006555&utm_id=NA-SkillsNetwork-Channel-SkillsNetworkCoursesIBMDS0321ENSkillsNetwork26802033-2022-01-01\" target=\"_blank\">\n    <img src=\"https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/assets/logos/SN_web_lightmode.png\" width=\"200\" alt=\"Skills Network Logo\">\n    </a>\n</p>\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "# **Hands-on Lab: Interactive Visual Analytics with Folium**\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "Estimated time needed: **40** minutes\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "The launch success rate may depend on many factors such as payload mass, orbit type, and so on. It may also depend on the location and proximities of a launch site, i.e., the initial position of rocket trajectories. Finding an optimal location for building a launch site certainly involves many factors and hopefully we could discover some of the factors by analyzing the existing launch site locations.\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "In the previous exploratory data analysis labs, you have visualized the SpaceX launch dataset using `matplotlib` and `seaborn` and discovered some preliminary correlations between the launch site and success rates. In this lab, you will be performing more interactive visual analytics using `Folium`.\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "## Objectives\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "This lab contains the following tasks:\n\n*   **TASK 1:** Mark all launch sites on a map\n*   **TASK 2:** Mark the success/failed launches for each site on the map\n*   **TASK 3:** Calculate the distances between a launch site to its proximities\n\nAfter completed the above tasks, you should be able to find some geographical patterns about launch sites.\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "Let's first import required Python packages for this lab:\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "import piplite\nawait piplite.install(['folium'])\nawait piplite.install(['pandas'])",
      "metadata": {
        "trusted": true
      },
      "outputs": [],
      "execution_count": 1
    },
    {
      "cell_type": "code",
      "source": "import folium\nimport pandas as pd",
      "metadata": {
        "trusted": true
      },
      "outputs": [],
      "execution_count": 2
    },
    {
      "cell_type": "code",
      "source": "# Import folium MarkerCluster plugin\nfrom folium.plugins import MarkerCluster\n# Import folium MousePosition plugin\nfrom folium.plugins import MousePosition\n# Import folium DivIcon plugin\nfrom folium.features import DivIcon",
      "metadata": {
        "trusted": true
      },
      "outputs": [],
      "execution_count": 3
    },
    {
      "cell_type": "markdown",
      "source": "If you need to refresh your memory about folium, you may download and refer to this previous folium lab:\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "[Generating Maps with Python](https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBMDeveloperSkillsNetwork-DV0101EN-SkillsNetwork/labs/v4/DV0101EN-Exercise-Generating-Maps-in-Python.ipynb)\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "## Task 1: Mark all launch sites on a map\n",
      "metadata": {
        "trusted": true
      },
      "outputs": [],
      "execution_count": 4
    },
    {
      "cell_type": "markdown",
      "source": "First, let's try to add each site's location on a map using site's latitude and longitude coordinates\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "The following dataset with the name `spacex_launch_geo.csv` is an augmented dataset with latitude and longitude added for each site.\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "# Download and read the `spacex_launch_geo.csv`\nfrom js import fetch\nimport io\n\nURL = 'https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBM-DS0321EN-SkillsNetwork/datasets/spacex_launch_geo.csv'\nresp = await fetch(URL)\nspacex_csv_file = io.BytesIO((await resp.arrayBuffer()).to_py())\nspacex_df=pd.read_csv(spacex_csv_file)",
      "metadata": {
        "trusted": true
      },
      "outputs": [],
      "execution_count": 5
    },
    {
      "cell_type": "markdown",
      "source": "Now, you can take a look at what are the coordinates for each site.\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "# Select relevant sub-columns: `Launch Site`, `Lat(Latitude)`, `Long(Longitude)`, `class`\nspacex_df = spacex_df[['Launch Site', 'Lat', 'Long', 'class']]\nlaunch_sites_df = spacex_df.groupby(['Launch Site'], as_index=False).first()\nlaunch_sites_df = launch_sites_df[['Launch Site', 'Lat', 'Long']]\nlaunch_sites_df",
      "metadata": {
        "trusted": true
      },
      "outputs": [
        {
          "execution_count": 6,
          "output_type": "execute_result",
          "data": {
            "text/plain": "    Launch Site        Lat        Long\n0   CCAFS LC-40  28.562302  -80.577356\n1  CCAFS SLC-40  28.563197  -80.576820\n2    KSC LC-39A  28.573255  -80.646895\n3   VAFB SLC-4E  34.632834 -120.610745",
            "text/html": "<div>\n<style scoped>\n    .dataframe tbody tr th:only-of-type {\n        vertical-align: middle;\n    }\n\n    .dataframe tbody tr th {\n        vertical-align: top;\n    }\n\n    .dataframe thead th {\n        text-align: right;\n    }\n</style>\n<table border=\"1\" class=\"dataframe\">\n  <thead>\n    <tr style=\"text-align: right;\">\n      <th></th>\n      <th>Launch Site</th>\n      <th>Lat</th>\n      <th>Long</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>0</th>\n      <td>CCAFS LC-40</td>\n      <td>28.562302</td>\n      <td>-80.577356</td>\n    </tr>\n    <tr>\n      <th>1</th>\n      <td>CCAFS SLC-40</td>\n      <td>28.563197</td>\n      <td>-80.576820</td>\n    </tr>\n    <tr>\n      <th>2</th>\n      <td>KSC LC-39A</td>\n      <td>28.573255</td>\n      <td>-80.646895</td>\n    </tr>\n    <tr>\n      <th>3</th>\n      <td>VAFB SLC-4E</td>\n      <td>34.632834</td>\n      <td>-120.610745</td>\n    </tr>\n  </tbody>\n</table>\n</div>"
          },
          "metadata": {}
        }
      ],
      "execution_count": 6
    },
    {
      "cell_type": "markdown",
      "source": "Above coordinates are just plain numbers that can not give you any intuitive insights about where are those launch sites. If you are very good at geography, you can interpret those numbers directly in your mind. If not, that's fine too. Let's visualize those locations by pinning them on a map.\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "We first need to create a folium `Map` object, with an initial center location to be NASA Johnson Space Center at Houston, Texas.\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "# Start location is NASA Johnson Space Center\nnasa_coordinate = [29.559684888503615, -95.0830971930759]\nsite_map = folium.Map(location=nasa_coordinate, zoom_start=10)",
      "metadata": {
        "trusted": true
      },
      "outputs": [],
      "execution_count": 7
    },
    {
      "cell_type": "markdown",
      "source": "We could use `folium.Circle` to add a highlighted circle area with a text label on a specific coordinate. For example,\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "# Create a blue circle at NASA Johnson Space Center's coordinate with a popup label showing its name\ncircle = folium.Circle(nasa_coordinate, radius=1000, color='#d35400', fill=True).add_child(folium.Popup('NASA Johnson Space Center'))\n# Create a blue circle at NASA Johnson Space Center's coordinate with a icon showing its name\nmarker = folium.map.Marker(\n    nasa_coordinate,\n    # Create an icon as a text label\n    icon=DivIcon(\n        icon_size=(20,20),\n        icon_anchor=(0,0),\n        html='<div style=\"font-size: 12; color:#d35400;\"><b>%s</b></div>' % 'NASA JSC',\n        )\n    )\nsite_map.add_child(circle)\nsite_map.add_child(marker)",
      "metadata": {
        "trusted": true
      },
      "outputs": [
        {
          "execution_count": 8,
          "output_type": "execute_result",
          "data": {
            "text/plain": "<folium.folium.Map at 0x15440c8>",
            "text/html": "<div style=\"width:100%;\"><div style=\"position:relative;width:100%;height:0;padding-bottom:60%;\"><span style=\"color:#565656\">Make this Notebook Trusted to load map: File -> Trust Notebook</span><iframe srcdoc=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    \n    &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;\n    \n        &lt;script&gt;\n            L_NO_TOUCH = false;\n            L_DISABLE_3D = false;\n        &lt;/script&gt;\n    \n    &lt;style&gt;html, body {width: 100%;height: 100%;margin: 0;padding: 0;}&lt;/style&gt;\n    &lt;style&gt;#map {position:absolute;top:0;bottom:0;right:0;left:0;}&lt;/style&gt;\n    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js&quot;&gt;&lt;/script&gt;\n    &lt;script src=&quot;https://code.jquery.com/jquery-3.7.1.min.js&quot;&gt;&lt;/script&gt;\n    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;\n    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js&quot;&gt;&lt;/script&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css&quot;/&gt;\n    \n            &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,\n                initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot; /&gt;\n            &lt;style&gt;\n                #map_684e439e93a28007b333af760b2c74f1 {\n                    position: relative;\n                    width: 100.0%;\n                    height: 100.0%;\n                    left: 0.0%;\n                    top: 0.0%;\n                }\n                .leaflet-container { font-size: 1rem; }\n            &lt;/style&gt;\n        \n&lt;/head&gt;\n&lt;body&gt;\n    \n    \n            &lt;div class=&quot;folium-map&quot; id=&quot;map_684e439e93a28007b333af760b2c74f1&quot; &gt;&lt;/div&gt;\n        \n&lt;/body&gt;\n&lt;script&gt;\n    \n    \n            var map_684e439e93a28007b333af760b2c74f1 = L.map(\n                &quot;map_684e439e93a28007b333af760b2c74f1&quot;,\n                {\n                    center: [29.559684888503615, -95.0830971930759],\n                    crs: L.CRS.EPSG3857,\n                    ...{\n  &quot;zoom&quot;: 10,\n  &quot;zoomControl&quot;: true,\n  &quot;preferCanvas&quot;: false,\n}\n\n                }\n            );\n\n            \n\n        \n    \n            var tile_layer_5d67f5f69155c880f828ca4e4103670b = L.tileLayer(\n                &quot;https://tile.openstreetmap.org/{z}/{x}/{y}.png&quot;,\n                {\n  &quot;minZoom&quot;: 0,\n  &quot;maxZoom&quot;: 19,\n  &quot;maxNativeZoom&quot;: 19,\n  &quot;noWrap&quot;: false,\n  &quot;attribution&quot;: &quot;\\u0026copy; \\u003ca href=\\&quot;https://www.openstreetmap.org/copyright\\&quot;\\u003eOpenStreetMap\\u003c/a\\u003e contributors&quot;,\n  &quot;subdomains&quot;: &quot;abc&quot;,\n  &quot;detectRetina&quot;: false,\n  &quot;tms&quot;: false,\n  &quot;opacity&quot;: 1,\n}\n\n            );\n        \n    \n            tile_layer_5d67f5f69155c880f828ca4e4103670b.addTo(map_684e439e93a28007b333af760b2c74f1);\n        \n    \n            var circle_a98860cc83da42f128854ca97ec0db33 = L.circle(\n                [29.559684888503615, -95.0830971930759],\n                {&quot;bubblingMouseEvents&quot;: true, &quot;color&quot;: &quot;#d35400&quot;, &quot;dashArray&quot;: null, &quot;dashOffset&quot;: null, &quot;fill&quot;: true, &quot;fillColor&quot;: &quot;#d35400&quot;, &quot;fillOpacity&quot;: 0.2, &quot;fillRule&quot;: &quot;evenodd&quot;, &quot;lineCap&quot;: &quot;round&quot;, &quot;lineJoin&quot;: &quot;round&quot;, &quot;opacity&quot;: 1.0, &quot;radius&quot;: 1000, &quot;stroke&quot;: true, &quot;weight&quot;: 3}\n            ).addTo(map_684e439e93a28007b333af760b2c74f1);\n        \n    \n        var popup_ed27b444d9bfef67139b0c5d0077d590 = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_8b395400dfd0f57e7a6fd52c47610cef = $(`&lt;div id=&quot;html_8b395400dfd0f57e7a6fd52c47610cef&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;NASA Johnson Space Center&lt;/div&gt;`)[0];\n                popup_ed27b444d9bfef67139b0c5d0077d590.setContent(html_8b395400dfd0f57e7a6fd52c47610cef);\n            \n        \n\n        circle_a98860cc83da42f128854ca97ec0db33.bindPopup(popup_ed27b444d9bfef67139b0c5d0077d590)\n        ;\n\n        \n    \n    \n            var marker_e534c12a1bb97ca8aba0b9d04345c724 = L.marker(\n                [29.559684888503615, -95.0830971930759],\n                {\n}\n            ).addTo(map_684e439e93a28007b333af760b2c74f1);\n        \n    \n            var div_icon_e4a496500aac1e4f21dbaebeac4b76a8 = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eNASA JSC\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_e534c12a1bb97ca8aba0b9d04345c724.setIcon(div_icon_e4a496500aac1e4f21dbaebeac4b76a8);\n        \n&lt;/script&gt;\n&lt;/html&gt;\" style=\"position:absolute;width:100%;height:100%;left:0;top:0;border:none !important;\" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div></div>"
          },
          "metadata": {}
        }
      ],
      "execution_count": 8
    },
    {
      "cell_type": "markdown",
      "source": "and you should find a small yellow circle near the city of Houston and you can zoom-in to see a larger circle.\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "Now, let's add a circle for each launch site in data frame `launch_sites`\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "*TODO:*  Create and add `folium.Circle` and `folium.Marker` for each launch site on the site map\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "An example of folium.Circle:\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "`folium.Circle(coordinate, radius=1000, color='#000000', fill=True).add_child(folium.Popup(...))`\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "An example of folium.Marker:\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "`folium.map.Marker(coordinate, icon=DivIcon(icon_size=(20,20),icon_anchor=(0,0), html='<div style=\"font-size: 12; color:#d35400;\"><b>%s</b></div>' % 'label', ))`\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "# Initial the map\n\nsite_map = folium.Map(location=nasa_coordinate, zoom_start=5)\n\n# For each launch site, add a Circle object based on its coordinate (Lat, Long) values. In addition, add Launch site name as a popup label\nc1 =[28.562302,-80.577356]  \nc2 = [28.563197,-80.576820]  \nc3\t= [28.573255,-80.646895] \nc4\t= [34.632834,-120.610745] \n\n# Create a blue circle at NASA Johnson Space Center's coordinate with a popup label showing its name\ncircle = folium.Circle(nasa_coordinate, radius=1000, color='#d35400', fill=True).add_child(folium.Popup('NASA Johnson Space Center'))\ncircle2 = folium.Circle(c1, radius=1000, color='#d35400', fill=True).add_child(folium.Popup('CCAFS LC'))\ncircle3 = folium.Circle(c2, radius=1000, color='#d35400', fill=True).add_child(folium.Popup('CCAFS SLC'))\ncircle4 = folium.Circle(c3, radius=1000, color='#d35400', fill=True).add_child(folium.Popup('KSC LC'))\ncircle5 = folium.Circle(c4, radius=1000, color='#d35400', fill=True).add_child(folium.Popup('VAFB SLC'))\n# Create a blue circle at NASA Johnson Space Center's coordinate with a icon showing its name\nmarker = folium.map.Marker(\n    nasa_coordinate,\n    # Create an icon as a text label\n    icon=DivIcon(\n        icon_size=(20,20),\n        icon_anchor=(0,0),\n        html='<div style=\"font-size: 12; color:#d35400;\"><b>%s</b></div>' % 'NASA JSC',\n        )\n    )\nmarker2 = folium.map.Marker(\n    c1,\n    # Create an icon as a text label\n    icon=DivIcon(\n        icon_size=(20,20),\n        icon_anchor=(0,0),\n        html='<div style=\"font-size: 12; color:#d35400;\"><b>%s</b></div>' % 'CCAFS LC',\n        )\n    )\nmarker3 = folium.map.Marker(\n    c2,\n    # Create an icon as a text label\n    icon=DivIcon(\n        icon_size=(20,20),\n        icon_anchor=(0,0),\n        html='<div style=\"font-size: 12; color:#d35400;\"><b>%s</b></div>' % 'CCAFS SLC',\n        )\n    )\nmarker4 = folium.map.Marker(\n    c3,\n    # Create an icon as a text label\n    icon=DivIcon(\n        icon_size=(20,20),\n        icon_anchor=(0,0),\n        html='<div style=\"font-size: 12; color:#d35400;\"><b>%s</b></div>' % 'KSC LC',\n        )\n    )\nmarker5 = folium.map.Marker(\n    c4,\n    # Create an icon as a text label\n    icon=DivIcon(\n        icon_size=(20,20),\n        icon_anchor=(0,0),\n        html='<div style=\"font-size: 12; color:#d35400;\"><b>%s</b></div>' % 'VAFB SLC',\n        )\n    )\nsite_map.add_child(circle)\nsite_map.add_child(marker)\nsite_map.add_child(circle2)\nsite_map.add_child(marker2)\nsite_map.add_child(circle3)\nsite_map.add_child(marker3)\nsite_map.add_child(circle4)\nsite_map.add_child(marker4)\nsite_map.add_child(circle5)\nsite_map.add_child(marker5)",
      "metadata": {
        "trusted": true
      },
      "outputs": [
        {
          "execution_count": 24,
          "output_type": "execute_result",
          "data": {
            "text/plain": "<folium.folium.Map at 0x5c1d258>",
            "text/html": "<div style=\"width:100%;\"><div style=\"position:relative;width:100%;height:0;padding-bottom:60%;\"><span style=\"color:#565656\">Make this Notebook Trusted to load map: File -> Trust Notebook</span><iframe srcdoc=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    \n    &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;\n    \n        &lt;script&gt;\n            L_NO_TOUCH = false;\n            L_DISABLE_3D = false;\n        &lt;/script&gt;\n    \n    &lt;style&gt;html, body {width: 100%;height: 100%;margin: 0;padding: 0;}&lt;/style&gt;\n    &lt;style&gt;#map {position:absolute;top:0;bottom:0;right:0;left:0;}&lt;/style&gt;\n    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js&quot;&gt;&lt;/script&gt;\n    &lt;script src=&quot;https://code.jquery.com/jquery-3.7.1.min.js&quot;&gt;&lt;/script&gt;\n    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;\n    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js&quot;&gt;&lt;/script&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css&quot;/&gt;\n    \n            &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,\n                initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot; /&gt;\n            &lt;style&gt;\n                #map_709a2fa6150a8dc3dfcfa054c916f822 {\n                    position: relative;\n                    width: 100.0%;\n                    height: 100.0%;\n                    left: 0.0%;\n                    top: 0.0%;\n                }\n                .leaflet-container { font-size: 1rem; }\n            &lt;/style&gt;\n        \n&lt;/head&gt;\n&lt;body&gt;\n    \n    \n            &lt;div class=&quot;folium-map&quot; id=&quot;map_709a2fa6150a8dc3dfcfa054c916f822&quot; &gt;&lt;/div&gt;\n        \n&lt;/body&gt;\n&lt;script&gt;\n    \n    \n            var map_709a2fa6150a8dc3dfcfa054c916f822 = L.map(\n                &quot;map_709a2fa6150a8dc3dfcfa054c916f822&quot;,\n                {\n                    center: [29.559684888503615, -95.0830971930759],\n                    crs: L.CRS.EPSG3857,\n                    ...{\n  &quot;zoom&quot;: 5,\n  &quot;zoomControl&quot;: true,\n  &quot;preferCanvas&quot;: false,\n}\n\n                }\n            );\n\n            \n\n        \n    \n            var tile_layer_b4defbe5cee36d67c2b35b8167effd21 = L.tileLayer(\n                &quot;https://tile.openstreetmap.org/{z}/{x}/{y}.png&quot;,\n                {\n  &quot;minZoom&quot;: 0,\n  &quot;maxZoom&quot;: 19,\n  &quot;maxNativeZoom&quot;: 19,\n  &quot;noWrap&quot;: false,\n  &quot;attribution&quot;: &quot;\\u0026copy; \\u003ca href=\\&quot;https://www.openstreetmap.org/copyright\\&quot;\\u003eOpenStreetMap\\u003c/a\\u003e contributors&quot;,\n  &quot;subdomains&quot;: &quot;abc&quot;,\n  &quot;detectRetina&quot;: false,\n  &quot;tms&quot;: false,\n  &quot;opacity&quot;: 1,\n}\n\n            );\n        \n    \n            tile_layer_b4defbe5cee36d67c2b35b8167effd21.addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var circle_f9d1e0458d90d0f164ce1806ad9a3922 = L.circle(\n                [29.559684888503615, -95.0830971930759],\n                {&quot;bubblingMouseEvents&quot;: true, &quot;color&quot;: &quot;#d35400&quot;, &quot;dashArray&quot;: null, &quot;dashOffset&quot;: null, &quot;fill&quot;: true, &quot;fillColor&quot;: &quot;#d35400&quot;, &quot;fillOpacity&quot;: 0.2, &quot;fillRule&quot;: &quot;evenodd&quot;, &quot;lineCap&quot;: &quot;round&quot;, &quot;lineJoin&quot;: &quot;round&quot;, &quot;opacity&quot;: 1.0, &quot;radius&quot;: 1000, &quot;stroke&quot;: true, &quot;weight&quot;: 3}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n        var popup_66b9c95368c2e7dce14f3faf4dddc2fa = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_e0fa76024df2cd858b405dec907f77c4 = $(`&lt;div id=&quot;html_e0fa76024df2cd858b405dec907f77c4&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;NASA Johnson Space Center&lt;/div&gt;`)[0];\n                popup_66b9c95368c2e7dce14f3faf4dddc2fa.setContent(html_e0fa76024df2cd858b405dec907f77c4);\n            \n        \n\n        circle_f9d1e0458d90d0f164ce1806ad9a3922.bindPopup(popup_66b9c95368c2e7dce14f3faf4dddc2fa)\n        ;\n\n        \n    \n    \n            var marker_9b931d085ef65bcd01ad9e5fa659170e = L.marker(\n                [29.559684888503615, -95.0830971930759],\n                {\n}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var div_icon_c84426a2966483852029311a3b93250c = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eNASA JSC\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_9b931d085ef65bcd01ad9e5fa659170e.setIcon(div_icon_c84426a2966483852029311a3b93250c);\n        \n    \n            var circle_ecb5c9bbc09ff2622d6085e3d5231d6e = L.circle(\n                [28.562302, -80.577356],\n                {&quot;bubblingMouseEvents&quot;: true, &quot;color&quot;: &quot;#d35400&quot;, &quot;dashArray&quot;: null, &quot;dashOffset&quot;: null, &quot;fill&quot;: true, &quot;fillColor&quot;: &quot;#d35400&quot;, &quot;fillOpacity&quot;: 0.2, &quot;fillRule&quot;: &quot;evenodd&quot;, &quot;lineCap&quot;: &quot;round&quot;, &quot;lineJoin&quot;: &quot;round&quot;, &quot;opacity&quot;: 1.0, &quot;radius&quot;: 1000, &quot;stroke&quot;: true, &quot;weight&quot;: 3}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n        var popup_a3da88d914f4085123691cdf89e2f021 = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_384cc395db9bafc6196689eb683ce334 = $(`&lt;div id=&quot;html_384cc395db9bafc6196689eb683ce334&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;CCAFS LC&lt;/div&gt;`)[0];\n                popup_a3da88d914f4085123691cdf89e2f021.setContent(html_384cc395db9bafc6196689eb683ce334);\n            \n        \n\n        circle_ecb5c9bbc09ff2622d6085e3d5231d6e.bindPopup(popup_a3da88d914f4085123691cdf89e2f021)\n        ;\n\n        \n    \n    \n            var marker_f042a5114b678c8d7d6aa83bc20fd33f = L.marker(\n                [28.562302, -80.577356],\n                {\n}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var div_icon_f3b9e176bad1c77f277f26d80236a3eb = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eCCAFS LC\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_f042a5114b678c8d7d6aa83bc20fd33f.setIcon(div_icon_f3b9e176bad1c77f277f26d80236a3eb);\n        \n    \n            var circle_580e41c81ee926006711de9e4016dfb6 = L.circle(\n                [28.563197, -80.57682],\n                {&quot;bubblingMouseEvents&quot;: true, &quot;color&quot;: &quot;#d35400&quot;, &quot;dashArray&quot;: null, &quot;dashOffset&quot;: null, &quot;fill&quot;: true, &quot;fillColor&quot;: &quot;#d35400&quot;, &quot;fillOpacity&quot;: 0.2, &quot;fillRule&quot;: &quot;evenodd&quot;, &quot;lineCap&quot;: &quot;round&quot;, &quot;lineJoin&quot;: &quot;round&quot;, &quot;opacity&quot;: 1.0, &quot;radius&quot;: 1000, &quot;stroke&quot;: true, &quot;weight&quot;: 3}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n        var popup_31a9f03ff29f21014085291e92d02f3b = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_07b111b79b85640769354f0ba8a84cb6 = $(`&lt;div id=&quot;html_07b111b79b85640769354f0ba8a84cb6&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;CCAFS SLC&lt;/div&gt;`)[0];\n                popup_31a9f03ff29f21014085291e92d02f3b.setContent(html_07b111b79b85640769354f0ba8a84cb6);\n            \n        \n\n        circle_580e41c81ee926006711de9e4016dfb6.bindPopup(popup_31a9f03ff29f21014085291e92d02f3b)\n        ;\n\n        \n    \n    \n            var marker_f81b8b212600706ee8a6a708be75ac9d = L.marker(\n                [28.563197, -80.57682],\n                {\n}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var div_icon_21844f6717667cdfdabe47b91085280e = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eCCAFS SLC\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_f81b8b212600706ee8a6a708be75ac9d.setIcon(div_icon_21844f6717667cdfdabe47b91085280e);\n        \n    \n            var circle_2e0edfeb22dc594a08e41d0debe11b63 = L.circle(\n                [28.573255, -80.646895],\n                {&quot;bubblingMouseEvents&quot;: true, &quot;color&quot;: &quot;#d35400&quot;, &quot;dashArray&quot;: null, &quot;dashOffset&quot;: null, &quot;fill&quot;: true, &quot;fillColor&quot;: &quot;#d35400&quot;, &quot;fillOpacity&quot;: 0.2, &quot;fillRule&quot;: &quot;evenodd&quot;, &quot;lineCap&quot;: &quot;round&quot;, &quot;lineJoin&quot;: &quot;round&quot;, &quot;opacity&quot;: 1.0, &quot;radius&quot;: 1000, &quot;stroke&quot;: true, &quot;weight&quot;: 3}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n        var popup_466ca6065bfa7282804a3a6c57557b37 = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_820ec4f2fc572dac8348e0f82483851a = $(`&lt;div id=&quot;html_820ec4f2fc572dac8348e0f82483851a&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;KSC LC&lt;/div&gt;`)[0];\n                popup_466ca6065bfa7282804a3a6c57557b37.setContent(html_820ec4f2fc572dac8348e0f82483851a);\n            \n        \n\n        circle_2e0edfeb22dc594a08e41d0debe11b63.bindPopup(popup_466ca6065bfa7282804a3a6c57557b37)\n        ;\n\n        \n    \n    \n            var marker_d4fea838f1fcb5aa1b2a9ca62e7f24e4 = L.marker(\n                [28.573255, -80.646895],\n                {\n}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var div_icon_5c3def7285998ebc4db842a55ff76158 = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eKSC LC\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_d4fea838f1fcb5aa1b2a9ca62e7f24e4.setIcon(div_icon_5c3def7285998ebc4db842a55ff76158);\n        \n    \n            var circle_aadcdbfb586936c4dd051d842985921f = L.circle(\n                [34.632834, -120.610745],\n                {&quot;bubblingMouseEvents&quot;: true, &quot;color&quot;: &quot;#d35400&quot;, &quot;dashArray&quot;: null, &quot;dashOffset&quot;: null, &quot;fill&quot;: true, &quot;fillColor&quot;: &quot;#d35400&quot;, &quot;fillOpacity&quot;: 0.2, &quot;fillRule&quot;: &quot;evenodd&quot;, &quot;lineCap&quot;: &quot;round&quot;, &quot;lineJoin&quot;: &quot;round&quot;, &quot;opacity&quot;: 1.0, &quot;radius&quot;: 1000, &quot;stroke&quot;: true, &quot;weight&quot;: 3}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n        var popup_b18c2e4741101babe1e26aad317312fa = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_f56085d855b18f9f671c0a2856ea36f3 = $(`&lt;div id=&quot;html_f56085d855b18f9f671c0a2856ea36f3&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;VAFB SLC&lt;/div&gt;`)[0];\n                popup_b18c2e4741101babe1e26aad317312fa.setContent(html_f56085d855b18f9f671c0a2856ea36f3);\n            \n        \n\n        circle_aadcdbfb586936c4dd051d842985921f.bindPopup(popup_b18c2e4741101babe1e26aad317312fa)\n        ;\n\n        \n    \n    \n            var marker_ac76c225bb705661cd0b6722bf3b38b7 = L.marker(\n                [34.632834, -120.610745],\n                {\n}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var div_icon_c93b3d933e640d7c3b205d2e5e85fa6a = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eVAFB SLC\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_ac76c225bb705661cd0b6722bf3b38b7.setIcon(div_icon_c93b3d933e640d7c3b205d2e5e85fa6a);\n        \n&lt;/script&gt;\n&lt;/html&gt;\" style=\"position:absolute;width:100%;height:100%;left:0;top:0;border:none !important;\" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div></div>"
          },
          "metadata": {}
        }
      ],
      "execution_count": 24
    },
    {
      "cell_type": "markdown",
      "source": "The generated map with marked launch sites should look similar to the following:\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "<center>\n    <img src=\"https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBM-DS0321EN-SkillsNetwork/labs/module_3/images/launch_site_markers.png\">\n</center>\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "Now, you can explore the map by zoom-in/out the marked areas\n, and try to answer the following questions:\n\n*   Are all launch sites in proximity to the Equator line?\n*   Are all launch sites in very close proximity to the coast?\n\nAlso please try to explain your findings.\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "# Task 2: Mark the success/failed launches for each site on the map\n",
      "metadata": {
        "trusted": true
      },
      "outputs": [],
      "execution_count": 10
    },
    {
      "cell_type": "markdown",
      "source": "Next, let's try to enhance the map by adding the launch outcomes for each site, and see which sites have high success rates.\nRecall that data frame spacex_df has detailed launch records, and the `class` column indicates if this launch was successful or not\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "spacex_df.tail(10)",
      "metadata": {
        "trusted": true
      },
      "outputs": [
        {
          "execution_count": 11,
          "output_type": "execute_result",
          "data": {
            "text/plain": "     Launch Site        Lat       Long  class\n46    KSC LC-39A  28.573255 -80.646895      1\n47    KSC LC-39A  28.573255 -80.646895      1\n48    KSC LC-39A  28.573255 -80.646895      1\n49  CCAFS SLC-40  28.563197 -80.576820      1\n50  CCAFS SLC-40  28.563197 -80.576820      1\n51  CCAFS SLC-40  28.563197 -80.576820      0\n52  CCAFS SLC-40  28.563197 -80.576820      0\n53  CCAFS SLC-40  28.563197 -80.576820      0\n54  CCAFS SLC-40  28.563197 -80.576820      1\n55  CCAFS SLC-40  28.563197 -80.576820      0",
            "text/html": "<div>\n<style scoped>\n    .dataframe tbody tr th:only-of-type {\n        vertical-align: middle;\n    }\n\n    .dataframe tbody tr th {\n        vertical-align: top;\n    }\n\n    .dataframe thead th {\n        text-align: right;\n    }\n</style>\n<table border=\"1\" class=\"dataframe\">\n  <thead>\n    <tr style=\"text-align: right;\">\n      <th></th>\n      <th>Launch Site</th>\n      <th>Lat</th>\n      <th>Long</th>\n      <th>class</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>46</th>\n      <td>KSC LC-39A</td>\n      <td>28.573255</td>\n      <td>-80.646895</td>\n      <td>1</td>\n    </tr>\n    <tr>\n      <th>47</th>\n      <td>KSC LC-39A</td>\n      <td>28.573255</td>\n      <td>-80.646895</td>\n      <td>1</td>\n    </tr>\n    <tr>\n      <th>48</th>\n      <td>KSC LC-39A</td>\n      <td>28.573255</td>\n      <td>-80.646895</td>\n      <td>1</td>\n    </tr>\n    <tr>\n      <th>49</th>\n      <td>CCAFS SLC-40</td>\n      <td>28.563197</td>\n      <td>-80.576820</td>\n      <td>1</td>\n    </tr>\n    <tr>\n      <th>50</th>\n      <td>CCAFS SLC-40</td>\n      <td>28.563197</td>\n      <td>-80.576820</td>\n      <td>1</td>\n    </tr>\n    <tr>\n      <th>51</th>\n      <td>CCAFS SLC-40</td>\n      <td>28.563197</td>\n      <td>-80.576820</td>\n      <td>0</td>\n    </tr>\n    <tr>\n      <th>52</th>\n      <td>CCAFS SLC-40</td>\n      <td>28.563197</td>\n      <td>-80.576820</td>\n      <td>0</td>\n    </tr>\n    <tr>\n      <th>53</th>\n      <td>CCAFS SLC-40</td>\n      <td>28.563197</td>\n      <td>-80.576820</td>\n      <td>0</td>\n    </tr>\n    <tr>\n      <th>54</th>\n      <td>CCAFS SLC-40</td>\n      <td>28.563197</td>\n      <td>-80.576820</td>\n      <td>1</td>\n    </tr>\n    <tr>\n      <th>55</th>\n      <td>CCAFS SLC-40</td>\n      <td>28.563197</td>\n      <td>-80.576820</td>\n      <td>0</td>\n    </tr>\n  </tbody>\n</table>\n</div>"
          },
          "metadata": {}
        }
      ],
      "execution_count": 11
    },
    {
      "cell_type": "markdown",
      "source": "Next, let's create markers for all launch records.\nIf a launch was successful `(class=1)`, then we use a green marker and if a launch was failed, we use a red marker `(class=0)`\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "Note that a launch only happens in one of the four launch sites, which means many launch records will have the exact same coordinate. Marker clusters can be a good way to simplify a map containing many markers having the same coordinate.\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "Let's first create a `MarkerCluster` object\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "marker_cluster = MarkerCluster()\n",
      "metadata": {
        "trusted": true
      },
      "outputs": [],
      "execution_count": 12
    },
    {
      "cell_type": "markdown",
      "source": "*TODO:* Create a new column in `spacex_df` dataframe called `marker_color` to store the marker colors based on the `class` value\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "\n# Apply a function to check the value of `class` column\n# If class=1, marker_color value will be green\n# If class=0, marker_color value will be red\nspacex_df['marker_color'] = spacex_df['class'].apply(lambda x: 'green' if x == 1 else 'red')",
      "metadata": {
        "trusted": true
      },
      "outputs": [],
      "execution_count": 25
    },
    {
      "cell_type": "markdown",
      "source": "*TODO:* For each launch result in `spacex_df` data frame, add a `folium.Marker` to `marker_cluster`\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "# Add marker_cluster to the map\nsite_map.add_child(marker_cluster)\n\n# Iterate through the `launch_sites_df` DataFrame\nfor index, record in launch_sites_df.iterrows():\n    # Extract the launch site name, latitude, and longitude\n    launch_site = record['Launch Site']\n    lat, long = record['Lat'], record['Long']\n    \n    # Create a Marker object for each launch site\n    marker = folium.Marker(\n        location=[lat, long],\n        popup=f\"Launch Site: {launch_site}\",  # Display the launch site name in a popup\n        icon=folium.Icon(color='blue')  # Customize the marker's color\n    )\n    \n    # Add the marker to the marker cluster\n    marker_cluster.add_child(marker)\n\n# Display the map\nsite_map",
      "metadata": {
        "trusted": true
      },
      "outputs": [
        {
          "execution_count": 26,
          "output_type": "execute_result",
          "data": {
            "text/plain": "<folium.folium.Map at 0x5c1d258>",
            "text/html": "<div style=\"width:100%;\"><div style=\"position:relative;width:100%;height:0;padding-bottom:60%;\"><span style=\"color:#565656\">Make this Notebook Trusted to load map: File -> Trust Notebook</span><iframe srcdoc=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    \n    &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;\n    \n        &lt;script&gt;\n            L_NO_TOUCH = false;\n            L_DISABLE_3D = false;\n        &lt;/script&gt;\n    \n    &lt;style&gt;html, body {width: 100%;height: 100%;margin: 0;padding: 0;}&lt;/style&gt;\n    &lt;style&gt;#map {position:absolute;top:0;bottom:0;right:0;left:0;}&lt;/style&gt;\n    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js&quot;&gt;&lt;/script&gt;\n    &lt;script src=&quot;https://code.jquery.com/jquery-3.7.1.min.js&quot;&gt;&lt;/script&gt;\n    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;\n    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js&quot;&gt;&lt;/script&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css&quot;/&gt;\n    \n            &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,\n                initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot; /&gt;\n            &lt;style&gt;\n                #map_709a2fa6150a8dc3dfcfa054c916f822 {\n                    position: relative;\n                    width: 100.0%;\n                    height: 100.0%;\n                    left: 0.0%;\n                    top: 0.0%;\n                }\n                .leaflet-container { font-size: 1rem; }\n            &lt;/style&gt;\n        \n    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/leaflet.markercluster.js&quot;&gt;&lt;/script&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/MarkerCluster.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/MarkerCluster.Default.css&quot;/&gt;\n&lt;/head&gt;\n&lt;body&gt;\n    \n    \n            &lt;div class=&quot;folium-map&quot; id=&quot;map_709a2fa6150a8dc3dfcfa054c916f822&quot; &gt;&lt;/div&gt;\n        \n&lt;/body&gt;\n&lt;script&gt;\n    \n    \n            var map_709a2fa6150a8dc3dfcfa054c916f822 = L.map(\n                &quot;map_709a2fa6150a8dc3dfcfa054c916f822&quot;,\n                {\n                    center: [29.559684888503615, -95.0830971930759],\n                    crs: L.CRS.EPSG3857,\n                    ...{\n  &quot;zoom&quot;: 5,\n  &quot;zoomControl&quot;: true,\n  &quot;preferCanvas&quot;: false,\n}\n\n                }\n            );\n\n            \n\n        \n    \n            var tile_layer_b4defbe5cee36d67c2b35b8167effd21 = L.tileLayer(\n                &quot;https://tile.openstreetmap.org/{z}/{x}/{y}.png&quot;,\n                {\n  &quot;minZoom&quot;: 0,\n  &quot;maxZoom&quot;: 19,\n  &quot;maxNativeZoom&quot;: 19,\n  &quot;noWrap&quot;: false,\n  &quot;attribution&quot;: &quot;\\u0026copy; \\u003ca href=\\&quot;https://www.openstreetmap.org/copyright\\&quot;\\u003eOpenStreetMap\\u003c/a\\u003e contributors&quot;,\n  &quot;subdomains&quot;: &quot;abc&quot;,\n  &quot;detectRetina&quot;: false,\n  &quot;tms&quot;: false,\n  &quot;opacity&quot;: 1,\n}\n\n            );\n        \n    \n            tile_layer_b4defbe5cee36d67c2b35b8167effd21.addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var circle_f9d1e0458d90d0f164ce1806ad9a3922 = L.circle(\n                [29.559684888503615, -95.0830971930759],\n                {&quot;bubblingMouseEvents&quot;: true, &quot;color&quot;: &quot;#d35400&quot;, &quot;dashArray&quot;: null, &quot;dashOffset&quot;: null, &quot;fill&quot;: true, &quot;fillColor&quot;: &quot;#d35400&quot;, &quot;fillOpacity&quot;: 0.2, &quot;fillRule&quot;: &quot;evenodd&quot;, &quot;lineCap&quot;: &quot;round&quot;, &quot;lineJoin&quot;: &quot;round&quot;, &quot;opacity&quot;: 1.0, &quot;radius&quot;: 1000, &quot;stroke&quot;: true, &quot;weight&quot;: 3}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n        var popup_66b9c95368c2e7dce14f3faf4dddc2fa = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_e0fa76024df2cd858b405dec907f77c4 = $(`&lt;div id=&quot;html_e0fa76024df2cd858b405dec907f77c4&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;NASA Johnson Space Center&lt;/div&gt;`)[0];\n                popup_66b9c95368c2e7dce14f3faf4dddc2fa.setContent(html_e0fa76024df2cd858b405dec907f77c4);\n            \n        \n\n        circle_f9d1e0458d90d0f164ce1806ad9a3922.bindPopup(popup_66b9c95368c2e7dce14f3faf4dddc2fa)\n        ;\n\n        \n    \n    \n            var marker_9b931d085ef65bcd01ad9e5fa659170e = L.marker(\n                [29.559684888503615, -95.0830971930759],\n                {\n}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var div_icon_c84426a2966483852029311a3b93250c = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eNASA JSC\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_9b931d085ef65bcd01ad9e5fa659170e.setIcon(div_icon_c84426a2966483852029311a3b93250c);\n        \n    \n            var circle_ecb5c9bbc09ff2622d6085e3d5231d6e = L.circle(\n                [28.562302, -80.577356],\n                {&quot;bubblingMouseEvents&quot;: true, &quot;color&quot;: &quot;#d35400&quot;, &quot;dashArray&quot;: null, &quot;dashOffset&quot;: null, &quot;fill&quot;: true, &quot;fillColor&quot;: &quot;#d35400&quot;, &quot;fillOpacity&quot;: 0.2, &quot;fillRule&quot;: &quot;evenodd&quot;, &quot;lineCap&quot;: &quot;round&quot;, &quot;lineJoin&quot;: &quot;round&quot;, &quot;opacity&quot;: 1.0, &quot;radius&quot;: 1000, &quot;stroke&quot;: true, &quot;weight&quot;: 3}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n        var popup_a3da88d914f4085123691cdf89e2f021 = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_384cc395db9bafc6196689eb683ce334 = $(`&lt;div id=&quot;html_384cc395db9bafc6196689eb683ce334&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;CCAFS LC&lt;/div&gt;`)[0];\n                popup_a3da88d914f4085123691cdf89e2f021.setContent(html_384cc395db9bafc6196689eb683ce334);\n            \n        \n\n        circle_ecb5c9bbc09ff2622d6085e3d5231d6e.bindPopup(popup_a3da88d914f4085123691cdf89e2f021)\n        ;\n\n        \n    \n    \n            var marker_f042a5114b678c8d7d6aa83bc20fd33f = L.marker(\n                [28.562302, -80.577356],\n                {\n}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var div_icon_f3b9e176bad1c77f277f26d80236a3eb = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eCCAFS LC\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_f042a5114b678c8d7d6aa83bc20fd33f.setIcon(div_icon_f3b9e176bad1c77f277f26d80236a3eb);\n        \n    \n            var circle_580e41c81ee926006711de9e4016dfb6 = L.circle(\n                [28.563197, -80.57682],\n                {&quot;bubblingMouseEvents&quot;: true, &quot;color&quot;: &quot;#d35400&quot;, &quot;dashArray&quot;: null, &quot;dashOffset&quot;: null, &quot;fill&quot;: true, &quot;fillColor&quot;: &quot;#d35400&quot;, &quot;fillOpacity&quot;: 0.2, &quot;fillRule&quot;: &quot;evenodd&quot;, &quot;lineCap&quot;: &quot;round&quot;, &quot;lineJoin&quot;: &quot;round&quot;, &quot;opacity&quot;: 1.0, &quot;radius&quot;: 1000, &quot;stroke&quot;: true, &quot;weight&quot;: 3}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n        var popup_31a9f03ff29f21014085291e92d02f3b = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_07b111b79b85640769354f0ba8a84cb6 = $(`&lt;div id=&quot;html_07b111b79b85640769354f0ba8a84cb6&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;CCAFS SLC&lt;/div&gt;`)[0];\n                popup_31a9f03ff29f21014085291e92d02f3b.setContent(html_07b111b79b85640769354f0ba8a84cb6);\n            \n        \n\n        circle_580e41c81ee926006711de9e4016dfb6.bindPopup(popup_31a9f03ff29f21014085291e92d02f3b)\n        ;\n\n        \n    \n    \n            var marker_f81b8b212600706ee8a6a708be75ac9d = L.marker(\n                [28.563197, -80.57682],\n                {\n}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var div_icon_21844f6717667cdfdabe47b91085280e = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eCCAFS SLC\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_f81b8b212600706ee8a6a708be75ac9d.setIcon(div_icon_21844f6717667cdfdabe47b91085280e);\n        \n    \n            var circle_2e0edfeb22dc594a08e41d0debe11b63 = L.circle(\n                [28.573255, -80.646895],\n                {&quot;bubblingMouseEvents&quot;: true, &quot;color&quot;: &quot;#d35400&quot;, &quot;dashArray&quot;: null, &quot;dashOffset&quot;: null, &quot;fill&quot;: true, &quot;fillColor&quot;: &quot;#d35400&quot;, &quot;fillOpacity&quot;: 0.2, &quot;fillRule&quot;: &quot;evenodd&quot;, &quot;lineCap&quot;: &quot;round&quot;, &quot;lineJoin&quot;: &quot;round&quot;, &quot;opacity&quot;: 1.0, &quot;radius&quot;: 1000, &quot;stroke&quot;: true, &quot;weight&quot;: 3}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n        var popup_466ca6065bfa7282804a3a6c57557b37 = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_820ec4f2fc572dac8348e0f82483851a = $(`&lt;div id=&quot;html_820ec4f2fc572dac8348e0f82483851a&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;KSC LC&lt;/div&gt;`)[0];\n                popup_466ca6065bfa7282804a3a6c57557b37.setContent(html_820ec4f2fc572dac8348e0f82483851a);\n            \n        \n\n        circle_2e0edfeb22dc594a08e41d0debe11b63.bindPopup(popup_466ca6065bfa7282804a3a6c57557b37)\n        ;\n\n        \n    \n    \n            var marker_d4fea838f1fcb5aa1b2a9ca62e7f24e4 = L.marker(\n                [28.573255, -80.646895],\n                {\n}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var div_icon_5c3def7285998ebc4db842a55ff76158 = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eKSC LC\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_d4fea838f1fcb5aa1b2a9ca62e7f24e4.setIcon(div_icon_5c3def7285998ebc4db842a55ff76158);\n        \n    \n            var circle_aadcdbfb586936c4dd051d842985921f = L.circle(\n                [34.632834, -120.610745],\n                {&quot;bubblingMouseEvents&quot;: true, &quot;color&quot;: &quot;#d35400&quot;, &quot;dashArray&quot;: null, &quot;dashOffset&quot;: null, &quot;fill&quot;: true, &quot;fillColor&quot;: &quot;#d35400&quot;, &quot;fillOpacity&quot;: 0.2, &quot;fillRule&quot;: &quot;evenodd&quot;, &quot;lineCap&quot;: &quot;round&quot;, &quot;lineJoin&quot;: &quot;round&quot;, &quot;opacity&quot;: 1.0, &quot;radius&quot;: 1000, &quot;stroke&quot;: true, &quot;weight&quot;: 3}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n        var popup_b18c2e4741101babe1e26aad317312fa = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_f56085d855b18f9f671c0a2856ea36f3 = $(`&lt;div id=&quot;html_f56085d855b18f9f671c0a2856ea36f3&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;VAFB SLC&lt;/div&gt;`)[0];\n                popup_b18c2e4741101babe1e26aad317312fa.setContent(html_f56085d855b18f9f671c0a2856ea36f3);\n            \n        \n\n        circle_aadcdbfb586936c4dd051d842985921f.bindPopup(popup_b18c2e4741101babe1e26aad317312fa)\n        ;\n\n        \n    \n    \n            var marker_ac76c225bb705661cd0b6722bf3b38b7 = L.marker(\n                [34.632834, -120.610745],\n                {\n}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var div_icon_c93b3d933e640d7c3b205d2e5e85fa6a = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eVAFB SLC\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_ac76c225bb705661cd0b6722bf3b38b7.setIcon(div_icon_c93b3d933e640d7c3b205d2e5e85fa6a);\n        \n    \n            tile_layer_b4defbe5cee36d67c2b35b8167effd21.addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var marker_cluster_df9ee73774014f1eea6fdc14f80d0248 = L.markerClusterGroup(\n                {\n}\n            );\n        \n    \n            var marker_e534c12a1bb97ca8aba0b9d04345c724 = L.marker(\n                [29.559684888503615, -95.0830971930759],\n                {\n}\n            ).addTo(marker_cluster_df9ee73774014f1eea6fdc14f80d0248);\n        \n    \n            var div_icon_e4a496500aac1e4f21dbaebeac4b76a8 = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eNASA JSC\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_e534c12a1bb97ca8aba0b9d04345c724.setIcon(div_icon_e4a496500aac1e4f21dbaebeac4b76a8);\n        \n    \n            marker_cluster_df9ee73774014f1eea6fdc14f80d0248.addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var marker_e39ccbd88f8d077f28cdeeb48690d19d = L.marker(\n                [28.56230197, -80.57735648],\n                {\n}\n            ).addTo(marker_cluster_df9ee73774014f1eea6fdc14f80d0248);\n        \n    \n            var icon_70061f42d6fc6a566fabc82ccdb00b36 = L.AwesomeMarkers.icon(\n                {\n  &quot;markerColor&quot;: &quot;blue&quot;,\n  &quot;iconColor&quot;: &quot;white&quot;,\n  &quot;icon&quot;: &quot;info-sign&quot;,\n  &quot;prefix&quot;: &quot;glyphicon&quot;,\n  &quot;extraClasses&quot;: &quot;fa-rotate-0&quot;,\n}\n            );\n            marker_e39ccbd88f8d077f28cdeeb48690d19d.setIcon(icon_70061f42d6fc6a566fabc82ccdb00b36);\n        \n    \n        var popup_1c173868e0bc9af56af582d3411ed6e2 = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_75bf4663e637ef60e011bae5ad30f173 = $(`&lt;div id=&quot;html_75bf4663e637ef60e011bae5ad30f173&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;Launch Site: CCAFS LC-40&lt;/div&gt;`)[0];\n                popup_1c173868e0bc9af56af582d3411ed6e2.setContent(html_75bf4663e637ef60e011bae5ad30f173);\n            \n        \n\n        marker_e39ccbd88f8d077f28cdeeb48690d19d.bindPopup(popup_1c173868e0bc9af56af582d3411ed6e2)\n        ;\n\n        \n    \n    \n            var marker_44249cf0a4e80cdc853c49b74596bfc4 = L.marker(\n                [28.56319718, -80.57682003],\n                {\n}\n            ).addTo(marker_cluster_df9ee73774014f1eea6fdc14f80d0248);\n        \n    \n            var icon_c3fb405227060db20d7b176afb8d1a46 = L.AwesomeMarkers.icon(\n                {\n  &quot;markerColor&quot;: &quot;blue&quot;,\n  &quot;iconColor&quot;: &quot;white&quot;,\n  &quot;icon&quot;: &quot;info-sign&quot;,\n  &quot;prefix&quot;: &quot;glyphicon&quot;,\n  &quot;extraClasses&quot;: &quot;fa-rotate-0&quot;,\n}\n            );\n            marker_44249cf0a4e80cdc853c49b74596bfc4.setIcon(icon_c3fb405227060db20d7b176afb8d1a46);\n        \n    \n        var popup_8b09df7bcb90e94cb32719a5ff31446c = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_8c1a94646dfbfb4590677cdf2356aaeb = $(`&lt;div id=&quot;html_8c1a94646dfbfb4590677cdf2356aaeb&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;Launch Site: CCAFS SLC-40&lt;/div&gt;`)[0];\n                popup_8b09df7bcb90e94cb32719a5ff31446c.setContent(html_8c1a94646dfbfb4590677cdf2356aaeb);\n            \n        \n\n        marker_44249cf0a4e80cdc853c49b74596bfc4.bindPopup(popup_8b09df7bcb90e94cb32719a5ff31446c)\n        ;\n\n        \n    \n    \n            var marker_0fec9004400e9d4d2d5b251d11109bd9 = L.marker(\n                [28.57325457, -80.64689529],\n                {\n}\n            ).addTo(marker_cluster_df9ee73774014f1eea6fdc14f80d0248);\n        \n    \n            var icon_67e90cb07a6a593e9cedb68f95fabfab = L.AwesomeMarkers.icon(\n                {\n  &quot;markerColor&quot;: &quot;blue&quot;,\n  &quot;iconColor&quot;: &quot;white&quot;,\n  &quot;icon&quot;: &quot;info-sign&quot;,\n  &quot;prefix&quot;: &quot;glyphicon&quot;,\n  &quot;extraClasses&quot;: &quot;fa-rotate-0&quot;,\n}\n            );\n            marker_0fec9004400e9d4d2d5b251d11109bd9.setIcon(icon_67e90cb07a6a593e9cedb68f95fabfab);\n        \n    \n        var popup_1c0d7a58b2348af49b5ee71b1e268725 = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_b1815016a603c4c84e3898a0a5c455b0 = $(`&lt;div id=&quot;html_b1815016a603c4c84e3898a0a5c455b0&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;Launch Site: KSC LC-39A&lt;/div&gt;`)[0];\n                popup_1c0d7a58b2348af49b5ee71b1e268725.setContent(html_b1815016a603c4c84e3898a0a5c455b0);\n            \n        \n\n        marker_0fec9004400e9d4d2d5b251d11109bd9.bindPopup(popup_1c0d7a58b2348af49b5ee71b1e268725)\n        ;\n\n        \n    \n    \n            var marker_17c03a64ccc30765e8701eceec5b3e4d = L.marker(\n                [34.63283416, -120.6107455],\n                {\n}\n            ).addTo(marker_cluster_df9ee73774014f1eea6fdc14f80d0248);\n        \n    \n            var icon_124ccddd7b99a47a811df7e22ac5de08 = L.AwesomeMarkers.icon(\n                {\n  &quot;markerColor&quot;: &quot;blue&quot;,\n  &quot;iconColor&quot;: &quot;white&quot;,\n  &quot;icon&quot;: &quot;info-sign&quot;,\n  &quot;prefix&quot;: &quot;glyphicon&quot;,\n  &quot;extraClasses&quot;: &quot;fa-rotate-0&quot;,\n}\n            );\n            marker_17c03a64ccc30765e8701eceec5b3e4d.setIcon(icon_124ccddd7b99a47a811df7e22ac5de08);\n        \n    \n        var popup_4744626185c36d612e8888a41a8dfe02 = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_d6f44fc52b742954c476f79b4ae65a62 = $(`&lt;div id=&quot;html_d6f44fc52b742954c476f79b4ae65a62&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;Launch Site: VAFB SLC-4E&lt;/div&gt;`)[0];\n                popup_4744626185c36d612e8888a41a8dfe02.setContent(html_d6f44fc52b742954c476f79b4ae65a62);\n            \n        \n\n        marker_17c03a64ccc30765e8701eceec5b3e4d.bindPopup(popup_4744626185c36d612e8888a41a8dfe02)\n        ;\n\n        \n    \n&lt;/script&gt;\n&lt;/html&gt;\" style=\"position:absolute;width:100%;height:100%;left:0;top:0;border:none !important;\" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div></div>"
          },
          "metadata": {}
        }
      ],
      "execution_count": 26
    },
    {
      "cell_type": "markdown",
      "source": "Your updated map may look like the following screenshots:\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "<center>\n    <img src=\"https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBM-DS0321EN-SkillsNetwork/labs/module_3/images/launch_site_marker_cluster.png\">\n</center>\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "<center>\n    <img src=\"https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBM-DS0321EN-SkillsNetwork/labs/module_3/images/launch_site_marker_cluster_zoomed.png\">\n</center>\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "From the color-labeled markers in marker clusters, you should be able to easily identify which launch sites have relatively high success rates.\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "# TASK 3: Calculate the distances between a launch site to its proximities\n",
      "metadata": {
        "trusted": true
      },
      "outputs": [],
      "execution_count": 15
    },
    {
      "cell_type": "markdown",
      "source": "Next, we need to explore and analyze the proximities of launch sites.\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "Let's first add a `MousePosition` on the map to get coordinate for a mouse over a point on the map. As such, while you are exploring the map, you can easily find the coordinates of any points of interests (such as railway)\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "marker_cluster = MarkerCluster()\nsite_map.add_child(marker_cluster)\n\n# Add markers for each launch site\nfor index, record in launch_sites_df.iterrows():\n    launch_site = record['Launch Site']\n    lat, long = record['Lat'], record['Long']\n    marker = folium.Marker(\n        location=[lat, long],\n        popup=f\"Launch Site: {launch_site}\",\n        icon=folium.Icon(color='blue')\n    )\n    marker_cluster.add_child(marker)\n\n# Add MousePosition to display latitude and longitude when the mouse hovers over the map\nformatter = \"function(num) {return L.Util.formatNum(num, 5);};\"\nmouse_position = MousePosition(\n    position='topright',          # Position of the mouse position control on the map\n    separator=' Long: ',          # Separator between Lat and Long\n    empty_string='NaN',           # Text displayed when the mouse is outside the map\n    lng_first=False,              # Whether longitude should be displayed first\n    num_digits=5,                 # Number of decimal places for coordinates\n    prefix='Lat:',                # Text prefixing the latitude value\n    lat_formatter=formatter,      # JavaScript function to format latitude\n    lng_formatter=formatter       # JavaScript function to format longitude\n)\n\n# Add the MousePosition control to the map\nsite_map.add_child(mouse_position)\n\n# Display the map\nsite_map",
      "metadata": {
        "trusted": true
      },
      "outputs": [
        {
          "execution_count": 27,
          "output_type": "execute_result",
          "data": {
            "text/plain": "<folium.folium.Map at 0x5c1d258>",
            "text/html": "<div style=\"width:100%;\"><div style=\"position:relative;width:100%;height:0;padding-bottom:60%;\"><span style=\"color:#565656\">Make this Notebook Trusted to load map: File -> Trust Notebook</span><iframe srcdoc=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    \n    &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;\n    \n        &lt;script&gt;\n            L_NO_TOUCH = false;\n            L_DISABLE_3D = false;\n        &lt;/script&gt;\n    \n    &lt;style&gt;html, body {width: 100%;height: 100%;margin: 0;padding: 0;}&lt;/style&gt;\n    &lt;style&gt;#map {position:absolute;top:0;bottom:0;right:0;left:0;}&lt;/style&gt;\n    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js&quot;&gt;&lt;/script&gt;\n    &lt;script src=&quot;https://code.jquery.com/jquery-3.7.1.min.js&quot;&gt;&lt;/script&gt;\n    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;\n    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js&quot;&gt;&lt;/script&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css&quot;/&gt;\n    \n            &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,\n                initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot; /&gt;\n            &lt;style&gt;\n                #map_709a2fa6150a8dc3dfcfa054c916f822 {\n                    position: relative;\n                    width: 100.0%;\n                    height: 100.0%;\n                    left: 0.0%;\n                    top: 0.0%;\n                }\n                .leaflet-container { font-size: 1rem; }\n            &lt;/style&gt;\n        \n    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/leaflet.markercluster.js&quot;&gt;&lt;/script&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/MarkerCluster.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/MarkerCluster.Default.css&quot;/&gt;\n    &lt;script src=&quot;https://cdn.jsdelivr.net/gh/ardhi/Leaflet.MousePosition/src/L.Control.MousePosition.min.js&quot;&gt;&lt;/script&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/gh/ardhi/Leaflet.MousePosition/src/L.Control.MousePosition.min.css&quot;/&gt;\n&lt;/head&gt;\n&lt;body&gt;\n    \n    \n            &lt;div class=&quot;folium-map&quot; id=&quot;map_709a2fa6150a8dc3dfcfa054c916f822&quot; &gt;&lt;/div&gt;\n        \n&lt;/body&gt;\n&lt;script&gt;\n    \n    \n            var map_709a2fa6150a8dc3dfcfa054c916f822 = L.map(\n                &quot;map_709a2fa6150a8dc3dfcfa054c916f822&quot;,\n                {\n                    center: [29.559684888503615, -95.0830971930759],\n                    crs: L.CRS.EPSG3857,\n                    ...{\n  &quot;zoom&quot;: 5,\n  &quot;zoomControl&quot;: true,\n  &quot;preferCanvas&quot;: false,\n}\n\n                }\n            );\n\n            \n\n        \n    \n            var tile_layer_b4defbe5cee36d67c2b35b8167effd21 = L.tileLayer(\n                &quot;https://tile.openstreetmap.org/{z}/{x}/{y}.png&quot;,\n                {\n  &quot;minZoom&quot;: 0,\n  &quot;maxZoom&quot;: 19,\n  &quot;maxNativeZoom&quot;: 19,\n  &quot;noWrap&quot;: false,\n  &quot;attribution&quot;: &quot;\\u0026copy; \\u003ca href=\\&quot;https://www.openstreetmap.org/copyright\\&quot;\\u003eOpenStreetMap\\u003c/a\\u003e contributors&quot;,\n  &quot;subdomains&quot;: &quot;abc&quot;,\n  &quot;detectRetina&quot;: false,\n  &quot;tms&quot;: false,\n  &quot;opacity&quot;: 1,\n}\n\n            );\n        \n    \n            tile_layer_b4defbe5cee36d67c2b35b8167effd21.addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var circle_f9d1e0458d90d0f164ce1806ad9a3922 = L.circle(\n                [29.559684888503615, -95.0830971930759],\n                {&quot;bubblingMouseEvents&quot;: true, &quot;color&quot;: &quot;#d35400&quot;, &quot;dashArray&quot;: null, &quot;dashOffset&quot;: null, &quot;fill&quot;: true, &quot;fillColor&quot;: &quot;#d35400&quot;, &quot;fillOpacity&quot;: 0.2, &quot;fillRule&quot;: &quot;evenodd&quot;, &quot;lineCap&quot;: &quot;round&quot;, &quot;lineJoin&quot;: &quot;round&quot;, &quot;opacity&quot;: 1.0, &quot;radius&quot;: 1000, &quot;stroke&quot;: true, &quot;weight&quot;: 3}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n        var popup_66b9c95368c2e7dce14f3faf4dddc2fa = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_e0fa76024df2cd858b405dec907f77c4 = $(`&lt;div id=&quot;html_e0fa76024df2cd858b405dec907f77c4&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;NASA Johnson Space Center&lt;/div&gt;`)[0];\n                popup_66b9c95368c2e7dce14f3faf4dddc2fa.setContent(html_e0fa76024df2cd858b405dec907f77c4);\n            \n        \n\n        circle_f9d1e0458d90d0f164ce1806ad9a3922.bindPopup(popup_66b9c95368c2e7dce14f3faf4dddc2fa)\n        ;\n\n        \n    \n    \n            var marker_9b931d085ef65bcd01ad9e5fa659170e = L.marker(\n                [29.559684888503615, -95.0830971930759],\n                {\n}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var div_icon_c84426a2966483852029311a3b93250c = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eNASA JSC\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_9b931d085ef65bcd01ad9e5fa659170e.setIcon(div_icon_c84426a2966483852029311a3b93250c);\n        \n    \n            var circle_ecb5c9bbc09ff2622d6085e3d5231d6e = L.circle(\n                [28.562302, -80.577356],\n                {&quot;bubblingMouseEvents&quot;: true, &quot;color&quot;: &quot;#d35400&quot;, &quot;dashArray&quot;: null, &quot;dashOffset&quot;: null, &quot;fill&quot;: true, &quot;fillColor&quot;: &quot;#d35400&quot;, &quot;fillOpacity&quot;: 0.2, &quot;fillRule&quot;: &quot;evenodd&quot;, &quot;lineCap&quot;: &quot;round&quot;, &quot;lineJoin&quot;: &quot;round&quot;, &quot;opacity&quot;: 1.0, &quot;radius&quot;: 1000, &quot;stroke&quot;: true, &quot;weight&quot;: 3}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n        var popup_a3da88d914f4085123691cdf89e2f021 = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_384cc395db9bafc6196689eb683ce334 = $(`&lt;div id=&quot;html_384cc395db9bafc6196689eb683ce334&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;CCAFS LC&lt;/div&gt;`)[0];\n                popup_a3da88d914f4085123691cdf89e2f021.setContent(html_384cc395db9bafc6196689eb683ce334);\n            \n        \n\n        circle_ecb5c9bbc09ff2622d6085e3d5231d6e.bindPopup(popup_a3da88d914f4085123691cdf89e2f021)\n        ;\n\n        \n    \n    \n            var marker_f042a5114b678c8d7d6aa83bc20fd33f = L.marker(\n                [28.562302, -80.577356],\n                {\n}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var div_icon_f3b9e176bad1c77f277f26d80236a3eb = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eCCAFS LC\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_f042a5114b678c8d7d6aa83bc20fd33f.setIcon(div_icon_f3b9e176bad1c77f277f26d80236a3eb);\n        \n    \n            var circle_580e41c81ee926006711de9e4016dfb6 = L.circle(\n                [28.563197, -80.57682],\n                {&quot;bubblingMouseEvents&quot;: true, &quot;color&quot;: &quot;#d35400&quot;, &quot;dashArray&quot;: null, &quot;dashOffset&quot;: null, &quot;fill&quot;: true, &quot;fillColor&quot;: &quot;#d35400&quot;, &quot;fillOpacity&quot;: 0.2, &quot;fillRule&quot;: &quot;evenodd&quot;, &quot;lineCap&quot;: &quot;round&quot;, &quot;lineJoin&quot;: &quot;round&quot;, &quot;opacity&quot;: 1.0, &quot;radius&quot;: 1000, &quot;stroke&quot;: true, &quot;weight&quot;: 3}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n        var popup_31a9f03ff29f21014085291e92d02f3b = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_07b111b79b85640769354f0ba8a84cb6 = $(`&lt;div id=&quot;html_07b111b79b85640769354f0ba8a84cb6&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;CCAFS SLC&lt;/div&gt;`)[0];\n                popup_31a9f03ff29f21014085291e92d02f3b.setContent(html_07b111b79b85640769354f0ba8a84cb6);\n            \n        \n\n        circle_580e41c81ee926006711de9e4016dfb6.bindPopup(popup_31a9f03ff29f21014085291e92d02f3b)\n        ;\n\n        \n    \n    \n            var marker_f81b8b212600706ee8a6a708be75ac9d = L.marker(\n                [28.563197, -80.57682],\n                {\n}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var div_icon_21844f6717667cdfdabe47b91085280e = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eCCAFS SLC\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_f81b8b212600706ee8a6a708be75ac9d.setIcon(div_icon_21844f6717667cdfdabe47b91085280e);\n        \n    \n            var circle_2e0edfeb22dc594a08e41d0debe11b63 = L.circle(\n                [28.573255, -80.646895],\n                {&quot;bubblingMouseEvents&quot;: true, &quot;color&quot;: &quot;#d35400&quot;, &quot;dashArray&quot;: null, &quot;dashOffset&quot;: null, &quot;fill&quot;: true, &quot;fillColor&quot;: &quot;#d35400&quot;, &quot;fillOpacity&quot;: 0.2, &quot;fillRule&quot;: &quot;evenodd&quot;, &quot;lineCap&quot;: &quot;round&quot;, &quot;lineJoin&quot;: &quot;round&quot;, &quot;opacity&quot;: 1.0, &quot;radius&quot;: 1000, &quot;stroke&quot;: true, &quot;weight&quot;: 3}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n        var popup_466ca6065bfa7282804a3a6c57557b37 = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_820ec4f2fc572dac8348e0f82483851a = $(`&lt;div id=&quot;html_820ec4f2fc572dac8348e0f82483851a&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;KSC LC&lt;/div&gt;`)[0];\n                popup_466ca6065bfa7282804a3a6c57557b37.setContent(html_820ec4f2fc572dac8348e0f82483851a);\n            \n        \n\n        circle_2e0edfeb22dc594a08e41d0debe11b63.bindPopup(popup_466ca6065bfa7282804a3a6c57557b37)\n        ;\n\n        \n    \n    \n            var marker_d4fea838f1fcb5aa1b2a9ca62e7f24e4 = L.marker(\n                [28.573255, -80.646895],\n                {\n}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var div_icon_5c3def7285998ebc4db842a55ff76158 = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eKSC LC\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_d4fea838f1fcb5aa1b2a9ca62e7f24e4.setIcon(div_icon_5c3def7285998ebc4db842a55ff76158);\n        \n    \n            var circle_aadcdbfb586936c4dd051d842985921f = L.circle(\n                [34.632834, -120.610745],\n                {&quot;bubblingMouseEvents&quot;: true, &quot;color&quot;: &quot;#d35400&quot;, &quot;dashArray&quot;: null, &quot;dashOffset&quot;: null, &quot;fill&quot;: true, &quot;fillColor&quot;: &quot;#d35400&quot;, &quot;fillOpacity&quot;: 0.2, &quot;fillRule&quot;: &quot;evenodd&quot;, &quot;lineCap&quot;: &quot;round&quot;, &quot;lineJoin&quot;: &quot;round&quot;, &quot;opacity&quot;: 1.0, &quot;radius&quot;: 1000, &quot;stroke&quot;: true, &quot;weight&quot;: 3}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n        var popup_b18c2e4741101babe1e26aad317312fa = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_f56085d855b18f9f671c0a2856ea36f3 = $(`&lt;div id=&quot;html_f56085d855b18f9f671c0a2856ea36f3&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;VAFB SLC&lt;/div&gt;`)[0];\n                popup_b18c2e4741101babe1e26aad317312fa.setContent(html_f56085d855b18f9f671c0a2856ea36f3);\n            \n        \n\n        circle_aadcdbfb586936c4dd051d842985921f.bindPopup(popup_b18c2e4741101babe1e26aad317312fa)\n        ;\n\n        \n    \n    \n            var marker_ac76c225bb705661cd0b6722bf3b38b7 = L.marker(\n                [34.632834, -120.610745],\n                {\n}\n            ).addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var div_icon_c93b3d933e640d7c3b205d2e5e85fa6a = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eVAFB SLC\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_ac76c225bb705661cd0b6722bf3b38b7.setIcon(div_icon_c93b3d933e640d7c3b205d2e5e85fa6a);\n        \n    \n            tile_layer_b4defbe5cee36d67c2b35b8167effd21.addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var marker_cluster_df9ee73774014f1eea6fdc14f80d0248 = L.markerClusterGroup(\n                {\n}\n            );\n        \n    \n            var marker_e534c12a1bb97ca8aba0b9d04345c724 = L.marker(\n                [29.559684888503615, -95.0830971930759],\n                {\n}\n            ).addTo(marker_cluster_df9ee73774014f1eea6fdc14f80d0248);\n        \n    \n            var div_icon_e4a496500aac1e4f21dbaebeac4b76a8 = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eNASA JSC\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_e534c12a1bb97ca8aba0b9d04345c724.setIcon(div_icon_e4a496500aac1e4f21dbaebeac4b76a8);\n        \n    \n            marker_cluster_df9ee73774014f1eea6fdc14f80d0248.addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var marker_e39ccbd88f8d077f28cdeeb48690d19d = L.marker(\n                [28.56230197, -80.57735648],\n                {\n}\n            ).addTo(marker_cluster_df9ee73774014f1eea6fdc14f80d0248);\n        \n    \n            var icon_70061f42d6fc6a566fabc82ccdb00b36 = L.AwesomeMarkers.icon(\n                {\n  &quot;markerColor&quot;: &quot;blue&quot;,\n  &quot;iconColor&quot;: &quot;white&quot;,\n  &quot;icon&quot;: &quot;info-sign&quot;,\n  &quot;prefix&quot;: &quot;glyphicon&quot;,\n  &quot;extraClasses&quot;: &quot;fa-rotate-0&quot;,\n}\n            );\n            marker_e39ccbd88f8d077f28cdeeb48690d19d.setIcon(icon_70061f42d6fc6a566fabc82ccdb00b36);\n        \n    \n        var popup_1c173868e0bc9af56af582d3411ed6e2 = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_75bf4663e637ef60e011bae5ad30f173 = $(`&lt;div id=&quot;html_75bf4663e637ef60e011bae5ad30f173&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;Launch Site: CCAFS LC-40&lt;/div&gt;`)[0];\n                popup_1c173868e0bc9af56af582d3411ed6e2.setContent(html_75bf4663e637ef60e011bae5ad30f173);\n            \n        \n\n        marker_e39ccbd88f8d077f28cdeeb48690d19d.bindPopup(popup_1c173868e0bc9af56af582d3411ed6e2)\n        ;\n\n        \n    \n    \n            var marker_44249cf0a4e80cdc853c49b74596bfc4 = L.marker(\n                [28.56319718, -80.57682003],\n                {\n}\n            ).addTo(marker_cluster_df9ee73774014f1eea6fdc14f80d0248);\n        \n    \n            var icon_c3fb405227060db20d7b176afb8d1a46 = L.AwesomeMarkers.icon(\n                {\n  &quot;markerColor&quot;: &quot;blue&quot;,\n  &quot;iconColor&quot;: &quot;white&quot;,\n  &quot;icon&quot;: &quot;info-sign&quot;,\n  &quot;prefix&quot;: &quot;glyphicon&quot;,\n  &quot;extraClasses&quot;: &quot;fa-rotate-0&quot;,\n}\n            );\n            marker_44249cf0a4e80cdc853c49b74596bfc4.setIcon(icon_c3fb405227060db20d7b176afb8d1a46);\n        \n    \n        var popup_8b09df7bcb90e94cb32719a5ff31446c = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_8c1a94646dfbfb4590677cdf2356aaeb = $(`&lt;div id=&quot;html_8c1a94646dfbfb4590677cdf2356aaeb&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;Launch Site: CCAFS SLC-40&lt;/div&gt;`)[0];\n                popup_8b09df7bcb90e94cb32719a5ff31446c.setContent(html_8c1a94646dfbfb4590677cdf2356aaeb);\n            \n        \n\n        marker_44249cf0a4e80cdc853c49b74596bfc4.bindPopup(popup_8b09df7bcb90e94cb32719a5ff31446c)\n        ;\n\n        \n    \n    \n            var marker_0fec9004400e9d4d2d5b251d11109bd9 = L.marker(\n                [28.57325457, -80.64689529],\n                {\n}\n            ).addTo(marker_cluster_df9ee73774014f1eea6fdc14f80d0248);\n        \n    \n            var icon_67e90cb07a6a593e9cedb68f95fabfab = L.AwesomeMarkers.icon(\n                {\n  &quot;markerColor&quot;: &quot;blue&quot;,\n  &quot;iconColor&quot;: &quot;white&quot;,\n  &quot;icon&quot;: &quot;info-sign&quot;,\n  &quot;prefix&quot;: &quot;glyphicon&quot;,\n  &quot;extraClasses&quot;: &quot;fa-rotate-0&quot;,\n}\n            );\n            marker_0fec9004400e9d4d2d5b251d11109bd9.setIcon(icon_67e90cb07a6a593e9cedb68f95fabfab);\n        \n    \n        var popup_1c0d7a58b2348af49b5ee71b1e268725 = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_b1815016a603c4c84e3898a0a5c455b0 = $(`&lt;div id=&quot;html_b1815016a603c4c84e3898a0a5c455b0&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;Launch Site: KSC LC-39A&lt;/div&gt;`)[0];\n                popup_1c0d7a58b2348af49b5ee71b1e268725.setContent(html_b1815016a603c4c84e3898a0a5c455b0);\n            \n        \n\n        marker_0fec9004400e9d4d2d5b251d11109bd9.bindPopup(popup_1c0d7a58b2348af49b5ee71b1e268725)\n        ;\n\n        \n    \n    \n            var marker_17c03a64ccc30765e8701eceec5b3e4d = L.marker(\n                [34.63283416, -120.6107455],\n                {\n}\n            ).addTo(marker_cluster_df9ee73774014f1eea6fdc14f80d0248);\n        \n    \n            var icon_124ccddd7b99a47a811df7e22ac5de08 = L.AwesomeMarkers.icon(\n                {\n  &quot;markerColor&quot;: &quot;blue&quot;,\n  &quot;iconColor&quot;: &quot;white&quot;,\n  &quot;icon&quot;: &quot;info-sign&quot;,\n  &quot;prefix&quot;: &quot;glyphicon&quot;,\n  &quot;extraClasses&quot;: &quot;fa-rotate-0&quot;,\n}\n            );\n            marker_17c03a64ccc30765e8701eceec5b3e4d.setIcon(icon_124ccddd7b99a47a811df7e22ac5de08);\n        \n    \n        var popup_4744626185c36d612e8888a41a8dfe02 = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_d6f44fc52b742954c476f79b4ae65a62 = $(`&lt;div id=&quot;html_d6f44fc52b742954c476f79b4ae65a62&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;Launch Site: VAFB SLC-4E&lt;/div&gt;`)[0];\n                popup_4744626185c36d612e8888a41a8dfe02.setContent(html_d6f44fc52b742954c476f79b4ae65a62);\n            \n        \n\n        marker_17c03a64ccc30765e8701eceec5b3e4d.bindPopup(popup_4744626185c36d612e8888a41a8dfe02)\n        ;\n\n        \n    \n    \n            tile_layer_b4defbe5cee36d67c2b35b8167effd21.addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            marker_cluster_df9ee73774014f1eea6fdc14f80d0248.addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var marker_cluster_1aaef7b81a97bf80e2fd5b44987e13d8 = L.markerClusterGroup(\n                {\n}\n            );\n        \n    \n            var marker_fa4f397902c644e4074de782482a393c = L.marker(\n                [28.56230197, -80.57735648],\n                {\n}\n            ).addTo(marker_cluster_1aaef7b81a97bf80e2fd5b44987e13d8);\n        \n    \n            var icon_369b4fefbd5ea026c7a29bf937b6cdc1 = L.AwesomeMarkers.icon(\n                {\n  &quot;markerColor&quot;: &quot;blue&quot;,\n  &quot;iconColor&quot;: &quot;white&quot;,\n  &quot;icon&quot;: &quot;info-sign&quot;,\n  &quot;prefix&quot;: &quot;glyphicon&quot;,\n  &quot;extraClasses&quot;: &quot;fa-rotate-0&quot;,\n}\n            );\n            marker_fa4f397902c644e4074de782482a393c.setIcon(icon_369b4fefbd5ea026c7a29bf937b6cdc1);\n        \n    \n        var popup_9f32426517593395e4d4e7d97da6035a = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_e487822eddf8432d99ef9389fff47a18 = $(`&lt;div id=&quot;html_e487822eddf8432d99ef9389fff47a18&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;Launch Site: CCAFS LC-40&lt;/div&gt;`)[0];\n                popup_9f32426517593395e4d4e7d97da6035a.setContent(html_e487822eddf8432d99ef9389fff47a18);\n            \n        \n\n        marker_fa4f397902c644e4074de782482a393c.bindPopup(popup_9f32426517593395e4d4e7d97da6035a)\n        ;\n\n        \n    \n    \n            var marker_137583f6d93788ac4fa82f96ff3cd529 = L.marker(\n                [28.56319718, -80.57682003],\n                {\n}\n            ).addTo(marker_cluster_1aaef7b81a97bf80e2fd5b44987e13d8);\n        \n    \n            var icon_22f86ecee94ebb2d40347f5a7b82710d = L.AwesomeMarkers.icon(\n                {\n  &quot;markerColor&quot;: &quot;blue&quot;,\n  &quot;iconColor&quot;: &quot;white&quot;,\n  &quot;icon&quot;: &quot;info-sign&quot;,\n  &quot;prefix&quot;: &quot;glyphicon&quot;,\n  &quot;extraClasses&quot;: &quot;fa-rotate-0&quot;,\n}\n            );\n            marker_137583f6d93788ac4fa82f96ff3cd529.setIcon(icon_22f86ecee94ebb2d40347f5a7b82710d);\n        \n    \n        var popup_dd16ff730efa85b4ffa25fd7fd8d67a5 = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_eb943c969a66cab8a1c050bb9af2b9d4 = $(`&lt;div id=&quot;html_eb943c969a66cab8a1c050bb9af2b9d4&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;Launch Site: CCAFS SLC-40&lt;/div&gt;`)[0];\n                popup_dd16ff730efa85b4ffa25fd7fd8d67a5.setContent(html_eb943c969a66cab8a1c050bb9af2b9d4);\n            \n        \n\n        marker_137583f6d93788ac4fa82f96ff3cd529.bindPopup(popup_dd16ff730efa85b4ffa25fd7fd8d67a5)\n        ;\n\n        \n    \n    \n            var marker_64bdcaecafd47b260e4e8733b89a0b1e = L.marker(\n                [28.57325457, -80.64689529],\n                {\n}\n            ).addTo(marker_cluster_1aaef7b81a97bf80e2fd5b44987e13d8);\n        \n    \n            var icon_6ba91a87801fad906284c8ee92094a7f = L.AwesomeMarkers.icon(\n                {\n  &quot;markerColor&quot;: &quot;blue&quot;,\n  &quot;iconColor&quot;: &quot;white&quot;,\n  &quot;icon&quot;: &quot;info-sign&quot;,\n  &quot;prefix&quot;: &quot;glyphicon&quot;,\n  &quot;extraClasses&quot;: &quot;fa-rotate-0&quot;,\n}\n            );\n            marker_64bdcaecafd47b260e4e8733b89a0b1e.setIcon(icon_6ba91a87801fad906284c8ee92094a7f);\n        \n    \n        var popup_201b7afc9b3b99fada376481ee2b2699 = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_9a1efdefd321847478c40fcaa07b9b4a = $(`&lt;div id=&quot;html_9a1efdefd321847478c40fcaa07b9b4a&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;Launch Site: KSC LC-39A&lt;/div&gt;`)[0];\n                popup_201b7afc9b3b99fada376481ee2b2699.setContent(html_9a1efdefd321847478c40fcaa07b9b4a);\n            \n        \n\n        marker_64bdcaecafd47b260e4e8733b89a0b1e.bindPopup(popup_201b7afc9b3b99fada376481ee2b2699)\n        ;\n\n        \n    \n    \n            var marker_6fac0a7b4f2c9cb7a9dab8807c98fdc9 = L.marker(\n                [34.63283416, -120.6107455],\n                {\n}\n            ).addTo(marker_cluster_1aaef7b81a97bf80e2fd5b44987e13d8);\n        \n    \n            var icon_ecb2a39def2dcc37774b6cade66b6ddb = L.AwesomeMarkers.icon(\n                {\n  &quot;markerColor&quot;: &quot;blue&quot;,\n  &quot;iconColor&quot;: &quot;white&quot;,\n  &quot;icon&quot;: &quot;info-sign&quot;,\n  &quot;prefix&quot;: &quot;glyphicon&quot;,\n  &quot;extraClasses&quot;: &quot;fa-rotate-0&quot;,\n}\n            );\n            marker_6fac0a7b4f2c9cb7a9dab8807c98fdc9.setIcon(icon_ecb2a39def2dcc37774b6cade66b6ddb);\n        \n    \n        var popup_7746608175905079b9ec612012374eb8 = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_559700442200b1d03c923051b851e6fb = $(`&lt;div id=&quot;html_559700442200b1d03c923051b851e6fb&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;Launch Site: VAFB SLC-4E&lt;/div&gt;`)[0];\n                popup_7746608175905079b9ec612012374eb8.setContent(html_559700442200b1d03c923051b851e6fb);\n            \n        \n\n        marker_6fac0a7b4f2c9cb7a9dab8807c98fdc9.bindPopup(popup_7746608175905079b9ec612012374eb8)\n        ;\n\n        \n    \n    \n            marker_cluster_1aaef7b81a97bf80e2fd5b44987e13d8.addTo(map_709a2fa6150a8dc3dfcfa054c916f822);\n        \n    \n            var mouse_position_951bc1648446f07ad79248b17d300583 = new L.Control.MousePosition(\n                {\n  &quot;position&quot;: &quot;topright&quot;,\n  &quot;separator&quot;: &quot; Long: &quot;,\n  &quot;emptyString&quot;: &quot;NaN&quot;,\n  &quot;lngFirst&quot;: false,\n  &quot;numDigits&quot;: 5,\n  &quot;prefix&quot;: &quot;Lat:&quot;,\n}\n            );\n            mouse_position_951bc1648446f07ad79248b17d300583.options[&quot;latFormatter&quot;] =\n                function(num) {return L.Util.formatNum(num, 5);};;\n            mouse_position_951bc1648446f07ad79248b17d300583.options[&quot;lngFormatter&quot;] =\n                function(num) {return L.Util.formatNum(num, 5);};;\n            map_709a2fa6150a8dc3dfcfa054c916f822.addControl(mouse_position_951bc1648446f07ad79248b17d300583);\n        \n&lt;/script&gt;\n&lt;/html&gt;\" style=\"position:absolute;width:100%;height:100%;left:0;top:0;border:none !important;\" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div></div>"
          },
          "metadata": {}
        }
      ],
      "execution_count": 27
    },
    {
      "cell_type": "markdown",
      "source": "Now zoom in to a launch site and explore its proximity to see if you can easily find any railway, highway, coastline, etc. Move your mouse to these points and mark down their coordinates (shown on the top-left) in order to the distance to the launch site.\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "Now zoom in to a launch site and explore its proximity to see if you can easily find any railway, highway, coastline, etc. Move your mouse to these points and mark down their coordinates (shown on the top-left) in order to the distance to the launch site.\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "from math import sin, cos, sqrt, atan2, radians\n\ndef calculate_distance(lat1, lon1, lat2, lon2):\n    # approximate radius of earth in km\n    R = 6373.0\n\n    lat1 = radians(lat1)\n    lon1 = radians(lon1)\n    lat2 = radians(lat2)\n    lon2 = radians(lon2)\n\n    dlon = lon2 - lon1\n    dlat = lat2 - lat1\n\n    a = sin(dlat / 2)**2 + cos(lat1) * cos(lat2) * sin(dlon / 2)**2\n    c = 2 * atan2(sqrt(a), sqrt(1 - a))\n\n    distance = R * c\n    return distance",
      "metadata": {
        "trusted": true
      },
      "outputs": [],
      "execution_count": 17
    },
    {
      "cell_type": "markdown",
      "source": "*TODO:* Mark down a point on the closest coastline using MousePosition and calculate the distance between the coastline point and the launch site.\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "# find coordinate of the closet coastline\n# e.g.,: Lat: 28.56367  Lon: -80.57163\n# distance_coastline = calculate_distance(launch_site_lat, launch_site_lon, coastline_lat, coastline_lon)",
      "metadata": {
        "trusted": true
      },
      "outputs": [],
      "execution_count": 18
    },
    {
      "cell_type": "code",
      "source": "from folium import Map, Marker, DivIcon\nimport folium\n# Define launch site coordinates\nlaunch_site_lat = 28.5623  # Example: Kennedy Space Center\nlaunch_site_lon = -80.5774\n\n# Example list of coastline points (replace with actual data)\ncoastline_points = [\n    (28.4104, -80.6061),  # Example coastline point 1\n    (28.4842, -80.5339),  # Example coastline point 2\n    (28.5801, -80.6557),  # Example coastline point 3\n]\n\n# Find the closest point and distance\nmin_distance = float('inf')\nclosest_point = None\n\nfor point in coastline_points:\n    lat, lon = point\n    distance = calculate_distance(launch_site_lat, launch_site_lon, lat, lon)\n    if distance < min_distance:\n        min_distance = distance\n        closest_point = point\n\n# Initialize the map centered at the launch site\nsite_map = folium.Map(location=[launch_site_lat, launch_site_lon], zoom_start=10)\n\n# Add a marker for the launch site\nMarker([launch_site_lat, launch_site_lon], popup=\"Launch Site\").add_to(site_map)\n\n# Add a marker for the closest coastline point\nMarker(\n    location=closest_point,\n    icon=DivIcon(\n        icon_size=(20, 20),\n        icon_anchor=(0, 0),\n        html=f'<div style=\"font-size: 12px; color: #d35400;\"><b>{min_distance:.2f} KM</b></div>',\n    ),\n    popup=\"Closest Coastline Point\",\n).add_to(site_map)\n\n# Display the map\nsite_map",
      "metadata": {
        "trusted": true
      },
      "outputs": [
        {
          "execution_count": 29,
          "output_type": "execute_result",
          "data": {
            "text/plain": "<folium.folium.Map at 0x5e8d268>",
            "text/html": "<div style=\"width:100%;\"><div style=\"position:relative;width:100%;height:0;padding-bottom:60%;\"><span style=\"color:#565656\">Make this Notebook Trusted to load map: File -> Trust Notebook</span><iframe srcdoc=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    \n    &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;\n    \n        &lt;script&gt;\n            L_NO_TOUCH = false;\n            L_DISABLE_3D = false;\n        &lt;/script&gt;\n    \n    &lt;style&gt;html, body {width: 100%;height: 100%;margin: 0;padding: 0;}&lt;/style&gt;\n    &lt;style&gt;#map {position:absolute;top:0;bottom:0;right:0;left:0;}&lt;/style&gt;\n    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js&quot;&gt;&lt;/script&gt;\n    &lt;script src=&quot;https://code.jquery.com/jquery-3.7.1.min.js&quot;&gt;&lt;/script&gt;\n    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;\n    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js&quot;&gt;&lt;/script&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css&quot;/&gt;\n    \n            &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,\n                initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot; /&gt;\n            &lt;style&gt;\n                #map_9a083854247a6cd17dc19122fcbebe4f {\n                    position: relative;\n                    width: 100.0%;\n                    height: 100.0%;\n                    left: 0.0%;\n                    top: 0.0%;\n                }\n                .leaflet-container { font-size: 1rem; }\n            &lt;/style&gt;\n        \n&lt;/head&gt;\n&lt;body&gt;\n    \n    \n            &lt;div class=&quot;folium-map&quot; id=&quot;map_9a083854247a6cd17dc19122fcbebe4f&quot; &gt;&lt;/div&gt;\n        \n&lt;/body&gt;\n&lt;script&gt;\n    \n    \n            var map_9a083854247a6cd17dc19122fcbebe4f = L.map(\n                &quot;map_9a083854247a6cd17dc19122fcbebe4f&quot;,\n                {\n                    center: [28.5623, -80.5774],\n                    crs: L.CRS.EPSG3857,\n                    ...{\n  &quot;zoom&quot;: 10,\n  &quot;zoomControl&quot;: true,\n  &quot;preferCanvas&quot;: false,\n}\n\n                }\n            );\n\n            \n\n        \n    \n            var tile_layer_522d9acfc4f44563db36873504a39ff8 = L.tileLayer(\n                &quot;https://tile.openstreetmap.org/{z}/{x}/{y}.png&quot;,\n                {\n  &quot;minZoom&quot;: 0,\n  &quot;maxZoom&quot;: 19,\n  &quot;maxNativeZoom&quot;: 19,\n  &quot;noWrap&quot;: false,\n  &quot;attribution&quot;: &quot;\\u0026copy; \\u003ca href=\\&quot;https://www.openstreetmap.org/copyright\\&quot;\\u003eOpenStreetMap\\u003c/a\\u003e contributors&quot;,\n  &quot;subdomains&quot;: &quot;abc&quot;,\n  &quot;detectRetina&quot;: false,\n  &quot;tms&quot;: false,\n  &quot;opacity&quot;: 1,\n}\n\n            );\n        \n    \n            tile_layer_522d9acfc4f44563db36873504a39ff8.addTo(map_9a083854247a6cd17dc19122fcbebe4f);\n        \n    \n            var marker_99736165128f3c317b4330b9fc43a8c0 = L.marker(\n                [28.5623, -80.5774],\n                {\n}\n            ).addTo(map_9a083854247a6cd17dc19122fcbebe4f);\n        \n    \n        var popup_0a1551ed3002cc2e2f4c428299d7b3df = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_d8012cf13dff26da55249b610720399b = $(`&lt;div id=&quot;html_d8012cf13dff26da55249b610720399b&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;Launch Site&lt;/div&gt;`)[0];\n                popup_0a1551ed3002cc2e2f4c428299d7b3df.setContent(html_d8012cf13dff26da55249b610720399b);\n            \n        \n\n        marker_99736165128f3c317b4330b9fc43a8c0.bindPopup(popup_0a1551ed3002cc2e2f4c428299d7b3df)\n        ;\n\n        \n    \n    \n            var marker_0b5c466ad052020e104b7ba74e9e78ef = L.marker(\n                [28.5801, -80.6557],\n                {\n}\n            ).addTo(map_9a083854247a6cd17dc19122fcbebe4f);\n        \n    \n            var div_icon_6e17ae8e0797d002e45716e645193ff9 = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12px; color: #d35400;\\&quot;\\u003e\\u003cb\\u003e7.90 KM\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_0b5c466ad052020e104b7ba74e9e78ef.setIcon(div_icon_6e17ae8e0797d002e45716e645193ff9);\n        \n    \n        var popup_31939f7bd219f341a0598d183b0fe8af = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_a8cbfec73c1910970d70bfcb15e57ef5 = $(`&lt;div id=&quot;html_a8cbfec73c1910970d70bfcb15e57ef5&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;Closest Coastline Point&lt;/div&gt;`)[0];\n                popup_31939f7bd219f341a0598d183b0fe8af.setContent(html_a8cbfec73c1910970d70bfcb15e57ef5);\n            \n        \n\n        marker_0b5c466ad052020e104b7ba74e9e78ef.bindPopup(popup_31939f7bd219f341a0598d183b0fe8af)\n        ;\n\n        \n    \n&lt;/script&gt;\n&lt;/html&gt;\" style=\"position:absolute;width:100%;height:100%;left:0;top:0;border:none !important;\" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div></div>"
          },
          "metadata": {}
        }
      ],
      "execution_count": 29
    },
    {
      "cell_type": "markdown",
      "source": "*TODO:* Draw a `PolyLine` between a launch site to the selected coastline point\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "# Define launch site coordinates\nlaunch_site_lat = 28.5623  # Example: Kennedy Space Center\nlaunch_site_lon = -80.5774\n\n# Example list of coastline points (replace with actual data)\ncoastline_points = [\n    (28.4104, -80.6061),  # Example coastline point 1\n    (28.4842, -80.5339),  # Example coastline point 2\n    (28.5801, -80.6557),  # Example coastline point 3\n]\n\n# Find the closest point and distance\nmin_distance = float('inf')\nclosest_point = None\n\nfor point in coastline_points:\n    lat, lon = point\n    distance = calculate_distance(launch_site_lat, launch_site_lon, lat, lon)\n    if distance < min_distance:\n        min_distance = distance\n        closest_point = point\n\n# Initialize the map centered at the launch site\nsite_map = folium.Map(location=[launch_site_lat, launch_site_lon], zoom_start=10)\n\n# Add a marker for the launch site\nfolium.Marker([launch_site_lat, launch_site_lon], popup=\"Launch Site\").add_to(site_map)\n\n# Add a marker for the closest coastline point\nfolium.Marker(\n    location=closest_point,\n    icon=DivIcon(\n        icon_size=(20, 20),\n        icon_anchor=(0, 0),\n        html=f'<div style=\"font-size: 12px; color: #d35400;\"><b>{min_distance:.2f} KM</b></div>',\n    ),\n    popup=\"Closest Coastline Point\",\n).add_to(site_map)\n\n# Draw a PolyLine between the launch site and the closest coastline point\ncoordinates = [[launch_site_lat, launch_site_lon], list(closest_point)]\nlines = folium.PolyLine(locations=coordinates, weight=2, color='blue')\nsite_map.add_child(lines)\n\n# Display the map\nsite_map",
      "metadata": {
        "trusted": true
      },
      "outputs": [
        {
          "execution_count": 30,
          "output_type": "execute_result",
          "data": {
            "text/plain": "<folium.folium.Map at 0x5dcc830>",
            "text/html": "<div style=\"width:100%;\"><div style=\"position:relative;width:100%;height:0;padding-bottom:60%;\"><span style=\"color:#565656\">Make this Notebook Trusted to load map: File -> Trust Notebook</span><iframe srcdoc=\"&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    \n    &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;\n    \n        &lt;script&gt;\n            L_NO_TOUCH = false;\n            L_DISABLE_3D = false;\n        &lt;/script&gt;\n    \n    &lt;style&gt;html, body {width: 100%;height: 100%;margin: 0;padding: 0;}&lt;/style&gt;\n    &lt;style&gt;#map {position:absolute;top:0;bottom:0;right:0;left:0;}&lt;/style&gt;\n    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js&quot;&gt;&lt;/script&gt;\n    &lt;script src=&quot;https://code.jquery.com/jquery-3.7.1.min.js&quot;&gt;&lt;/script&gt;\n    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;\n    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js&quot;&gt;&lt;/script&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css&quot;/&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css&quot;/&gt;\n    \n            &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,\n                initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot; /&gt;\n            &lt;style&gt;\n                #map_5685d28ebd14675298eda1d9df30812c {\n                    position: relative;\n                    width: 100.0%;\n                    height: 100.0%;\n                    left: 0.0%;\n                    top: 0.0%;\n                }\n                .leaflet-container { font-size: 1rem; }\n            &lt;/style&gt;\n        \n&lt;/head&gt;\n&lt;body&gt;\n    \n    \n            &lt;div class=&quot;folium-map&quot; id=&quot;map_5685d28ebd14675298eda1d9df30812c&quot; &gt;&lt;/div&gt;\n        \n&lt;/body&gt;\n&lt;script&gt;\n    \n    \n            var map_5685d28ebd14675298eda1d9df30812c = L.map(\n                &quot;map_5685d28ebd14675298eda1d9df30812c&quot;,\n                {\n                    center: [28.5623, -80.5774],\n                    crs: L.CRS.EPSG3857,\n                    ...{\n  &quot;zoom&quot;: 10,\n  &quot;zoomControl&quot;: true,\n  &quot;preferCanvas&quot;: false,\n}\n\n                }\n            );\n\n            \n\n        \n    \n            var tile_layer_9ef07a548b4971dd8d15e228da502223 = L.tileLayer(\n                &quot;https://tile.openstreetmap.org/{z}/{x}/{y}.png&quot;,\n                {\n  &quot;minZoom&quot;: 0,\n  &quot;maxZoom&quot;: 19,\n  &quot;maxNativeZoom&quot;: 19,\n  &quot;noWrap&quot;: false,\n  &quot;attribution&quot;: &quot;\\u0026copy; \\u003ca href=\\&quot;https://www.openstreetmap.org/copyright\\&quot;\\u003eOpenStreetMap\\u003c/a\\u003e contributors&quot;,\n  &quot;subdomains&quot;: &quot;abc&quot;,\n  &quot;detectRetina&quot;: false,\n  &quot;tms&quot;: false,\n  &quot;opacity&quot;: 1,\n}\n\n            );\n        \n    \n            tile_layer_9ef07a548b4971dd8d15e228da502223.addTo(map_5685d28ebd14675298eda1d9df30812c);\n        \n    \n            var marker_3573506f9008fd7cfc28684298d4674c = L.marker(\n                [28.5623, -80.5774],\n                {\n}\n            ).addTo(map_5685d28ebd14675298eda1d9df30812c);\n        \n    \n        var popup_7b48c9ba1cdd81224120fe152044db4e = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_d93e6ab550950774a2b797c0a1265081 = $(`&lt;div id=&quot;html_d93e6ab550950774a2b797c0a1265081&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;Launch Site&lt;/div&gt;`)[0];\n                popup_7b48c9ba1cdd81224120fe152044db4e.setContent(html_d93e6ab550950774a2b797c0a1265081);\n            \n        \n\n        marker_3573506f9008fd7cfc28684298d4674c.bindPopup(popup_7b48c9ba1cdd81224120fe152044db4e)\n        ;\n\n        \n    \n    \n            var marker_9f038076f74a9540d1d7388485b33e98 = L.marker(\n                [28.5801, -80.6557],\n                {\n}\n            ).addTo(map_5685d28ebd14675298eda1d9df30812c);\n        \n    \n            var div_icon_b7600515f66363e5b0f49e1472ff6688 = L.divIcon({\n  &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12px; color: #d35400;\\&quot;\\u003e\\u003cb\\u003e7.90 KM\\u003c/b\\u003e\\u003c/div\\u003e&quot;,\n  &quot;iconSize&quot;: [20, 20],\n  &quot;iconAnchor&quot;: [0, 0],\n  &quot;className&quot;: &quot;empty&quot;,\n});\n            marker_9f038076f74a9540d1d7388485b33e98.setIcon(div_icon_b7600515f66363e5b0f49e1472ff6688);\n        \n    \n        var popup_361db76c41633bf09dc9dab40df52203 = L.popup({\n  &quot;maxWidth&quot;: &quot;100%&quot;,\n});\n\n        \n            \n                var html_c5e6b653b0be15830fc8c526133bc77c = $(`&lt;div id=&quot;html_c5e6b653b0be15830fc8c526133bc77c&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;Closest Coastline Point&lt;/div&gt;`)[0];\n                popup_361db76c41633bf09dc9dab40df52203.setContent(html_c5e6b653b0be15830fc8c526133bc77c);\n            \n        \n\n        marker_9f038076f74a9540d1d7388485b33e98.bindPopup(popup_361db76c41633bf09dc9dab40df52203)\n        ;\n\n        \n    \n    \n            var poly_line_c621d021ca003653b662afb667953c7a = L.polyline(\n                [[28.5623, -80.5774], [28.5801, -80.6557]],\n                {&quot;bubblingMouseEvents&quot;: true, &quot;color&quot;: &quot;blue&quot;, &quot;dashArray&quot;: null, &quot;dashOffset&quot;: null, &quot;fill&quot;: false, &quot;fillColor&quot;: &quot;blue&quot;, &quot;fillOpacity&quot;: 0.2, &quot;fillRule&quot;: &quot;evenodd&quot;, &quot;lineCap&quot;: &quot;round&quot;, &quot;lineJoin&quot;: &quot;round&quot;, &quot;noClip&quot;: false, &quot;opacity&quot;: 1.0, &quot;smoothFactor&quot;: 1.0, &quot;stroke&quot;: true, &quot;weight&quot;: 2}\n            ).addTo(map_5685d28ebd14675298eda1d9df30812c);\n        \n&lt;/script&gt;\n&lt;/html&gt;\" style=\"position:absolute;width:100%;height:100%;left:0;top:0;border:none !important;\" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div></div>"
          },
          "metadata": {}
        }
      ],
      "execution_count": 30
    },
    {
      "cell_type": "markdown",
      "source": "Your updated map with distance line should look like the following screenshot:\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "<center>\n    <img src=\"https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBM-DS0321EN-SkillsNetwork/labs/module_3/images/launch_site_marker_distance.png\">\n</center>\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "*TODO:* Similarly, you can draw a line betwee a launch site to its closest city, railway, highway, etc. You need to use `MousePosition` to find the their coordinates on the map first\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "A railway map symbol may look like this:\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "<center>\n    <img src=\"https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBM-DS0321EN-SkillsNetwork/labs/module_3/images/railway.png\">\n</center>\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "A highway map symbol may look like this:\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "<center>\n    <img src=\"https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBM-DS0321EN-SkillsNetwork/labs/module_3/images/highway.png\">\n</center>\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "A city map symbol may look like this:\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "<center>\n    <img src=\"https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBM-DS0321EN-SkillsNetwork/labs/module_3/images/city.png\">\n</center>\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "# Create a marker with distance to a closest city, railway, highway, etc.\n# Draw a line between the marker to the launch site\n",
      "metadata": {
        "trusted": true
      },
      "outputs": [],
      "execution_count": 21
    },
    {
      "cell_type": "code",
      "source": "",
      "metadata": {
        "trusted": true
      },
      "outputs": [],
      "execution_count": null
    },
    {
      "cell_type": "code",
      "source": "",
      "metadata": {
        "trusted": true
      },
      "outputs": [],
      "execution_count": null
    },
    {
      "cell_type": "markdown",
      "source": "After you plot distance lines to the proximities, you can answer the following questions easily:\n\n*   Are launch sites in close proximity to railways?\n*   Are launch sites in close proximity to highways?\n*   Are launch sites in close proximity to coastline?\n*   Do launch sites keep certain distance away from cities?\n\nAlso please try to explain your findings.\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "# Next Steps:\n\nNow you have discovered many interesting insights related to the launch sites' location using folium, in a very interactive way. Next, you will need to build a dashboard using Ploty Dash on detailed launch records.\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "## Authors\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "[Pratiksha Verma](https://www.linkedin.com/in/pratiksha-verma-6487561b1/)\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "<!--## Change Log--!>\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "<!--| Date (YYYY-MM-DD) | Version | Changed By      | Change Description      |\n| ----------------- | ------- | -------------   | ----------------------- |\n| 2022-11-09        | 1.0     | Pratiksha Verma | Converted initial version to Jupyterlite|--!>\n",
      "metadata": {}
    },
    {
      "cell_type": "markdown",
      "source": "### <h3 align=\"center\"> IBM Corporation 2022. All rights reserved. <h3/>\n",
      "metadata": {}
    }
  ]
}