example/pmtiles_vector.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_vector.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_vector.ipynb)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# %pip install folium folium-pmtiles"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "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_95466bd0ff7c1a81394c79573fd27a8b {\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/protomaps-leaflet@1.24.0/dist/protomaps-leaflet.min.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_95466bd0ff7c1a81394c79573fd27a8b&quot; &gt;&lt;/div&gt;\n",
       "        \n",
       "&lt;/body&gt;\n",
       "&lt;script&gt;\n",
       "    \n",
       "    \n",
       "            var map_95466bd0ff7c1a81394c79573fd27a8b = L.map(\n",
       "                &quot;map_95466bd0ff7c1a81394c79573fd27a8b&quot;,\n",
       "                {\n",
       "                    center: [43.7798, 11.24148],\n",
       "                    crs: L.CRS.EPSG3857,\n",
       "                    zoom: 12,\n",
       "                    zoomControl: true,\n",
       "                    preferCanvas: false,\n",
       "                }\n",
       "            );\n",
       "\n",
       "            \n",
       "\n",
       "        \n",
       "    \n",
       "            var tile_layer_734741ed77573dcba34adec617ba10f9 = L.tileLayer(\n",
       "                &quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;,\n",
       "                {&quot;attribution&quot;: &quot;Data by \\u0026copy; \\u003ca target=\\&quot;_blank\\&quot; href=\\&quot;http://openstreetmap.org\\&quot;\\u003eOpenStreetMap\\u003c/a\\u003e, under \\u003ca target=\\&quot;_blank\\&quot; href=\\&quot;http://www.openstreetmap.org/copyright\\&quot;\\u003eODbL\\u003c/a\\u003e.&quot;, &quot;detectRetina&quot;: false, &quot;maxNativeZoom&quot;: 18, &quot;maxZoom&quot;: 18, &quot;minZoom&quot;: 0, &quot;noWrap&quot;: false, &quot;opacity&quot;: 1, &quot;subdomains&quot;: &quot;abc&quot;, &quot;tms&quot;: false}\n",
       "            ).addTo(map_95466bd0ff7c1a81394c79573fd27a8b);\n",
       "        \n",
       "    var pm_tiles_vector_38808b3c87e8ccf7757edd7551bc90c6 = protomapsL.leafletLayer(\n",
       "                {\n",
       "                    &quot;url&quot;:  &#x27;https://pmtiles.jtmiclat.me/protomaps(vector)ODbL_firenze.pmtiles&#x27;,\n",
       "                    \n",
       "                        ...protomapsL.json_style({&quot;layers&quot;: [{&quot;paint&quot;: {&quot;fill-color&quot;: &quot;steelblue&quot;}, &quot;source-layer&quot;: &quot;landuse&quot;, &quot;type&quot;: &quot;fill&quot;}, {&quot;paint&quot;: {&quot;line-color&quot;: &quot;black&quot;}, &quot;source-layer&quot;: &quot;roads&quot;, &quot;type&quot;: &quot;line&quot;}]}), \n",
       "                    \n",
       "                    ...{&quot;attribution&quot;: &quot;\\u003ca href=\\&quot;https://protomaps.com\\&quot;\\u003eProtomaps\\u003c/a\\u003e \\u00a9 \\u003ca href=\\&quot;https://openstreetmap.org/copyright\\&quot;\\u003eOpenStreetMap\\u003c/a\\u003e\\u0027&quot;}\n",
       "                }\n",
       "            )\n",
       "            pm_tiles_vector_38808b3c87e8ccf7757edd7551bc90c6.addTo(map_95466bd0ff7c1a81394c79573fd27a8b)\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 0x11b669160>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import folium\n",
    "\n",
    "from folium_pmtiles.vector import PMTilesVector\n",
    "\n",
    "m = folium.Map(location=[43.7798, 11.24148], zoom_start=12)\n",
    "pmtiles_layer = PMTilesVector(\n",
    "    \"https://pmtiles.jtmiclat.me/protomaps(vector)ODbL_firenze.pmtiles\",\n",
    "    \"folium_layer_name\",\n",
    "    style={\n",
    "        \"layers\": [\n",
    "            {\n",
    "                \"source-layer\": \"landuse\",\n",
    "                \"type\": \"fill\",\n",
    "                \"paint\": {\"fill-color\": \"steelblue\"},\n",
    "            },\n",
    "            {\n",
    "                \"source-layer\": \"roads\",\n",
    "                \"type\": \"line\",\n",
    "                \"paint\": {\"line-color\": \"black\"},\n",
    "            },\n",
    "        ],\n",
    "    },\n",
    "    options={\n",
    "        \"attribution\": \"\"\"<a href=\"https://protomaps.com\">Protomaps</a> © <a href=\"https://openstreetmap.org/copyright\">OpenStreetMap</a>'\"\"\"\n",
    "    },\n",
    ")\n",
    "m.add_child(pmtiles_layer)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "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
}