Simplify max_zoom logics in Map and TileLayer (#965)

* Simplify max_zoom logics in Map and TileLayer

* Change default values of zoom and center from none/null to defined values.

* Update Playwright Snapshots

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: HaudinFlorence

examples/Max_zoom.ipynb

@@ -0,0 +1,67 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "202a6acf-96fc-4632-bcd3-7e7156cbec51",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# TEST ON THE MAP ALONE\n",
+    "from localtileserver import examples, get_leaflet_tile_layer, TileClient\n",
+    "from ipyleaflet import Map\n",
+    "\n",
+    "# Create a tile server from an raster URL\n",
+    "oam = TileClient('https://oin-hotosm.s3.amazonaws.com/59c66c5223c8440011d7b1e4/0/7ad397c0-bba2-4f98-a08a-931ec3a6e943.tif')\n",
+    "\n",
+    "# Create ipyleaflet map, add layers, add controls, and display\n",
+    "m1 = Map(center=oam.center(),zoom=18)\n",
+    "m1"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "3d28ceb8-50ea-457e-896b-672870ea9573",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from localtileserver import examples, get_leaflet_tile_layer, TileClient\n",
+    "from ipyleaflet import Map\n",
+    "\n",
+    "# Create a tile server from an raster URL\n",
+    "oam = TileClient('https://oin-hotosm.s3.amazonaws.com/59c66c5223c8440011d7b1e4/0/7ad397c0-bba2-4f98-a08a-931ec3a6e943.tif')\n",
+    "\n",
+    "# Create ipyleaflet TileLayer from that server\n",
+    "# Please note that all extra kwargs are passed to `TileLayer`\n",
+    "oam_layer = get_leaflet_tile_layer(oam, max_zoom=30, max_native_zoom=30, show_loading=True)\n",
+    "\n",
+    "# Create ipyleaflet map, add layers, add controls, and display\n",
+    "m = Map(center=oam.center(), zoom=18)\n",
+    "m.add_layer(oam_layer)\n",
+    "m"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "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"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

ipyleaflet/leaflet.py

@@ -60,7 +60,7 @@ def basemap_to_tiles(basemap, day=yesterday, **kwargs):
 
     return TileLayer(
         url=url,
-        max_zoom=basemap.get('max_zoom', 19),
+        max_zoom=basemap.get('max_zoom', 18),
         min_zoom=basemap.get('min_zoom', 1),
         attribution=basemap.get('html_attribution', '') or basemap.get('attribution', ''),
         name=basemap.get('name', ''),
@@ -550,16 +550,18 @@ class TileLayer(RasterLayer):
     url: string, default "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         Url to the tiles service.
     min_zoom: int, default 0
-        Minimum zoom for this tile service.
+        The minimum zoom level down to which this layer will be displayed (inclusive).
     max_zoom: int, default 18
-        Maximum zoom for this tile service.
-    min_native_zoom: int, default 0
-    max_native_zoom: int, default 18
+        The maximum zoom level up to which this layer will be displayed (inclusive).
+    min_native_zoom: int, default None
+        Minimum zoom number the tile source has available. If it is specified, the tiles on all zoom levels lower than min_native_zoom will be loaded from min_native_zoom level and auto-scaled.
+    max_native_zoom: int, default None
+        Maximum zoom number the tile source has available. If it is specified, the tiles on all zoom levels higher than max_native_zoom will be loaded from max_native_zoom level and auto-scaled.
     bounds: list or None, default None
         List of SW and NE location tuples. e.g. [(50, 75), (75, 120)].
     tile_size: int, default 256
         Tile sizes for this tile service.
-    attribution: string, default "Map data (c) <a href="https://openstreetmap.org">OpenStreetMap</a> contributors"
+    attribution: string, default None.
         Tiles service attribution.
     no_wrap: boolean, default False
         Whether the layer is wrapped around the antimeridian.
@@ -581,12 +583,11 @@ class TileLayer(RasterLayer):
     url = Unicode('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').tag(sync=True)
     min_zoom = Int(0).tag(sync=True, o=True)
     max_zoom = Int(18).tag(sync=True, o=True)
-    min_native_zoom = Int(0).tag(sync=True, o=True)
-    max_native_zoom = Int(18).tag(sync=True, o=True)
+    min_native_zoom = Int(default_value=None, allow_none=True).tag(sync=True, o=True)
+    max_native_zoom = Int(default_value=None, allow_none=True).tag(sync=True, o=True)
     bounds = List(default_value=None, allow_none=True, help='list of SW and NE location tuples').tag(sync=True, o=True)
     tile_size = Int(256).tag(sync=True, o=True)
-    attribution = Unicode('Map data (c) <a href="https://openstreetmap.org">OpenStreetMap</a> contributors').tag(
-        sync=True, o=True)
+    attribution = Unicode(default_value=None, allow_none=True).tag(sync=True, o=True)
     detect_retina = Bool(False).tag(sync=True, o=True)
     no_wrap = Bool(False).tag(sync=True, o=True)
     tms = Bool(False).tag(sync=True, o=True)
@@ -2025,9 +2026,9 @@ class Map(DOMWidget, InteractMixin):
         The current center of the map.
     zoom: float, default 12
         The current zoom value of the map.
-    max_zoom: int, default 18
+    max_zoom: float, default None
         Maximal zoom value.
-    min_zoom: int, default 1
+    min_zoom: float, default None
         Minimal zoom value.
     zoom_snap: float, default 1
         Forces the map’s zoom level to always be a multiple of this.
@@ -2085,10 +2086,9 @@ class Map(DOMWidget, InteractMixin):
 
     # Map options
     center = List(def_loc).tag(sync=True, o=True)
-    zoom_start = CFloat(12).tag(sync=True, o=True)
-    zoom = CFloat(12).tag(sync=True, o=True)
-    max_zoom = CFloat(18).tag(sync=True, o=True)
-    min_zoom = CFloat(1).tag(sync=True, o=True)
+    zoom = CFloat(default_value=None, allow_none=True).tag(sync=True, o=True)
+    max_zoom = CFloat(default_value=None, allow_none=True).tag(sync=True, o=True)
+    min_zoom = CFloat(default_value=None, allow_none=True).tag(sync=True, o=True)
     zoom_delta = CFloat(1).tag(sync=True, o=True)
     zoom_snap = CFloat(1).tag(sync=True, o=True)
     interpolation = Unicode('bilinear').tag(sync=True, o=True)

js/src/Map.js

@@ -1,6 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+
 const widgets = require('@jupyter-widgets/base');
 const L = require('./leaflet.js');
 const utils = require('./utils.js');
@@ -37,10 +38,9 @@ export class LeafletMapModel extends widgets.DOMWidgetModel {
       _model_module: 'jupyter-leaflet',
       _view_module: 'jupyter-leaflet',
       center: DEFAULT_LOCATION,
-      zoom_start: 12,
       zoom: 12,
-      max_zoom: 18,
-      min_zoom: 1,
+      max_zoom: null,
+      min_zoom: null,
       dragging: true,
       touch_zoom: true,
       zoom_delta: 1,

js/src/layers/TileLayer.js

@@ -15,10 +15,11 @@ export class LeafletTileLayerModel extends rasterlayer.LeafletRasterLayerModel {
       url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
       min_zoom: 0,
       max_zoom: 18,
+      min_native_zoom: null,
+      max_native_zoom: null,
       bounds: null,
       tile_size: 256,
-      attribution:
-        'Map data (c) <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
+      attribution: null,
       detect_retina: false,
       no_wrap: false,
       tms: false,

js/src/utils.js

@@ -21,7 +21,9 @@ class leafletViewCommon {
     for (var i = 0; i < o.length; i++) {
       key = o[i];
       // Convert from foo_bar to fooBar that Leaflet.js uses
-      options[camel_case(key)] = this.model.get(key);
+      if (this.model.get(key) !== null) {
+        options[camel_case(key)] = this.model.get(key);
+      }
     }
     return options;
   }