{
    "cells": [
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "[![image](https://colab.research.google.com/assets/colab-badge.svg)](https://githubtocolab.com/gee-community/geemap/blob/master/examples/notebooks/103_split_control.ipynb)\n",
                "[![image](https://mybinder.org/badge_logo.svg)](https://gishub.org/geemap-binder)\n",
                "\n",
                "**Creating a split-panel map**\n",
                "\n",
                "This notebook demonstrates how to add a split-panel map with geemap and folium. It also supports streamlit. Note that the ipyleaflet SplitControl does not support streamlit. \n",
                "\n",
                "Uncomment the following line to install [geemap](https://geemap.org) if needed."
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "# !pip install geemap"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "import ee\n",
                "import folium\n",
                "import geemap.foliumap as geemap"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "The split-panel map requires two layers: `left_layer` and `right_layer`. The layer instance can be a string representing a basemap, or an HTTP URL to a Cloud Optimized GeoTIFF (COG), or a folium TileLayer instance. \n",
                "\n",
                "**Using basemaps**"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "m = geemap.Map(height=500)\n",
                "m.split_map(left_layer='TERRAIN', right_layer='OpenTopoMap')\n",
                "m"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "Show available basemaps."
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "# geemap.basemaps.keys()"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "**Using COG**"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "m = geemap.Map(height=600, center=[39.4948, -108.5492], zoom=12)\n",
                "url = 'https://opendata.digitalglobe.com/events/california-fire-2020/pre-event/2018-02-16/pine-gulch-fire20/1030010076004E00.tif'\n",
                "url2 = 'https://opendata.digitalglobe.com/events/california-fire-2020/post-event/2020-08-14/pine-gulch-fire20/10300100AAC8DD00.tif'\n",
                "m.split_map(url, url2)\n",
                "m"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "**Using folium TileLayer**"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "m = geemap.Map(center=[40, -100], zoom=4)\n",
                "\n",
                "url1 = 'https://www.mrlc.gov/geoserver/mrlc_display/NLCD_2001_Land_Cover_L48/wms?'\n",
                "url2 = 'https://www.mrlc.gov/geoserver/mrlc_display/NLCD_2019_Land_Cover_L48/wms?'\n",
                "\n",
                "left_layer = folium.WmsTileLayer(\n",
                "    url=url1,\n",
                "    layers='NLCD_2001_Land_Cover_L48',\n",
                "    name='NLCD 2001',\n",
                "    attr='MRLC',\n",
                "    fmt=\"image/png\",\n",
                "    transparent=True,\n",
                ")\n",
                "right_layer = folium.WmsTileLayer(\n",
                "    url=url2,\n",
                "    layers='NLCD_2019_Land_Cover_L48',\n",
                "    name='NLCD 2019',\n",
                "    attr='MRLC',\n",
                "    fmt=\"image/png\",\n",
                "    transparent=True,\n",
                ")\n",
                "\n",
                "m.split_map(left_layer, right_layer)\n",
                "m"
            ]
        },
        {
            "cell_type": "markdown",
            "metadata": {},
            "source": [
                "**Using Earth Engine layers**"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "m = geemap.Map(center=[39.3322, -106.7349], zoom=10)"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "srtm = ee.Image(\"USGS/SRTMGL1_003\")\n",
                "hillshade = ee.Terrain.hillshade(srtm)"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "vis = {\n",
                "    'min': 0,\n",
                "    'max': 5000,\n",
                "    'palette': [\"006633\", \"E5FFCC\", \"662A00\", \"D8D8D8\", \"F5F5F5\"],\n",
                "}"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "left_layer = geemap.ee_tile_layer(hillshade, name='Hillshade')\n",
                "right_layer = geemap.ee_tile_layer(srtm, vis, name='DEM')"
            ]
        },
        {
            "cell_type": "code",
            "execution_count": null,
            "metadata": {},
            "outputs": [],
            "source": [
                "m.split_map(left_layer, right_layer)\n",
                "m"
            ]
        }
    ],
    "metadata": {
        "kernelspec": {
            "display_name": "Python 3",
            "language": "python",
            "name": "python3"
        }
    },
    "nbformat": 4,
    "nbformat_minor": 5
}