{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/opengeos/solara-geemap/blob/main/notebooks/01_basic.ipynb)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# %pip install -U geemap solara"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import geemap\n",
    "import solara\n",
    "\n",
    "zoom = solara.reactive(4)\n",
    "center = solara.reactive((40, -100))\n",
    "bounds = solara.reactive(None)\n",
    "\n",
    "\n",
    "@solara.component\n",
    "def Page():\n",
    "    # Isolation is required to prevent the map from overlapping navigation (when screen width < 960px)\n",
    "    with solara.Column(\n",
    "        style={\"min-width\": \"500px\", \"height\": \"780px\", \"isolation\": \"isolate\"}\n",
    "    ):\n",
    "        # solara components support reactive variables\n",
    "        solara.SliderInt(label=\"Zoom level\", value=zoom, min=1, max=20)\n",
    "        # using 3rd party widget library require wiring up the events manually\n",
    "        # using zoom.value and zoom.set\n",
    "        geemap.Map.element(  # type: ignore\n",
    "            zoom=zoom.value,\n",
    "            on_zoom=zoom.set,\n",
    "            center=center.value,\n",
    "            on_center=center.set,\n",
    "            on_bounds=bounds.set,\n",
    "            scroll_wheel_zoom=True,\n",
    "            height=\"600px\",\n",
    "        )\n",
    "        solara.Text(f\"Zoom: {zoom.value}\")\n",
    "        solara.Text(f\"Center: {center.value}\")\n",
    "        solara.Text(f\"Bounds: {bounds.value}\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "            <style>\n",
       "                .geemap-dark {\n",
       "                    --jp-widgets-color: white;\n",
       "                    --jp-widgets-label-color: white;\n",
       "                    --jp-ui-font-color1: white;\n",
       "                    --jp-layout-color2: #454545;\n",
       "                    background-color: #383838;\n",
       "                }\n",
       "\n",
       "                .geemap-dark .jupyter-button {\n",
       "                    --jp-layout-color3: #383838;\n",
       "                }\n",
       "\n",
       "                .geemap-colab {\n",
       "                    background-color: var(--colab-primary-surface-color, white);\n",
       "                }\n",
       "\n",
       "                .geemap-colab .jupyter-button {\n",
       "                    --jp-layout-color3: var(--colab-primary-surface-color, white);\n",
       "                }\n",
       "            </style>\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "10ea2abaa2e94833a8ee4326225e118b",
       "version_major": 2,
       "version_minor": 0
      },
      "text/html": [
       "Cannot show widget. You probably want to rerun the code cell above (<i>Click in the code cell, and press Shift+Enter <kbd>⇧</kbd>+<kbd>↩</kbd></i>)."
      ],
      "text/plain": [
       "Cannot show ipywidgets in text"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "Page()"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "geo",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.13.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}