DashLeaflet_TiTiler.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<h2>Example of DashLeaflet displaying Geotiff with TiTiler<h2>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "#Import PLotly Dash , Dash Leaflet (for mapping), Jupyter Dash (for using dash/dash leaflet in notebook),\n",
    "# Import  Json & httpx for getting data from TiTiler \n",
    "from jupyter_dash import JupyterDash\n",
    "from dash import Dash, html,dcc,Input, Output\n",
    "import dash_leaflet as dl\n",
    "import json\n",
    "import httpx"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "#Set TiTiler endpoint as local host \n",
    "#Titiler is running using Docker Image \n",
    "#Local host is running on port 8080 , this is set in Docker desktop when running the image. \n",
    "#Url refers to a S3 bucket \n",
    "#Note: .tiff is a Cloud Optomised Geotiff[COG] , .tiff must be a COG!!!\n",
    "\n",
    "S3_URL = open(\"Resource_Files\\S3_URL.txt\").read() # this is my S3 bucket URL saved in txt file for privacy \n",
    "\n",
    "\n",
    "titiler_endpoint = \"http://localhost:8080\"  # titiler docker image running on local .\n",
    "url = S3_URL\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "(4.905625820159912, 16.434234619140625)"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# Extract min and max values of the COG , this is used to rescale the COG\n",
    "r = httpx.get(\n",
    "    f\"{titiler_endpoint}/cog/statistics\",\n",
    "    params = {\n",
    "        \"url\": url,\n",
    "    }\n",
    ").json()\n",
    "\n",
    "minv = (r[\"1\"][\"min\"])\n",
    "maxv = (r[\"1\"][\"max\"])\n",
    "\n",
    "\n",
    "minv,maxv"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "#get tile map from titiler endpoint and url , and scale to min and max values \n",
    "\n",
    "r = httpx.get(\n",
    "    f\"{titiler_endpoint}/cog/tilejson.json\",\n",
    "    params = {\n",
    "        \"url\": url,\n",
    "        \"rescale\": f\"{minv},{maxv}\",\n",
    "        \"colormap_name\": \"viridis\"\n",
    "    }\n",
    ").json()\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'10.10'"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "#create function which uses \"get point\" via titiler to get point value . This will be used in dash to get \n",
    "#point value and present this on the map \n",
    "# note \"nearest\" lat lon will be used by\n",
    "\n",
    "def get_point_value(lat,lon):\n",
    "\n",
    "    Point = httpx.get(\n",
    "        f\"{titiler_endpoint}/cog/point/{lon},{lat}\",\n",
    "        params = {\n",
    "            \"url\": url,\n",
    "            \"resampling\": \"average\"\n",
    "\n",
    "        }\n",
    "    ).json()\n",
    "\n",
    "\n",
    "    return \"{:.2f}\".format(float(Point[\"values\"][0]))\n",
    "\n",
    "#test function is working \n",
    "x = get_point_value(55.5,-4)\n",
    "x"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "        <iframe\n",
       "            width=\"100%\"\n",
       "            height=\"650\"\n",
       "            src=\"http://127.0.0.1:8050/\"\n",
       "            frameborder=\"0\"\n",
       "            allowfullscreen\n",
       "            \n",
       "        ></iframe>\n",
       "        "
      ],
      "text/plain": [
       "<IPython.lib.display.IFrame at 0x219e6ca6310>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "#Build Dash app (note: JupyterDash being used here but will work in external dash app , to see this change last line to \"mode=External\")\n",
    "\n",
    "app = JupyterDash(__name__)\n",
    "\n",
    "#create the info panel where our wind speed will be displayed \n",
    "info = html.Div( id=\"info\", className=\"info\",\n",
    "                style={\"position\": \"absolute\", \"bottom\": \"10px\", \"left\": \"10px\", \"z-index\": \"1000\"})\n",
    "\n",
    "#Create app layout \n",
    "#dash leaflet used to create map (https://dash-leaflet.herokuapp.com/)\n",
    "#dl.LayersControl, dl.overlay & dl.LayerGroup used to add layer selection functionality \n",
    "app.layout = html.Div([\n",
    "dl.Map(style={'width': '1000px', 'height': '500px'},\n",
    "               center=[55, -4],\n",
    "               zoom=5,\n",
    "               id = \"map\",\n",
    "               children=[\n",
    "            dl.LayersControl([\n",
    "                \n",
    "                   dl.Overlay(dl.LayerGroup(dl.TileLayer(url=\"https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_nolabels/{z}/{x}/{y}.png\",id=\"TileMap\")),name=\"BaseMap\",checked=True),\n",
    "                   #COG fed into Tilelayer using TiTiler url (taken from r[\"tiles\"][0])\n",
    "                   dl.Overlay(dl.LayerGroup(dl.TileLayer(url=r[\"tiles\"][0], opacity=0.8,id=\"WindSpeed@100m\")),name=\"WS@100m\",checked=True),\n",
    "                   dl.LayerGroup(id=\"layer\"),\n",
    "                # set colorbar and location in app            \n",
    "                   dl.Colorbar(colorscale=\"viridis\", width=20, height=150, min=minv, max=maxv,unit='m/s',position=\"bottomright\"),\n",
    "                   info,\n",
    "                   \n",
    "])\n",
    "])\n",
    "])\n",
    "# create callback which uses inbuilt \"click_lat_lng\" feature of Dash leaflet map, extract lat/lon and feed to get_point_value function , WS fed to output id = info (which is info html.div)\n",
    "@app.callback(Output(\"info\", \"children\"), [Input(\"map\", \"click_lat_lng\")])\n",
    "def map_click(click_lat_lng):\n",
    "\n",
    "    lat= click_lat_lng[0]\n",
    "    lon=click_lat_lng[1]\n",
    "    \n",
    "    return get_point_value(lat,lon)\n",
    "\n",
    "\n",
    "\n",
    "app.run_server(debug=True,mode='inline')\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3.9.12 ('PyRapidEPE')",
   "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.9.12"
  },
  "orig_nbformat": 4,
  "vscode": {
   "interpreter": {
    "hash": "4e34211d4446c4dcccdae403b8cf3638c203efa59b5ea8c84d90201c883e4c51"
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}