tweaks to zoom level calculation

app/javascript/projects/modelling/bounding_box.ts

@@ -2,6 +2,7 @@
 //TODO: Make this customisable
 
 import { Extent, getArea } from "ol/extent"
+import { createXYZ } from "ol/tilegrid"
 
 const westHorsely = [-49469.089243, 6669018.450996]
 const bexhill = [55641.379277, 6570068.329224]
@@ -26,15 +27,20 @@ export const currentBbox = `${currentExtent.join(",")},EPSG:3857`
 export const zoomLevel = 20
 
 // WIP: Sets global zoom level from extent, requires tweaking and tests
-export function zoomFromExtent(extent: Extent): number {
-    const area = getArea(extent) / 100
-
-    if(area < 5000000) return 23
-    if(area < 10000000) return 22
-    if(area < 100000000) return 21
-    if(area < 100000000000) return 20
+export function zoomFromExtent(extent: Extent, maxtiles: number): number {
+    const tileGrid = createXYZ()
+    const zoomLevels = Array.from({ length: 30 }, (_, index) => index + 1).reverse()
 
-    return 18
+    for (const zoom of zoomLevels){
+        const tiles = tileGrid.getTileRangeForExtentAndZ(extent, zoom)
+        const tileCount = tiles.getWidth() * tiles.getHeight()
+        if(tileCount <= maxtiles){
+            return zoom
+        }
+    }
+
+    return 0
+
 }
 
 // Required format for some requests

app/javascript/projects/project_editor.tsx

@@ -37,8 +37,9 @@ export function ProjectEditor({ projectId, projectSource, backButtonPath, dbMode
   })
 
   // Retrieve the project extent from the project source, or use the current extent if not present. Calculate the zoom level from the extent.
+  const maxTiles = 10000000
   const projectExtent: Extent = projectSource.extent ? projectSource.extent : currentExtent
-  const projectZoom: number = zoomFromExtent(projectExtent)
+  const projectZoom: number = zoomFromExtent(projectExtent, maxTiles)
 
   const [sidebarVisible, setSidebarVisible] = React.useState(true)
   const [layerPaletteVisible, setLayerPaletteVisible] = React.useState(false)

app/views/layouts/application.html.erb

@@ -76,25 +76,32 @@
 
   <script>
 
-    function zoomLevel(area){
-
-        if(area < 5000000) return 23
-        if(area < 10000000) return 22
-        if(area < 100000000) return 21
-        if(area < 100000000000) return 20
+    function zoomLevel(extent, maxtiles){
+
+        const tileGrid = ol.tilegrid.createXYZ()
+        const zoomLevels = Array.from({ length: 30 }, (_, index) => index + 1).reverse()  
+
+        for (const zoom of zoomLevels){
+            const tiles = tileGrid.getTileRangeForExtentAndZ(extent, zoom)
+            const tileCount = tiles.getWidth() * tiles.getHeight()
+            if(tileCount <= maxtiles){
+                console.log('zoom', zoom, 'tiles', tileCount)
+                return zoom
+            }
+        }
 
-        return 18
     }
 
     function showZoom(){
         const extent = document.getElementById('project_extent').value.split(',').map(Number)
-        const area = ol.extent.getArea(extent) / 100
+        const area = (extent[2]-extent[0])*(extent[3]-extent[1])
 
         if(isNaN(area)){
             document.getElementById('zoom').innerHTML = 'No valid extent selected'
             document.getElementById('zoom').style.backgroundColor = 'red'
         }else{
-            const zoom = zoomLevel(area)
+
+            const zoom = zoomLevel(extent, 10000000)
             const zoomCategory = zoom > 20 ? ['green', 'high'] : zoom < 20 ? ['orange', 'low'] : ['yellow', 'medium']