IBM-DS0321EN-SkillsNetwork_labs_module_3_lab_jupyter_launch_site_location.jupyterlite.ipynb

{
  "metadata": {
    "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"
    },
    "kernelspec": {
      "name": "python",
      "display_name": "Python (Pyodide)",
      "language": "python"
    }
  },
  "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": "# **Launch Sites Locations Analysis 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
      },
      "execution_count": 5,
      "outputs": []
    },
    {
      "cell_type": "code",
      "source": "import folium\nimport pandas as pd",
      "metadata": {
        "trusted": true
      },
      "execution_count": 6,
      "outputs": []
    },
    {
      "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
      },
      "execution_count": 7,
      "outputs": []
    },
    {
      "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/IBM-DS0321EN-SkillsNetwork/labs/module\\_3/DV0101EN-3-5-1-Generating-Maps-in-Python-py-v2.0.ipynb)\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "## Task 1: Mark all launch sites on a map\n",
      "metadata": {
        "trusted": true
      },
      "execution_count": 8,
      "outputs": []
    },
    {
      "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
      },
      "execution_count": 9,
      "outputs": []
    },
    {
      "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
      },
      "execution_count": 10,
      "outputs": [
        {
          "execution_count": 10,
          "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": {}
        }
      ]
    },
    {
      "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
      },
      "execution_count": 11,
      "outputs": []
    },
    {
      "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
      },
      "execution_count": 12,
      "outputs": [
        {
          "execution_count": 12,
          "output_type": "execute_result",
          "data": {
            "text/plain": "<folium.folium.Map at 0x16845e8>",
            "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-1.12.4.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.min.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_3ec9d00f406e07ed676302974f2d4f5d {\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_3ec9d00f406e07ed676302974f2d4f5d&quot; &gt;&lt;/div&gt;\n        \n&lt;/body&gt;\n&lt;script&gt;\n    \n    \n            var map_3ec9d00f406e07ed676302974f2d4f5d = L.map(\n                &quot;map_3ec9d00f406e07ed676302974f2d4f5d&quot;,\n                {\n                    center: [29.559684888503615, -95.0830971930759],\n                    crs: L.CRS.EPSG3857,\n                    zoom: 10,\n                    zoomControl: true,\n                    preferCanvas: false,\n                }\n            );\n\n            \n\n        \n    \n            var tile_layer_8a0ddb90e51494ab0144c4a167dbc8a4 = L.tileLayer(\n                &quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;,\n                {&quot;attribution&quot;: &quot;Data by \\u0026copy; \\u003ca target=\\&quot;_blank\\&quot; href=\\&quot;http://openstreetmap.org\\&quot;\\u003eOpenStreetMap\\u003c/a\\u003e, under \\u003ca target=\\&quot;_blank\\&quot; href=\\&quot;http://www.openstreetmap.org/copyright\\&quot;\\u003eODbL\\u003c/a\\u003e.&quot;, &quot;detectRetina&quot;: false, &quot;maxNativeZoom&quot;: 18, &quot;maxZoom&quot;: 18, &quot;minZoom&quot;: 0, &quot;noWrap&quot;: false, &quot;opacity&quot;: 1, &quot;subdomains&quot;: &quot;abc&quot;, &quot;tms&quot;: false}\n            ).addTo(map_3ec9d00f406e07ed676302974f2d4f5d);\n        \n    \n            var circle_bef761a870753432bce9b1d80c653be4 = 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_3ec9d00f406e07ed676302974f2d4f5d);\n        \n    \n        var popup_1714df342f5e2aadfc1ff41c22abcf2e = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_b98e741172ff5f82755d5eda0513b7ee = $(`&lt;div id=&quot;html_b98e741172ff5f82755d5eda0513b7ee&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;NASA Johnson Space Center&lt;/div&gt;`)[0];\n                popup_1714df342f5e2aadfc1ff41c22abcf2e.setContent(html_b98e741172ff5f82755d5eda0513b7ee);\n            \n        \n\n        circle_bef761a870753432bce9b1d80c653be4.bindPopup(popup_1714df342f5e2aadfc1ff41c22abcf2e)\n        ;\n\n        \n    \n    \n            var marker_891f09fea77dfd569f035bf0f57911c8 = L.marker(\n                [29.559684888503615, -95.0830971930759],\n                {}\n            ).addTo(map_3ec9d00f406e07ed676302974f2d4f5d);\n        \n    \n            var div_icon_fd5bb755254af3c084c2fc6c9dac1142 = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eNASA JSC\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_891f09fea77dfd569f035bf0f57911c8.setIcon(div_icon_fd5bb755254af3c084c2fc6c9dac1142);\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": {}
        }
      ]
    },
    {
      "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\nsite_map = folium.Map(location=nasa_coordinate, zoom_start=5)\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\nfor idx,row in launch_sites_df.iterrows():\n    circle = folium.Circle([row['Lat'],row['Long']], radius=1000, color='#d35400', fill=True).add_child(folium.Popup(row['Launch Site']))\n    marker = folium.map.Marker(\n        [row['Lat'],row['Long']],\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>' % row['Launch Site'],\n            )\n        )\n    site_map.add_child(circle)\n    site_map.add_child(marker)\nsite_map",
      "metadata": {
        "trusted": true
      },
      "execution_count": 13,
      "outputs": [
        {
          "execution_count": 13,
          "output_type": "execute_result",
          "data": {
            "text/plain": "<folium.folium.Map at 0x410ff00>",
            "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-1.12.4.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.min.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_bce03d6715cd61456726194bbe1dfbc8 {\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_bce03d6715cd61456726194bbe1dfbc8&quot; &gt;&lt;/div&gt;\n        \n&lt;/body&gt;\n&lt;script&gt;\n    \n    \n            var map_bce03d6715cd61456726194bbe1dfbc8 = L.map(\n                &quot;map_bce03d6715cd61456726194bbe1dfbc8&quot;,\n                {\n                    center: [29.559684888503615, -95.0830971930759],\n                    crs: L.CRS.EPSG3857,\n                    zoom: 5,\n                    zoomControl: true,\n                    preferCanvas: false,\n                }\n            );\n\n            \n\n        \n    \n            var tile_layer_376f96619d4e1787326c56c17373abbe = L.tileLayer(\n                &quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;,\n                {&quot;attribution&quot;: &quot;Data by \\u0026copy; \\u003ca target=\\&quot;_blank\\&quot; href=\\&quot;http://openstreetmap.org\\&quot;\\u003eOpenStreetMap\\u003c/a\\u003e, under \\u003ca target=\\&quot;_blank\\&quot; href=\\&quot;http://www.openstreetmap.org/copyright\\&quot;\\u003eODbL\\u003c/a\\u003e.&quot;, &quot;detectRetina&quot;: false, &quot;maxNativeZoom&quot;: 18, &quot;maxZoom&quot;: 18, &quot;minZoom&quot;: 0, &quot;noWrap&quot;: false, &quot;opacity&quot;: 1, &quot;subdomains&quot;: &quot;abc&quot;, &quot;tms&quot;: false}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var circle_c290ac3949fbeb2f0bd775196237e7f4 = L.circle(\n                [28.56230197, -80.57735648],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_81a01f9c783719d7954cb15f937afc6d = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_11cd138c60a8ab2af20ae82ff8871990 = $(`&lt;div id=&quot;html_11cd138c60a8ab2af20ae82ff8871990&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;CCAFS LC-40&lt;/div&gt;`)[0];\n                popup_81a01f9c783719d7954cb15f937afc6d.setContent(html_11cd138c60a8ab2af20ae82ff8871990);\n            \n        \n\n        circle_c290ac3949fbeb2f0bd775196237e7f4.bindPopup(popup_81a01f9c783719d7954cb15f937afc6d)\n        ;\n\n        \n    \n    \n            var marker_94846d0608f080f1073576f2f148c42d = L.marker(\n                [28.56230197, -80.57735648],\n                {}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var div_icon_d9efaf13f977c0d6ea67b1ac8ba00f54 = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eCCAFS LC-40\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_94846d0608f080f1073576f2f148c42d.setIcon(div_icon_d9efaf13f977c0d6ea67b1ac8ba00f54);\n        \n    \n            var circle_8bde87eac4bae4f38193840ba0032360 = L.circle(\n                [28.56319718, -80.57682003],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_56a60b879198d8168e1f8fb4e9a0cf9e = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_8b74b3b92997a429155cb25a3d9e388d = $(`&lt;div id=&quot;html_8b74b3b92997a429155cb25a3d9e388d&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;CCAFS SLC-40&lt;/div&gt;`)[0];\n                popup_56a60b879198d8168e1f8fb4e9a0cf9e.setContent(html_8b74b3b92997a429155cb25a3d9e388d);\n            \n        \n\n        circle_8bde87eac4bae4f38193840ba0032360.bindPopup(popup_56a60b879198d8168e1f8fb4e9a0cf9e)\n        ;\n\n        \n    \n    \n            var marker_b0fd5c0f23998c27766d5864e6ad78d6 = L.marker(\n                [28.56319718, -80.57682003],\n                {}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var div_icon_9fb685a14ae493c9d055970ada3663dd = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eCCAFS SLC-40\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_b0fd5c0f23998c27766d5864e6ad78d6.setIcon(div_icon_9fb685a14ae493c9d055970ada3663dd);\n        \n    \n            var circle_0efc8bde1491005a9239364fdd170eb5 = L.circle(\n                [28.57325457, -80.64689529],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_9c1a7f9d6d7bf4744e556bb4895f4112 = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_2163735058a39bf054761d0425d5eaba = $(`&lt;div id=&quot;html_2163735058a39bf054761d0425d5eaba&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;KSC LC-39A&lt;/div&gt;`)[0];\n                popup_9c1a7f9d6d7bf4744e556bb4895f4112.setContent(html_2163735058a39bf054761d0425d5eaba);\n            \n        \n\n        circle_0efc8bde1491005a9239364fdd170eb5.bindPopup(popup_9c1a7f9d6d7bf4744e556bb4895f4112)\n        ;\n\n        \n    \n    \n            var marker_01215b2c56da3decd426c4a32f23e71c = L.marker(\n                [28.57325457, -80.64689529],\n                {}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var div_icon_f847d82c26889c6975799f1133044c35 = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eKSC LC-39A\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_01215b2c56da3decd426c4a32f23e71c.setIcon(div_icon_f847d82c26889c6975799f1133044c35);\n        \n    \n            var circle_1db659790862780a38218b7779cee7ad = L.circle(\n                [34.63283416, -120.6107455],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_80524f83ff8e04b8c5a87211a3f5216c = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_ddcb3febe898a8a7ca6241884421404d = $(`&lt;div id=&quot;html_ddcb3febe898a8a7ca6241884421404d&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;VAFB SLC-4E&lt;/div&gt;`)[0];\n                popup_80524f83ff8e04b8c5a87211a3f5216c.setContent(html_ddcb3febe898a8a7ca6241884421404d);\n            \n        \n\n        circle_1db659790862780a38218b7779cee7ad.bindPopup(popup_80524f83ff8e04b8c5a87211a3f5216c)\n        ;\n\n        \n    \n    \n            var marker_e8a94aadce5e142cb47481dc57372fbb = L.marker(\n                [34.63283416, -120.6107455],\n                {}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var div_icon_d9fb03311d81986a60454ed038466c7c = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eVAFB SLC-4E\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_e8a94aadce5e142cb47481dc57372fbb.setIcon(div_icon_d9fb03311d81986a60454ed038466c7c);\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": {}
        }
      ]
    },
    {
      "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
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "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
      },
      "execution_count": 14,
      "outputs": [
        {
          "execution_count": 14,
          "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": {}
        }
      ]
    },
    {
      "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
      },
      "execution_count": 15,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": "*TODO:* Create a new column in `launch_sites` 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 = spacex_df.assign(marker_color=lambda x:['green' if c==1 else 'red' for c in x['class']])\nspacex_df.tail(10)",
      "metadata": {
        "trusted": true
      },
      "execution_count": 16,
      "outputs": [
        {
          "execution_count": 16,
          "output_type": "execute_result",
          "data": {
            "text/plain": "     Launch Site        Lat       Long  class marker_color\n46    KSC LC-39A  28.573255 -80.646895      1        green\n47    KSC LC-39A  28.573255 -80.646895      1        green\n48    KSC LC-39A  28.573255 -80.646895      1        green\n49  CCAFS SLC-40  28.563197 -80.576820      1        green\n50  CCAFS SLC-40  28.563197 -80.576820      1        green\n51  CCAFS SLC-40  28.563197 -80.576820      0          red\n52  CCAFS SLC-40  28.563197 -80.576820      0          red\n53  CCAFS SLC-40  28.563197 -80.576820      0          red\n54  CCAFS SLC-40  28.563197 -80.576820      1        green\n55  CCAFS SLC-40  28.563197 -80.576820      0          red",
            "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      <th>marker_color</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      <td>green</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      <td>green</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      <td>green</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      <td>green</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      <td>green</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      <td>red</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      <td>red</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      <td>red</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      <td>green</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      <td>red</td>\n    </tr>\n  </tbody>\n</table>\n</div>"
          },
          "metadata": {}
        }
      ]
    },
    {
      "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 current site_map\nsite_map.add_child(marker_cluster)\n\n# for each row in spacex_df data frame\n# create a Marker object with its coordinate\n# and customize the Marker's icon property to indicate if this launch was successed or failed, \n# e.g., icon=folium.Icon(color='white', icon_color=row['marker_color']\nfor index, record in spacex_df.iterrows():\n    # TODO: Create and add a Marker cluster to the site map\n    # marker = folium.Marker(...)\n    marker_cluster.add_child(marker)\n\nsite_map",
      "metadata": {
        "trusted": true
      },
      "execution_count": 17,
      "outputs": [
        {
          "execution_count": 17,
          "output_type": "execute_result",
          "data": {
            "text/plain": "<folium.folium.Map at 0x410ff00>",
            "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-1.12.4.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.min.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_bce03d6715cd61456726194bbe1dfbc8 {\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_bce03d6715cd61456726194bbe1dfbc8&quot; &gt;&lt;/div&gt;\n        \n&lt;/body&gt;\n&lt;script&gt;\n    \n    \n            var map_bce03d6715cd61456726194bbe1dfbc8 = L.map(\n                &quot;map_bce03d6715cd61456726194bbe1dfbc8&quot;,\n                {\n                    center: [29.559684888503615, -95.0830971930759],\n                    crs: L.CRS.EPSG3857,\n                    zoom: 5,\n                    zoomControl: true,\n                    preferCanvas: false,\n                }\n            );\n\n            \n\n        \n    \n            var tile_layer_376f96619d4e1787326c56c17373abbe = L.tileLayer(\n                &quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;,\n                {&quot;attribution&quot;: &quot;Data by \\u0026copy; \\u003ca target=\\&quot;_blank\\&quot; href=\\&quot;http://openstreetmap.org\\&quot;\\u003eOpenStreetMap\\u003c/a\\u003e, under \\u003ca target=\\&quot;_blank\\&quot; href=\\&quot;http://www.openstreetmap.org/copyright\\&quot;\\u003eODbL\\u003c/a\\u003e.&quot;, &quot;detectRetina&quot;: false, &quot;maxNativeZoom&quot;: 18, &quot;maxZoom&quot;: 18, &quot;minZoom&quot;: 0, &quot;noWrap&quot;: false, &quot;opacity&quot;: 1, &quot;subdomains&quot;: &quot;abc&quot;, &quot;tms&quot;: false}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var circle_c290ac3949fbeb2f0bd775196237e7f4 = L.circle(\n                [28.56230197, -80.57735648],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_81a01f9c783719d7954cb15f937afc6d = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_11cd138c60a8ab2af20ae82ff8871990 = $(`&lt;div id=&quot;html_11cd138c60a8ab2af20ae82ff8871990&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;CCAFS LC-40&lt;/div&gt;`)[0];\n                popup_81a01f9c783719d7954cb15f937afc6d.setContent(html_11cd138c60a8ab2af20ae82ff8871990);\n            \n        \n\n        circle_c290ac3949fbeb2f0bd775196237e7f4.bindPopup(popup_81a01f9c783719d7954cb15f937afc6d)\n        ;\n\n        \n    \n    \n            var marker_94846d0608f080f1073576f2f148c42d = L.marker(\n                [28.56230197, -80.57735648],\n                {}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var div_icon_d9efaf13f977c0d6ea67b1ac8ba00f54 = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eCCAFS LC-40\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_94846d0608f080f1073576f2f148c42d.setIcon(div_icon_d9efaf13f977c0d6ea67b1ac8ba00f54);\n        \n    \n            var circle_8bde87eac4bae4f38193840ba0032360 = L.circle(\n                [28.56319718, -80.57682003],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_56a60b879198d8168e1f8fb4e9a0cf9e = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_8b74b3b92997a429155cb25a3d9e388d = $(`&lt;div id=&quot;html_8b74b3b92997a429155cb25a3d9e388d&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;CCAFS SLC-40&lt;/div&gt;`)[0];\n                popup_56a60b879198d8168e1f8fb4e9a0cf9e.setContent(html_8b74b3b92997a429155cb25a3d9e388d);\n            \n        \n\n        circle_8bde87eac4bae4f38193840ba0032360.bindPopup(popup_56a60b879198d8168e1f8fb4e9a0cf9e)\n        ;\n\n        \n    \n    \n            var marker_b0fd5c0f23998c27766d5864e6ad78d6 = L.marker(\n                [28.56319718, -80.57682003],\n                {}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var div_icon_9fb685a14ae493c9d055970ada3663dd = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eCCAFS SLC-40\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_b0fd5c0f23998c27766d5864e6ad78d6.setIcon(div_icon_9fb685a14ae493c9d055970ada3663dd);\n        \n    \n            var circle_0efc8bde1491005a9239364fdd170eb5 = L.circle(\n                [28.57325457, -80.64689529],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_9c1a7f9d6d7bf4744e556bb4895f4112 = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_2163735058a39bf054761d0425d5eaba = $(`&lt;div id=&quot;html_2163735058a39bf054761d0425d5eaba&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;KSC LC-39A&lt;/div&gt;`)[0];\n                popup_9c1a7f9d6d7bf4744e556bb4895f4112.setContent(html_2163735058a39bf054761d0425d5eaba);\n            \n        \n\n        circle_0efc8bde1491005a9239364fdd170eb5.bindPopup(popup_9c1a7f9d6d7bf4744e556bb4895f4112)\n        ;\n\n        \n    \n    \n            var marker_01215b2c56da3decd426c4a32f23e71c = L.marker(\n                [28.57325457, -80.64689529],\n                {}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var div_icon_f847d82c26889c6975799f1133044c35 = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eKSC LC-39A\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_01215b2c56da3decd426c4a32f23e71c.setIcon(div_icon_f847d82c26889c6975799f1133044c35);\n        \n    \n            var circle_1db659790862780a38218b7779cee7ad = L.circle(\n                [34.63283416, -120.6107455],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_80524f83ff8e04b8c5a87211a3f5216c = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_ddcb3febe898a8a7ca6241884421404d = $(`&lt;div id=&quot;html_ddcb3febe898a8a7ca6241884421404d&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;VAFB SLC-4E&lt;/div&gt;`)[0];\n                popup_80524f83ff8e04b8c5a87211a3f5216c.setContent(html_ddcb3febe898a8a7ca6241884421404d);\n            \n        \n\n        circle_1db659790862780a38218b7779cee7ad.bindPopup(popup_80524f83ff8e04b8c5a87211a3f5216c)\n        ;\n\n        \n    \n    \n            var marker_e8a94aadce5e142cb47481dc57372fbb = L.marker(\n                [34.63283416, -120.6107455],\n                {}\n            ).addTo(marker_cluster_0bd6720ec90aae5460998881b58bebe1);\n        \n    \n            var div_icon_d9fb03311d81986a60454ed038466c7c = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eVAFB SLC-4E\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_e8a94aadce5e142cb47481dc57372fbb.setIcon(div_icon_d9fb03311d81986a60454ed038466c7c);\n        \n    \n            var marker_cluster_0bd6720ec90aae5460998881b58bebe1 = L.markerClusterGroup(\n                {}\n            );\n            map_bce03d6715cd61456726194bbe1dfbc8.addLayer(marker_cluster_0bd6720ec90aae5460998881b58bebe1);\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": {}
        }
      ]
    },
    {
      "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
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "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": "# Add Mouse Position to get the coordinate (Lat, Long) for a mouse over on the map\nformatter = \"function(num) {return L.Util.formatNum(num, 5);};\"\nmouse_position = MousePosition(\n    position='topright',\n    separator=' Long: ',\n    empty_string='NaN',\n    lng_first=False,\n    num_digits=20,\n    prefix='Lat:',\n    lat_formatter=formatter,\n    lng_formatter=formatter,\n)\n\nsite_map.add_child(mouse_position)\nsite_map",
      "metadata": {
        "trusted": true
      },
      "execution_count": 18,
      "outputs": [
        {
          "execution_count": 18,
          "output_type": "execute_result",
          "data": {
            "text/plain": "<folium.folium.Map at 0x410ff00>",
            "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-1.12.4.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.min.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_bce03d6715cd61456726194bbe1dfbc8 {\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_bce03d6715cd61456726194bbe1dfbc8&quot; &gt;&lt;/div&gt;\n        \n&lt;/body&gt;\n&lt;script&gt;\n    \n    \n            var map_bce03d6715cd61456726194bbe1dfbc8 = L.map(\n                &quot;map_bce03d6715cd61456726194bbe1dfbc8&quot;,\n                {\n                    center: [29.559684888503615, -95.0830971930759],\n                    crs: L.CRS.EPSG3857,\n                    zoom: 5,\n                    zoomControl: true,\n                    preferCanvas: false,\n                }\n            );\n\n            \n\n        \n    \n            var tile_layer_376f96619d4e1787326c56c17373abbe = L.tileLayer(\n                &quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;,\n                {&quot;attribution&quot;: &quot;Data by \\u0026copy; \\u003ca target=\\&quot;_blank\\&quot; href=\\&quot;http://openstreetmap.org\\&quot;\\u003eOpenStreetMap\\u003c/a\\u003e, under \\u003ca target=\\&quot;_blank\\&quot; href=\\&quot;http://www.openstreetmap.org/copyright\\&quot;\\u003eODbL\\u003c/a\\u003e.&quot;, &quot;detectRetina&quot;: false, &quot;maxNativeZoom&quot;: 18, &quot;maxZoom&quot;: 18, &quot;minZoom&quot;: 0, &quot;noWrap&quot;: false, &quot;opacity&quot;: 1, &quot;subdomains&quot;: &quot;abc&quot;, &quot;tms&quot;: false}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var circle_c290ac3949fbeb2f0bd775196237e7f4 = L.circle(\n                [28.56230197, -80.57735648],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_81a01f9c783719d7954cb15f937afc6d = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_11cd138c60a8ab2af20ae82ff8871990 = $(`&lt;div id=&quot;html_11cd138c60a8ab2af20ae82ff8871990&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;CCAFS LC-40&lt;/div&gt;`)[0];\n                popup_81a01f9c783719d7954cb15f937afc6d.setContent(html_11cd138c60a8ab2af20ae82ff8871990);\n            \n        \n\n        circle_c290ac3949fbeb2f0bd775196237e7f4.bindPopup(popup_81a01f9c783719d7954cb15f937afc6d)\n        ;\n\n        \n    \n    \n            var marker_94846d0608f080f1073576f2f148c42d = L.marker(\n                [28.56230197, -80.57735648],\n                {}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var div_icon_d9efaf13f977c0d6ea67b1ac8ba00f54 = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eCCAFS LC-40\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_94846d0608f080f1073576f2f148c42d.setIcon(div_icon_d9efaf13f977c0d6ea67b1ac8ba00f54);\n        \n    \n            var circle_8bde87eac4bae4f38193840ba0032360 = L.circle(\n                [28.56319718, -80.57682003],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_56a60b879198d8168e1f8fb4e9a0cf9e = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_8b74b3b92997a429155cb25a3d9e388d = $(`&lt;div id=&quot;html_8b74b3b92997a429155cb25a3d9e388d&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;CCAFS SLC-40&lt;/div&gt;`)[0];\n                popup_56a60b879198d8168e1f8fb4e9a0cf9e.setContent(html_8b74b3b92997a429155cb25a3d9e388d);\n            \n        \n\n        circle_8bde87eac4bae4f38193840ba0032360.bindPopup(popup_56a60b879198d8168e1f8fb4e9a0cf9e)\n        ;\n\n        \n    \n    \n            var marker_b0fd5c0f23998c27766d5864e6ad78d6 = L.marker(\n                [28.56319718, -80.57682003],\n                {}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var div_icon_9fb685a14ae493c9d055970ada3663dd = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eCCAFS SLC-40\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_b0fd5c0f23998c27766d5864e6ad78d6.setIcon(div_icon_9fb685a14ae493c9d055970ada3663dd);\n        \n    \n            var circle_0efc8bde1491005a9239364fdd170eb5 = L.circle(\n                [28.57325457, -80.64689529],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_9c1a7f9d6d7bf4744e556bb4895f4112 = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_2163735058a39bf054761d0425d5eaba = $(`&lt;div id=&quot;html_2163735058a39bf054761d0425d5eaba&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;KSC LC-39A&lt;/div&gt;`)[0];\n                popup_9c1a7f9d6d7bf4744e556bb4895f4112.setContent(html_2163735058a39bf054761d0425d5eaba);\n            \n        \n\n        circle_0efc8bde1491005a9239364fdd170eb5.bindPopup(popup_9c1a7f9d6d7bf4744e556bb4895f4112)\n        ;\n\n        \n    \n    \n            var marker_01215b2c56da3decd426c4a32f23e71c = L.marker(\n                [28.57325457, -80.64689529],\n                {}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var div_icon_f847d82c26889c6975799f1133044c35 = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eKSC LC-39A\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_01215b2c56da3decd426c4a32f23e71c.setIcon(div_icon_f847d82c26889c6975799f1133044c35);\n        \n    \n            var circle_1db659790862780a38218b7779cee7ad = L.circle(\n                [34.63283416, -120.6107455],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_80524f83ff8e04b8c5a87211a3f5216c = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_ddcb3febe898a8a7ca6241884421404d = $(`&lt;div id=&quot;html_ddcb3febe898a8a7ca6241884421404d&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;VAFB SLC-4E&lt;/div&gt;`)[0];\n                popup_80524f83ff8e04b8c5a87211a3f5216c.setContent(html_ddcb3febe898a8a7ca6241884421404d);\n            \n        \n\n        circle_1db659790862780a38218b7779cee7ad.bindPopup(popup_80524f83ff8e04b8c5a87211a3f5216c)\n        ;\n\n        \n    \n    \n            var marker_e8a94aadce5e142cb47481dc57372fbb = L.marker(\n                [34.63283416, -120.6107455],\n                {}\n            ).addTo(marker_cluster_0bd6720ec90aae5460998881b58bebe1);\n        \n    \n            var div_icon_d9fb03311d81986a60454ed038466c7c = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eVAFB SLC-4E\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_e8a94aadce5e142cb47481dc57372fbb.setIcon(div_icon_d9fb03311d81986a60454ed038466c7c);\n        \n    \n            var marker_cluster_0bd6720ec90aae5460998881b58bebe1 = L.markerClusterGroup(\n                {}\n            );\n            map_bce03d6715cd61456726194bbe1dfbc8.addLayer(marker_cluster_0bd6720ec90aae5460998881b58bebe1);\n        \n    \n            var mouse_position_505a80a200b6eddf8cb2fdebde22e625 = new L.Control.MousePosition(\n                {&quot;emptyString&quot;: &quot;NaN&quot;, &quot;lngFirst&quot;: false, &quot;numDigits&quot;: 20, &quot;position&quot;: &quot;topright&quot;, &quot;prefix&quot;: &quot;Lat:&quot;, &quot;separator&quot;: &quot; Long: &quot;}\n            );\n            mouse_position_505a80a200b6eddf8cb2fdebde22e625.options[&quot;latFormatter&quot;] =\n                function(num) {return L.Util.formatNum(num, 5);};;\n            mouse_position_505a80a200b6eddf8cb2fdebde22e625.options[&quot;lngFormatter&quot;] =\n                function(num) {return L.Util.formatNum(num, 5);};;\n            map_bce03d6715cd61456726194bbe1dfbc8.addControl(mouse_position_505a80a200b6eddf8cb2fdebde22e625);\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": {}
        }
      ]
    },
    {
      "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
      },
      "execution_count": 19,
      "outputs": []
    },
    {
      "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)\nlaunch_site_lat=28.56326\nlaunch_site_lon=-80.57684\ncoastline_lat=28.56401\ncoastline_lon=-80.56811\ndistance_coastline = calculate_distance(launch_site_lat, launch_site_lon, coastline_lat, coastline_lon)\ndistance_coastline",
      "metadata": {
        "trusted": true
      },
      "execution_count": 20,
      "outputs": [
        {
          "execution_count": 20,
          "output_type": "execute_result",
          "data": {
            "text/plain": "0.8569186317390074"
          },
          "metadata": {}
        }
      ]
    },
    {
      "cell_type": "code",
      "source": "# Create and add a folium.Marker on your selected closest coastline point on the map\n# Display the distance between coastline point and launch site using the icon property \n# for example\n# distance_marker = folium.Marker(\n#    coordinate,\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>' % \"{:10.2f} KM\".format(distance),\n#        )\n#    )\n\ndistance_marker = folium.Marker(\n   [coastline_lat,coastline_lon],\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>' % \"{:10.2f} KM\".format(distance_coastline),\n       )\n   )\nsite_map.add_child(distance_marker)\nsite_map",
      "metadata": {
        "trusted": true
      },
      "execution_count": 21,
      "outputs": [
        {
          "execution_count": 21,
          "output_type": "execute_result",
          "data": {
            "text/plain": "<folium.folium.Map at 0x410ff00>",
            "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-1.12.4.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.min.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_bce03d6715cd61456726194bbe1dfbc8 {\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_bce03d6715cd61456726194bbe1dfbc8&quot; &gt;&lt;/div&gt;\n        \n&lt;/body&gt;\n&lt;script&gt;\n    \n    \n            var map_bce03d6715cd61456726194bbe1dfbc8 = L.map(\n                &quot;map_bce03d6715cd61456726194bbe1dfbc8&quot;,\n                {\n                    center: [29.559684888503615, -95.0830971930759],\n                    crs: L.CRS.EPSG3857,\n                    zoom: 5,\n                    zoomControl: true,\n                    preferCanvas: false,\n                }\n            );\n\n            \n\n        \n    \n            var tile_layer_376f96619d4e1787326c56c17373abbe = L.tileLayer(\n                &quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;,\n                {&quot;attribution&quot;: &quot;Data by \\u0026copy; \\u003ca target=\\&quot;_blank\\&quot; href=\\&quot;http://openstreetmap.org\\&quot;\\u003eOpenStreetMap\\u003c/a\\u003e, under \\u003ca target=\\&quot;_blank\\&quot; href=\\&quot;http://www.openstreetmap.org/copyright\\&quot;\\u003eODbL\\u003c/a\\u003e.&quot;, &quot;detectRetina&quot;: false, &quot;maxNativeZoom&quot;: 18, &quot;maxZoom&quot;: 18, &quot;minZoom&quot;: 0, &quot;noWrap&quot;: false, &quot;opacity&quot;: 1, &quot;subdomains&quot;: &quot;abc&quot;, &quot;tms&quot;: false}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var circle_c290ac3949fbeb2f0bd775196237e7f4 = L.circle(\n                [28.56230197, -80.57735648],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_81a01f9c783719d7954cb15f937afc6d = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_11cd138c60a8ab2af20ae82ff8871990 = $(`&lt;div id=&quot;html_11cd138c60a8ab2af20ae82ff8871990&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;CCAFS LC-40&lt;/div&gt;`)[0];\n                popup_81a01f9c783719d7954cb15f937afc6d.setContent(html_11cd138c60a8ab2af20ae82ff8871990);\n            \n        \n\n        circle_c290ac3949fbeb2f0bd775196237e7f4.bindPopup(popup_81a01f9c783719d7954cb15f937afc6d)\n        ;\n\n        \n    \n    \n            var marker_94846d0608f080f1073576f2f148c42d = L.marker(\n                [28.56230197, -80.57735648],\n                {}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var div_icon_d9efaf13f977c0d6ea67b1ac8ba00f54 = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eCCAFS LC-40\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_94846d0608f080f1073576f2f148c42d.setIcon(div_icon_d9efaf13f977c0d6ea67b1ac8ba00f54);\n        \n    \n            var circle_8bde87eac4bae4f38193840ba0032360 = L.circle(\n                [28.56319718, -80.57682003],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_56a60b879198d8168e1f8fb4e9a0cf9e = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_8b74b3b92997a429155cb25a3d9e388d = $(`&lt;div id=&quot;html_8b74b3b92997a429155cb25a3d9e388d&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;CCAFS SLC-40&lt;/div&gt;`)[0];\n                popup_56a60b879198d8168e1f8fb4e9a0cf9e.setContent(html_8b74b3b92997a429155cb25a3d9e388d);\n            \n        \n\n        circle_8bde87eac4bae4f38193840ba0032360.bindPopup(popup_56a60b879198d8168e1f8fb4e9a0cf9e)\n        ;\n\n        \n    \n    \n            var marker_b0fd5c0f23998c27766d5864e6ad78d6 = L.marker(\n                [28.56319718, -80.57682003],\n                {}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var div_icon_9fb685a14ae493c9d055970ada3663dd = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eCCAFS SLC-40\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_b0fd5c0f23998c27766d5864e6ad78d6.setIcon(div_icon_9fb685a14ae493c9d055970ada3663dd);\n        \n    \n            var circle_0efc8bde1491005a9239364fdd170eb5 = L.circle(\n                [28.57325457, -80.64689529],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_9c1a7f9d6d7bf4744e556bb4895f4112 = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_2163735058a39bf054761d0425d5eaba = $(`&lt;div id=&quot;html_2163735058a39bf054761d0425d5eaba&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;KSC LC-39A&lt;/div&gt;`)[0];\n                popup_9c1a7f9d6d7bf4744e556bb4895f4112.setContent(html_2163735058a39bf054761d0425d5eaba);\n            \n        \n\n        circle_0efc8bde1491005a9239364fdd170eb5.bindPopup(popup_9c1a7f9d6d7bf4744e556bb4895f4112)\n        ;\n\n        \n    \n    \n            var marker_01215b2c56da3decd426c4a32f23e71c = L.marker(\n                [28.57325457, -80.64689529],\n                {}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var div_icon_f847d82c26889c6975799f1133044c35 = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eKSC LC-39A\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_01215b2c56da3decd426c4a32f23e71c.setIcon(div_icon_f847d82c26889c6975799f1133044c35);\n        \n    \n            var circle_1db659790862780a38218b7779cee7ad = L.circle(\n                [34.63283416, -120.6107455],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_80524f83ff8e04b8c5a87211a3f5216c = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_ddcb3febe898a8a7ca6241884421404d = $(`&lt;div id=&quot;html_ddcb3febe898a8a7ca6241884421404d&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;VAFB SLC-4E&lt;/div&gt;`)[0];\n                popup_80524f83ff8e04b8c5a87211a3f5216c.setContent(html_ddcb3febe898a8a7ca6241884421404d);\n            \n        \n\n        circle_1db659790862780a38218b7779cee7ad.bindPopup(popup_80524f83ff8e04b8c5a87211a3f5216c)\n        ;\n\n        \n    \n    \n            var marker_e8a94aadce5e142cb47481dc57372fbb = L.marker(\n                [34.63283416, -120.6107455],\n                {}\n            ).addTo(marker_cluster_0bd6720ec90aae5460998881b58bebe1);\n        \n    \n            var div_icon_d9fb03311d81986a60454ed038466c7c = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eVAFB SLC-4E\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_e8a94aadce5e142cb47481dc57372fbb.setIcon(div_icon_d9fb03311d81986a60454ed038466c7c);\n        \n    \n            var marker_cluster_0bd6720ec90aae5460998881b58bebe1 = L.markerClusterGroup(\n                {}\n            );\n            map_bce03d6715cd61456726194bbe1dfbc8.addLayer(marker_cluster_0bd6720ec90aae5460998881b58bebe1);\n        \n    \n            var mouse_position_505a80a200b6eddf8cb2fdebde22e625 = new L.Control.MousePosition(\n                {&quot;emptyString&quot;: &quot;NaN&quot;, &quot;lngFirst&quot;: false, &quot;numDigits&quot;: 20, &quot;position&quot;: &quot;topright&quot;, &quot;prefix&quot;: &quot;Lat:&quot;, &quot;separator&quot;: &quot; Long: &quot;}\n            );\n            mouse_position_505a80a200b6eddf8cb2fdebde22e625.options[&quot;latFormatter&quot;] =\n                function(num) {return L.Util.formatNum(num, 5);};;\n            mouse_position_505a80a200b6eddf8cb2fdebde22e625.options[&quot;lngFormatter&quot;] =\n                function(num) {return L.Util.formatNum(num, 5);};;\n            map_bce03d6715cd61456726194bbe1dfbc8.addControl(mouse_position_505a80a200b6eddf8cb2fdebde22e625);\n        \n    \n            var marker_7a24be51016838b35b4c2aa88ea63c37 = L.marker(\n                [28.56401, -80.56811],\n                {}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var div_icon_6fdabd935e97e99958365bf67997979a = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003e      0.86 KM\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_7a24be51016838b35b4c2aa88ea63c37.setIcon(div_icon_6fdabd935e97e99958365bf67997979a);\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": {}
        }
      ]
    },
    {
      "cell_type": "markdown",
      "source": "*TODO:* Draw a `PolyLine` between a launch site to the selected coastline point\n",
      "metadata": {}
    },
    {
      "cell_type": "code",
      "source": "# Create a `folium.PolyLine` object using the coastline coordinates and launch site coordinate\n# lines=folium.PolyLine(locations=coordinates, weight=1)\nlines=folium.PolyLine(locations=[[launch_site_lat,launch_site_lon],[coastline_lat,coastline_lon]], weight=1)\n\nsite_map.add_child(lines)\nsite_map",
      "metadata": {
        "trusted": true
      },
      "execution_count": 22,
      "outputs": [
        {
          "execution_count": 22,
          "output_type": "execute_result",
          "data": {
            "text/plain": "<folium.folium.Map at 0x410ff00>",
            "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-1.12.4.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.min.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_bce03d6715cd61456726194bbe1dfbc8 {\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_bce03d6715cd61456726194bbe1dfbc8&quot; &gt;&lt;/div&gt;\n        \n&lt;/body&gt;\n&lt;script&gt;\n    \n    \n            var map_bce03d6715cd61456726194bbe1dfbc8 = L.map(\n                &quot;map_bce03d6715cd61456726194bbe1dfbc8&quot;,\n                {\n                    center: [29.559684888503615, -95.0830971930759],\n                    crs: L.CRS.EPSG3857,\n                    zoom: 5,\n                    zoomControl: true,\n                    preferCanvas: false,\n                }\n            );\n\n            \n\n        \n    \n            var tile_layer_376f96619d4e1787326c56c17373abbe = L.tileLayer(\n                &quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;,\n                {&quot;attribution&quot;: &quot;Data by \\u0026copy; \\u003ca target=\\&quot;_blank\\&quot; href=\\&quot;http://openstreetmap.org\\&quot;\\u003eOpenStreetMap\\u003c/a\\u003e, under \\u003ca target=\\&quot;_blank\\&quot; href=\\&quot;http://www.openstreetmap.org/copyright\\&quot;\\u003eODbL\\u003c/a\\u003e.&quot;, &quot;detectRetina&quot;: false, &quot;maxNativeZoom&quot;: 18, &quot;maxZoom&quot;: 18, &quot;minZoom&quot;: 0, &quot;noWrap&quot;: false, &quot;opacity&quot;: 1, &quot;subdomains&quot;: &quot;abc&quot;, &quot;tms&quot;: false}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var circle_c290ac3949fbeb2f0bd775196237e7f4 = L.circle(\n                [28.56230197, -80.57735648],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_81a01f9c783719d7954cb15f937afc6d = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_11cd138c60a8ab2af20ae82ff8871990 = $(`&lt;div id=&quot;html_11cd138c60a8ab2af20ae82ff8871990&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;CCAFS LC-40&lt;/div&gt;`)[0];\n                popup_81a01f9c783719d7954cb15f937afc6d.setContent(html_11cd138c60a8ab2af20ae82ff8871990);\n            \n        \n\n        circle_c290ac3949fbeb2f0bd775196237e7f4.bindPopup(popup_81a01f9c783719d7954cb15f937afc6d)\n        ;\n\n        \n    \n    \n            var marker_94846d0608f080f1073576f2f148c42d = L.marker(\n                [28.56230197, -80.57735648],\n                {}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var div_icon_d9efaf13f977c0d6ea67b1ac8ba00f54 = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eCCAFS LC-40\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_94846d0608f080f1073576f2f148c42d.setIcon(div_icon_d9efaf13f977c0d6ea67b1ac8ba00f54);\n        \n    \n            var circle_8bde87eac4bae4f38193840ba0032360 = L.circle(\n                [28.56319718, -80.57682003],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_56a60b879198d8168e1f8fb4e9a0cf9e = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_8b74b3b92997a429155cb25a3d9e388d = $(`&lt;div id=&quot;html_8b74b3b92997a429155cb25a3d9e388d&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;CCAFS SLC-40&lt;/div&gt;`)[0];\n                popup_56a60b879198d8168e1f8fb4e9a0cf9e.setContent(html_8b74b3b92997a429155cb25a3d9e388d);\n            \n        \n\n        circle_8bde87eac4bae4f38193840ba0032360.bindPopup(popup_56a60b879198d8168e1f8fb4e9a0cf9e)\n        ;\n\n        \n    \n    \n            var marker_b0fd5c0f23998c27766d5864e6ad78d6 = L.marker(\n                [28.56319718, -80.57682003],\n                {}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var div_icon_9fb685a14ae493c9d055970ada3663dd = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eCCAFS SLC-40\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_b0fd5c0f23998c27766d5864e6ad78d6.setIcon(div_icon_9fb685a14ae493c9d055970ada3663dd);\n        \n    \n            var circle_0efc8bde1491005a9239364fdd170eb5 = L.circle(\n                [28.57325457, -80.64689529],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_9c1a7f9d6d7bf4744e556bb4895f4112 = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_2163735058a39bf054761d0425d5eaba = $(`&lt;div id=&quot;html_2163735058a39bf054761d0425d5eaba&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;KSC LC-39A&lt;/div&gt;`)[0];\n                popup_9c1a7f9d6d7bf4744e556bb4895f4112.setContent(html_2163735058a39bf054761d0425d5eaba);\n            \n        \n\n        circle_0efc8bde1491005a9239364fdd170eb5.bindPopup(popup_9c1a7f9d6d7bf4744e556bb4895f4112)\n        ;\n\n        \n    \n    \n            var marker_01215b2c56da3decd426c4a32f23e71c = L.marker(\n                [28.57325457, -80.64689529],\n                {}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var div_icon_f847d82c26889c6975799f1133044c35 = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eKSC LC-39A\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_01215b2c56da3decd426c4a32f23e71c.setIcon(div_icon_f847d82c26889c6975799f1133044c35);\n        \n    \n            var circle_1db659790862780a38218b7779cee7ad = L.circle(\n                [34.63283416, -120.6107455],\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_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n        var popup_80524f83ff8e04b8c5a87211a3f5216c = L.popup({&quot;maxWidth&quot;: &quot;100%&quot;});\n\n        \n            \n                var html_ddcb3febe898a8a7ca6241884421404d = $(`&lt;div id=&quot;html_ddcb3febe898a8a7ca6241884421404d&quot; style=&quot;width: 100.0%; height: 100.0%;&quot;&gt;VAFB SLC-4E&lt;/div&gt;`)[0];\n                popup_80524f83ff8e04b8c5a87211a3f5216c.setContent(html_ddcb3febe898a8a7ca6241884421404d);\n            \n        \n\n        circle_1db659790862780a38218b7779cee7ad.bindPopup(popup_80524f83ff8e04b8c5a87211a3f5216c)\n        ;\n\n        \n    \n    \n            var marker_e8a94aadce5e142cb47481dc57372fbb = L.marker(\n                [34.63283416, -120.6107455],\n                {}\n            ).addTo(marker_cluster_0bd6720ec90aae5460998881b58bebe1);\n        \n    \n            var div_icon_d9fb03311d81986a60454ed038466c7c = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003eVAFB SLC-4E\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_e8a94aadce5e142cb47481dc57372fbb.setIcon(div_icon_d9fb03311d81986a60454ed038466c7c);\n        \n    \n            var marker_cluster_0bd6720ec90aae5460998881b58bebe1 = L.markerClusterGroup(\n                {}\n            );\n            map_bce03d6715cd61456726194bbe1dfbc8.addLayer(marker_cluster_0bd6720ec90aae5460998881b58bebe1);\n        \n    \n            var mouse_position_505a80a200b6eddf8cb2fdebde22e625 = new L.Control.MousePosition(\n                {&quot;emptyString&quot;: &quot;NaN&quot;, &quot;lngFirst&quot;: false, &quot;numDigits&quot;: 20, &quot;position&quot;: &quot;topright&quot;, &quot;prefix&quot;: &quot;Lat:&quot;, &quot;separator&quot;: &quot; Long: &quot;}\n            );\n            mouse_position_505a80a200b6eddf8cb2fdebde22e625.options[&quot;latFormatter&quot;] =\n                function(num) {return L.Util.formatNum(num, 5);};;\n            mouse_position_505a80a200b6eddf8cb2fdebde22e625.options[&quot;lngFormatter&quot;] =\n                function(num) {return L.Util.formatNum(num, 5);};;\n            map_bce03d6715cd61456726194bbe1dfbc8.addControl(mouse_position_505a80a200b6eddf8cb2fdebde22e625);\n        \n    \n            var marker_7a24be51016838b35b4c2aa88ea63c37 = L.marker(\n                [28.56401, -80.56811],\n                {}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\n        \n    \n            var div_icon_6fdabd935e97e99958365bf67997979a = L.divIcon({&quot;className&quot;: &quot;empty&quot;, &quot;html&quot;: &quot;\\u003cdiv style=\\&quot;font-size: 12; color:#d35400;\\&quot;\\u003e\\u003cb\\u003e      0.86 KM\\u003c/b\\u003e\\u003c/div\\u003e&quot;, &quot;iconAnchor&quot;: [0, 0], &quot;iconSize&quot;: [20, 20]});\n            marker_7a24be51016838b35b4c2aa88ea63c37.setIcon(div_icon_6fdabd935e97e99958365bf67997979a);\n        \n    \n            var poly_line_861ef1f66da0a77202bc6dd8bb650154 = L.polyline(\n                [[28.56326, -80.57684], [28.56401, -80.56811]],\n                {&quot;bubblingMouseEvents&quot;: true, &quot;color&quot;: &quot;#3388ff&quot;, &quot;dashArray&quot;: null, &quot;dashOffset&quot;: null, &quot;fill&quot;: false, &quot;fillColor&quot;: &quot;#3388ff&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;: 1}\n            ).addTo(map_bce03d6715cd61456726194bbe1dfbc8);\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": {}
        }
      ]
    },
    {
      "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\nproximities_df = spacex_df.groupby('Launch Site').first()[['Lat','Long']].assign(Proximity=lambda x:['self' for i in range(len(x))]).set_index('Proximity', append=True)\n\nproximities_df.loc[('CCAFS LC-40','coastline'),['Lat','Long']] = 28.5634,-80.56796\nproximities_df.loc[('CCAFS LC-40','railway'),['Lat','Long']] = 28.57217,-80.58528\nproximities_df.loc[('CCAFS LC-40','highway'),['Lat','Long']] = 28.56301,-80.57076\nproximities_df.loc[('CCAFS LC-40','city'),['Lat','Long']] = 28.10469,-80.64784\n\nproximities_df.loc[('CCAFS SLC-40','coastline'),['Lat','Long']] = 28.56409,-80.56806\nproximities_df.loc[('CCAFS SLC-40','railway'),['Lat','Long']] = 28.57217,-80.58528\nproximities_df.loc[('CCAFS SLC-40','highway'),['Lat','Long']] = 28.56385,-80.57088\nproximities_df.loc[('CCAFS SLC-40','city'),['Lat','Long']] = 28.10469,-80.64784\n\nproximities_df.loc[('KSC LC-39A','coastline'),['Lat','Long']] = 28.60283,-80.58815\nproximities_df.loc[('KSC LC-39A','railway'),['Lat','Long']] = 28.57314,-80.65398\nproximities_df.loc[('KSC LC-39A','highway'),['Lat','Long']] = 28.57307,-80.65553\nproximities_df.loc[('KSC LC-39A','city'),['Lat','Long']] = 28.10469,-80.64784\n\nproximities_df.loc[('VAFB SLC-4E','coastline'),['Lat','Long']] = 34.6347,-120.62531\nproximities_df.loc[('VAFB SLC-4E','railway'),['Lat','Long']] = 34.63585,-120.62401\nproximities_df.loc[('VAFB SLC-4E','highway'),['Lat','Long']] = 34.7048,-120.5694\nproximities_df.loc[('VAFB SLC-4E','city'),['Lat','Long']] = 34.64253,-120.47331\n\nproximities_df = proximities_df.query(\"Proximity == 'self'\").reset_index(\"Proximity\",drop=True).join(\n    proximities_df.query(\"Proximity != 'self'\").reset_index(\"Proximity\", drop=False),\n    lsuffix=\"LaunchSite\"\n).assign(\n    distance=lambda x:[calculate_distance(row['LatLaunchSite'], row['LongLaunchSite'], row['Lat'], row['Long']) for idx,row in x.iterrows()]\n).set_index(\"Proximity\", append=True)\nproximities_df",
      "metadata": {
        "trusted": true
      },
      "execution_count": 23,
      "outputs": [
        {
          "execution_count": 23,
          "output_type": "execute_result",
          "data": {
            "text/plain": "                        LatLaunchSite  LongLaunchSite       Lat       Long  \\\nLaunch Site  Proximity                                                       \nCCAFS LC-40  coastline      28.562302      -80.577356  28.56340  -80.56796   \n             railway        28.562302      -80.577356  28.57217  -80.58528   \n             highway        28.562302      -80.577356  28.56301  -80.57076   \n             city           28.562302      -80.577356  28.10469  -80.64784   \nCCAFS SLC-40 coastline      28.563197      -80.576820  28.56409  -80.56806   \n             railway        28.563197      -80.576820  28.57217  -80.58528   \n             highway        28.563197      -80.576820  28.56385  -80.57088   \n             city           28.563197      -80.576820  28.10469  -80.64784   \nKSC LC-39A   coastline      28.573255      -80.646895  28.60283  -80.58815   \n             railway        28.573255      -80.646895  28.57314  -80.65398   \n             highway        28.573255      -80.646895  28.57307  -80.65553   \n             city           28.573255      -80.646895  28.10469  -80.64784   \nVAFB SLC-4E  coastline      34.632834     -120.610745  34.63470 -120.62531   \n             railway        34.632834     -120.610745  34.63585 -120.62401   \n             highway        34.632834     -120.610745  34.70480 -120.56940   \n             city           34.632834     -120.610745  34.64253 -120.47331   \n\n                         distance  \nLaunch Site  Proximity             \nCCAFS LC-40  coastline   0.926054  \n             railway     1.343093  \n             highway     0.649222  \n             city       51.365738  \nCCAFS SLC-40 coastline   0.861525  \n             railway     1.295798  \n             highway     0.584818  \n             city       51.471476  \nKSC LC-39A   coastline   6.613767  \n             railway     0.692172  \n             highway     0.843713  \n             city       52.118441  \nVAFB SLC-4E  coastline   1.349004  \n             railway     1.259455  \n             highway     8.853368  \n             city       12.623666  ",
            "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></th>\n      <th>LatLaunchSite</th>\n      <th>LongLaunchSite</th>\n      <th>Lat</th>\n      <th>Long</th>\n      <th>distance</th>\n    </tr>\n    <tr>\n      <th>Launch Site</th>\n      <th>Proximity</th>\n      <th></th>\n      <th></th>\n      <th></th>\n      <th></th>\n      <th></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th rowspan=\"4\" valign=\"top\">CCAFS LC-40</th>\n      <th>coastline</th>\n      <td>28.562302</td>\n      <td>-80.577356</td>\n      <td>28.56340</td>\n      <td>-80.56796</td>\n      <td>0.926054</td>\n    </tr>\n    <tr>\n      <th>railway</th>\n      <td>28.562302</td>\n      <td>-80.577356</td>\n      <td>28.57217</td>\n      <td>-80.58528</td>\n      <td>1.343093</td>\n    </tr>\n    <tr>\n      <th>highway</th>\n      <td>28.562302</td>\n      <td>-80.577356</td>\n      <td>28.56301</td>\n      <td>-80.57076</td>\n      <td>0.649222</td>\n    </tr>\n    <tr>\n      <th>city</th>\n      <td>28.562302</td>\n      <td>-80.577356</td>\n      <td>28.10469</td>\n      <td>-80.64784</td>\n      <td>51.365738</td>\n    </tr>\n    <tr>\n      <th rowspan=\"4\" valign=\"top\">CCAFS SLC-40</th>\n      <th>coastline</th>\n      <td>28.563197</td>\n      <td>-80.576820</td>\n      <td>28.56409</td>\n      <td>-80.56806</td>\n      <td>0.861525</td>\n    </tr>\n    <tr>\n      <th>railway</th>\n      <td>28.563197</td>\n      <td>-80.576820</td>\n      <td>28.57217</td>\n      <td>-80.58528</td>\n      <td>1.295798</td>\n    </tr>\n    <tr>\n      <th>highway</th>\n      <td>28.563197</td>\n      <td>-80.576820</td>\n      <td>28.56385</td>\n      <td>-80.57088</td>\n      <td>0.584818</td>\n    </tr>\n    <tr>\n      <th>city</th>\n      <td>28.563197</td>\n      <td>-80.576820</td>\n      <td>28.10469</td>\n      <td>-80.64784</td>\n      <td>51.471476</td>\n    </tr>\n    <tr>\n      <th rowspan=\"4\" valign=\"top\">KSC LC-39A</th>\n      <th>coastline</th>\n      <td>28.573255</td>\n      <td>-80.646895</td>\n      <td>28.60283</td>\n      <td>-80.58815</td>\n      <td>6.613767</td>\n    </tr>\n    <tr>\n      <th>railway</th>\n      <td>28.573255</td>\n      <td>-80.646895</td>\n      <td>28.57314</td>\n      <td>-80.65398</td>\n      <td>0.692172</td>\n    </tr>\n    <tr>\n      <th>highway</th>\n      <td>28.573255</td>\n      <td>-80.646895</td>\n      <td>28.57307</td>\n      <td>-80.65553</td>\n      <td>0.843713</td>\n    </tr>\n    <tr>\n      <th>city</th>\n      <td>28.573255</td>\n      <td>-80.646895</td>\n      <td>28.10469</td>\n      <td>-80.64784</td>\n      <td>52.118441</td>\n    </tr>\n    <tr>\n      <th rowspan=\"4\" valign=\"top\">VAFB SLC-4E</th>\n      <th>coastline</th>\n      <td>34.632834</td>\n      <td>-120.610745</td>\n      <td>34.63470</td>\n      <td>-120.62531</td>\n      <td>1.349004</td>\n    </tr>\n    <tr>\n      <th>railway</th>\n      <td>34.632834</td>\n      <td>-120.610745</td>\n      <td>34.63585</td>\n      <td>-120.62401</td>\n      <td>1.259455</td>\n    </tr>\n    <tr>\n      <th>highway</th>\n      <td>34.632834</td>\n      <td>-120.610745</td>\n      <td>34.70480</td>\n      <td>-120.56940</td>\n      <td>8.853368</td>\n    </tr>\n    <tr>\n      <th>city</th>\n      <td>34.632834</td>\n      <td>-120.610745</td>\n      <td>34.64253</td>\n      <td>-120.47331</td>\n      <td>12.623666</td>\n    </tr>\n  </tbody>\n</table>\n</div>"
          },
          "metadata": {}
        }
      ]
    },
    {
      "cell_type": "code",
      "source": "",
      "metadata": {},
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "code",
      "source": "",
      "metadata": {},
      "execution_count": null,
      "outputs": []
    },
    {
      "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/?utm_medium=Exinfluencer&utm_source=Exinfluencer&utm_content=000026UJ&utm_term=10006555&utm_id=NA-SkillsNetwork-Channel-SkillsNetworkCoursesIBMDS0321ENSkillsNetwork865-2022-01-01)\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": {}
    }
  ]
}