example/pmtiles_raster.ipynb

{
 "cells": [
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![Open in Google Colab](https://img.shields.io/badge/Open_in_Google_Colab-000000?style=for-the-badge&logo=googlecolab&logoColor=%23F9AB00)](https://colab.research.google.com/github/jtmiclat/folium-pmtiles/blob/master/example/pmtiles_raster.ipynb) [![Open in Github.dev](https://img.shields.io/badge/Open_in_Github.dev-000000?style=for-the-badge&logo=GitHub&logoColor=ffffff)](https://github.dev/jtmiclat/folium-pmtiles/blob/master/example/pmtiles_raster.ipynb)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "# %pip install folium folium-pmtiles"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "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_0b080bbde3cf62b8831ffbcacd29a3ba {\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://unpkg.com/pmtiles@2.5.0/dist/index.js&quot;&gt;&lt;/script&gt;\n",
       "&lt;/head&gt;\n",
       "&lt;body&gt;\n",
       "    \n",
       "    \n",
       "            &lt;div class=&quot;folium-map&quot; id=&quot;map_0b080bbde3cf62b8831ffbcacd29a3ba&quot; &gt;&lt;/div&gt;\n",
       "        \n",
       "&lt;/body&gt;\n",
       "&lt;script&gt;\n",
       "    \n",
       "    \n",
       "            var map_0b080bbde3cf62b8831ffbcacd29a3ba = L.map(\n",
       "                &quot;map_0b080bbde3cf62b8831ffbcacd29a3ba&quot;,\n",
       "                {\n",
       "                    center: [43.7798, 11.24148],\n",
       "                    crs: L.CRS.EPSG3857,\n",
       "                    zoom: 2,\n",
       "                    zoomControl: true,\n",
       "                    preferCanvas: false,\n",
       "                }\n",
       "            );\n",
       "\n",
       "            \n",
       "\n",
       "        \n",
       "    var pm_tiles_raster_03be3b9efce1d64d73e0125836762f72 = new pmtiles.PMTiles(&#x27;https://pmtiles.jtmiclat.me/stamen_toner(raster)CC-BY+ODbL_z3.pmtiles&#x27;)\n",
       "            pmtiles.leafletRasterLayer(\n",
       "                pm_tiles_raster_03be3b9efce1d64d73e0125836762f72,\n",
       "                {&quot;attribution&quot;: &quot;Map tiles by \\u003ca href=\\&quot;http://stamen.com\\&quot;\\u003eStamen Design\\u003c/a\\u003e, under \\u003ca href=\\&quot;http://creativecommons.org/licenses/by/3.0\\&quot;\\u003eCC BY 3.0\\u003c/a\\u003e. Data by \\u003ca href=\\&quot;http://openstreetmap.org\\&quot;\\u003eOpenStreetMap\\u003c/a\\u003e, under \\u003ca href=\\&quot;http://www.openstreetmap.org/copyright\\&quot;\\u003eODbL\\u003c/a\\u003e.&quot;}\n",
       "            ).addTo(map_0b080bbde3cf62b8831ffbcacd29a3ba)\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>"
      ],
      "text/plain": [
       "<folium.folium.Map at 0x105d83220>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import folium\n",
    "\n",
    "from folium_pmtiles.raster import PMTilesRaster\n",
    "\n",
    "m = folium.Map(location=[43.7798, 11.24148], zoom_start=2, tiles=None)\n",
    "pmtiles_layer = PMTilesRaster(\n",
    "    \"https://pmtiles.jtmiclat.me/stamen_toner(raster)CC-BY+ODbL_z3.pmtiles\",\n",
    "    \"folium_layer_name\",\n",
    "    options={\n",
    "        \"attribution\": \"\"\"Map tiles by <a href=\"http://stamen.com\">Stamen Design</a>, under <a href=\"http://creativecommons.org/licenses/by/3.0\">CC BY 3.0</a>. Data by <a href=\"http://openstreetmap.org\">OpenStreetMap</a>, under <a href=\"http://www.openstreetmap.org/copyright\">ODbL</a>.\"\"\"\n",
    "    },\n",
    ")\n",
    "m.add_child(pmtiles_layer)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "folium-pmtiles",
   "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.16"
  },
  "orig_nbformat": 4,
  "vscode": {
   "interpreter": {
    "hash": "a89b7232a019ae6a2e08c3993951ee017186891e828efb2ae5602910061568ab"
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}