Merge pull request #10 from jtmiclat/feat/add-styles-to-vector-layer

Feat/add styles to vector layer
jtmiclat · Sep 27, 2023 · 39186f1 · 39186f1
2 parents 6d8af89 + 9334cfa
commit 39186f1
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -10,45 +10,37 @@ pip install folium folium-pmtiles
 
 ### Usage
 
-The recommend way is to use `PMTilesMapLibreLayer`. This overlays a maplibre instance over leaflet which allows declarative styling using mapbox style specification.
+The recommend way is to use `PMTilesVector`. This converts a simple mapbox style to a appropriate leaflet/protomaps styles.
+If you need more complex styling, you can use `PMTilesMapLibreLayer`
 
 A simple folium example is as follows:
 
 ```python
 import folium
 
-from folium_pmtiles.vector import PMTilesMapLibreLayer
+from folium_pmtiles.vector import PMTilesVector
 
-m = folium.Map(location=[43.7798, 11.24148], zoom_start=13, tiles="cartodb positron")
-pmtiles_url = "https://pmtiles.jtmiclat.me/protomaps(vector)ODbL_firenze.pmtiles"
-pmtiles_layer = PMTilesMapLibreLayer(
+m = folium.Map(location=[43.7798, 11.24148], zoom_start=12)
+pmtiles_layer = PMTilesVector(
+    "https://pmtiles.jtmiclat.me/protomaps(vector)ODbL_firenze.pmtiles",
     "folium_layer_name",
     style={
-        "version": 8,
-        "sources": {
-            "example_source": {
-                "type": "vector",
-                "url": "pmtiles://" + pmtiles_url,
-                "attribution": '<a href="https://protomaps.com">Protomaps</a> © <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>',
-            }
-        },
         "layers": [
             {
-                "id": "buildings",
-                "source": "example_source",
                 "source-layer": "landuse",
                 "type": "fill",
                 "paint": {"fill-color": "steelblue"},
             },
             {
-                "id": "roads",
-                "source": "example_source",
                 "source-layer": "roads",
                 "type": "line",
                 "paint": {"line-color": "black"},
             },
         ],
     },
+    options={
+        "attribution": """<a href="https://protomaps.com">Protomaps</a> © <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>'"""
+    },
 )
 m.add_child(pmtiles_layer)
 ```

diff --git a/example/pmtiles_vector.ipynb b/example/pmtiles_vector.ipynb
@@ -10,7 +10,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": null,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -19,7 +19,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": 4,
    "metadata": {},
    "outputs": [
     {
@@ -52,7 +52,7 @@
        "            &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_e20173359702b82de5b022e539e27e17 {\n",
+       "                #map_95466bd0ff7c1a81394c79573fd27a8b {\n",
        "                    position: relative;\n",
        "                    width: 100.0%;\n",
        "                    height: 100.0%;\n",
@@ -62,19 +62,19 @@
        "                .leaflet-container { font-size: 1rem; }\n",
        "            &lt;/style&gt;\n",
        "        \n",
-       "    &lt;script src=&quot;https://unpkg.com/protomaps@1.23.0/dist/protomaps.min.js&quot;&gt;&lt;/script&gt;\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_e20173359702b82de5b022e539e27e17&quot; &gt;&lt;/div&gt;\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_e20173359702b82de5b022e539e27e17 = L.map(\n",
-       "                &quot;map_e20173359702b82de5b022e539e27e17&quot;,\n",
+       "            var map_95466bd0ff7c1a81394c79573fd27a8b = L.map(\n",
+       "                &quot;map_95466bd0ff7c1a81394c79573fd27a8b&quot;,\n",
        "                {\n",
        "                    center: [43.7798, 11.24148],\n",
        "                    crs: L.CRS.EPSG3857,\n",
@@ -87,41 +87,71 @@
        "            \n",
        "\n",
        "        \n",
-       "    var pm_tiles_vector_a732d086128705bed0d97eafe8c07672 = protomaps.leafletLayer(\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_a732d086128705bed0d97eafe8c07672.addTo(map_e20173359702b82de5b022e539e27e17)\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 0x1052d6370>"
+       "<folium.folium.Map at 0x11b669160>"
       ]
      },
-     "execution_count": 2,
+     "execution_count": 4,
      "metadata": {},
      "output_type": "execute_result"
     }
    ],
    "source": [
     "import folium\n",
     "\n",
-    "from folium_pmtiles.vector import PMTilesVectorBaseMap\n",
+    "from folium_pmtiles.vector import PMTilesVector\n",
     "\n",
-    "m = folium.Map(location=[43.7798, 11.24148], zoom_start=12, tiles=None)\n",
-    "pmtiles_layer = PMTilesVectorBaseMap(\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,

diff --git a/folium_pmtiles/__init__.py b/folium_pmtiles/__init__.py
@@ -1,2 +1,2 @@
 from .raster import PMTilesRaster  # noqa
-from .vector import PMTilesMapLibreLayer, PMTilesVectorBaseMap  # noqa
+from .vector import PMTilesMapLibreLayer, PMTilesVector  # noqa
diff --git a/folium_pmtiles/vector.py b/folium_pmtiles/vector.py
@@ -3,7 +3,7 @@
 from jinja2 import Template
 
 
-class PMTilesVectorBaseMap(JSCSSMixin, Layer):
+class PMTilesVector(JSCSSMixin, Layer):
     """Based of
     https://github.com/python-visualization/folium/blob/56d3665fdc9e7280eae1df1262450e53ec4f5a60/folium/plugins/vectorgrid_protobuf.py
     """
@@ -13,9 +13,12 @@ class PMTilesVectorBaseMap(JSCSSMixin, Layer):
             {% macro script(this, kwargs) -%}
 
 
-            var {{ this.get_name() }} = protomaps.leafletLayer(
+            var {{ this.get_name() }} = protomapsL.leafletLayer(
                 {
                     "url":  '{{ this.url }}',
+                    {% if this.style %}
+                        ...protomapsL.json_style({{ this.style|tojson}}), 
+                    {% endif %}
                     ...{{ this.options if this.options is string else this.options|tojson }}
                 }
             )
@@ -26,18 +29,20 @@ class PMTilesVectorBaseMap(JSCSSMixin, Layer):
 
     default_js = [
         (
-            "protomaps",
-            "https://unpkg.com/protomaps@1.23.0/dist/protomaps.min.js",
+            "protomapsL",
+            "https://unpkg.com/protomaps-leaflet@1.24.0/dist/protomaps-leaflet.min.js",
         )
     ]
 
-    def __init__(self, url, layer_name=None, options=None, **kwargs):
+    def __init__(self, url, layer_name=None, style=None, options=None, **kwargs):
         self.layer_name = layer_name if layer_name else "PMTilesVector"
 
         super().__init__(name=self.layer_name, **kwargs)
 
         self.url = url
         self._name = "PMTilesVector"
+        if style is not None:
+            self.style = style
 
         if options is not None:
             self.options = options