{
 "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": null,
   "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": null,
   "metadata": {},
   "outputs": [],
   "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.11.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}