diff --git a/examples/3d_terrain.jGIS b/examples/3d_terrain.jGIS
index 7a2fc024..7622b82c 100644
--- a/examples/3d_terrain.jGIS
+++ b/examples/3d_terrain.jGIS
@@ -1,18 +1,9 @@
 {
   "layerTree": [
     "a82ef521-e727-4209-a5a0-145d66f18a06",
-    "733327dc-c367-420c-9ee1-0510ee521457"
+    "f12a8dfe-4674-43e7-a649-cd49ee83eb34"
   ],
   "layers": {
-    "733327dc-c367-420c-9ee1-0510ee521457": {
-      "name": "Custom Hillshade Layer Layer",
-      "parameters": {
-        "shadowColor": "#473B24",
-        "source": "1f457f60-5d31-45f6-8066-4585aabd5629"
-      },
-      "type": "HillshadeLayer",
-      "visible": true
-    },
     "a82ef521-e727-4209-a5a0-145d66f18a06": {
       "name": "OpenStreetMap.Mapnik Layer",
       "parameters": {
@@ -20,26 +11,25 @@
       },
       "type": "RasterLayer",
       "visible": true
+    },
+    "f12a8dfe-4674-43e7-a649-cd49ee83eb34": {
+      "name": "Custom Hillshade Layer",
+      "parameters": {
+        "shadowColor": "#473B24",
+        "source": "e87bb91a-ff2a-485b-bf0e-14b3b848955a"
+      },
+      "type": "HillshadeLayer",
+      "visible": true
     }
   },
   "options": {
     "bearing": 0.0,
-    "latitude": 47.27340570466396,
-    "longitude": 11.540279388427734,
+    "latitude": 47.25967099028631,
+    "longitude": 11.418052209432549,
     "pitch": 59.00000000000003,
     "zoom": 11.829283007646955
   },
   "sources": {
-    "1f457f60-5d31-45f6-8066-4585aabd5629": {
-      "name": "Custom Raster DEM Source",
-      "parameters": {
-        "attribution": "w",
-        "tileSize": 256.0,
-        "url": "https://demotiles.maplibre.org/terrain-tiles/tiles.json",
-        "urlParameters": {}
-      },
-      "type": "RasterDemSource"
-    },
     "ceef4036-b757-44bf-8a21-42c6c99dab72": {
       "name": "OpenStreetMap.Mapnik",
       "parameters": {
@@ -52,11 +42,13 @@
       },
       "type": "RasterSource"
     },
-    "cffe76e7-fa97-445a-98dc-a2861f5782ca": {
-      "name": "Terrain tile source",
+    "e87bb91a-ff2a-485b-bf0e-14b3b848955a": {
+      "name": "Custom Hillshade Layer Source",
       "parameters": {
-        "tileSize": 256.0,
-        "url": "https://demotiles.maplibre.org/terrain-tiles/tiles.json"
+        "encoding": "mapbox",
+        "tileSize": 512.0,
+        "url": "https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png",
+        "urlParameters": {}
       },
       "type": "RasterDemSource"
     }
diff --git a/examples/buildings.jGIS b/examples/buildings.jGIS
index 8997fed6..0801cc7b 100644
--- a/examples/buildings.jGIS
+++ b/examples/buildings.jGIS
@@ -13,7 +13,7 @@
         "sourceLayer": "bingmlbuildings",
         "type": "fill"
       },
-      "type": "VectorLayer",
+      "type": "VectorTileLayer",
       "visible": true
     },
     "f99eb7b0-5e38-4078-b310-36a0746472aa": {
@@ -26,11 +26,12 @@
     }
   },
   "options": {
-    "latitude": 41.86704023051254,
-    "longitude": -87.64128426232207,
-    "zoom": 8.089610803710057,
     "bearing": 0.0,
-    "pitch": 0.0
+    "latitude": 41.86704023051257,
+    "longitude": -87.64128426232207,
+    "pitch": 0.0,
+    "projection": "EPSG:3857",
+    "zoom": 8.089610803710057
   },
   "sources": {
     "7a7ee6fd-c1e2-4c5d-a4e2-a7974db138a4": {
@@ -55,5 +56,6 @@
       },
       "type": "RasterSource"
     }
-  }
-}
+  },
+  "terrain": {}
+}
\ No newline at end of file
diff --git a/examples/earthquakes-no-filter.jGIS b/examples/earthquakes-no-filter.jGIS
new file mode 100644
index 00000000..b7b72121
--- /dev/null
+++ b/examples/earthquakes-no-filter.jGIS
@@ -0,0 +1,64 @@
+{
+  "layerTree": [
+    "f907e26c-c4c8-4c2d-ad62-813f63ed9de9",
+    "0336896f-f7ce-460f-8d11-07a589ff03d8"
+  ],
+  "layers": {
+    "0336896f-f7ce-460f-8d11-07a589ff03d8": {
+      "filters": {
+        "appliedFilters": [],
+        "logicalOp": "all"
+      },
+      "name": "Custom GeoJSON Layer",
+      "parameters": {
+        "color": "#FF0000",
+        "opacity": 1.0,
+        "source": "d07cc573-51fb-4ae8-965b-a0082ace7f2b",
+        "type": "circle"
+      },
+      "type": "VectorLayer",
+      "visible": true
+    },
+    "f907e26c-c4c8-4c2d-ad62-813f63ed9de9": {
+      "name": "OpenStreetMap.Mapnik Layer",
+      "parameters": {
+        "source": "5fe556bc-9938-4217-8de6-fe25aef088c2"
+      },
+      "type": "RasterLayer",
+      "visible": true
+    }
+  },
+  "options": {
+    "bearing": 0.0,
+    "latitude": 38.612326230162665,
+    "longitude": -119.77357975468912,
+    "pitch": 0.0,
+    "projection": "EPSG:3857",
+    "zoom": 5.161762963106246
+  },
+  "sources": {
+    "5fe556bc-9938-4217-8de6-fe25aef088c2": {
+      "name": "OpenStreetMap.Mapnik",
+      "parameters": {
+        "attribution": "(C) OpenStreetMap contributors",
+        "maxZoom": 19.0,
+        "minZoom": 0.0,
+        "provider": "OpenStreetMap",
+        "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+        "urlParameters": {}
+      },
+      "type": "RasterSource"
+    },
+    "d07cc573-51fb-4ae8-965b-a0082ace7f2b": {
+      "name": "Custom GeoJSON Layer Source",
+      "parameters": {
+        "path": "eq.json"
+      },
+      "type": "GeoJSONSource"
+    }
+  },
+  "terrain": {
+    "exaggeration": 0.0,
+    "source": ""
+  }
+}
\ No newline at end of file
diff --git a/examples/earthquakes.jGIS b/examples/earthquakes.jGIS
index bef04c70..d4b04fb7 100644
--- a/examples/earthquakes.jGIS
+++ b/examples/earthquakes.jGIS
@@ -10,14 +10,14 @@
           {
             "feature": "mag",
             "operator": ">",
-            "value": 2.47
+            "value": 6.5
           }
         ],
         "logicalOp": "all"
       },
       "name": "Custom GeoJSON Layer",
       "parameters": {
-        "color": "#865e3c",
+        "color": "#000000",
         "opacity": 1.0,
         "source": "d07cc573-51fb-4ae8-965b-a0082ace7f2b",
         "type": "circle"
@@ -36,10 +36,11 @@
   },
   "options": {
     "bearing": 0.0,
-    "latitude": 39.19439624539356,
-    "longitude": -121.55020132126549,
+    "latitude": 25.012589761592906,
+    "longitude": -109.44110652310296,
     "pitch": 0.0,
-    "zoom": 4.630124252560623
+    "projection": "EPSG:3857",
+    "zoom": 3.843213728870569
   },
   "sources": {
     "5fe556bc-9938-4217-8de6-fe25aef088c2": {
diff --git a/examples/france_hiking.jGIS b/examples/france_hiking.jGIS
index 65a65936..c448cb60 100644
--- a/examples/france_hiking.jGIS
+++ b/examples/france_hiking.jGIS
@@ -1,87 +1,89 @@
 {
+  "layerTree": [
+    "4a0703b3-ed56-4158-8a2e-e008c3d0fee2",
+    "7db81237-a579-4daa-938f-5e61fdfb17e7",
+    "0bfee293-9e2f-4434-8c5a-c90d19836bab"
+  ],
   "layers": {
-    "7db81237-a579-4daa-938f-5e61fdfb17e7": {
-      "name": "NASAGIBS.ModisTerraTrueColorCR Layer",
-      "visible": true,
-      "parameters": {
-        "source": "52252f5d-3cb7-45a8-a724-5793bf9950ec",
-        "opacity": 0.3
-      },
-      "type": "RasterLayer"
-    },
     "0bfee293-9e2f-4434-8c5a-c90d19836bab": {
       "name": "WaymarkedTrails.hiking Layer",
-      "type": "RasterLayer",
       "parameters": {
         "opacity": 0.6,
         "source": "82691e55-f9e2-43be-8a07-3ae0409af7b4"
       },
+      "type": "RasterLayer",
       "visible": true
     },
     "4a0703b3-ed56-4158-8a2e-e008c3d0fee2": {
       "name": "OpenStreetMap.Mapnik Layer",
-      "visible": true,
-      "type": "RasterLayer",
       "parameters": {
         "source": "60da082e-8b70-4fa2-b2f0-48524468fea0"
-      }
+      },
+      "type": "RasterLayer",
+      "visible": true
+    },
+    "7db81237-a579-4daa-938f-5e61fdfb17e7": {
+      "name": "NASAGIBS.ModisTerraTrueColorCR Layer",
+      "parameters": {
+        "opacity": 0.3,
+        "source": "52252f5d-3cb7-45a8-a724-5793bf9950ec"
+      },
+      "type": "RasterLayer",
+      "visible": true
     }
   },
+  "options": {
+    "bearing": 0.0,
+    "latitude": 46.623742146769416,
+    "longitude": 1.6082511087276998,
+    "pitch": 0.0,
+    "projection": "EPSG:3857",
+    "zoom": 4.947275971927249
+  },
   "sources": {
-    "60da082e-8b70-4fa2-b2f0-48524468fea0": {
-      "type": "RasterSource",
-      "parameters": {
-        "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
-        "minZoom": 0.0,
-        "maxZoom": 19.0,
-        "urlParameters": {},
-        "provider": "OpenStreetMap",
-        "attribution": "(C) OpenStreetMap contributors"
-      },
-      "name": "OpenStreetMap.Mapnik"
-    },
     "52252f5d-3cb7-45a8-a724-5793bf9950ec": {
+      "name": "NASAGIBS.ModisTerraTrueColorCR",
       "parameters": {
+        "attribution": "Imagery provided by services from the Global Imagery Browse Services (GIBS), operated by the NASA/GSFC/Earth Science Data and Information System (ESDIS) with funding provided by NASA/HQ.",
+        "maxZoom": 9.0,
+        "minZoom": 1.0,
+        "provider": "NASAGIBS",
+        "url": "https://map1.vis.earthdata.nasa.gov/wmts-webmerc/{variant}/default/{time}/{tilematrixset}{max_zoom}/{z}/{y}/{x}.{format}",
         "urlParameters": {
-          "time": "2024-07-07",
-          "tilematrixset": "GoogleMapsCompatible_Level",
           "format": "jpg",
+          "tilematrixset": "GoogleMapsCompatible_Level",
+          "time": "2024-07-07",
           "variant": "MODIS_Terra_CorrectedReflectance_TrueColor"
-        },
-        "url": "https://map1.vis.earthdata.nasa.gov/wmts-webmerc/{variant}/default/{time}/{tilematrixset}{max_zoom}/{z}/{y}/{x}.{format}",
-        "minZoom": 1.0,
-        "maxZoom": 9.0,
-        "attribution": "Imagery provided by services from the Global Imagery Browse Services (GIBS), operated by the NASA/GSFC/Earth Science Data and Information System (ESDIS) with funding provided by NASA/HQ.",
-        "provider": "NASAGIBS"
+        }
+      },
+      "type": "RasterSource"
+    },
+    "60da082e-8b70-4fa2-b2f0-48524468fea0": {
+      "name": "OpenStreetMap.Mapnik",
+      "parameters": {
+        "attribution": "(C) OpenStreetMap contributors",
+        "maxZoom": 19.0,
+        "minZoom": 0.0,
+        "provider": "OpenStreetMap",
+        "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+        "urlParameters": {}
       },
-      "name": "NASAGIBS.ModisTerraTrueColorCR",
       "type": "RasterSource"
     },
     "82691e55-f9e2-43be-8a07-3ae0409af7b4": {
       "name": "WaymarkedTrails.hiking",
-      "type": "RasterSource",
       "parameters": {
-        "minZoom": 0.0,
-        "url": "https://tile.waymarkedtrails.org/{variant}/{z}/{x}/{y}.png",
         "attribution": "Map data: (C) OpenStreetMap contributors | Map style: (C) waymarkedtrails.org (CC-BY-SA)",
         "maxZoom": 18.0,
+        "minZoom": 0.0,
         "provider": "WaymarkedTrails",
+        "url": "https://tile.waymarkedtrails.org/{variant}/{z}/{x}/{y}.png",
         "urlParameters": {
           "variant": "hiking"
         }
-      }
+      },
+      "type": "RasterSource"
     }
   },
-  "options": {
-    "latitude": 46.623742146769416,
-    "zoom": 4.947275971927249,
-    "longitude": 1.6082511087276998,
-    "bearing": 0.0,
-    "pitch": 0.0
-  },
-  "layerTree": [
-    "4a0703b3-ed56-4158-8a2e-e008c3d0fee2",
-    "7db81237-a579-4daa-938f-5e61fdfb17e7",
-    "0bfee293-9e2f-4434-8c5a-c90d19836bab"
-  ]
-}
+  "terrain": {}
+}
\ No newline at end of file
diff --git a/examples/geotiff-2.jGIS b/examples/geotiff-2.jGIS
new file mode 100644
index 00000000..bb2172fd
--- /dev/null
+++ b/examples/geotiff-2.jGIS
@@ -0,0 +1,104 @@
+{
+  "layerTree": [
+    "f75fd646-bc7d-478b-b65b-de34155b8efa"
+  ],
+  "layers": {
+    "f75fd646-bc7d-478b-b65b-de34155b8efa": {
+      "name": "Custom GeoTiff Layer",
+      "parameters": {
+        "color": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "/",
+            [
+              "-",
+              [
+                "band",
+                2.0
+              ],
+              [
+                "band",
+                1.0
+              ]
+            ],
+            [
+              "+",
+              [
+                "band",
+                2.0
+              ],
+              [
+                "band",
+                1.0
+              ]
+            ]
+          ],
+          -0.2,
+          [
+            191.0,
+            191.0,
+            191.0
+          ],
+          0.0,
+          [
+            255.0,
+            255.0,
+            224.0
+          ],
+          0.2,
+          [
+            145.0,
+            191.0,
+            82.0
+          ],
+          0.4,
+          [
+            79.0,
+            138.0,
+            46.0
+          ],
+          0.6,
+          [
+            237.0,
+            51.0,
+            59.0
+          ]
+        ],
+        "opacity": 1.0,
+        "source": "8b1d4258-5d46-48da-b466-496d376b593d"
+      },
+      "type": "WebGlLayer",
+      "visible": true
+    }
+  },
+  "options": {
+    "bearing": 0.0,
+    "latitude": 0.0,
+    "longitude": -26.246075613612998,
+    "pitch": 0.0,
+    "projection": "EPSG:3857",
+    "zoom": 1.5294305541461508
+  },
+  "sources": {
+    "8b1d4258-5d46-48da-b466-496d376b593d": {
+      "name": "Custom GeoTiff Source",
+      "parameters": {
+        "normalize": false,
+        "urls": [
+          {
+            "url": "https://s2downloads.eox.at/demo/EOxCloudless/2020/rgbnir/s2cloudless2020-16bits_sinlge-file_z0-4.tif"
+          }
+        ],
+        "wrapX": true
+      },
+      "type": "GeoTiffSource"
+    }
+  },
+  "terrain": {
+    "exaggeration": 0.0,
+    "source": ""
+  }
+}
\ No newline at end of file
diff --git a/examples/geotiff.jGIS b/examples/geotiff.jGIS
new file mode 100644
index 00000000..9d582b14
--- /dev/null
+++ b/examples/geotiff.jGIS
@@ -0,0 +1,160 @@
+{
+  "layerTree": [
+    "1b53b998-e6d5-461d-af06-427a0874421e",
+    "ed0e4142-38fb-4bae-ae3c-c674eccf4bf3"
+  ],
+  "layers": {
+    "1b53b998-e6d5-461d-af06-427a0874421e": {
+      "name": "OpenStreetMap.Mapnik Layer",
+      "parameters": {
+        "source": "06ed2dc2-7d40-4fe3-adc0-325708e65103"
+      },
+      "type": "RasterLayer",
+      "visible": true
+    },
+    "ed0e4142-38fb-4bae-ae3c-c674eccf4bf3": {
+      "name": "Custom GeoTiff Layer",
+      "parameters": {
+        "color": [
+          "interpolate",
+          [
+            "linear"
+          ],
+          [
+            "/",
+            [
+              "-",
+              [
+                "band",
+                2.0
+              ],
+              [
+                "band",
+                1.0
+              ]
+            ],
+            [
+              "+",
+              [
+                "band",
+                2.0
+              ],
+              [
+                "band",
+                1.0
+              ]
+            ]
+          ],
+          -0.2,
+          [
+            191.0,
+            191.0,
+            191.0
+          ],
+          0.0,
+          [
+            255.0,
+            255.0,
+            224.0
+          ],
+          0.2,
+          [
+            145.0,
+            191.0,
+            82.0
+          ],
+          0.4,
+          [
+            79.0,
+            138.0,
+            46.0
+          ],
+          0.6,
+          [
+            15.0,
+            84.0,
+            10.0
+          ],
+          -0.2,
+          [
+            191.0,
+            191.0,
+            191.0
+          ],
+          0.0,
+          [
+            255.0,
+            255.0,
+            224.0
+          ],
+          0.2,
+          [
+            145.0,
+            191.0,
+            82.0
+          ],
+          0.4,
+          [
+            79.0,
+            138.0,
+            46.0
+          ],
+          0.6,
+          [
+            15.0,
+            84.0,
+            10.0
+          ]
+        ],
+        "opacity": 1.0,
+        "source": "a99a3094-ff80-49ca-8607-e2cf3c0c5bda"
+      },
+      "type": "WebGlLayer",
+      "visible": true
+    }
+  },
+  "options": {
+    "bearing": 0.0,
+    "latitude": 47.99438557977547,
+    "longitude": 3.32263195280587,
+    "pitch": 0.0,
+    "projection": "EPSG:3857",
+    "zoom": 8.09680819573482
+  },
+  "sources": {
+    "06ed2dc2-7d40-4fe3-adc0-325708e65103": {
+      "name": "OpenStreetMap.Mapnik",
+      "parameters": {
+        "attribution": "(C) OpenStreetMap contributors",
+        "maxZoom": 19.0,
+        "minZoom": 0.0,
+        "provider": "OpenStreetMap",
+        "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+        "urlParameters": {}
+      },
+      "type": "RasterSource"
+    },
+    "a99a3094-ff80-49ca-8607-e2cf3c0c5bda": {
+      "name": "Custom GeoTiff Source",
+      "parameters": {
+        "normalize": true,
+        "urls": [
+          {
+            "max": 10000.0,
+            "url": "https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/B04.tif"
+          },
+          {
+            "max": 10000.0,
+            "url": "https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/B08.tif"
+          }
+        ],
+        "wrapX": false
+      },
+      "type": "GeoTiffSource"
+    }
+  },
+  "terrain": {
+    "exaggeration": 0.0,
+    "source": ""
+  }
+}
\ No newline at end of file
diff --git a/examples/video_test.jGIS b/examples/image_test.jGIS
similarity index 58%
rename from examples/video_test.jGIS
rename to examples/image_test.jGIS
index c3d8c7f8..dccc8722 100644
--- a/examples/video_test.jGIS
+++ b/examples/image_test.jGIS
@@ -1,26 +1,16 @@
 {
   "layerTree": [
     "acb76fb7-df6d-41da-8e08-0208a1c82136",
-    "6234f9f0-1274-445f-aa48-686a578e8cc8",
     "756cb737-f817-4ba6-b7c0-8da0b97b9778"
   ],
   "layers": {
-    "6234f9f0-1274-445f-aa48-686a578e8cc8": {
-      "name": "Custom video Layer Layer",
-      "parameters": {
-        "opacity": 1.0,
-        "source": "319c8756-ffee-45eb-8bbc-36a32526a9f6"
-      },
-      "type": "RasterLayer",
-      "visible": true
-    },
     "756cb737-f817-4ba6-b7c0-8da0b97b9778": {
       "name": "Custom Image Layer Layer",
       "parameters": {
         "opacity": 1.0,
         "source": "fb9729b8-82c6-48ac-a12b-6343c0e037ae"
       },
-      "type": "RasterLayer",
+      "type": "ImageLayer",
       "visible": true
     },
     "acb76fb7-df6d-41da-8e08-0208a1c82136": {
@@ -33,41 +23,14 @@
     }
   },
   "options": {
-    "bearing": -96.0,
-    "latitude": 37.562984,
-    "longitude": -122.514426,
+    "bearing": 0.0,
+    "latitude": 39.583682016837116,
+    "longitude": -74.5072609634211,
     "pitch": 0.0,
-    "zoom": 17.0
+    "projection": "EPSG:3857",
+    "zoom": 4.988635458547391
   },
   "sources": {
-    "319c8756-ffee-45eb-8bbc-36a32526a9f6": {
-      "name": "Custom Video Source",
-      "parameters": {
-        "coordinates": [
-          [
-            -122.51596391201019,
-            37.56238816766053
-          ],
-          [
-            -122.51467645168304,
-            37.56410183312965
-          ],
-          [
-            -122.51309394836426,
-            37.563391708549425
-          ],
-          [
-            -122.51423120498657,
-            37.56161849366671
-          ]
-        ],
-        "urls": [
-          "https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4",
-          "https://static-assets.mapbox.com/mapbox-gl-js/drone.webm"
-        ]
-      },
-      "type": "VideoSource"
-    },
     "5f7a1edf-1b76-4f82-893f-540d28998b1d": {
       "name": "OpenStreetMap.Mapnik",
       "parameters": {
diff --git a/examples/pmtiles-raster.jGIS b/examples/pmtiles-raster.jGIS
new file mode 100644
index 00000000..3199c9df
--- /dev/null
+++ b/examples/pmtiles-raster.jGIS
@@ -0,0 +1,64 @@
+{
+  "layerTree": [
+    "3d4563da-904d-4026-a06b-1e8cffbf536f",
+    "2815540d-70c6-4eed-ba86-51596adf6863"
+  ],
+  "layers": {
+    "2815540d-70c6-4eed-ba86-51596adf6863": {
+      "name": "Custom Raster Layer",
+      "parameters": {
+        "opacity": 0.5,
+        "source": "d3a5ad67-d6fe-4793-a6c5-dd773d76c745"
+      },
+      "type": "RasterLayer",
+      "visible": true
+    },
+    "3d4563da-904d-4026-a06b-1e8cffbf536f": {
+      "name": "OpenStreetMap.Mapnik Layer",
+      "parameters": {
+        "source": "d76035d6-9fb2-41db-ad32-ea4d34268dc9"
+      },
+      "type": "RasterLayer",
+      "visible": true
+    }
+  },
+  "options": {
+    "bearing": 0.0,
+    "latitude": 0.0,
+    "longitude": 0.0,
+    "pitch": 0.0,
+    "projection": "EPSG:3857",
+    "zoom": 2.2118882945460037
+  },
+  "sources": {
+    "d3a5ad67-d6fe-4793-a6c5-dd773d76c745": {
+      "name": "Custom Raster Layer Source",
+      "parameters": {
+        "attribution": "",
+        "bounds": [],
+        "htmlAttribution": "",
+        "maxZoom": 24.0,
+        "minZoom": 0.0,
+        "provider": "",
+        "url": "https://r2-public.protomaps.com/protomaps-sample-datasets/terrarium_z9.pmtiles"
+      },
+      "type": "RasterSource"
+    },
+    "d76035d6-9fb2-41db-ad32-ea4d34268dc9": {
+      "name": "OpenStreetMap.Mapnik",
+      "parameters": {
+        "attribution": "(C) OpenStreetMap contributors",
+        "maxZoom": 19.0,
+        "minZoom": 0.0,
+        "provider": "OpenStreetMap",
+        "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+        "urlParameters": {}
+      },
+      "type": "RasterSource"
+    }
+  },
+  "terrain": {
+    "exaggeration": 0.0,
+    "source": ""
+  }
+}
\ No newline at end of file
diff --git a/examples/pmtiles-rasterDem.jGIS b/examples/pmtiles-rasterDem.jGIS
deleted file mode 100644
index d0ee5f0d..00000000
--- a/examples/pmtiles-rasterDem.jGIS
+++ /dev/null
@@ -1,60 +0,0 @@
-{
-  "layerTree": [
-    "ee4ddf21-31f1-4a71-befd-c7a456628db6",
-    "e6a856f0-3883-4d10-9e9f-04132b3eb7f1"
-  ],
-  "layers": {
-    "e6a856f0-3883-4d10-9e9f-04132b3eb7f1": {
-      "name": "Custom Hillshade Layer Layer",
-      "parameters": {
-        "shadowColor": "#473B24",
-        "source": "7b6789c2-74cd-4a74-ad4d-ceef22d1eab8"
-      },
-      "type": "HillshadeLayer",
-      "visible": true
-    },
-    "ee4ddf21-31f1-4a71-befd-c7a456628db6": {
-      "name": "OpenStreetMap.Mapnik Layer",
-      "parameters": {
-        "source": "d6afefa4-6dcc-4a24-88ad-f7af0f6d76f3"
-      },
-      "type": "RasterLayer",
-      "visible": true
-    }
-  },
-  "options": {
-    "bearing": 0.0,
-    "latitude": 2.842170943040401e-14,
-    "longitude": -14.148151338180469,
-    "pitch": 0.0,
-    "zoom": 1.2095796395452967
-  },
-  "sources": {
-    "7b6789c2-74cd-4a74-ad4d-ceef22d1eab8": {
-      "name": "PMTile",
-      "parameters": {
-        "encoding": "terrarium",
-        "tileSize": 512.0,
-        "url": "pmtiles://https://r2-public.protomaps.com/protomaps-sample-datasets/terrarium_z9.pmtiles",
-        "urlParameters": {}
-      },
-      "type": "RasterDemSource"
-    },
-    "d6afefa4-6dcc-4a24-88ad-f7af0f6d76f3": {
-      "name": "OpenStreetMap.Mapnik",
-      "parameters": {
-        "attribution": "(C) OpenStreetMap contributors",
-        "maxZoom": 19.0,
-        "minZoom": 0.0,
-        "provider": "OpenStreetMap",
-        "url": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
-        "urlParameters": {}
-      },
-      "type": "RasterSource"
-    }
-  },
-  "terrain": {
-    "exaggeration": 0.0,
-    "source": ""
-  }
-}
\ No newline at end of file
diff --git a/examples/pmtiles-vector.jGIS b/examples/pmtiles-vector.jGIS
index f6968fd1..712dea44 100644
--- a/examples/pmtiles-vector.jGIS
+++ b/examples/pmtiles-vector.jGIS
@@ -1,57 +1,39 @@
 {
   "layerTree": [
-    "34e3dbaa-f1df-4add-af4b-8f8bec9bc0c8",
-    {
-      "layers": [
-        "3c9de1bc-8a95-4913-a3a7-c76ea54146e6",
-        "2171c5a1-b237-4413-a358-07ea8bcc67d3"
-      ],
-      "name": "Firenze"
-    }
+    "93077483-0e49-4135-aa1d-244e29e5cf97",
+    "95523f4c-27ef-42db-b755-a226ca017a94"
   ],
   "layers": {
-    "2171c5a1-b237-4413-a358-07ea8bcc67d3": {
-      "name": "Roads Layer",
-      "parameters": {
-        "color": "#241f31",
-        "opacity": 1.0,
-        "source": "c09567a9-2c88-4818-ad40-536e005e9496",
-        "sourceLayer": "roads",
-        "type": "line"
-      },
-      "type": "VectorLayer",
-      "visible": true
-    },
-    "34e3dbaa-f1df-4add-af4b-8f8bec9bc0c8": {
+    "93077483-0e49-4135-aa1d-244e29e5cf97": {
       "name": "OpenStreetMap.Mapnik Layer",
       "parameters": {
-        "source": "4cc5d853-cb4a-4d05-9560-0c5e7de54fb0"
+        "source": "c42d25fc-ca10-4447-ba00-ba22b0367739"
       },
       "type": "RasterLayer",
       "visible": true
     },
-    "3c9de1bc-8a95-4913-a3a7-c76ea54146e6": {
-      "name": "Land Use",
+    "95523f4c-27ef-42db-b755-a226ca017a94": {
+      "name": "Custom Vector Tile Layer",
       "parameters": {
-        "color": "#1a5fb4",
+        "color": "#FF0000",
         "opacity": 1.0,
-        "source": "c09567a9-2c88-4818-ad40-536e005e9496",
-        "sourceLayer": "landuse",
-        "type": "fill"
+        "source": "e52daf20-9b57-4a14-9521-70eabbe4cda2",
+        "type": "line"
       },
-      "type": "VectorLayer",
+      "type": "VectorTileLayer",
       "visible": true
     }
   },
   "options": {
     "bearing": 0.0,
-    "latitude": 43.769833024178524,
-    "longitude": 11.243657520618626,
-    "pitch": 9.886721549625761,
-    "zoom": 11.30647314935016
+    "latitude": -40.197854210907515,
+    "longitude": 173.4976730009204,
+    "pitch": 0.0,
+    "projection": "EPSG:3857",
+    "zoom": 5.898552104144127
   },
   "sources": {
-    "4cc5d853-cb4a-4d05-9560-0c5e7de54fb0": {
+    "c42d25fc-ca10-4447-ba00-ba22b0367739": {
       "name": "OpenStreetMap.Mapnik",
       "parameters": {
         "attribution": "(C) OpenStreetMap contributors",
@@ -63,19 +45,12 @@
       },
       "type": "RasterSource"
     },
-    "c09567a9-2c88-4818-ad40-536e005e9496": {
-      "name": "PMTiles",
+    "e52daf20-9b57-4a14-9521-70eabbe4cda2": {
+      "name": "Custom Vector Tile Layer Source",
       "parameters": {
-        "bounds": [
-          -180.0,
-          -85.051129,
-          180.0,
-          85.051129
-        ],
         "maxZoom": 24.0,
         "minZoom": 0.0,
-        "scheme": "xyz",
-        "url": "pmtiles://https://pmtiles.io/protomaps(vector)ODbL_firenze.pmtiles"
+        "url": "https://r2-public.protomaps.com/protomaps-sample-datasets/nz-buildings-v3.pmtiles"
       },
       "type": "VectorTileSource"
     }
diff --git a/examples/test.jGIS b/examples/test.jGIS
index 2a83c5c3..4cd55f29 100644
--- a/examples/test.jGIS
+++ b/examples/test.jGIS
@@ -1,5 +1,5 @@
 {
-   "layerTree": [
+  "layerTree": [
     "a0044fd7-f167-445f-b3d1-620a8f94b498",
     {
       "layers": [
@@ -55,10 +55,11 @@
   },
   "options": {
     "bearing": 0.0,
-    "latitude": 45.3283890632207,
-    "longitude": 2.0698449192905173,
+    "latitude": 45.40509940459734,
+    "longitude": 1.2354106422355888,
     "pitch": 0.0,
-    "zoom": 4.447501895979073
+    "projection": "EPSG:3857",
+    "zoom": 5.044381209731545
   },
   "sources": {
     "5fd42e3b-4681-4607-b15d-65c3a3e89b32": {
@@ -89,4 +90,4 @@
     }
   },
   "terrain": {}
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 731af877..40e46f34 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,8 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "latest",
+    "geojson-vt": "^4.0.2",
+    "ol": "^10.1.0",
     "pmtiles": "^3.0.7"
   }
 }
diff --git a/packages/base/package.json b/packages/base/package.json
index 1565a12f..80199890 100644
--- a/packages/base/package.json
+++ b/packages/base/package.json
@@ -64,7 +64,7 @@
     "ajv": "^8.14.0",
     "d3-color": "^3.1.0",
     "geojson-schema": "^1.0.5",
-    "maplibre-gl": "^4.4.1",
+    "ol-pmtiles": "^0.5.0",
     "pbf": "^4.0.1",
     "react": "^18.0.1",
     "shpjs": "^6.1.0",
diff --git a/packages/base/src/commands.ts b/packages/base/src/commands.ts
index 1ed48955..63047458 100644
--- a/packages/base/src/commands.ts
+++ b/packages/base/src/commands.ts
@@ -13,6 +13,7 @@ import { JupyterFrontEnd } from '@jupyterlab/application';
 import { WidgetTracker, showErrorMessage } from '@jupyterlab/apputils';
 import { ITranslator } from '@jupyterlab/translation';
 import { CommandIDs, icons } from './constants';
+import { ZoomColorWidget } from './dialogs/colorExpressionDialog';
 import { CreationFormDialog } from './dialogs/formdialog';
 import { LayerBrowserWidget } from './dialogs/layerBrowserDialog';
 import { TerrainDialogWidget } from './dialogs/terrainDialog';
@@ -43,6 +44,18 @@ export function addCommands(
   const trans = translator.load('jupyterlab');
   const { commands } = app;
 
+  commands.addCommand(CommandIDs.colorExpr, {
+    label: trans.__('Color Expression'),
+    isEnabled: () => {
+      return tracker.currentWidget
+        ? tracker.currentWidget.context.model.sharedModel.editable
+        : false;
+    },
+    execute: Private.createZoomColorDialog(tracker),
+
+    ...icons.get(CommandIDs.colorExpr)
+  });
+
   commands.addCommand(CommandIDs.redo, {
     label: trans.__('Redo'),
     isEnabled: () => {
@@ -138,7 +151,7 @@ export function addCommands(
       sourceData: { minZoom: 0, maxZoom: 24 },
       layerData: { name: 'Custom Vector Tile Layer' },
       sourceType: 'VectorTileSource',
-      layerType: 'VectorLayer'
+      layerType: 'VectorTileLayer'
     }),
     ...icons.get(CommandIDs.newVectorTileEntry)
   });
@@ -208,7 +221,7 @@ export function addCommands(
       },
       layerData: { name: 'Custom Image Layer' },
       sourceType: 'ImageSource',
-      layerType: 'RasterLayer'
+      layerType: 'ImageLayer'
     }),
     ...icons.get(CommandIDs.newImageEntry)
   });
@@ -268,6 +281,39 @@ export function addCommands(
     ...icons.get(CommandIDs.newShapefileSource)
   });
 
+  commands.addCommand(CommandIDs.newGeoTiffEntry, {
+    label: trans.__('New GeoTiff layer'),
+    isEnabled: () => {
+      return tracker.currentWidget
+        ? tracker.currentWidget.context.model.sharedModel.editable
+        : false;
+    },
+    execute: Private.createEntry({
+      tracker,
+      formSchemaRegistry,
+      title: 'Create GeoTiff Layer',
+      createLayer: true,
+      createSource: true,
+      sourceData: {
+        name: 'Custom GeoTiff Source',
+        urls: [
+          {
+            url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/B04.tif',
+            max: 10000
+          },
+          {
+            url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/B08.tif',
+            max: 10000
+          }
+        ]
+      },
+      layerData: { name: 'Custom GeoTiff Layer' },
+      sourceType: 'GeoTiffSource',
+      layerType: 'WebGlLayer'
+    }),
+    ...icons.get(CommandIDs.newGeoTiffEntry)
+  });
+
   /**
    * SOURCES only commands.
    */
@@ -449,7 +495,7 @@ export function addCommands(
         name: 'Custom Vector Layer'
       },
       sourceType: 'VectorTileSource',
-      layerType: 'VectorLayer'
+      layerType: 'VectorTileLayer'
     }),
     ...icons.get(CommandIDs.newVectorLayer)
   });
@@ -780,6 +826,23 @@ namespace Private {
     };
   }
 
+  export function createZoomColorDialog(
+    tracker: WidgetTracker<JupyterGISWidget>
+  ) {
+    return async () => {
+      const current = tracker.currentWidget;
+
+      if (!current) {
+        return;
+      }
+
+      const dialog = new ZoomColorWidget({
+        context: current.context
+      });
+      await dialog.launch();
+    };
+  }
+
   export function createEntry({
     tracker,
     formSchemaRegistry,
diff --git a/packages/base/src/constants.ts b/packages/base/src/constants.ts
index eb805210..41fe27de 100644
--- a/packages/base/src/constants.ts
+++ b/packages/base/src/constants.ts
@@ -8,6 +8,7 @@ export namespace CommandIDs {
   export const createNew = 'jupytergis:create-new-jGIS-file';
   export const redo = 'jupytergis:redo';
   export const undo = 'jupytergis:undo';
+  export const colorExpr = 'jupytergis:colorExpr';
 
   // Layers and sources creation commands
   export const openLayerBrowser = 'jupytergis:openLayerBrowser';
@@ -19,6 +20,7 @@ export namespace CommandIDs {
   export const newHillshadeEntry = 'jupytergis:newHillshadeEntry';
   export const newImageEntry = 'jupytergis:newImageEntry';
   export const newVideoEntry = 'jupytergis:newVideoEntry';
+  export const newGeoTiffEntry = 'jupytergis:newGeoTiffEntry';
 
   // Sources only commands
   export const newRasterSource = 'jupytergis:newRasterSource';
@@ -28,6 +30,7 @@ export namespace CommandIDs {
   export const newImageSource = 'jupytergis:imageSource';
   export const newVideoSource = 'jupytergis:videoSource';
   export const newShapefileSource = 'jupytergis:shapefileSource';
+  export const newGeoTiffSource = 'jupytergis:newGeoTiffSource';
 
   // Layers only commands
   export const newRasterLayer = 'jupytergis:newRasterLayer';
@@ -36,6 +39,7 @@ export namespace CommandIDs {
   export const newImageLayer = 'jupytergis:newImageLayer';
   export const newVideoLayer = 'jupytergis:newVideoLayer';
   export const newShapefileLayer = 'jupytergis:newShapefileLayer';
+  export const newWebGlTileLayer = 'jupytergis:newWebGlTileLayer';
 
   // Layer and group actions
   export const renameLayer = 'jupytergis:renameLayer';
@@ -84,7 +88,9 @@ const iconObject = {
   [CommandIDs.newImageEntry]: { iconClass: 'fa fa-image' },
   [CommandIDs.newVideoEntry]: { iconClass: 'fa fa-video' },
   [CommandIDs.newShapefileLayer]: { iconClass: 'fa fa-file' },
-  [CommandIDs.newTerrain]: { iconClass: 'fa fa-mountain' }
+  [CommandIDs.newGeoTiffEntry]: { iconClass: 'fa fa-certificate' },
+  [CommandIDs.newTerrain]: { iconClass: 'fa fa-mountain' },
+  [CommandIDs.colorExpr]: { iconClass: 'fa fa-brush' }
 };
 
 /**
diff --git a/packages/base/src/dialogs/colorExpressionDialog.tsx b/packages/base/src/dialogs/colorExpressionDialog.tsx
new file mode 100644
index 00000000..97d67798
--- /dev/null
+++ b/packages/base/src/dialogs/colorExpressionDialog.tsx
@@ -0,0 +1,231 @@
+import { IJupyterGISModel, IWebGlLayer } from '@jupytergis/schema';
+import { Dialog } from '@jupyterlab/apputils';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { Button } from '@jupyterlab/ui-components';
+import { PromiseDelegate } from '@lumino/coreutils';
+import { Signal } from '@lumino/signaling';
+import React, { useEffect, useRef, useState } from 'react';
+import StopRow from './components/color-expression/StopRow';
+
+interface IZoomColorProps {
+  context: DocumentRegistry.IContext<IJupyterGISModel>;
+  okSignalPromise: PromiseDelegate<Signal<ZoomColorWidget, null>>;
+  cancel: () => void;
+}
+
+export interface IStopRow {
+  value: number;
+  color: any;
+}
+
+const ZoomColor = ({ context, okSignalPromise, cancel }: IZoomColorProps) => {
+  const functions = ['interpolate'];
+  const rowsRef = useRef<IStopRow[]>();
+  const selectedLayerRef = useRef<string>('');
+  const [selectedFunction, setSelectedFunction] = useState('interpolate');
+  const [selectedLayer, setSelectedLayer] = useState('');
+  const [stopRows, setStopRows] = useState<IStopRow[]>([]);
+
+  useEffect(() => {
+    const handleClientStateChanged = () => {
+      if (!context.model.localState?.selected?.value) {
+        return;
+      }
+
+      // TODO: handle multi select better
+      const currentLayer = Object.keys(
+        context.model.localState?.selected?.value
+      )[0];
+
+      setSelectedLayer(currentLayer);
+    };
+
+    // set the layer on initial render
+    handleClientStateChanged();
+
+    context.model.clientStateChanged.connect(handleClientStateChanged);
+  }, []);
+
+  useEffect(() => {
+    // This it to parse a color object on the layer
+    selectedLayerRef.current = selectedLayer;
+
+    const layer = context.model.getLayer(selectedLayer);
+    if (!layer || !layer.parameters?.color) {
+      return;
+    }
+
+    const color = layer.parameters.color;
+
+    // If color is a string we don't need to parse
+    if (typeof color === 'string') {
+      return;
+    }
+    const pairedObjects: IStopRow[] = [];
+
+    // So if it's not a string then it's an array and we parse
+    // First element is function (ie interpolate)
+    // Second element is type of interpolation (ie linear)
+    // Third is ...something idk what, the NVDI for testing
+    // Fourth and on is value:color pairs
+    for (let i = 3; i < color.length; i += 2) {
+      const obj: IStopRow = {
+        value: color[i],
+        color: color[i + 1]
+      };
+      pairedObjects.push(obj);
+    }
+
+    setStopRows(pairedObjects);
+  }, [selectedLayer]);
+
+  useEffect(() => {
+    rowsRef.current = stopRows;
+  }, [stopRows]);
+
+  const handleOk = () => {
+    const layer = context.model.getLayer(selectedLayer);
+    // console.log('selectedLayer', selectedLayer);
+    if (!layer || !layer.parameters) {
+      return;
+    }
+
+    const colorExpr: any = [selectedFunction, ['linear']];
+
+    const nir = ['band', 2];
+
+    // near-infrared is the first band from above
+    const red = ['band', 1];
+
+    const difference = ['-', nir, red];
+    const sum = ['+', nir, red];
+
+    const ndvi = ['/', difference, sum];
+    colorExpr.push(ndvi);
+
+    rowsRef.current?.map(stop => {
+      colorExpr.push(stop.value);
+      colorExpr.push(stop.color);
+    });
+
+    // colorExpr.push(-0.2); // ndvi values <= -0.2 will get the color below
+    // colorExpr.push([191, 191, 191]);
+    // colorExpr.push(0); // ndvi values between -0.2 and 0 will get an interpolated color between the one above and the one below
+    // colorExpr.push([255, 255, 224]);
+    // colorExpr.push(0.2);
+    // colorExpr.push([145, 191, 82]);
+    // colorExpr.push(0.4);
+    // colorExpr.push([79, 138, 46]);
+    // colorExpr.push(0.6);
+    // colorExpr.push([15, 84, 10]);
+
+    (layer.parameters as IWebGlLayer).color = colorExpr;
+    context.model.sharedModel.updateLayer(selectedLayerRef.current, layer);
+    cancel();
+  };
+
+  okSignalPromise.promise.then(okSignal => {
+    okSignal.connect(handleOk);
+  });
+
+  const addStopRow = () => {
+    setStopRows([
+      ...stopRows,
+      {
+        value: 0,
+        color: [0, 0, 0]
+      }
+    ]);
+  };
+
+  return (
+    <div className="jp-gis-color-container">
+      <div className="funcion select">
+        <label htmlFor="function-select">Function</label>
+        <select
+          name="function-select"
+          id="function-select"
+          onChange={event => {
+            setSelectedFunction(event.target.value);
+          }}
+        >
+          {functions.map((func, funcIndex) => (
+            <option key={func} value={func}>
+              {func}
+            </option>
+          ))}
+        </select>
+      </div>
+      {/* <div className="base">Placeholder</div> */}
+      <div className="stop container">
+        <div className="labels" style={{ display: 'flex', gap: 6 }}>
+          <span style={{ flex: '0 0 18%' }}>Value</span>
+          <span>Output Value</span>
+        </div>
+        {stopRows.map((stop, index) => (
+          <StopRow
+            index={index}
+            value={stop.value}
+            outputValue={stop.color}
+            stopRows={stopRows}
+            setStopRows={setStopRows}
+          />
+        ))}
+      </div>
+      <div className="bottom buttons">
+        <Button
+          className="jp-Dialog-button jp-mod-accept jp-mod-styled"
+          onClick={addStopRow}
+        >
+          Add Stop
+        </Button>
+        {/* <Button onClick={handleSubmit}>Submit</Button> */}
+      </div>
+    </div>
+  );
+};
+
+export interface IZoomColorOptions {
+  context: DocumentRegistry.IContext<IJupyterGISModel>;
+}
+
+export class ZoomColorWidget extends Dialog<boolean> {
+  private okSignal: Signal<ZoomColorWidget, null>;
+
+  constructor(options: IZoomColorOptions) {
+    const cancelCallback = () => {
+      this.resolve(0);
+    };
+
+    const okSignalPromise = new PromiseDelegate<
+      Signal<ZoomColorWidget, null>
+    >();
+
+    const body = (
+      <ZoomColor
+        context={options.context}
+        okSignalPromise={okSignalPromise}
+        cancel={cancelCallback}
+      />
+    );
+
+    super({ title: 'Color Expression', body });
+
+    this.id = 'jupytergis::zoomzoom';
+
+    this.okSignal = new Signal(this);
+    okSignalPromise.resolve(this.okSignal);
+  }
+
+  resolve(index?: number): void {
+    if (index === 0) {
+      super.resolve(index);
+    }
+
+    if (index === 1) {
+      this.okSignal.emit(null);
+    }
+  }
+}
+
+export default ZoomColor;
diff --git a/packages/base/src/dialogs/components/color-expression/StopRow.tsx b/packages/base/src/dialogs/components/color-expression/StopRow.tsx
new file mode 100644
index 00000000..04c281c6
--- /dev/null
+++ b/packages/base/src/dialogs/components/color-expression/StopRow.tsx
@@ -0,0 +1,104 @@
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button } from '@jupyterlab/ui-components';
+import React, { useState } from 'react';
+import { IStopRow } from '../../colorExpressionDialog';
+
+const StopRow = ({
+  index,
+  value,
+  outputValue,
+  stopRows,
+  setStopRows
+}: {
+  index: number;
+  value: number;
+  outputValue: string;
+  stopRows: IStopRow[];
+  setStopRows: any;
+}) => {
+  const [inputZoom, setInputZoom] = useState(10);
+  const [inputColor, setInputColor] = useState('');
+
+  const rgbaStringToHex = rgbaStr => {
+    // Remove the "rgba(" part and close parenthesis
+    const rgbaParts = rgbaStr.replace('rgba(', '').replace(')', '');
+
+    // Split the string into individual components
+    const [r, g, b, a] = rgbaParts
+      .split(',')
+      .map(part => parseInt(part.trim()));
+
+    // Convert R, G, B to hexadecimal and ensure they are two digits long
+    const rHex = r.toString(16).padStart(2, '0');
+    const gHex = g.toString(16).padStart(2, '0');
+    const bHex = b.toString(16).padStart(2, '0');
+
+    // Optionally handle alpha channel if needed
+    // For simplicity, this example ignores the alpha channel
+    // If you need to include alpha, you could append it after the RGB part, e.g., `return '#' + rHex + gHex + bHex + (a === 1 ? '' : a.toString(16));`
+    return '#' + rHex + gHex + bHex;
+  };
+
+  const rgbArrToHex = rgbArr => {
+    const hex = rgbArr
+      .map(val => {
+        return val.toString(16).padStart(2, '0');
+        return hex.length === 1 ? '0' + hex : hex;
+      })
+      .join('');
+
+    return '#' + hex;
+  };
+
+  const hexToRgb = hex => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    const l = result
+      ? [
+          parseInt(result[1], 16),
+          parseInt(result[2], 16),
+          parseInt(result[3], 16)
+        ]
+      : null;
+    return l;
+  };
+
+  const handleValueChange = event => {
+    const newRows = [...stopRows];
+    stopRows[index].value = event.target.value;
+    setStopRows(newRows);
+    setInputZoom(event.target.value);
+  };
+
+  const handleColorChange = event => {
+    const newRows = [...stopRows];
+    stopRows[index].color = hexToRgb(event.target.value);
+    setStopRows(newRows);
+    setInputColor(event.target.value);
+  };
+
+  return (
+    <div className="jp-gis-color-row">
+      <input
+        id={`jp-gis-color-value-${index}`}
+        type="number"
+        defaultValue={value}
+        onChange={handleValueChange}
+      />
+      <input
+        id={`jp-gis-color-color-${index}`}
+        value={rgbArrToHex(outputValue)}
+        type="color"
+        onChange={handleColorChange}
+      />
+      <Button
+        id={`jp-gis-remove-color-${index}`}
+        className="jp-Button jp-gis-filter-icon"
+      >
+        <FontAwesomeIcon icon={faTrash} />
+      </Button>
+    </div>
+  );
+};
+
+export default StopRow;
diff --git a/packages/base/src/formbuilder/objectform/baseform.tsx b/packages/base/src/formbuilder/objectform/baseform.tsx
index 8eaa6e18..8c03899b 100644
--- a/packages/base/src/formbuilder/objectform/baseform.tsx
+++ b/packages/base/src/formbuilder/objectform/baseform.tsx
@@ -1,14 +1,14 @@
 import { SchemaForm } from '@deathbeds/jupyterlab-rjsf';
 import { MessageLoop } from '@lumino/messaging';
 import { Widget } from '@lumino/widgets';
-import { IChangeEvent, ISubmitEvent } from '@rjsf/core';
+import { IChangeEvent, ISubmitEvent, WidgetProps } from '@rjsf/core';
 import * as React from 'react';
 
-import { IDict } from '../../types';
 import { IJupyterGISModel } from '@jupytergis/schema';
-import { deepCopy } from '../../tools';
-import { Signal } from '@lumino/signaling';
 import { Dialog } from '@jupyterlab/apputils';
+import { Signal } from '@lumino/signaling';
+import { deepCopy } from '../../tools';
+import { IDict } from '../../types';
 
 export interface IBaseFormStates {
   schema?: IDict;
@@ -267,6 +267,7 @@ export class BaseForm extends React.Component<IBaseFormProps, IBaseFormStates> {
           <button ref={submitRef} type="submit" style={{ display: 'none' }} />
         ),
         extraErrors: this.state.extraErrors
+        // widgets: widgets
       });
       return (
         <div
diff --git a/packages/base/src/mainview/index.ts b/packages/base/src/mainview/index.ts
index ff605f47..017225e1 100644
--- a/packages/base/src/mainview/index.ts
+++ b/packages/base/src/mainview/index.ts
@@ -1 +1 @@
-export * from './mainview';
+export * from './mainView';
diff --git a/packages/base/src/mainview/mainView.tsx b/packages/base/src/mainview/mainView.tsx
new file mode 100644
index 00000000..3bbd5189
--- /dev/null
+++ b/packages/base/src/mainview/mainView.tsx
@@ -0,0 +1,983 @@
+import { MapChange } from '@jupyter/ydoc';
+import {
+  IGeoTiffSource,
+  IHillshadeLayer,
+  IImageLayer,
+  IImageSource,
+  IJGISLayer,
+  IJGISLayerDocChange,
+  IJGISLayerTreeDocChange,
+  IJGISOptions,
+  IJGISSource,
+  IJGISSourceDocChange,
+  IJupyterGISClientState,
+  IJupyterGISDoc,
+  IJupyterGISModel,
+  IRasterDemSource,
+  IRasterLayer,
+  IRasterSource,
+  IVectorLayer,
+  IVectorTileLayer,
+  IVectorTileSource,
+  IWebGlLayer,
+  JupyterGISModel
+} from '@jupytergis/schema';
+import { IObservableMap, ObservableMap } from '@jupyterlab/observables';
+import { User } from '@jupyterlab/services';
+import { JSONValue, UUID } from '@lumino/coreutils';
+import { Map as OlMap, View } from 'ol';
+import { GeoJSON, MVT } from 'ol/format';
+import DragAndDrop from 'ol/interaction/DragAndDrop';
+import {
+  Image as ImageLayer,
+  Vector as VectorLayer,
+  VectorTile as VectorTileLayer,
+  WebGLTile as WebGlTileLayer
+} from 'ol/layer';
+import BaseLayer from 'ol/layer/Base';
+import { fromLonLat, toLonLat } from 'ol/proj';
+import Feature from 'ol/render/Feature';
+import {
+  GeoTIFF as GeoTIFFSource,
+  ImageTile as ImageTileSource,
+  Vector as VectorSource,
+  VectorTile as VectorTileSource,
+  XYZ as XYZSource
+} from 'ol/source';
+import Static from 'ol/source/ImageStatic';
+import { Circle, Fill, Stroke, Style } from 'ol/style';
+import * as React from 'react';
+import { isLightTheme } from '../tools';
+import { MainViewModel } from './mainviewmodel';
+import { Spinner } from './spinner';
+//@ts-expect-error no types for ol-pmtiles
+import { PMTilesRasterSource, PMTilesVectorSource } from 'ol-pmtiles';
+import TileLayer from 'ol/layer/Tile';
+interface IProps {
+  viewModel: MainViewModel;
+}
+interface IStates {
+  id: string; // ID of the component, it is used to identify which component
+  //is the source of awareness updates.
+  loading: boolean;
+  lightTheme: boolean;
+  remoteUser?: User.IIdentity | null;
+  firstLoad: boolean;
+}
+
+export class MainView extends React.Component<IProps, IStates> {
+  constructor(props: IProps) {
+    super(props);
+
+    this._mainViewModel = this.props.viewModel;
+    this._mainViewModel.viewSettingChanged.connect(this._onViewChanged, this);
+    this._model = this._mainViewModel.jGISModel;
+    this._model.themeChanged.connect(this._handleThemeChange, this);
+
+    this._model.sharedOptionsChanged.connect(
+      this._onSharedOptionsChanged,
+      this
+    );
+    this._model.clientStateChanged.connect(
+      this._onClientSharedStateChanged,
+      this
+    );
+
+    this._model.sharedLayersChanged.connect(this._onLayersChanged, this);
+    this._model.sharedLayerTreeChanged.connect(this._onLayerTreeChange, this);
+    this._model.sharedSourcesChanged.connect(this._onSourcesChange, this);
+
+    this.state = {
+      id: this._mainViewModel.id,
+      lightTheme: isLightTheme(),
+      loading: true,
+      firstLoad: true
+    };
+
+    this._sources = [];
+  }
+
+  async componentDidMount(): Promise<void> {
+    window.addEventListener('resize', this._handleWindowResize);
+    await this.generateScene();
+    this._mainViewModel.initSignal();
+  }
+
+  componentWillUnmount(): void {
+    window.removeEventListener('resize', this._handleWindowResize);
+    this._mainViewModel.viewSettingChanged.disconnect(
+      this._onViewChanged,
+      this
+    );
+
+    this._model.themeChanged.disconnect(this._handleThemeChange, this);
+    this._model.sharedOptionsChanged.disconnect(
+      this._onSharedOptionsChanged,
+      this
+    );
+
+    this._model.clientStateChanged.disconnect(
+      this._onClientSharedStateChanged,
+      this
+    );
+
+    this._mainViewModel.dispose();
+  }
+
+  async generateScene(): Promise<void> {
+    if (this.divRef.current) {
+      this._Map = new OlMap({
+        target: this.divRef.current,
+        layers: [],
+        view: new View({
+          center: [0, 0],
+          zoom: 1
+        })
+      });
+
+      const dragAndDropInteraction = new DragAndDrop({
+        formatConstructors: [GeoJSON]
+      });
+
+      dragAndDropInteraction.on('addfeatures', event => {
+        // const source = new VectorSource({
+        //   features: event.features
+        // });
+
+        const sourceId = UUID.uuid4();
+
+        const sourceModel: IJGISSource = {
+          type: 'GeoJSONSource',
+          name: 'Drag and Drop source',
+          parameters: { path: event.file.name }
+        };
+
+        this.addSource(sourceId, sourceModel);
+
+        this._model.sharedModel.addSource(sourceId, sourceModel);
+
+        const layerModel: IJGISLayer = {
+          type: 'VectorLayer',
+          visible: true,
+          name: 'Drag and Drop layer',
+          parameters: {
+            color: '#FF0000',
+            opacity: 1.0,
+            type: 'line',
+            source: sourceId
+          }
+        };
+
+        const layerId = UUID.uuid4();
+        this.addLayer(layerId, layerModel, this.getLayers().length);
+        this._model.addLayer(layerId, layerModel);
+
+        // this._Map
+        //   .getView()
+        //   .fit(this._sources[layerModel.parameters?.source].getExtent());
+      });
+
+      this._Map.addInteraction(dragAndDropInteraction);
+
+      this._Map.on('moveend', () => {
+        if (!this._initializedPosition) {
+          return;
+        }
+
+        const view = this._Map.getView();
+        const center = view.getCenter();
+        const zoom = view.getZoom();
+        if (!center || !zoom) {
+          return;
+        }
+        const projection = view.getProjection();
+        const latLng = toLonLat(center, projection);
+        const bearing = view.getRotation();
+
+        this._model.setOptions({
+          ...this._model.getOptions(),
+          latitude: latLng[1],
+          longitude: latLng[0],
+          bearing,
+          projection: projection.getCode(),
+          zoom
+        });
+      });
+
+      if (JupyterGISModel.getOrderedLayerIds(this._model).length !== 0) {
+        await this._updateLayersImpl(
+          JupyterGISModel.getOrderedLayerIds(this._model)
+        );
+        const options = this._model.getOptions();
+        this.updateOptions(options);
+      }
+
+      this.setState(old => ({ ...old, loading: false }));
+    }
+  }
+
+  /**
+   * Add a source in the map.
+   *
+   * @param id - the source id.
+   * @param source - the source object.
+   */
+  async addSource(id: string, source: IJGISSource): Promise<void> {
+    let newSource;
+
+    switch (source.type) {
+      case 'RasterSource': {
+        const sourceParameters = source.parameters as IRasterSource;
+
+        const pmTiles = sourceParameters.url.endsWith('.pmtiles');
+        const url = this.computeSourceUrl(source);
+
+        if (!pmTiles) {
+          newSource = new XYZSource({
+            attributions: sourceParameters.attribution,
+            minZoom: sourceParameters.minZoom,
+            maxZoom: sourceParameters.maxZoom,
+            tileSize: 256,
+            url: url
+          });
+        } else {
+          newSource = new PMTilesRasterSource({
+            attributions: sourceParameters.attribution,
+            tileSize: 256,
+            url: url
+          });
+        }
+
+        break;
+      }
+      case 'RasterDemSource': {
+        const sourceParameters = source.parameters as IRasterDemSource;
+
+        newSource = new ImageTileSource({
+          url: this.computeSourceUrl(source),
+          attributions: sourceParameters.attribution
+        });
+
+        break;
+      }
+      case 'VectorTileSource': {
+        const sourceParameters = source.parameters as IVectorTileSource;
+
+        const pmTiles = sourceParameters.url.endsWith('.pmtiles');
+        const url = this.computeSourceUrl(source);
+
+        if (!pmTiles) {
+          newSource = new VectorTileSource({
+            attributions: sourceParameters.attribution,
+            minZoom: sourceParameters.minZoom,
+            maxZoom: sourceParameters.maxZoom,
+            url: url,
+            format: new MVT({ featureClass: Feature })
+          });
+        } else {
+          newSource = new PMTilesVectorSource({
+            attributions: sourceParameters.attribution,
+            url: url
+          });
+        }
+
+        break;
+      }
+      case 'GeoJSONSource': {
+        const data =
+          source.parameters?.data ||
+          (await this._model.readGeoJSON(source.parameters?.path));
+
+        const format = new GeoJSON();
+
+        // TODO: Don't hardcode projection
+        newSource = new VectorSource({
+          features: format.readFeatures(data, {
+            dataProjection: 'EPSG:4326',
+            featureProjection: this._Map.getView().getProjection()
+          })
+        });
+
+        break;
+      }
+      case 'ImageSource': {
+        const sourceParameters = source.parameters as IImageSource;
+
+        // Convert lon/lat array to extent
+        // Get lon/lat from source coordinates
+        const leftSide = Math.min(
+          ...sourceParameters.coordinates.map(corner => corner[0])
+        );
+        const bottomSide = Math.min(
+          ...sourceParameters.coordinates.map(corner => corner[1])
+        );
+        const rightSide = Math.max(
+          ...sourceParameters.coordinates.map(corner => corner[0])
+        );
+        const topSide = Math.max(
+          ...sourceParameters.coordinates.map(corner => corner[1])
+        );
+
+        // Convert lon/lat to OpenLayer coordinates
+        const topLeft = fromLonLat([leftSide, topSide]);
+        const bottomRight = fromLonLat([rightSide, bottomSide]);
+
+        // Get extent from coordinates
+        const minX = topLeft[0];
+        const maxY = topLeft[1];
+        const maxX = bottomRight[0];
+        const minY = bottomRight[1];
+
+        const extent = [minX, minY, maxX, maxY];
+
+        newSource = new Static({
+          imageExtent: extent,
+          url: sourceParameters.url,
+          interpolate: true,
+          crossOrigin: ''
+        });
+
+        break;
+      }
+      case 'VideoSource': {
+        console.warn('Video Tiles not supported with Open Layers');
+
+        break;
+      }
+      case 'GeoTiffSource': {
+        const sourceParameters = source.parameters as IGeoTiffSource;
+
+        newSource = new GeoTIFFSource({
+          sources: sourceParameters.urls,
+          normalize: sourceParameters.normalize,
+          wrapX: sourceParameters.wrapX
+        });
+
+        break;
+      }
+    }
+
+    newSource.set('id', id);
+    this._sources[id] = newSource;
+  }
+
+  private computeSourceUrl(source: IJGISSource): string {
+    const parameters = source.parameters as IRasterSource;
+    const urlParameters = parameters.urlParameters || {};
+    let url: string = parameters.url;
+
+    for (const parameterName of Object.keys(urlParameters)) {
+      url = url.replace(`{${parameterName}}`, urlParameters[parameterName]);
+    }
+
+    // Special case for max_zoom and min_zoom
+    if (url.includes('{max_zoom}')) {
+      url = url.replace('{max_zoom}', parameters.maxZoom.toString());
+    }
+    if (url.includes('{min_zoom}')) {
+      url = url.replace('{min_zoom}', parameters.minZoom.toString());
+    }
+
+    return url;
+  }
+
+  /**
+   * Update a source in the map.
+   *
+   * @param id - the source id.
+   * @param source - the source object.
+   */
+  async updateSource(id: string, source: IJGISSource): Promise<void> {
+    // TODO implement
+  }
+
+  /**
+   * Remove a source from the map.
+   *
+   * @param id - the source id.
+   */
+  removeSource(id: string): void {
+    delete this._sources[id];
+  }
+
+  /**
+   * Add or move the layers of the map.
+   *
+   * @param layerIds - the list of layers in the depth order (beneath first).
+   */
+  updateLayers(layerIds: string[]): void {
+    this._updateLayersImpl(layerIds);
+  }
+
+  private async _updateLayersImpl(layerIds: string[]): Promise<void> {
+    const previousLayerIds = this.getLayers();
+    // We use the reverse order of the list to add the layer from the top to the
+    // bottom.
+    // This is to ensure that the beforeId (layer on top of the one we add/move)
+    // is already added/moved in the map.
+    const reversedLayerIds = layerIds.slice().reverse();
+
+    for (const layerId of reversedLayerIds) {
+      const layer = this._model.sharedModel.getLayer(layerId);
+
+      if (!layer) {
+        console.log(`Layer id ${layerId} does not exist`);
+        return;
+      }
+      // Get the expected index in the map.
+      const currentLayerIds = [...previousLayerIds];
+      let indexInMap = currentLayerIds.length;
+      const nextLayer = layerIds[layerIds.indexOf(layerId) + 1];
+      if (nextLayer !== undefined) {
+        indexInMap = currentLayerIds.indexOf(nextLayer);
+        if (indexInMap === -1) {
+          indexInMap = currentLayerIds.length;
+        }
+      }
+      if (this.getLayer(layerId)) {
+        this.moveLayer(layerId, indexInMap);
+      } else {
+        await this.addLayer(layerId, layer, indexInMap);
+      }
+
+      // Remove the element of the previous list as treated.
+      const index = previousLayerIds.indexOf(layerId);
+      if (index > -1) {
+        previousLayerIds.splice(index, 1);
+      }
+    }
+    // Remove the layers not used anymore.
+    previousLayerIds.forEach(layerId => {
+      this._Map.removeLayer(layerId);
+    });
+
+    this._ready = true;
+  }
+
+  /**
+   * Add a layer to the map.
+   *
+   * @param id - id of the layer.
+   * @param layer - the layer object.
+   * @param index - expected index of the layer.
+   */
+  async addLayer(id: string, layer: IJGISLayer, index: number): Promise<void> {
+    if (this.getLayer(id)) {
+      // Layer already exists
+      return;
+    }
+
+    const sourceId = layer.parameters?.source;
+    const source = this._model.sharedModel.getSource(sourceId);
+    if (!source) {
+      return;
+    }
+
+    if (!this._sources[sourceId]) {
+      await this.addSource(sourceId, source);
+    }
+
+    let newLayer;
+
+    // TODO: OpenLayers provides a bunch of sources for specific tile
+    // providers, so maybe set up some way to use those
+    switch (layer.type) {
+      case 'RasterLayer': {
+        const layerParameters = layer.parameters as IRasterLayer;
+
+        newLayer = new TileLayer({
+          opacity: layerParameters.opacity,
+          visible: layer.visible,
+          source: this._sources[layerParameters.source]
+        });
+
+        break;
+      }
+      case 'VectorLayer': {
+        const layerParameters = layer.parameters as IVectorLayer;
+
+        newLayer = new VectorLayer({
+          opacity: layerParameters.opacity,
+          visible: layer.visible,
+          source: this._sources[layerParameters.source],
+          style: currentFeature =>
+            this.vectorLayerStyleFunc(currentFeature, layer)
+        });
+
+        break;
+      }
+      case 'VectorTileLayer': {
+        const layerParameters = layer.parameters as IVectorLayer;
+
+        newLayer = new VectorTileLayer({
+          opacity: layerParameters.opacity,
+          source: this._sources[layerParameters.source],
+          style: currentFeature =>
+            this.vectorLayerStyleFunc(currentFeature, layer)
+        });
+
+        break;
+      }
+      case 'HillshadeLayer': {
+        const layerParameters = layer.parameters as IHillshadeLayer;
+
+        newLayer = new WebGlTileLayer({
+          opacity: 0.3,
+          source: this._sources[layerParameters.source],
+          style: {
+            color: ['color', this.hillshadeMath()]
+          }
+        });
+
+        break;
+      }
+      case 'ImageLayer': {
+        const layerParameters = layer.parameters as IImageLayer;
+
+        newLayer = new ImageLayer({
+          opacity: layerParameters.opacity,
+          source: this._sources[layerParameters.source]
+        });
+
+        break;
+      }
+      case 'WebGlLayer': {
+        const layerParameters = layer.parameters as IWebGlLayer;
+
+        newLayer = new WebGlTileLayer({
+          opacity: layerParameters.opacity,
+          source: this._sources[layerParameters.source],
+          style: {
+            color: layerParameters.color
+          }
+        });
+
+        break;
+      }
+    }
+
+    // OpenLayers doesn't have name/id field so add it
+    newLayer.set('id', id);
+
+    this._Map.getLayers().insertAt(index, newLayer);
+  }
+
+  vectorLayerStyleFunc = (currentFeature, layer) => {
+    const layerParameters = layer.parameters as IVectorLayer;
+
+    // const flatStyle = {
+    //   'fill-color': 'rgba(255,255,255,0.4)',
+    //   'stroke-color': '#3399CC',
+    //   'stroke-width': 1.25,
+    //   'circle-radius': 5,
+    //   'circle-fill-color': 'rgba(255,255,255,0.4)',
+    //   'circle-stroke-width': 1.25,
+    //   'circle-stroke-color': '#3399CC'
+    // };
+
+    // TODO: Need to make a version that works with strings as well
+    const operators = {
+      '>': (a, b) => a > b,
+      '<': (a, b) => a < b,
+      '>=': (a, b) => a >= b,
+      '<=': (a, b) => a <= b,
+      '==': (a, b) => a === b,
+      '!=': (a, b) => a !== b
+    };
+
+    // TODO: I don't think this will work with fancy color expressions
+    const fill = new Fill({
+      color:
+        layerParameters.type === 'fill' || layerParameters.type === 'circle'
+          ? layerParameters.color
+          : '#F092DD'
+    });
+
+    const stroke = new Stroke({
+      color:
+        layerParameters.type === 'line' || layerParameters.type === 'circle'
+          ? layerParameters.color
+          : '#392F5A',
+      width: 2
+    });
+
+    const style = new Style({
+      fill,
+      stroke,
+      image: new Circle({
+        radius: 5,
+        fill,
+        stroke
+      })
+    });
+
+    if (layer.filters && layer.filters?.appliedFilters.length !== 0) {
+      const props = currentFeature.getProperties();
+      let shouldDisplayFeature = true;
+
+      switch (layer.filters.logicalOp) {
+        case 'any': {
+          // Display the feature if any filter conditions apply
+          shouldDisplayFeature = layer.filters.appliedFilters.some(
+            ({ feature, operator, value }) =>
+              operators[operator](props[feature], value)
+          );
+
+          break;
+        }
+        case 'all': {
+          // Display the feature only if all the filter conditions apply
+          shouldDisplayFeature = layer.filters.appliedFilters.every(
+            ({ feature, operator, value }) =>
+              operators[operator](props[feature], value)
+          );
+
+          break;
+        }
+      }
+
+      if (shouldDisplayFeature) {
+        return style;
+      } else {
+        return undefined;
+      }
+    } else {
+      return style;
+    }
+  };
+
+  /**
+   * Taken from https://openlayers.org/en/latest/examples/webgl-shaded-relief.html
+   * @returns
+   */
+  private hillshadeMath = () => {
+    // The method used to extract elevations from the DEM.
+    // In this case the format used is Terrarium
+    // red * 256 + green + blue / 256 - 32768
+    //
+    // Other frequently used methods include the Mapbox format
+    // (red * 256 * 256 + green * 256 + blue) * 0.1 - 10000
+    //
+    function elevation(xOffset, yOffset) {
+      const red = ['band', 1, xOffset, yOffset];
+      const green = ['band', 2, xOffset, yOffset];
+      const blue = ['band', 3, xOffset, yOffset];
+
+      // band math operates on normalized values from 0-1
+      // so we scale by 255
+      return [
+        '+',
+        ['*', 255 * 256, red],
+        ['*', 255, green],
+        ['*', 255 / 256, blue],
+        -32768
+      ];
+    }
+    // Generates a shaded relief image given elevation data.  Uses a 3x3
+    // neighborhood for determining slope and aspect.
+    const dp = ['*', 2, ['resolution']];
+    const z0x = ['*', 2, elevation(-1, 0)];
+    const z1x = ['*', 2, elevation(1, 0)];
+    const dzdx = ['/', ['-', z1x, z0x], dp];
+    const z0y = ['*', 2, elevation(0, -1)];
+    const z1y = ['*', 2, elevation(0, 1)];
+    const dzdy = ['/', ['-', z1y, z0y], dp];
+    const slope = ['atan', ['sqrt', ['+', ['^', dzdx, 2], ['^', dzdy, 2]]]];
+    const aspect = ['clamp', ['atan', ['-', 0, dzdx], dzdy], -Math.PI, Math.PI];
+    const sunEl = ['*', Math.PI / 180, 45];
+    const sunAz = ['*', Math.PI / 180, 46];
+
+    const cosIncidence = [
+      '+',
+      ['*', ['sin', sunEl], ['cos', slope]],
+      ['*', ['cos', sunEl], ['sin', slope], ['cos', ['-', sunAz, aspect]]]
+    ];
+    const scaled = ['*', 255, cosIncidence];
+
+    return scaled;
+  };
+
+  /**
+   * Move a layer in the stack.
+   *
+   * @param id - id of the layer.
+   * @param index - expected index of the layer.
+   */
+  moveLayer(id: string, index: number | undefined): void {
+    // Get the beforeId value according to the expected index.
+    const currentLayerIds = this.getLayers();
+    let beforeId: string | undefined = undefined;
+    if (!(index === undefined) && index < currentLayerIds.length) {
+      beforeId = currentLayerIds[index];
+    }
+
+    const layerArray = this._Map.getLayers().getArray();
+    const movingLayer = this.getLayer(id);
+
+    if (!movingLayer || !index || !beforeId) {
+      return;
+    }
+    const indexOfMovingLayer = layerArray.indexOf(movingLayer);
+
+    layerArray.splice(indexOfMovingLayer, 1);
+
+    const beforeLayer = this.getLayer(beforeId);
+
+    if (!beforeLayer) {
+      return;
+    }
+    const indexOfBeforeLayer = layerArray.indexOf(beforeLayer);
+
+    layerArray.splice(indexOfBeforeLayer, 0, movingLayer);
+    this._Map.setLayers(layerArray);
+  }
+
+  /**
+   * Update a layer of the map.
+   *
+   * @param id - id of the layer.
+   * @param layer - the layer object.
+   */
+  async updateLayer(
+    id: string,
+    layer: IJGISLayer,
+    mapLayer: BaseLayer
+  ): Promise<void> {
+    const sourceId = layer.parameters?.source;
+    const source = this._model.sharedModel.getSource(sourceId);
+    if (!source) {
+      return;
+    }
+
+    if (!this._sources[sourceId]) {
+      await this.addSource(sourceId, source);
+    }
+
+    mapLayer.setVisible(layer.visible);
+
+    switch (layer.type) {
+      case 'RasterLayer': {
+        mapLayer.setOpacity(layer.parameters?.opacity || 1);
+        break;
+      }
+      case 'VectorLayer': {
+        const layerParams = layer.parameters as IVectorLayer;
+
+        mapLayer.setOpacity(layerParams.opacity || 1);
+
+        (mapLayer as VectorLayer).setStyle(currentFeature =>
+          this.vectorLayerStyleFunc(currentFeature, layer)
+        );
+
+        break;
+      }
+      case 'VectorTileLayer': {
+        const layerParams = layer.parameters as IVectorTileLayer;
+
+        mapLayer.setOpacity(layerParams.opacity || 1);
+
+        (mapLayer as VectorLayer).setStyle(currentFeature =>
+          this.vectorLayerStyleFunc(currentFeature, layer)
+        );
+
+        break;
+      }
+      case 'HillshadeLayer': {
+        // TODO figure out color here
+        break;
+      }
+      case 'ImageLayer': {
+        break;
+      }
+      case 'WebGlLayer': {
+        (mapLayer as WebGlTileLayer).setStyle({
+          color: layer?.parameters?.color
+        });
+        break;
+      }
+    }
+  }
+
+  /**
+   * Remove a layer from the map.
+   *
+   * @param id - the id of the layer.
+   */
+  removeLayer(id: string): void {
+    const mapLayer = this.getLayer(id);
+    if (mapLayer) {
+      this._Map.removeLayer(mapLayer);
+    }
+  }
+
+  private _onClientSharedStateChanged = (
+    sender: IJupyterGISModel,
+    clients: Map<number, IJupyterGISClientState>
+  ): void => {
+    // TODO SOMETHING
+  };
+
+  private _onSharedOptionsChanged(
+    sender?: IJupyterGISDoc,
+    change?: MapChange
+  ): void {
+    if (!this._initializedPosition) {
+      const options = this._model.getOptions();
+
+      this.updateOptions(options);
+
+      this._initializedPosition = true;
+    }
+  }
+
+  private updateOptions(options: IJGISOptions) {
+    const centerCoord = fromLonLat(
+      [options.longitude, options.latitude],
+      this._Map.getView().getProjection()
+    );
+
+    this._Map.getView().setZoom(options.zoom || 0);
+    this._Map.getView().setCenter(centerCoord || [0, 0]);
+
+    this._Map.getView().setRotation(options.bearing || 0);
+  }
+
+  private _onViewChanged(
+    sender: ObservableMap<JSONValue>,
+    change: IObservableMap.IChangedArgs<JSONValue>
+  ): void {
+    // TODO SOMETHING
+  }
+
+  /**
+   * Convenience method to get a specific layer from OpenLayers Map
+   * @param id Layer to retrieve
+   */
+  private getLayer(id: string) {
+    return this._Map
+      .getLayers()
+      .getArray()
+      .find(layer => layer.get('id') === id);
+  }
+
+  /**
+   * Convenience method to get list layer IDs from the OpenLayers Map
+   */
+  private getLayers() {
+    return this._Map
+      .getLayers()
+      .getArray()
+      .map(layer => layer.get('id'));
+  }
+
+  private _onLayersChanged(
+    _: IJupyterGISDoc,
+    change: IJGISLayerDocChange
+  ): void {
+    // Avoid concurrency update on layers on first load, if layersTreeChanged and
+    // LayersChanged are triggered simultaneously.
+    if (!this._ready) {
+      return;
+    }
+    change.layerChange?.forEach(change => {
+      const layer = change.newValue;
+      if (!layer || Object.keys(layer).length === 0) {
+        this.removeLayer(change.id);
+      } else {
+        const mapLayer = this.getLayer(change.id);
+        if (
+          mapLayer &&
+          JupyterGISModel.getOrderedLayerIds(this._model).includes(change.id)
+        ) {
+          this.updateLayer(change.id, layer, mapLayer);
+        } else {
+          this.updateLayers(JupyterGISModel.getOrderedLayerIds(this._model));
+        }
+      }
+    });
+  }
+
+  private _onLayerTreeChange(
+    sender?: IJupyterGISDoc,
+    change?: IJGISLayerTreeDocChange
+  ): void {
+    this._ready = false;
+    // We can't properly use the change, because of the nested groups in the the shared
+    // document which is flattened for the map tool.
+    this.updateLayers(JupyterGISModel.getOrderedLayerIds(this._model));
+  }
+
+  private _onSourcesChange(
+    _: IJupyterGISDoc,
+    change: IJGISSourceDocChange
+  ): void {
+    if (!this._ready) {
+      return;
+    }
+
+    change.sourceChange?.forEach(change => {
+      if (!change.newValue || Object.keys(change.newValue).length === 0) {
+        this.removeSource(change.id);
+      } else {
+        const source = this._model.getSource(change.id);
+        if (source) {
+          this.updateSource(change.id, source);
+        }
+      }
+    });
+  }
+
+  private getSource<T>(id: string): T | undefined {
+    const source = this._model.sharedModel.getSource(id);
+
+    if (!source || !source.parameters) {
+      console.log(`Source id ${id} does not exist`);
+      return;
+    }
+
+    return source.parameters as T;
+  }
+
+  private _handleThemeChange = (): void => {
+    const lightTheme = isLightTheme();
+
+    // TODO SOMETHING
+
+    this.setState(old => ({ ...old, lightTheme }));
+  };
+
+  private _handleWindowResize = (): void => {
+    // TODO SOMETHING
+  };
+
+  render(): JSX.Element {
+    return (
+      <div
+        className="jGIS-Mainview"
+        style={{
+          border: this.state.remoteUser
+            ? `solid 3px ${this.state.remoteUser.color}`
+            : 'unset'
+        }}
+      >
+        <Spinner loading={this.state.loading} />
+
+        <div
+          ref={this.divRef}
+          style={{
+            width: '100%',
+            height: 'calc(100%)'
+          }}
+        />
+      </div>
+    );
+  }
+
+  private _initializedPosition = false;
+  private divRef = React.createRef<HTMLDivElement>(); // Reference of render div
+  private _Map: OlMap;
+  private _model: IJupyterGISModel;
+  private _mainViewModel: MainViewModel;
+  private _ready = false;
+  private _sources: Record<string, any>;
+}
diff --git a/packages/base/src/mainview/mainview.tsx b/packages/base/src/mainview/mainview.tsx
deleted file mode 100644
index 6422cf3a..00000000
--- a/packages/base/src/mainview/mainview.tsx
+++ /dev/null
@@ -1,1000 +0,0 @@
-import { MapChange } from '@jupyter/ydoc';
-import {
-  IHillshadeLayer,
-  IImageSource,
-  IShapefileSource,
-  IJGISFilter,
-  IJGISLayer,
-  IJGISLayerDocChange,
-  IJGISLayerTreeDocChange,
-  IJGISOptions,
-  IJGISSource,
-  IJGISSourceDocChange,
-  IJGISTerrain,
-  IJupyterGISClientState,
-  IJupyterGISDoc,
-  IJupyterGISModel,
-  IRasterDemSource,
-  IRasterSource,
-  IVectorLayer,
-  IVectorTileSource,
-  IVideoSource,
-  JupyterGISModel
-} from '@jupytergis/schema';
-import { showErrorMessage } from '@jupyterlab/apputils';
-import { IObservableMap, ObservableMap } from '@jupyterlab/observables';
-import { User } from '@jupyterlab/services';
-import { JSONValue } from '@lumino/coreutils';
-import * as React from 'react';
-
-import * as MapLibre from 'maplibre-gl';
-
-import { Protocol } from 'pmtiles';
-import { isLightTheme } from '../tools';
-import { MainViewModel } from './mainviewmodel';
-import { Spinner } from './spinner';
-import shp from 'shpjs';
-interface IProps {
-  viewModel: MainViewModel;
-}
-
-interface IStates {
-  id: string; // ID of the component, it is used to identify which component
-  //is the source of awareness updates.
-  loading: boolean;
-  lightTheme: boolean;
-  remoteUser?: User.IIdentity | null;
-  firstLoad: boolean;
-}
-
-export class MainView extends React.Component<IProps, IStates> {
-  constructor(props: IProps) {
-    super(props);
-
-    this._mainViewModel = this.props.viewModel;
-    this._mainViewModel.viewSettingChanged.connect(this._onViewChanged, this);
-    this._model = this._mainViewModel.jGISModel;
-    this._model.themeChanged.connect(this._handleThemeChange, this);
-
-    this._model.sharedOptionsChanged.connect(
-      this._onSharedOptionsChanged,
-      this
-    );
-    this._model.clientStateChanged.connect(
-      this._onClientSharedStateChanged,
-      this
-    );
-
-    this._model.sharedLayersChanged.connect(this._onLayersChanged, this);
-    this._model.sharedLayerTreeChanged.connect(this._onLayerTreeChange, this);
-    this._model.sharedSourcesChanged.connect(this._onSourcesChange, this);
-    this._model.terrainChanged.connect(this._onTerrainChange, this);
-
-    this.state = {
-      id: this._mainViewModel.id,
-      lightTheme: isLightTheme(),
-      loading: true,
-      firstLoad: true
-    };
-  }
-
-  async componentDidMount(): Promise<void> {
-    window.addEventListener('resize', this._handleWindowResize);
-    await this.generateScene();
-    this._mainViewModel.initSignal();
-  }
-
-  componentWillUnmount(): void {
-    window.removeEventListener('resize', this._handleWindowResize);
-    this._mainViewModel.viewSettingChanged.disconnect(
-      this._onViewChanged,
-      this
-    );
-
-    this._model.themeChanged.disconnect(this._handleThemeChange, this);
-    this._model.sharedOptionsChanged.disconnect(
-      this._onSharedOptionsChanged,
-      this
-    );
-
-    this._model.clientStateChanged.disconnect(
-      this._onClientSharedStateChanged,
-      this
-    );
-
-    this._mainViewModel.dispose();
-  }
-
-  async generateScene(): Promise<void> {
-    if (this.divRef.current) {
-      this._Map = new MapLibre.Map({
-        container: this.divRef.current
-      })
-        .addControl(
-          new MapLibre.NavigationControl({
-            visualizePitch: true,
-            showZoom: true,
-            showCompass: true
-          })
-        )
-        .addControl(
-          new MapLibre.ScaleControl({
-            maxWidth: 80,
-            unit: 'metric'
-          })
-        );
-
-      this._Map.on('zoomend', () => {
-        if (!this._initializedPosition) {
-          return;
-        }
-
-        const zoom = this._Map.getZoom();
-        this._model.setOptions({ ...this._model.getOptions(), zoom });
-      });
-
-      this._Map.on('moveend', () => {
-        if (!this._initializedPosition) {
-          return;
-        }
-
-        const center = this._Map.getCenter();
-        const bearing = this._Map.getBearing();
-        const pitch = this._Map.getPitch();
-        this._model.setOptions({
-          ...this._model.getOptions(),
-          latitude: center.lat,
-          longitude: center.lng,
-          bearing,
-          pitch
-        });
-      });
-
-      // PM tile stuff
-      this._protocol = new Protocol();
-      MapLibre.addProtocol('pmtiles', this._protocol.tile);
-
-      // Workaround for broken intialization of maplibre
-      this._Map._lazyInitEmptyStyle();
-
-      if (JupyterGISModel.getOrderedLayerIds(this._model).length !== 0) {
-        await this._updateLayersImpl(
-          JupyterGISModel.getOrderedLayerIds(this._model)
-        );
-        const options = this._model.getOptions();
-        this.updateOptions(options);
-      }
-
-      this.setState(old => ({ ...old, loading: false }));
-    }
-  }
-
-  /**
-   * Add a source in the map.
-   *
-   * @param id - the source id.
-   * @param source - the source object.
-   */
-  async addSource(id: string, source: IJGISSource): Promise<void> {
-    switch (source.type) {
-      case 'RasterSource': {
-        const mapSource = this._Map.getSource(id) as MapLibre.RasterTileSource;
-
-        if (!mapSource) {
-          const parameters = source.parameters as IRasterSource;
-          const sourceSpec = this.configureTileSource(
-            {
-              type: 'raster',
-              minzoom: parameters.minZoom,
-              maxzoom: parameters.maxZoom,
-              attribution: parameters.attribution || '',
-              tileSize: 256
-            },
-            this.computeSourceUrl(source)
-          );
-
-          this._Map.addSource(id, sourceSpec);
-        }
-        break;
-      }
-      case 'VectorTileSource': {
-        const mapSource = this._Map.getSource(id) as MapLibre.VectorTileSource;
-
-        if (!mapSource) {
-          const parameters = source.parameters as IVectorTileSource;
-          const sourceSpec = this.configureTileSource(
-            {
-              type: 'vector',
-              minzoom: parameters.minZoom,
-              maxzoom: parameters.maxZoom,
-              attribution: parameters.attribution || ''
-            },
-            this.computeSourceUrl(source)
-          );
-
-          this._Map.addSource(id, sourceSpec);
-        }
-        break;
-      }
-      case 'GeoJSONSource': {
-        const mapSource = this._Map.getSource(id) as MapLibre.GeoJSONSource;
-        if (!mapSource) {
-          const data =
-            source.parameters?.data ||
-            (await this._model.readGeoJSON(source.parameters?.path));
-          this._Map.addSource(id, {
-            type: 'geojson',
-            data: data
-          });
-        }
-        break;
-      }
-      case 'RasterDemSource': {
-        const mapSource = this._Map.getSource(
-          id
-        ) as MapLibre.RasterDEMTileSource;
-
-        if (!mapSource) {
-          const parameters = source.parameters as IRasterDemSource;
-          const sourceSpec = this.configureTileSource(
-            {
-              type: 'raster-dem',
-              tileSize: parameters.tileSize,
-              encoding: parameters.encoding
-            },
-            this.computeSourceUrl(source)
-          );
-
-          this._Map.addSource(id, sourceSpec);
-        }
-        break;
-      }
-      case 'VideoSource': {
-        const mapSource = this._Map.getSource(id) as MapLibre.VideoSource;
-        if (!mapSource) {
-          const parameters = source.parameters as IVideoSource;
-          this._Map
-            .addSource(id, {
-              type: 'video',
-              urls: parameters?.urls,
-              coordinates: parameters?.coordinates
-            })
-            .on('click', () => this.toggleVideoPlaying(id));
-
-          this._videoPlaying = true;
-        }
-        break;
-      }
-      case 'ImageSource': {
-        const mapSource = this._Map.getSource(id) as MapLibre.ImageSource;
-        if (!mapSource) {
-          const parameters = source.parameters as IImageSource;
-          this._Map.addSource(id, {
-            type: 'image',
-            url: parameters?.url,
-            coordinates: parameters?.coordinates
-          });
-        }
-        break;
-      }
-      case 'ShapefileSource': {
-        const mapSource = this._Map.getSource(id) as MapLibre.GeoJSONSource;
-        if (!mapSource) {
-          const parameters = source.parameters as IShapefileSource;
-
-          const geojson = await this._loadShapefileAsGeoJSON(parameters.path);
-
-          const geojsonData = Array.isArray(geojson) ? geojson[0] : geojson;
-
-          this._Map.addSource(id, {
-            type: 'geojson',
-            data: geojsonData
-          });
-        }
-        break;
-      }
-    }
-  }
-
-  private toggleVideoPlaying(sourceId: any) {
-    const source = this._Map.getSource(sourceId) as MapLibre.VideoSource;
-
-    this._videoPlaying ? source?.pause() : source?.play();
-    this._videoPlaying = !this._videoPlaying;
-  }
-
-  private async _loadShapefileAsGeoJSON(
-    url: string
-  ): Promise<GeoJSON.FeatureCollection | GeoJSON.FeatureCollection[]> {
-    try {
-      const response = await fetch(`/jupytergis_core/proxy?url=${url}`);
-      const arrayBuffer = await response.arrayBuffer();
-      const geojson = await shp(arrayBuffer);
-
-      return geojson;
-    } catch (error) {
-      console.error('Error loading shapefile:', error);
-      throw error;
-    }
-  }
-
-  private computeSourceUrl(source: IJGISSource): string {
-    const parameters = source.parameters as IRasterSource;
-    const urlParameters = parameters.urlParameters || {};
-    let url: string = parameters.url;
-
-    for (const parameterName of Object.keys(urlParameters)) {
-      url = url.replace(`{${parameterName}}`, urlParameters[parameterName]);
-    }
-
-    // Special case for max_zoom and min_zoom
-    if (url.includes('{max_zoom}')) {
-      url = url.replace('{max_zoom}', parameters.maxZoom.toString());
-    }
-    if (url.includes('{min_zoom}')) {
-      url = url.replace('{min_zoom}', parameters.minZoom.toString());
-    }
-
-    return url;
-  }
-
-  /**
-   * Update a source in the map.
-   *
-   * @param id - the source id.
-   * @param source - the source object.
-   */
-  async updateSource(id: string, source: IJGISSource): Promise<void> {
-    const mapSource = this._Map.getSource(id);
-    if (!mapSource) {
-      this.addSource(id, source);
-      return;
-    }
-
-    switch (source.type) {
-      case 'RasterSource': {
-        const sourceCast = mapSource as MapLibre.RasterTileSource;
-        const url = this.computeSourceUrl(source);
-        this._handleSourceUpdate(sourceCast, url);
-        break;
-      }
-      case 'VectorTileSource': {
-        const sourceCast = mapSource as MapLibre.VectorTileSource;
-        const url = this.computeSourceUrl(source);
-        this._handleSourceUpdate(sourceCast, url);
-        break;
-      }
-      case 'RasterDemSource': {
-        const sourceCast = mapSource as MapLibre.RasterDEMTileSource;
-        const url = this.computeSourceUrl(source);
-        this._handleSourceUpdate(sourceCast, url);
-        break;
-      }
-      case 'GeoJSONSource': {
-        const data =
-          source.parameters?.data ||
-          (await this._model.readGeoJSON(source.parameters?.path));
-        (mapSource as MapLibre.GeoJSONSource).setData(data);
-        break;
-      }
-      case 'ImageSource': {
-        const parameters = source.parameters as IImageSource;
-        (mapSource as MapLibre.ImageSource).updateImage({
-          url: parameters.url,
-          coordinates: parameters.coordinates
-        });
-        break;
-      }
-      case 'VideoSource': {
-        const parameters = source.parameters as IVideoSource;
-        (mapSource as MapLibre.VideoSource).setCoordinates(
-          parameters.coordinates
-        );
-        break;
-      }
-      case 'ShapefileSource': {
-        const parameters = source.parameters as IShapefileSource;
-        const geojson = await this._loadShapefileAsGeoJSON(parameters.path);
-        const geojsonData = Array.isArray(geojson) ? geojson[0] : geojson;
-        (mapSource as MapLibre.GeoJSONSource).setData(geojsonData);
-        break;
-      }
-      default: {
-        console.warn('Source type not found');
-      }
-    }
-  }
-
-  /**
-   * Remove a source from the map.
-   *
-   * @param id - the source id.
-   */
-  removeSource(id: string): void {
-    const mapSource = this._Map.getSource(id);
-    if (mapSource?.type === 'video') {
-      (mapSource as MapLibre.VideoSource).off('click', () =>
-        this.toggleVideoPlaying(id)
-      );
-    }
-    if (mapSource) {
-      this._Map.removeSource(id);
-    }
-  }
-
-  /**
-   * Add or move the layers of the map.
-   *
-   * @param layerIds - the list of layers in the depth order (beneath first).
-   */
-  updateLayers(layerIds: string[]): void {
-    this._updateLayersImpl(layerIds);
-  }
-
-  private async _updateLayersImpl(layerIds: string[]): Promise<void> {
-    const previousLayerIds = this._Map.getStyle().layers.map(layer => layer.id);
-
-    // We use the reverse order of the list to add the layer from the top to the
-    // bottom.
-    // This is to ensure that the beforeId (layer on top of the one we add/move)
-    // is already added/moved in the map.
-    const reversedLayerIds = layerIds.slice().reverse();
-
-    for (const layerId of reversedLayerIds) {
-      const layer = this._model.sharedModel.getLayer(layerId);
-
-      if (!layer) {
-        console.log(`Layer id ${layerId} does not exist`);
-        return;
-      }
-
-      // Get the expected index in the map.
-      const currentLayerIds = this._Map
-        .getStyle()
-        .layers.map(layer => layer.id);
-      let indexInMap = currentLayerIds.length;
-      const nextLayer = layerIds[layerIds.indexOf(layerId) + 1];
-      if (nextLayer !== undefined) {
-        indexInMap = currentLayerIds.indexOf(nextLayer);
-        if (indexInMap === -1) {
-          indexInMap = currentLayerIds.length;
-        }
-      }
-
-      if (this._Map.getLayer(layerId)) {
-        this.moveLayer(layerId, indexInMap);
-      } else {
-        await this.addLayer(layerId, layer, indexInMap);
-      }
-
-      // Remove the element of the previous list as treated.
-      const index = previousLayerIds.indexOf(layerId);
-      if (index > -1) {
-        previousLayerIds.splice(index, 1);
-      }
-    }
-
-    // Remove the layers not used anymore.
-    previousLayerIds.forEach(layerId => {
-      this._Map.removeLayer(layerId);
-    });
-
-    this._ready = true;
-  }
-
-  /**
-   * Add a layer to the map.
-   *
-   * @param id - id of the layer.
-   * @param layer - the layer object.
-   * @param index - expected index of the layer.
-   */
-  async addLayer(id: string, layer: IJGISLayer, index: number): Promise<void> {
-    if (this._Map.getLayer(id)) {
-      // Layer already exists
-      return;
-    }
-
-    // Add the source if necessary.
-    const sourceId = layer.parameters?.source;
-    const source = this._model.sharedModel.getSource(sourceId);
-    if (!source) {
-      return;
-    }
-
-    if (!this._Map.getSource(sourceId)) {
-      await this.addSource(sourceId, source);
-    }
-
-    // Get the beforeId value according to the expected index.
-    const currentLayerIds = this._Map.getStyle().layers.map(layer => layer.id);
-    let beforeId: string | undefined = undefined;
-    if (index < currentLayerIds.length && index !== -1) {
-      beforeId = currentLayerIds[index];
-    }
-
-    switch (layer.type) {
-      case 'RasterLayer': {
-        this._Map.addLayer(
-          {
-            id: id,
-            type: 'raster',
-            layout: {
-              visibility: layer.visible ? 'visible' : 'none'
-            },
-            paint: {
-              'raster-opacity':
-                layer.parameters?.opacity !== undefined
-                  ? layer.parameters.opacity
-                  : 1
-            },
-            source: sourceId,
-            minzoom: source.parameters?.minZoom || 0,
-            maxzoom: source.parameters?.maxZoom || 24
-          },
-          beforeId
-        );
-        break;
-      }
-      case 'VectorLayer': {
-        const parameters = layer.parameters as IVectorLayer;
-        const layerSpecification: MapLibre.AddLayerObject = {
-          id,
-          type: parameters.type,
-          layout: {
-            visibility: layer.visible ? 'visible' : 'none'
-          },
-          source: sourceId
-        };
-
-        parameters.sourceLayer &&
-          (layerSpecification['source-layer'] = parameters.sourceLayer);
-
-        this._Map.addLayer(layerSpecification, beforeId);
-        this._Map.setPaintProperty(
-          id,
-          `${parameters.type}-color`,
-          parameters.color !== undefined ? parameters.color : '#FF0000'
-        );
-        this._Map.setPaintProperty(
-          id,
-          `${parameters.type}-opacity`,
-          parameters.opacity !== undefined ? parameters.opacity : 1
-        );
-        break;
-      }
-      case 'HillshadeLayer': {
-        const parameters = layer.parameters as IHillshadeLayer;
-
-        this._Map.addLayer(
-          {
-            id: id,
-            type: 'hillshade',
-            layout: {
-              visibility: layer.visible ? 'visible' : 'none'
-            },
-            paint: {
-              'hillshade-shadow-color':
-                parameters?.shadowColor !== undefined
-                  ? parameters.shadowColor
-                  : '#473B24'
-            },
-            source: sourceId
-          },
-          beforeId
-        );
-        break;
-      }
-    }
-
-    if (layer.filters) {
-      this.setFilters(id, layer.filters);
-    }
-  }
-
-  async setTerrain(sourceId: string, exaggeration: number) {
-    if (this._terrainControl) {
-      this._Map.removeControl(this._terrainControl);
-      this._terrainControl = null;
-    }
-
-    // Remove terrain
-    if (!sourceId) {
-      this._Map.setTerrain(null);
-      return;
-    }
-
-    // Add the source if necessary.
-    const source = this._model.sharedModel.getSource(sourceId);
-    if (!source) {
-      return;
-    }
-
-    if (!this._Map.getSource(sourceId)) {
-      await this.addSource(sourceId, source);
-    }
-
-    this._terrainControl = new MapLibre.TerrainControl({
-      source: sourceId,
-      exaggeration
-    });
-    this._Map.setTerrain({ source: sourceId, exaggeration });
-    this._Map.addControl(this._terrainControl);
-  }
-
-  /**
-   * Move a layer in the stack.
-   *
-   * @param id - id of the layer.
-   * @param index - expected index of the layer.
-   */
-  moveLayer(id: string, index: number | undefined): void {
-    // Get the beforeId value according to the expected index.
-    const currentLayerIds = this._Map.getStyle().layers.map(layer => layer.id);
-    let beforeId: string | undefined = undefined;
-    if (!(index === undefined) && index < currentLayerIds.length) {
-      beforeId = currentLayerIds[index];
-    }
-    this._Map.moveLayer(id, beforeId);
-  }
-
-  /**
-   * Update a layer of the map.
-   *
-   * @param id - id of the layer.
-   * @param layer - the layer object.
-   */
-  async updateLayer(
-    id: string,
-    layer: IJGISLayer,
-    mapLayer: ReturnType<typeof this._Map.getLayer>
-  ): Promise<void> {
-    // Check if the layer already exist in the map.
-    if (!mapLayer) {
-      return;
-    }
-
-    // If the layer is vector and the type or source-layer has changed, let's create a new layer.
-    // MapLibre does not support changing the type on fly, it lead to errors with
-    // the paint properties.
-    if (
-      (layer.parameters?.type && mapLayer.type !== layer.parameters?.type) ||
-      (layer.parameters?.sourceLayer &&
-        mapLayer.sourceLayer !== layer.parameters?.sourceLayer)
-    ) {
-      const index = this._Map.getStyle().layers.findIndex(lay => lay.id === id);
-      this._Map.removeLayer(id);
-      this.addLayer(id, layer, index);
-      return;
-    }
-
-    const sourceId = layer.parameters?.source;
-    const source = this._model.sharedModel.getSource(sourceId);
-    if (!source) {
-      return;
-    }
-
-    if (!this._Map.getSource(sourceId)) {
-      await this.addSource(sourceId, source);
-    }
-
-    mapLayer.source = sourceId;
-    this._Map.setLayoutProperty(
-      id,
-      'visibility',
-      layer.visible ? 'visible' : 'none'
-    );
-    switch (layer.type) {
-      case 'RasterLayer': {
-        this._Map.setPaintProperty(
-          id,
-          'raster-opacity',
-          layer.parameters?.opacity !== undefined ? layer.parameters.opacity : 1
-        );
-        break;
-      }
-      case 'VectorLayer': {
-        const vectorLayerType = layer.parameters?.type;
-        if (!vectorLayerType) {
-          showErrorMessage(
-            'Vector layer error',
-            'The vector layer type is undefined'
-          );
-        }
-        this._Map.setPaintProperty(
-          id,
-          `${vectorLayerType}-color`,
-          layer.parameters?.color !== undefined
-            ? layer.parameters.color
-            : '#FF0000'
-        );
-        this._Map.setPaintProperty(
-          id,
-          `${vectorLayerType}-opacity`,
-          layer.parameters?.opacity !== undefined ? layer.parameters.opacity : 1
-        );
-        break;
-      }
-      case 'HillshadeLayer': {
-        const parameters = layer.parameters as IHillshadeLayer;
-
-        this._Map.setPaintProperty(
-          id,
-          'hillshade-shadow-color',
-          parameters?.shadowColor !== undefined
-            ? parameters.shadowColor
-            : '#473B24'
-        );
-      }
-    }
-
-    if (layer.filters) {
-      this.setFilters(id, layer.filters);
-    }
-  }
-
-  /**
-   * Remove a layer from the map.
-   *
-   * @param id - the id of the layer.
-   */
-  removeLayer(id: string): void {
-    const mapLayer = this._Map.getLayer(id);
-    if (mapLayer) {
-      this._Map.removeLayer(id);
-    }
-  }
-
-  /**
-   * Determines whether to use tiles or a URL for a given source based on the presence of replaceable parameters in the URL.
-   *
-   * This method checks if the provided URL contains patterns that indicate it can be broken down into tiles
-   * (e.g., {z}/{x}/{y}, {ratio}, etc.).
-   * If such patterns are found, it suggests that tiles should be used. Otherwise, the URL itself should be used.
-   *
-   * @param url - The URL to check for replaceable parameters.
-   * @returns True if the URL contains replaceable parameters indicating the use of tiles, false otherwise.
-   */
-  private _shouldUseTiles(url: string) {
-    const regexPatterns = [
-      /\{z\}/,
-      /\{x\}/,
-      /\{y\}/,
-      /\{ratio\}/,
-      /\{quadkey\}/,
-      /\{bbox-epsg-3857\}/
-    ];
-
-    let result = false;
-
-    for (const pattern of regexPatterns) {
-      if (pattern.test(url)) {
-        result = true;
-        break;
-      }
-    }
-
-    return result;
-  }
-
-  /**
-   * Updates the given source with either a new URL or tiles based on the result of `_shouldUseTiles`.
-   *
-   * @param source - The source to update.
-   * @param url - The URL to set for the source.
-   */
-  private _handleSourceUpdate(
-    source:
-      | MapLibre.RasterTileSource
-      | MapLibre.VectorTileSource
-      | MapLibre.RasterDEMTileSource,
-    url: string
-  ) {
-    const result = this._shouldUseTiles(url);
-
-    result ? source.setTiles([url]) : source.setUrl(url);
-  }
-
-  /**
-   * Configures a source specification, setting either the `tiles` or `url` property based on the provided URL.
-   *
-   * This method uses the `_shouldUseTiles` method to determine whether the source should be configured with tiles or a direct URL. It then modifies the `sourceSpec` object accordingly.
-   *
-   * @param sourceSpec - The source specification object to configure. This object is modified in place.
-   * @param url - The URL to check for replaceable parameters and use in configuring the source.
-   * @returns The modified source specification object.
-   */
-  private configureTileSource(
-    sourceSpec:
-      | MapLibre.RasterSourceSpecification
-      | MapLibre.RasterDEMSourceSpecification
-      | MapLibre.VectorSourceSpecification,
-    url: string
-  ) {
-    const result = this._shouldUseTiles(url);
-
-    result
-      ? (sourceSpec = { tiles: [url], ...sourceSpec })
-      : (sourceSpec = { url, ...sourceSpec });
-
-    return sourceSpec;
-  }
-
-  private _onClientSharedStateChanged = (
-    sender: IJupyterGISModel,
-    clients: Map<number, IJupyterGISClientState>
-  ): void => {
-    // TODO SOMETHING
-  };
-
-  private _onSharedOptionsChanged(
-    sender?: IJupyterGISDoc,
-    change?: MapChange
-  ): void {
-    if (!this._initializedPosition) {
-      const options = this._model.getOptions();
-
-      this.updateOptions(options);
-
-      this._initializedPosition = true;
-    }
-  }
-
-  private updateOptions(options: IJGISOptions) {
-    // It is important to call setZoom first, otherwise maplibre does set the center properly
-    this._Map.setZoom(options.zoom || 0);
-    this._Map.setCenter(
-      (options.longitude &&
-        options.latitude && {
-          lng: options.longitude,
-          lat: options.latitude
-        }) || [0, 0]
-    );
-    this._Map.setBearing(options.bearing || 0);
-    this._Map.setPitch(options.pitch || 0);
-  }
-
-  private _onViewChanged(
-    sender: ObservableMap<JSONValue>,
-    change: IObservableMap.IChangedArgs<JSONValue>
-  ): void {
-    // TODO SOMETHING
-  }
-
-  private _onLayersChanged(
-    _: IJupyterGISDoc,
-    change: IJGISLayerDocChange
-  ): void {
-    // Avoid concurrency update on layers on first load, if layersTreeChanged and
-    // LayersChanged are triggered simultaneously.
-    if (!this._ready) {
-      return;
-    }
-    change.layerChange?.forEach(change => {
-      const layer = change.newValue;
-      if (!layer || Object.keys(layer).length === 0) {
-        this.removeLayer(change.id);
-      } else {
-        const mapLayer = this._Map.getLayer(change.id);
-
-        if (
-          mapLayer &&
-          JupyterGISModel.getOrderedLayerIds(this._model).includes(change.id)
-        ) {
-          this.updateLayer(change.id, layer, mapLayer);
-        } else {
-          this.updateLayers(JupyterGISModel.getOrderedLayerIds(this._model));
-        }
-      }
-    });
-  }
-
-  private _onLayerTreeChange(
-    sender?: IJupyterGISDoc,
-    change?: IJGISLayerTreeDocChange
-  ): void {
-    this._ready = false;
-    // We can't properly use the change, because of the nested groups in the the shared
-    // document which is flattened for the map tool.
-    this.updateLayers(JupyterGISModel.getOrderedLayerIds(this._model));
-  }
-
-  private _onSourcesChange(
-    _: IJupyterGISDoc,
-    change: IJGISSourceDocChange
-  ): void {
-    if (!this._ready) {
-      return;
-    }
-
-    change.sourceChange?.forEach(change => {
-      if (!change.newValue || Object.keys(change.newValue).length === 0) {
-        this.removeSource(change.id);
-      } else {
-        const source = this._model.getSource(change.id);
-        if (source) {
-          this.updateSource(change.id, source);
-        }
-      }
-    });
-  }
-
-  private _onTerrainChange(sender: any, change: IJGISTerrain) {
-    this.setTerrain(change.source, change.exaggeration);
-  }
-
-  private async setFilters(id: string, filters: IJGISFilter) {
-    if (filters.appliedFilters.length === 0) {
-      this._Map.setFilter(id, null);
-      return;
-    }
-
-    const filterExpression = [
-      filters.logicalOp,
-      ...filters.appliedFilters.map(filter => {
-        return [filter.operator, filter.feature, filter.value];
-      })
-    ] as MapLibre.FilterSpecification;
-
-    this._Map.setFilter(id, filterExpression);
-  }
-
-  // @ts-ignore
-  private getSource<T>(id: string): T | undefined {
-    const source = this._model.sharedModel.getSource(id);
-
-    if (!source || !source.parameters) {
-      console.log(`Source id ${id} does not exist`);
-      return;
-    }
-
-    return source.parameters as T;
-  }
-
-  private _handleThemeChange = (): void => {
-    const lightTheme = isLightTheme();
-
-    // TODO SOMETHING
-
-    this.setState(old => ({ ...old, lightTheme }));
-  };
-
-  private _handleWindowResize = (): void => {
-    // TODO SOMETHING
-  };
-
-  render(): JSX.Element {
-    return (
-      <div
-        className="jGIS-Mainview"
-        style={{
-          border: this.state.remoteUser
-            ? `solid 3px ${this.state.remoteUser.color}`
-            : 'unset'
-        }}
-      >
-        <Spinner loading={this.state.loading} />
-
-        <div
-          ref={this.divRef}
-          style={{
-            width: '100%',
-            height: 'calc(100%)'
-          }}
-        />
-      </div>
-    );
-  }
-
-  private _initializedPosition = false;
-  private divRef = React.createRef<HTMLDivElement>(); // Reference of render div
-
-  private _Map: MapLibre.Map;
-
-  private _model: IJupyterGISModel;
-  private _mainViewModel: MainViewModel;
-  private _ready = false;
-  private _terrainControl: MapLibre.TerrainControl | null;
-  private _videoPlaying = false;
-  private _protocol: Protocol;
-}
diff --git a/packages/base/src/toolbar/widget.tsx b/packages/base/src/toolbar/widget.tsx
index 14a347a9..1030f068 100644
--- a/packages/base/src/toolbar/widget.tsx
+++ b/packages/base/src/toolbar/widget.tsx
@@ -121,18 +121,18 @@ export class ToolbarWidget extends Toolbar {
       );
 
       this.addItem(
-        'newVideoEntry',
+        'newShapefileLayer',
         new CommandToolbarButton({
-          id: CommandIDs.newVideoEntry,
+          id: CommandIDs.newShapefileLayer,
           label: '',
           commands: options.commands
         })
       );
 
       this.addItem(
-        'newShapefileLayer',
+        'newGeoTiffEntry',
         new CommandToolbarButton({
-          id: CommandIDs.newShapefileLayer,
+          id: CommandIDs.newGeoTiffEntry,
           label: '',
           commands: options.commands
         })
diff --git a/packages/base/src/widget.tsx b/packages/base/src/widget.tsx
index 0783b308..f28315f5 100644
--- a/packages/base/src/widget.tsx
+++ b/packages/base/src/widget.tsx
@@ -6,7 +6,7 @@ import { JSONValue } from '@lumino/coreutils';
 import { ISignal, Signal } from '@lumino/signaling';
 import * as React from 'react';
 
-import { MainView } from './mainview';
+import { MainView } from './mainview/mainView';
 import { MainViewModel } from './mainview/mainviewmodel';
 
 export class JupyterGISWidget
diff --git a/packages/base/style/base.css b/packages/base/style/base.css
index 20a6a5f8..297a4f2b 100644
--- a/packages/base/style/base.css
+++ b/packages/base/style/base.css
@@ -8,7 +8,8 @@
 @import url('./leftPanel.css');
 @import url('./terrainDialog.css');
 @import url('./filterPanel.css');
-@import url('maplibre-gl/dist/maplibre-gl.css');
+@import url('./colorExpression.css');
+@import url('ol/ol.css');
 
 .jGIS-Toolbar-GroupName {
   font-size: var(--jp-ui-font-size0);
diff --git a/packages/base/style/colorExpression.css b/packages/base/style/colorExpression.css
new file mode 100644
index 00000000..1328e3c5
--- /dev/null
+++ b/packages/base/style/colorExpression.css
@@ -0,0 +1,36 @@
+.jp-gis-color-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.jp-gis-color-container select {
+  text-transform: capitalize;
+}
+
+.jp-gis-color-container option {
+  text-transform: capitalize;
+}
+
+.jp-gis-color-row {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 100%;
+  gap: 0.25rem;
+}
+
+.jp-gis-color-row > input[type='number'] {
+  flex: 0 1 18%;
+  min-width: 0px;
+}
+
+.jp-gis-color-row > input[type='color'] {
+  flex-grow: 1;
+}
+
+.jp-gis-color-row > button {
+  color: var(--jp-ui-font-color0);
+  background: none;
+  padding-right: 0px;
+}
diff --git a/packages/schema/src/model.ts b/packages/schema/src/model.ts
index 779fe175..e01ca64d 100644
--- a/packages/schema/src/model.ts
+++ b/packages/schema/src/model.ts
@@ -187,7 +187,8 @@ export class JupyterGISModel implements IJupyterGISModel {
         longitude: 0,
         zoom: 0,
         bearing: 0,
-        pitch: 0
+        pitch: 0,
+        projection: 'EPSG:3857'
       };
     });
     this.dirty = true;
diff --git a/packages/schema/src/schema/geoTiffSource.json b/packages/schema/src/schema/geoTiffSource.json
new file mode 100644
index 00000000..dff7eb99
--- /dev/null
+++ b/packages/schema/src/schema/geoTiffSource.json
@@ -0,0 +1,34 @@
+{
+  "type": "object",
+  "description": "GeoTiffSource",
+  "title": "IGeoTiffSource",
+  "required": ["urls"],
+  "additionalProperties": false,
+  "properties": {
+    "urls": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "url": {
+            "type": "string"
+          },
+          "max": {
+            "type": "number"
+          }
+        }
+      },
+      "minItems": 1,
+      "default": [],
+      "description": "URLs"
+    },
+    "normalize": {
+      "type": "boolean",
+      "default": true
+    },
+    "wrapX": {
+      "type": "boolean",
+      "default": false
+    }
+  }
+}
diff --git a/packages/schema/src/schema/imageLayer.json b/packages/schema/src/schema/imageLayer.json
new file mode 100644
index 00000000..39ac323f
--- /dev/null
+++ b/packages/schema/src/schema/imageLayer.json
@@ -0,0 +1,21 @@
+{
+  "type": "object",
+  "description": "ImageLayer",
+  "title": "IImageLayer",
+  "required": ["source"],
+  "additionalProperties": false,
+  "properties": {
+    "source": {
+      "type": "string",
+      "description": "The id of the source"
+    },
+    "opacity": {
+      "type": "number",
+      "description": "The opacity of the source",
+      "default": 1,
+      "multipleOf": 0.1,
+      "minimum": 0,
+      "maximum": 1
+    }
+  }
+}
diff --git a/packages/schema/src/schema/jgis.json b/packages/schema/src/schema/jgis.json
index 81f7fd8b..dfb0a62d 100644
--- a/packages/schema/src/schema/jgis.json
+++ b/packages/schema/src/schema/jgis.json
@@ -23,7 +23,14 @@
   "definitions": {
     "layerType": {
       "type": "string",
-      "enum": ["RasterLayer", "VectorLayer", "HillshadeLayer"]
+      "enum": [
+        "RasterLayer",
+        "VectorLayer",
+        "VectorTileLayer",
+        "HillshadeLayer",
+        "WebGlLayer",
+        "ImageLayer"
+      ]
     },
     "sourceType": {
       "type": "string",
@@ -34,7 +41,8 @@
         "RasterDemSource",
         "VideoSource",
         "ImageSource",
-        "ShapefileSource"
+        "ShapefileSource",
+        "GeoTiffSource"
       ]
     },
     "jGISLayer": {
@@ -160,7 +168,14 @@
       "title": "IJGISOptions",
       "type": "object",
       "default": {},
-      "required": ["latitude", "longitude", "zoom", "bearing", "pitch"],
+      "required": [
+        "latitude",
+        "longitude",
+        "zoom",
+        "bearing",
+        "pitch",
+        "projection"
+      ],
       "additionalProperties": false,
       "properties": {
         "latitude": {
@@ -182,6 +197,10 @@
         "pitch": {
           "type": "number",
           "default": 0
+        },
+        "projection": {
+          "type": "string",
+          "default": "EPSG:3857"
         }
       }
     },
diff --git a/packages/schema/src/schema/vectorTileLayer.json b/packages/schema/src/schema/vectorTileLayer.json
new file mode 100644
index 00000000..e5ffa99f
--- /dev/null
+++ b/packages/schema/src/schema/vectorTileLayer.json
@@ -0,0 +1,36 @@
+{
+  "type": "object",
+  "description": "VectorTileLayer",
+  "title": "IVectorTileLayer",
+  "required": ["source", "type"],
+  "additionalProperties": false,
+  "properties": {
+    "source": {
+      "type": "string",
+      "description": "The id of the source"
+    },
+    "type": {
+      "type": "string",
+      "enum": ["circle", "fill", "line"],
+      "default": "line",
+      "description": "The type of vector layer"
+    },
+    "sourceLayer": {
+      "type": "string",
+      "description": "The source layer to use"
+    },
+    "color": {
+      "type": "string",
+      "description": "The color of the the object",
+      "default": "#FF0000"
+    },
+    "opacity": {
+      "type": "number",
+      "description": "The opacity of the the object",
+      "default": 1,
+      "multipleOf": 0.1,
+      "minimum": 0,
+      "maximum": 1
+    }
+  }
+}
diff --git a/packages/schema/src/schema/webGlLayer.json b/packages/schema/src/schema/webGlLayer.json
new file mode 100644
index 00000000..1da807b8
--- /dev/null
+++ b/packages/schema/src/schema/webGlLayer.json
@@ -0,0 +1,41 @@
+{
+  "type": "object",
+  "description": "WebGlLayer",
+  "title": "IWebGlLayer",
+  "required": ["source"],
+  "additionalProperties": false,
+  "properties": {
+    "source": {
+      "type": "string",
+      "description": "The id of the source"
+    },
+    "opacity": {
+      "type": "number",
+      "description": "The opacity of the source",
+      "default": 1,
+      "multipleOf": 0.1,
+      "minimum": 0,
+      "maximum": 1
+    },
+    "color": {
+      "oneOf": [
+        { "type": "string" },
+        {
+          "type": "array",
+          "items": {
+            "anyOf": [
+              { "type": "string" },
+              { "type": "number" },
+              {
+                "type": "array",
+                "items": { "type": "string" }
+              }
+            ]
+          }
+        }
+      ],
+      "description": "The color of the the object",
+      "default": "#FF0000"
+    }
+  }
+}
diff --git a/packages/schema/src/types.ts b/packages/schema/src/types.ts
index 08559f6c..c7f3c3cd 100644
--- a/packages/schema/src/types.ts
+++ b/packages/schema/src/types.ts
@@ -1,18 +1,22 @@
 export * from './_interface/jgis';
 
 // Sources
+export * from './_interface/geoTiffSource';
 export * from './_interface/geojsonsource';
 export * from './_interface/imageSource';
 export * from './_interface/rasterDemSource';
 export * from './_interface/rastersource';
+export * from './_interface/shapefileSource';
 export * from './_interface/vectortilesource';
 export * from './_interface/videoSource';
-export * from './_interface/shapefileSource';
 
 // Layers
 export * from './_interface/hillshadeLayer';
 export * from './_interface/rasterlayer';
 export * from './_interface/vectorlayer';
+export * from './_interface/vectorTileLayer';
+export * from './_interface/webGlLayer';
+export * from './_interface/imageLayer';
 
 // Other
 export * from './doc';
diff --git a/python/jupytergis_core/src/jgisplugin/plugins.ts b/python/jupytergis_core/src/jgisplugin/plugins.ts
index 1442b921..c53de1da 100644
--- a/python/jupytergis_core/src/jgisplugin/plugins.ts
+++ b/python/jupytergis_core/src/jgisplugin/plugins.ts
@@ -109,7 +109,7 @@ const activate = (
         format: 'text',
         size: undefined,
         content:
-          '{\n\t"layers": {},\n\t"sources": {},\n\t"options": {"latitude": 0, "longitude": 0, "zoom": 0, "bearing": 0, "pitch": 0},\n\t"layerTree": [],\n\t"terrain": {"source": "", "exaggeration": 0}\n}'
+          '{\n\t"layers": {},\n\t"sources": {},\n\t"options": {"latitude": 0, "longitude": 0, "zoom": 0, "bearing": 0, "pitch": 0, "projection": "EPSG:3857"},\n\t"layerTree": [],\n\t"terrain": {"source": "", "exaggeration": 0}\n}'
       });
 
       // Open the newly created file with the 'Editor'
diff --git a/python/jupytergis_lab/jupytergis_lab/notebook/gis_document.py b/python/jupytergis_lab/jupytergis_lab/notebook/gis_document.py
index 39b30b9a..9177a83f 100644
--- a/python/jupytergis_lab/jupytergis_lab/notebook/gis_document.py
+++ b/python/jupytergis_lab/jupytergis_lab/notebook/gis_document.py
@@ -46,6 +46,7 @@ def __init__(
         zoom: Optional[number] = None,
         bearing: Optional[number] = None,
         pitch: Optional[number] = None,
+        projection: Optional[string] = None
     ):
         comm_metadata = GISDocument._path_to_comm(path)
 
@@ -72,6 +73,8 @@ def __init__(
                 self._options["bearing"] = bearing
             if pitch is not None:
                 self._options["pitch"] = pitch
+            if projection is not None:
+                self._options['projection'] = projection
 
     @property
     def layers(self) -> Dict:
diff --git a/python/jupytergis_lab/src/index.ts b/python/jupytergis_lab/src/index.ts
index f4ee98a4..999b61df 100644
--- a/python/jupytergis_lab/src/index.ts
+++ b/python/jupytergis_lab/src/index.ts
@@ -100,11 +100,6 @@ const plugin: JupyterFrontEndPlugin<void> = {
       args: { from: 'contextMenu' }
     });
 
-    newSourceSubMenu.addItem({
-      command: CommandIDs.newVideoSource,
-      args: { from: 'contextMenu' }
-    });
-
     newSourceSubMenu.addItem({
       command: CommandIDs.newImageSource,
       args: { from: 'contextMenu' }
@@ -243,11 +238,6 @@ const plugin: JupyterFrontEndPlugin<void> = {
       args: { from: 'contextMenu' }
     });
 
-    newLayerSubMenu.addItem({
-      command: CommandIDs.newVideoLayer,
-      args: { from: 'contextMenu' }
-    });
-
     if (mainMenu) {
       populateMenus(mainMenu, isEnabled);
     }
diff --git a/ui-tests/tests/filters.spec.ts-snapshots/no-filter-linux.png b/ui-tests/tests/filters.spec.ts-snapshots/no-filter-linux.png
index 9c042c80..f7a7150c 100644
Binary files a/ui-tests/tests/filters.spec.ts-snapshots/no-filter-linux.png and b/ui-tests/tests/filters.spec.ts-snapshots/no-filter-linux.png differ
diff --git a/ui-tests/tests/filters.spec.ts-snapshots/one-filter-linux.png b/ui-tests/tests/filters.spec.ts-snapshots/one-filter-linux.png
index 1900a4f7..a9d3aa09 100644
Binary files a/ui-tests/tests/filters.spec.ts-snapshots/one-filter-linux.png and b/ui-tests/tests/filters.spec.ts-snapshots/one-filter-linux.png differ
diff --git a/ui-tests/tests/filters.spec.ts-snapshots/two-filter-linux.png b/ui-tests/tests/filters.spec.ts-snapshots/two-filter-linux.png
index f057c65f..e97d99b6 100644
Binary files a/ui-tests/tests/filters.spec.ts-snapshots/two-filter-linux.png and b/ui-tests/tests/filters.spec.ts-snapshots/two-filter-linux.png differ
diff --git a/ui-tests/tests/geojson-layers.spec.ts-snapshots/geoJSON-layer-linux.png b/ui-tests/tests/geojson-layers.spec.ts-snapshots/geoJSON-layer-linux.png
index 0b3a2e92..c2848939 100644
Binary files a/ui-tests/tests/geojson-layers.spec.ts-snapshots/geoJSON-layer-linux.png and b/ui-tests/tests/geojson-layers.spec.ts-snapshots/geoJSON-layer-linux.png differ
diff --git a/ui-tests/tests/gis-files/empty-france.jGIS b/ui-tests/tests/gis-files/empty-france.jGIS
index 4222db51..b2d62039 100644
--- a/ui-tests/tests/gis-files/empty-france.jGIS
+++ b/ui-tests/tests/gis-files/empty-france.jGIS
@@ -2,9 +2,11 @@
   "layers": {},
   "sources": {},
   "options": {
-    "zoom": 4.249992958062014,
-    "longitude": 2.3688006145074496,
-    "latitude": 43.62761397878984
+   "bearing": 0.0,
+    "latitude": 44.75868528451835,
+    "longitude": 3.12113766286636,
+    "projection": "EPSG:3857",
+    "zoom": 4.920920690595499
   },
   "layerTree": []
 }
\ No newline at end of file
diff --git a/ui-tests/tests/left-panel.spec.ts-snapshots/top-layer-hidden-linux.png b/ui-tests/tests/left-panel.spec.ts-snapshots/top-layer-hidden-linux.png
index b786e3f0..d80ddf89 100644
Binary files a/ui-tests/tests/left-panel.spec.ts-snapshots/top-layer-hidden-linux.png and b/ui-tests/tests/left-panel.spec.ts-snapshots/top-layer-hidden-linux.png differ
diff --git a/ui-tests/tests/left-panel.spec.ts-snapshots/top-layer-not-hidden-linux.png b/ui-tests/tests/left-panel.spec.ts-snapshots/top-layer-not-hidden-linux.png
index d63ad9fd..99201522 100644
Binary files a/ui-tests/tests/left-panel.spec.ts-snapshots/top-layer-not-hidden-linux.png and b/ui-tests/tests/left-panel.spec.ts-snapshots/top-layer-not-hidden-linux.png differ
diff --git a/ui-tests/tests/new-file.spec.ts b/ui-tests/tests/new-file.spec.ts
index 6ec5ac3e..218c0459 100644
--- a/ui-tests/tests/new-file.spec.ts
+++ b/ui-tests/tests/new-file.spec.ts
@@ -14,11 +14,11 @@ test.describe('#newFile', () => {
     const tab = page.getByLabel('notebook content');
     const sources = page.getByText('Sources', { exact: true });
     const layers = page.getByText('Layers', { exact: true });
-    const map = page.getByLabel('Map');
+    const map = page.locator('.ol-unselectable').first();
 
     await expect(tab).toBeVisible();
     await expect(sources).toBeVisible();
     await expect(layers).toBeVisible();
-    await expect(map).toBeVisible();
+    await expect(map).toBeAttached();
   });
 });
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-0-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-0-linux.png
index 5d83249c..c8cfe77f 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-0-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-0-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-1-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-1-linux.png
index fbd83b4d..4651bf94 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-1-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-1-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-2-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-2-linux.png
index 080a93b9..016f2981 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-2-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/dark-Notebook-ipynb-cell-2-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-0-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-0-linux.png
index 6635e387..265a0893 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-0-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-0-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-1-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-1-linux.png
index f3e11c20..74b405a9 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-1-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-1-linux.png differ
diff --git a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-2-linux.png b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-2-linux.png
index c419e3d4..bb71344b 100644
Binary files a/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-2-linux.png and b/ui-tests/tests/notebook.spec.ts-snapshots/light-Notebook-ipynb-cell-2-linux.png differ
diff --git a/ui-tests/tests/ui.spec.ts b/ui-tests/tests/ui.spec.ts
index aeaf6ecf..34c43ebb 100644
--- a/ui-tests/tests/ui.spec.ts
+++ b/ui-tests/tests/ui.spec.ts
@@ -63,7 +63,7 @@ test.describe('UI Test', () => {
         await page.waitForTimeout(1000);
         expect(errors).toBe(0);
 
-        await expect(page.locator('.maplibregl-canvas')).toBeVisible();
+        await expect(page.locator('.ol-unselectable').first()).toBeAttached();
       });
     }
   });
diff --git a/yarn.lock b/yarn.lock
index 3766f908..0ef5900d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -931,7 +931,7 @@ __metadata:
     ajv: ^8.14.0
     d3-color: ^3.1.0
     geojson-schema: ^1.0.5
-    maplibre-gl: ^4.4.1
+    ol-pmtiles: ^0.5.0
     pbf: ^4.0.1
     react: ^18.0.1
     rimraf: ^3.0.2
@@ -1057,8 +1057,10 @@ __metadata:
     eslint: ^8.36.0
     eslint-config-prettier: ^8.8.0
     eslint-plugin-prettier: ^5.0.1
+    geojson-vt: ^4.0.2
     lerna: ^7.0.0
     npm-run-all: ^4.1.5
+    ol: ^10.1.0
     pmtiles: ^3.0.7
     prettier: ^3.0.0
     rimraf: ^3.0.2
@@ -2443,32 +2445,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mapbox/geojson-rewind@npm:^0.5.2":
-  version: 0.5.2
-  resolution: "@mapbox/geojson-rewind@npm:0.5.2"
-  dependencies:
-    get-stream: ^6.0.1
-    minimist: ^1.2.6
-  bin:
-    geojson-rewind: geojson-rewind
-  checksum: 721470ab5e8912d69aef06fa4db891bade8b028d6708a35a982b1dfec0f40eb4ba05a749258867f5844cf4e776e53866813bf9c97e3289054b21cbf7840d3608
-  languageName: node
-  linkType: hard
-
-"@mapbox/jsonlint-lines-primitives@npm:^2.0.2, @mapbox/jsonlint-lines-primitives@npm:~2.0.2":
-  version: 2.0.2
-  resolution: "@mapbox/jsonlint-lines-primitives@npm:2.0.2"
-  checksum: 4eb31edd3ccff530f7b687ddc6d813d6e24fc66e9a563460882e7861b49f9331c5ded6fd7e927b37affbbd98f83bff1f7b916119044f1931df03c6ffedba2cfb
-  languageName: node
-  linkType: hard
-
-"@mapbox/point-geometry@npm:0.1.0, @mapbox/point-geometry@npm:^0.1.0, @mapbox/point-geometry@npm:~0.1.0":
-  version: 0.1.0
-  resolution: "@mapbox/point-geometry@npm:0.1.0"
-  checksum: ed41c1ce0140de81039424415d9a199abba72cdb2287314e1b8c3e295da3224f7e8c1b0ae99a9b097703e7abe63e1978a518e29896989cc8bba3d482360bc22f
-  languageName: node
-  linkType: hard
-
 "@mapbox/point-geometry@npm:~1.1.0":
   version: 1.1.0
   resolution: "@mapbox/point-geometry@npm:1.1.0"
@@ -2476,29 +2452,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mapbox/tiny-sdf@npm:^2.0.6":
-  version: 2.0.6
-  resolution: "@mapbox/tiny-sdf@npm:2.0.6"
-  checksum: efff5b5a7599aaa995e3c2fd8f2acd071226096458eebb694ffd7258043c46c52b1d09bb3c7343d2126eb257b3cd7d34e6dc7ccaaad7619e6f3e7dd76229a3cd
-  languageName: node
-  linkType: hard
-
-"@mapbox/unitbezier@npm:^0.0.1":
-  version: 0.0.1
-  resolution: "@mapbox/unitbezier@npm:0.0.1"
-  checksum: bf104c85dbff37bf47d3217d9457a3abbf23714f78fefadea64e56bdc7c538491b626166809ef28db134f09baccd6ca3df6988a6422df90d8d0c9a23b0686043
-  languageName: node
-  linkType: hard
-
-"@mapbox/vector-tile@npm:^1.3.1":
-  version: 1.3.1
-  resolution: "@mapbox/vector-tile@npm:1.3.1"
-  dependencies:
-    "@mapbox/point-geometry": ~0.1.0
-  checksum: 7093d4fa7d0382a0eae9d79526c5ad57c32099300b013d3afb4ab7499ac2a096f6f0a487cc81151ef81e0432a4b157513666b1592a4a4c1497341cde835551aa
-  languageName: node
-  linkType: hard
-
 "@mapbox/vector-tile@npm:^2.0.3":
   version: 2.0.3
   resolution: "@mapbox/vector-tile@npm:2.0.3"
@@ -2510,33 +2463,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mapbox/whoots-js@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "@mapbox/whoots-js@npm:3.1.0"
-  checksum: c1837c04effd205b207f441356d952eae7e8aad6c58f7c4900de50318c2147cf175936fc9434f20dfa409f9e6a78ec604d61e70c1c20572db0cc7655fbb65f50
-  languageName: node
-  linkType: hard
-
-"@maplibre/maplibre-gl-style-spec@npm:^20.3.0":
-  version: 20.3.0
-  resolution: "@maplibre/maplibre-gl-style-spec@npm:20.3.0"
-  dependencies:
-    "@mapbox/jsonlint-lines-primitives": ~2.0.2
-    "@mapbox/unitbezier": ^0.0.1
-    json-stringify-pretty-compact: ^4.0.0
-    minimist: ^1.2.8
-    quickselect: ^2.0.0
-    rw: ^1.3.3
-    sort-object: ^3.0.3
-    tinyqueue: ^2.0.3
-  bin:
-    gl-style-format: dist/gl-style-format.mjs
-    gl-style-migrate: dist/gl-style-migrate.mjs
-    gl-style-validate: dist/gl-style-validate.mjs
-  checksum: 2674af49727fc225aaae18ad1f5f121aaa7cae83ba397f44664765b94d7d87260145e9bae1eb8740103520025d563649a9ca588b028cc25b80ec8ea636b5a262
-  languageName: node
-  linkType: hard
-
 "@microsoft/fast-colors@npm:^5.3.1":
   version: 5.3.1
   resolution: "@microsoft/fast-colors@npm:5.3.1"
@@ -2996,6 +2922,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@petamoriken/float16@npm:^3.4.7":
+  version: 3.8.7
+  resolution: "@petamoriken/float16@npm:3.8.7"
+  checksum: 0e4c12e9d88aac08f125a2e804a28207bafd1ea0cdc2ddbde95cc9a3b19c155747f5001a5d5b42f9dca18f697df553d42680067817ce5dc4e3456f9c605a6d88
+  languageName: node
+  linkType: hard
+
 "@pkgjs/parseargs@npm:^0.11.0":
   version: 0.11.0
   resolution: "@pkgjs/parseargs@npm:0.11.0"
@@ -3209,15 +3142,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/geojson-vt@npm:3.2.5":
-  version: 3.2.5
-  resolution: "@types/geojson-vt@npm:3.2.5"
-  dependencies:
-    "@types/geojson": "*"
-  checksum: 3c77f52c4a82b8087d3e04b86a62027ad1dccf4d339df7c7c191cfcf288564e050b241664e072fc9fd3bb5b71e217dc0dcfb7c467bded4be303ab2b283612b72
-  languageName: node
-  linkType: hard
-
 "@types/geojson@npm:*, @types/geojson@npm:^7946.0.14":
   version: 7946.0.14
   resolution: "@types/geojson@npm:7946.0.14"
@@ -3251,13 +3175,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/junit-report-builder@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "@types/junit-report-builder@npm:3.0.2"
-  checksum: 7fead0b771f95cd8e607223ace2f43cc881b3e7944db405f903590b56379d14132032b7d89c9afa7dff266b95f516a476a39ad40f9200bfb61fc8ed7f6b1bff6
-  languageName: node
-  linkType: hard
-
 "@types/leaflet@npm:^1.9.8":
   version: 1.9.12
   resolution: "@types/leaflet@npm:1.9.12"
@@ -3274,24 +3191,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/mapbox__point-geometry@npm:*, @types/mapbox__point-geometry@npm:^0.1.4":
-  version: 0.1.4
-  resolution: "@types/mapbox__point-geometry@npm:0.1.4"
-  checksum: d315f3e396bebd40f1cab682595f3d1c5ac46c5ddb080cf65dfcd0401dc6a3f235a7ac9ada2d28e6c49485fa5f231458f29fee87069e42a137e20e5865801dd1
-  languageName: node
-  linkType: hard
-
-"@types/mapbox__vector-tile@npm:^1.3.4":
-  version: 1.3.4
-  resolution: "@types/mapbox__vector-tile@npm:1.3.4"
-  dependencies:
-    "@types/geojson": "*"
-    "@types/mapbox__point-geometry": "*"
-    "@types/pbf": "*"
-  checksum: 5715d9da88a5ecadb63e3ca4d52272ead2c1d63fcf616841932719788e458fc10dd9919ad01aa9c95b15c83e9074dae9ffc7193a7ae4ae7b8436d26630f0e269
-  languageName: node
-  linkType: hard
-
 "@types/minimatch@npm:^3.0.3":
   version: 3.0.5
   resolution: "@types/minimatch@npm:3.0.5"
@@ -3338,13 +3237,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/pbf@npm:*, @types/pbf@npm:^3.0.5":
-  version: 3.0.5
-  resolution: "@types/pbf@npm:3.0.5"
-  checksum: 9115eb3cc61e535748dd6de98c7a8bd64e02a4052646796013b075fed66fd52a3a2aaae6b75648e9c0361e8ed462a50549ca0af1015e2e48296cd8c31bb54577
-  languageName: node
-  linkType: hard
-
 "@types/prettier@npm:^2.1.5":
   version: 2.7.3
   resolution: "@types/prettier@npm:2.7.3"
@@ -3359,6 +3251,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/rbush@npm:^3.0.3":
+  version: 3.0.4
+  resolution: "@types/rbush@npm:3.0.4"
+  checksum: c5016b55cdefd2905248ae5b9fa304837f271a9cfd73ce23d8ab4f4717f74673f1fdd7d71136b78a80940fd3cffb5d5a58608269d8ee5abe0f4afbf339de1992
+  languageName: node
+  linkType: hard
+
 "@types/react-addons-linked-state-mixin@npm:^0.14.22":
   version: 0.14.27
   resolution: "@types/react-addons-linked-state-mixin@npm:0.14.27"
@@ -3400,15 +3299,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/supercluster@npm:^7.1.3":
-  version: 7.1.3
-  resolution: "@types/supercluster@npm:7.1.3"
-  dependencies:
-    "@types/geojson": "*"
-  checksum: 724188fb6ebdf0835821559da5480e5951c3e51afa86fcf83f5bf6984b89652f947081a3f6835cb082a6865fe5f1f8f667e92346f237d3518c2159121bb7c5cc
-  languageName: node
-  linkType: hard
-
 "@types/three@npm:^0.135.0":
   version: 0.135.0
   resolution: "@types/three@npm:0.135.0"
@@ -4085,13 +3975,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arr-union@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "arr-union@npm:3.1.0"
-  checksum: b5b0408c6eb7591143c394f3be082fee690ddd21f0fdde0a0a01106799e847f67fcae1b7e56b0a0c173290e29c6aca9562e82b300708a268bc8f88f3d6613cb9
-  languageName: node
-  linkType: hard
-
 "array-buffer-byte-length@npm:^1.0.1":
   version: 1.0.1
   resolution: "array-buffer-byte-length@npm:1.0.1"
@@ -4160,13 +4043,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"assign-symbols@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "assign-symbols@npm:1.0.0"
-  checksum: c0eb895911d05b6b2d245154f70461c5e42c107457972e5ebba38d48967870dee53bcdf6c7047990586daa80fab8dab3cc6300800fbd47b454247fdedd859a2c
-  languageName: node
-  linkType: hard
-
 "async-limiter@npm:~1.0.0":
   version: 1.0.1
   resolution: "async-limiter@npm:1.0.1"
@@ -4360,25 +4236,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bytewise-core@npm:^1.2.2":
-  version: 1.2.3
-  resolution: "bytewise-core@npm:1.2.3"
-  dependencies:
-    typewise-core: ^1.2
-  checksum: e0d28fb7ff5bb6fd9320eef31c6b37e98da3b9a24d9893e2c17e0ee544457e0c76c2d3fc642c99d82daa0f18dcd49e7dce8dcc338711200e9ced79107cb78e8e
-  languageName: node
-  linkType: hard
-
-"bytewise@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "bytewise@npm:1.1.0"
-  dependencies:
-    bytewise-core: ^1.2.2
-    typewise: ^1.0.3
-  checksum: 20d7387ecf8c29adc4740e626fb02eaa27f34ae4c5ca881657d403e792730c0625ba4fed824462b3ddb7d3ebe41b7abbfe24f1cd3bf07cecc5a631f154d2d8d2
-  languageName: node
-  linkType: hard
-
 "cacache@npm:^16.1.0":
   version: 16.1.3
   resolution: "cacache@npm:16.1.3"
@@ -4706,6 +4563,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"color-name@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "color-name@npm:2.0.0"
+  checksum: 10a1addae41de2987d6b90dbd3cfade266c2e6f680ce21749911df4493b4fae07654862c6b5358bdd13e155461acb4eedaa5e0ba172bf13542cdcca10866cf2b
+  languageName: node
+  linkType: hard
+
 "color-name@npm:~1.1.4":
   version: 1.1.4
   resolution: "color-name@npm:1.1.4"
@@ -4713,6 +4577,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"color-parse@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "color-parse@npm:2.0.2"
+  dependencies:
+    color-name: ^2.0.0
+  checksum: 4e9446a9b1320da14e9b552b9be767b4fa78c18fbadf8a5c37e83f7fc9687723e2083cf2a17cecc818dcc9d64771f74db7815f218251e18535d1e8f52951c841
+  languageName: node
+  linkType: hard
+
+"color-rgba@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "color-rgba@npm:3.0.0"
+  dependencies:
+    color-parse: ^2.0.0
+    color-space: ^2.0.0
+  checksum: 003b5fa70a77f46df3753e4b941154986163ccabbd9a8a80b2ca6cc4a0c9e505f3d4909c46a0b085e095d19b80297cf1c02dfefa33666b9ea1661ff52b3597bc
+  languageName: node
+  linkType: hard
+
+"color-space@npm:^2.0.0, color-space@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "color-space@npm:2.0.1"
+  checksum: 98f8f6acc716d2332705ef6a98876b47e8e39094256b83eec1df17246a5b5c37d107ae682e87d96488b06da12df3595ed5ad4f0e354a45571e23fb2196e4c6e7
+  languageName: node
+  linkType: hard
+
 "color-support@npm:^1.1.3":
   version: 1.1.3
   resolution: "color-support@npm:1.1.3"
@@ -5407,10 +5297,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"earcut@npm:^2.2.4":
-  version: 2.2.4
-  resolution: "earcut@npm:2.2.4"
-  checksum: aea0466cb2f24e0c3c57148d8d28ac9846f53c4f43ee66780826474303ac851b305ef988152d0bdeb31e8f7ca939dc0df737e7505cfb1c1bdf2ff9d7f9ea2faa
+"earcut@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "earcut@npm:3.0.0"
+  checksum: 1b96b4f9ca0c35b8e2428ce0fbd79d520f552b53c3b030c10ad27dac0852067d30b373e62c7ee373a8faa38073eb46ef49bcc650427165e557d5e61bb802339e
   languageName: node
   linkType: hard
 
@@ -6001,25 +5891,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"extend-shallow@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "extend-shallow@npm:2.0.1"
-  dependencies:
-    is-extendable: ^0.1.0
-  checksum: 8fb58d9d7a511f4baf78d383e637bd7d2e80843bd9cd0853649108ea835208fb614da502a553acc30208e1325240bb7cc4a68473021612496bb89725483656d8
-  languageName: node
-  linkType: hard
-
-"extend-shallow@npm:^3.0.0":
-  version: 3.0.2
-  resolution: "extend-shallow@npm:3.0.2"
-  dependencies:
-    assign-symbols: ^1.0.0
-    is-extendable: ^1.0.1
-  checksum: a920b0cd5838a9995ace31dfd11ab5e79bf6e295aa566910ce53dff19f4b1c0fda2ef21f26b28586c7a2450ca2b42d97bd8c0f5cec9351a819222bf861e02461
-  languageName: node
-  linkType: hard
-
 "external-editor@npm:^3.0.3":
   version: 3.1.0
   resolution: "external-editor@npm:3.1.0"
@@ -6344,10 +6215,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"geojson-vt@npm:^3.2.1":
-  version: 3.2.1
-  resolution: "geojson-vt@npm:3.2.1"
-  checksum: 7c7973cfaf9e3bb1c1dc9578ec00e602efb6f8d57f4dd7f6b28baeb7825bcaeb1684018b850211e333ab4b90a4a89a02ff7793732c505d67101ccbc38e307e02
+"geojson-vt@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "geojson-vt@npm:4.0.2"
+  checksum: 7de5cc7a574154c908c848cb21f92daa34293cc46cd87baf6de7461554886f5b59683f7be4422339ff2d2bbedad57b88143d03f045c4859dd416e0cf502a4463
+  languageName: node
+  linkType: hard
+
+"geotiff@npm:^2.0.7":
+  version: 2.1.3
+  resolution: "geotiff@npm:2.1.3"
+  dependencies:
+    "@petamoriken/float16": ^3.4.7
+    lerc: ^3.0.0
+    pako: ^2.0.4
+    parse-headers: ^2.0.2
+    quick-lru: ^6.1.1
+    web-worker: ^1.2.0
+    xml-utils: ^1.0.2
+    zstddec: ^0.1.0
+  checksum: e966c735339fe121d7cf22fad71c68dbe5f6c88c252baed40bc596c662829bdc6df1c2463855c2dfc5453d191425f6151945b2ad063837cb82a99fe3eb482b50
   languageName: node
   linkType: hard
 
@@ -6406,7 +6293,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-stream@npm:^6.0.0, get-stream@npm:^6.0.1":
+"get-stream@npm:^6.0.0":
   version: 6.0.1
   resolution: "get-stream@npm:6.0.1"
   checksum: e04ecece32c92eebf5b8c940f51468cd53554dcbb0ea725b2748be583c9523d00128137966afce410b9b051eb2ef16d657cd2b120ca8edafcf5a65e81af63cad
@@ -6424,13 +6311,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-value@npm:^2.0.2, get-value@npm:^2.0.6":
-  version: 2.0.6
-  resolution: "get-value@npm:2.0.6"
-  checksum: 5c3b99cb5398ea8016bf46ff17afc5d1d286874d2ad38ca5edb6e87d75c0965b0094cb9a9dddef2c59c23d250702323539a7fbdd870620db38c7e7d7ec87c1eb
-  languageName: node
-  linkType: hard
-
 "git-raw-commits@npm:^3.0.0":
   version: 3.0.0
   resolution: "git-raw-commits@npm:3.0.0"
@@ -6494,13 +6374,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gl-matrix@npm:^3.4.3":
-  version: 3.4.3
-  resolution: "gl-matrix@npm:3.4.3"
-  checksum: c47830ba727f3d0fab635c48135af96aef66274079a3e0afd6f68b68c98eae9fc1bcfdc7312fe2301e4fd22dd24c5e0f1b5d025960a208e50d07101ed8d940f9
-  languageName: node
-  linkType: hard
-
 "glob-parent@npm:5.1.2, glob-parent@npm:^5.1.2":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"
@@ -6619,17 +6492,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"global-prefix@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "global-prefix@npm:3.0.0"
-  dependencies:
-    ini: ^1.3.5
-    kind-of: ^6.0.2
-    which: ^1.3.1
-  checksum: 8a82fc1d6f22c45484a4e34656cc91bf021a03e03213b0035098d605bfc612d7141f1e14a21097e8a0413b4884afd5b260df0b6a25605ce9d722e11f1df2881d
-  languageName: node
-  linkType: hard
-
 "globals@npm:^11.1.0":
   version: 11.12.0
   resolution: "globals@npm:11.12.0"
@@ -6961,7 +6823,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ieee754@npm:^1.1.12, ieee754@npm:^1.1.13":
+"ieee754@npm:^1.1.13":
   version: 1.2.1
   resolution: "ieee754@npm:1.2.1"
   checksum: 5144c0c9815e54ada181d80a0b810221a253562422e7c6c3a60b1901154184f49326ec239d618c416c1c5945a2e197107aee8d986a3dd836b53dffefd99b5e7e
@@ -7060,7 +6922,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ini@npm:^1.3.2, ini@npm:^1.3.5, ini@npm:^1.3.8":
+"ini@npm:^1.3.2, ini@npm:^1.3.8":
   version: 1.3.8
   resolution: "ini@npm:1.3.8"
   checksum: dfd98b0ca3a4fc1e323e38a6c8eb8936e31a97a918d3b377649ea15bdb15d481207a0dda1021efbd86b464cae29a0d33c1d7dcaf6c5672bee17fa849bc50a1b3
@@ -7233,22 +7095,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-extendable@npm:^0.1.0, is-extendable@npm:^0.1.1":
-  version: 0.1.1
-  resolution: "is-extendable@npm:0.1.1"
-  checksum: 3875571d20a7563772ecc7a5f36cb03167e9be31ad259041b4a8f73f33f885441f778cee1f1fe0085eb4bc71679b9d8c923690003a36a6a5fdf8023e6e3f0672
-  languageName: node
-  linkType: hard
-
-"is-extendable@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "is-extendable@npm:1.0.1"
-  dependencies:
-    is-plain-object: ^2.0.4
-  checksum: db07bc1e9de6170de70eff7001943691f05b9d1547730b11be01c0ebfe67362912ba743cf4be6fd20a5e03b4180c685dad80b7c509fe717037e3eee30ad8e84f
-  languageName: node
-  linkType: hard
-
 "is-extglob@npm:^2.1.1":
   version: 2.1.1
   resolution: "is-extglob@npm:2.1.1"
@@ -7339,7 +7185,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-plain-object@npm:^2.0.3, is-plain-object@npm:^2.0.4":
+"is-plain-object@npm:^2.0.4":
   version: 2.0.4
   resolution: "is-plain-object@npm:2.0.4"
   dependencies:
@@ -7731,13 +7577,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json-stringify-pretty-compact@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "json-stringify-pretty-compact@npm:4.0.0"
-  checksum: a10d5c423e467872994a49c5c1b56b073f277ce02d899cf567fc625f3783b89406bee6408bfb3b4bdeeff509b6a562f5259227e26754a6186f721809ca895f0c
-  languageName: node
-  linkType: hard
-
 "json-stringify-safe@npm:^5.0.1":
   version: 5.0.1
   resolution: "json-stringify-safe@npm:5.0.1"
@@ -7788,13 +7627,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kdbush@npm:^4.0.2":
-  version: 4.0.2
-  resolution: "kdbush@npm:4.0.2"
-  checksum: 6782ef2cdaec9322376b9955a16b0163beda0cefa2f87da76e8970ade2572d8b63bec915347aaeac609484b0c6e84d7b591f229ef353b68b460238095bacde2d
-  languageName: node
-  linkType: hard
-
 "keyv@npm:^4.5.3":
   version: 4.5.4
   resolution: "keyv@npm:4.5.4"
@@ -7811,6 +7643,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lerc@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "lerc@npm:3.0.0"
+  checksum: 637699a1359cd80e581bac4bd66dd7ac09e6681fe97346c97939abdbc0170deac1b79ea00a17e334ef5d9d510973ca382abb43c39c8294788dd8391daeb75c32
+  languageName: node
+  linkType: hard
+
 "lerna@npm:^7.0.0":
   version: 7.4.2
   resolution: "lerna@npm:7.4.2"
@@ -8354,41 +8193,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"maplibre-gl@npm:^4.4.1":
-  version: 4.4.1
-  resolution: "maplibre-gl@npm:4.4.1"
-  dependencies:
-    "@mapbox/geojson-rewind": ^0.5.2
-    "@mapbox/jsonlint-lines-primitives": ^2.0.2
-    "@mapbox/point-geometry": ^0.1.0
-    "@mapbox/tiny-sdf": ^2.0.6
-    "@mapbox/unitbezier": ^0.0.1
-    "@mapbox/vector-tile": ^1.3.1
-    "@mapbox/whoots-js": ^3.1.0
-    "@maplibre/maplibre-gl-style-spec": ^20.3.0
-    "@types/geojson": ^7946.0.14
-    "@types/geojson-vt": 3.2.5
-    "@types/junit-report-builder": ^3.0.2
-    "@types/mapbox__point-geometry": ^0.1.4
-    "@types/mapbox__vector-tile": ^1.3.4
-    "@types/pbf": ^3.0.5
-    "@types/supercluster": ^7.1.3
-    earcut: ^2.2.4
-    geojson-vt: ^3.2.1
-    gl-matrix: ^3.4.3
-    global-prefix: ^3.0.0
-    kdbush: ^4.0.2
-    murmurhash-js: ^1.0.0
-    pbf: ^3.2.1
-    potpack: ^2.0.0
-    quickselect: ^2.0.0
-    supercluster: ^8.0.1
-    tinyqueue: ^2.0.3
-    vt-pbf: ^3.1.3
-  checksum: 52f7ad6edb1ee932b8d946bb35f9d293a692317ae51321bc22ff865a7f1f58abcf5e4d8f30607c61d674bda8fe741022fa9d81a69c7e26e2385176bc2eb2a283
-  languageName: node
-  linkType: hard
-
 "markdown-to-jsx@npm:^7.4.1":
   version: 7.4.7
   resolution: "markdown-to-jsx@npm:7.4.7"
@@ -8587,7 +8391,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.2.0, minimist@npm:^1.2.5, minimist@npm:^1.2.6, minimist@npm:^1.2.8, minimist@npm:~1.2.0":
+"minimist@npm:^1.2.0, minimist@npm:^1.2.5, minimist@npm:^1.2.6, minimist@npm:~1.2.0":
   version: 1.2.8
   resolution: "minimist@npm:1.2.8"
   checksum: 75a6d645fb122dad29c06a7597bddea977258957ed88d7a6df59b5cd3fe4a527e253e9bbf2e783e4b73657f9098b96a5fe96ab8a113655d4109108577ecf85b0
@@ -8769,13 +8573,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"murmurhash-js@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "murmurhash-js@npm:1.0.0"
-  checksum: 083cea92a11bc9eb25be1446fc92eded3f49731bc1ad34fa8023afd68c234d1dd59458d70eb20e667b1383bedeeb8dfb1a16c89913b6ffe3584fd22fb598739d
-  languageName: node
-  linkType: hard
-
 "mute-stream@npm:0.0.8":
   version: 0.0.8
   resolution: "mute-stream@npm:0.0.8"
@@ -9338,6 +9135,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ol-pmtiles@npm:^0.5.0":
+  version: 0.5.0
+  resolution: "ol-pmtiles@npm:0.5.0"
+  dependencies:
+    pmtiles: ^3.0.4
+  peerDependencies:
+    ol: ">=9.0.0"
+  checksum: 5ba9eaeaf4ebe463eb2b6b3caf9929e9be398a80bde409fe9efb01767e2008874b5605a997d2f3d6222e739d85efd5f6ca455447be5426159dcea74be9fea59e
+  languageName: node
+  linkType: hard
+
+"ol@npm:^10.1.0":
+  version: 10.1.0
+  resolution: "ol@npm:10.1.0"
+  dependencies:
+    "@types/rbush": ^3.0.3
+    color-rgba: ^3.0.0
+    color-space: ^2.0.1
+    earcut: ^3.0.0
+    geotiff: ^2.0.7
+    pbf: 4.0.1
+    rbush: ^4.0.0
+  checksum: 01f82abd727cedebbfb8287d9d4d20d531914f74d670850ff40aa12421053f5086059853fc73538b517b8481dd25282301e5304ad41c4a9d9bbfe985e5365fac
+  languageName: node
+  linkType: hard
+
 "once@npm:^1.3.0, once@npm:^1.4.0":
   version: 1.4.0
   resolution: "once@npm:1.4.0"
@@ -9566,6 +9389,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pako@npm:^2.0.4":
+  version: 2.1.0
+  resolution: "pako@npm:2.1.0"
+  checksum: 71666548644c9a4d056bcaba849ca6fd7242c6cf1af0646d3346f3079a1c7f4a66ffec6f7369ee0dc88f61926c10d6ab05da3e1fca44b83551839e89edd75a3e
+  languageName: node
+  linkType: hard
+
 "parent-module@npm:^1.0.0":
   version: 1.0.1
   resolution: "parent-module@npm:1.0.1"
@@ -9575,6 +9405,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse-headers@npm:^2.0.2":
+  version: 2.0.5
+  resolution: "parse-headers@npm:2.0.5"
+  checksum: 3e97f01e4c7f960bfbfd0ee489f0bd8d3c72b6c814f1f79b66abec2cca8eaf8e4ecd89deba0b6e61266469aed87350bc932001181c01ff8c29a59e696abe251f
+  languageName: node
+  linkType: hard
+
 "parse-json@npm:^4.0.0":
   version: 4.0.0
   resolution: "parse-json@npm:4.0.0"
@@ -9704,19 +9541,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pbf@npm:^3.2.1":
-  version: 3.2.1
-  resolution: "pbf@npm:3.2.1"
-  dependencies:
-    ieee754: ^1.1.12
-    resolve-protobuf-schema: ^2.1.0
-  bin:
-    pbf: bin/pbf
-  checksum: 8033f5e21fffdc485e85d50bbff07ab3313c6841c3630a4ba9bc9e82d2e9005ab92000a1a90cb911223caa44316293e367bab607dd8110d5c771e6c8aaad63e1
-  languageName: node
-  linkType: hard
-
-"pbf@npm:^4.0.1":
+"pbf@npm:4.0.1, pbf@npm:^4.0.1":
   version: 4.0.1
   resolution: "pbf@npm:4.0.1"
   dependencies:
@@ -9787,7 +9612,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pmtiles@npm:^3.0.7":
+"pmtiles@npm:^3.0.4, pmtiles@npm:^3.0.7":
   version: 3.0.7
   resolution: "pmtiles@npm:3.0.7"
   dependencies:
@@ -9883,13 +9708,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"potpack@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "potpack@npm:2.0.0"
-  checksum: 6dd41692349936b436c29c28cf9ff1268c03ed6ec96c4384b2d9eb95e58e422fab75d428648f475507dd167934984d1002df2010b83e5747b5c358bea371e8f7
-  languageName: node
-  linkType: hard
-
 "prelude-ls@npm:^1.2.1":
   version: 1.2.1
   resolution: "prelude-ls@npm:1.2.1"
@@ -10066,10 +9884,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"quickselect@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "quickselect@npm:2.0.0"
-  checksum: ed2e78431050d223fb75da20ee98011aef1a03f7cb04e1a32ee893402e640be3cfb76d72e9dbe01edf3bb457ff6a62e5c2d85748424d1aa531f6ba50daef098c
+"quick-lru@npm:^6.1.1":
+  version: 6.1.2
+  resolution: "quick-lru@npm:6.1.2"
+  checksum: 0491a24dcd39b8a325e9d3ae719fad7690a1da7a0dbfa8f16613663dc7d262d08b565005ce16a04497ed4700f1f477b8e06cd46e10a7a112a481a18d056c38f7
+  languageName: node
+  linkType: hard
+
+"quickselect@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "quickselect@npm:3.0.0"
+  checksum: 8f72bedb8bb14bce5c3767c55f567bc296fa3ca9d98ba385e3867e434463bc633feee1eddf3dfec17914b7e88feeb08c7b313cf47114a8ff11bf964f77f51cfc
   languageName: node
   linkType: hard
 
@@ -10082,6 +9907,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rbush@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "rbush@npm:4.0.1"
+  dependencies:
+    quickselect: ^3.0.0
+  checksum: f221cfb2c6ed437f5914bf46b791ebd83cc4c51dff8c39a5cdc5a0d4b4cbc49353b66d185279707c9a7cc55a8c6a50b7dc0a348175db6ad63a86caa8a627c781
+  languageName: node
+  linkType: hard
+
 "react-codemirror2@npm:^7.2.1":
   version: 7.3.0
   resolution: "react-codemirror2@npm:7.3.0"
@@ -10505,13 +10339,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rw@npm:^1.3.3":
-  version: 1.3.3
-  resolution: "rw@npm:1.3.3"
-  checksum: c20d82421f5a71c86a13f76121b751553a99cd4a70ea27db86f9b23f33db941f3f06019c30f60d50c356d0bd674c8e74764ac146ea55e217c091bde6fba82aa3
-  languageName: node
-  linkType: hard
-
 "rxjs@npm:^7.5.5":
   version: 7.8.1
   resolution: "rxjs@npm:7.8.1"
@@ -10703,18 +10530,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"set-value@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "set-value@npm:2.0.1"
-  dependencies:
-    extend-shallow: ^2.0.1
-    is-extendable: ^0.1.1
-    is-plain-object: ^2.0.3
-    split-string: ^3.0.1
-  checksum: 09a4bc72c94641aeae950eb60dc2755943b863780fcc32e441eda964b64df5e3f50603d5ebdd33394ede722528bd55ed43aae26e9df469b4d32e2292b427b601
-  languageName: node
-  linkType: hard
-
 "shallow-clone@npm:^3.0.0":
   version: 3.0.1
   resolution: "shallow-clone@npm:3.0.1"
@@ -10875,20 +10690,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sort-asc@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "sort-asc@npm:0.2.0"
-  checksum: b3610ab695dc8b2cba1c3e6ead06ce97a41f013ed0a002ff7a0d2a39ca297fd2f58c92d3de67dda3a9313ecb1073de4eacc30da3a740ff8d57eb668c9bb151bd
-  languageName: node
-  linkType: hard
-
-"sort-desc@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "sort-desc@npm:0.2.0"
-  checksum: fb2c02ea38815c79c0127d014f18926a473a1988c01f4c00de467584b99fc7e9f6e4f61c8386f4c2ac3501c60842931c5a499330b3086be6d8cff4d0b8602bed
-  languageName: node
-  linkType: hard
-
 "sort-keys@npm:^2.0.0":
   version: 2.0.0
   resolution: "sort-keys@npm:2.0.0"
@@ -10898,20 +10699,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sort-object@npm:^3.0.3":
-  version: 3.0.3
-  resolution: "sort-object@npm:3.0.3"
-  dependencies:
-    bytewise: ^1.1.0
-    get-value: ^2.0.2
-    is-extendable: ^0.1.1
-    sort-asc: ^0.2.0
-    sort-desc: ^0.2.0
-    union-value: ^1.0.1
-  checksum: 381a6b6fe2309d400bd6ae3a8d0188b2b3b3855345d16d953b4bb5875d28fd5512501c85bd4eb951543056cd3095ff8e197ab3efc11389dcfa0e3334bf4a23a5
-  languageName: node
-  linkType: hard
-
 "source-list-map@npm:^2.0.0":
   version: 2.0.1
   resolution: "source-list-map@npm:2.0.1"
@@ -11012,15 +10799,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"split-string@npm:^3.0.1":
-  version: 3.1.0
-  resolution: "split-string@npm:3.1.0"
-  dependencies:
-    extend-shallow: ^3.0.0
-  checksum: ae5af5c91bdc3633628821bde92fdf9492fa0e8a63cf6a0376ed6afde93c701422a1610916f59be61972717070119e848d10dfbbd5024b7729d6a71972d2a84c
-  languageName: node
-  linkType: hard
-
 "split2@npm:^3.2.2":
   version: 3.2.2
   resolution: "split2@npm:3.2.2"
@@ -11263,15 +11041,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supercluster@npm:^8.0.1":
-  version: 8.0.1
-  resolution: "supercluster@npm:8.0.1"
-  dependencies:
-    kdbush: ^4.0.2
-  checksum: 39d141f768a511efa53260252f9dab9a2ce0228b334e55482c8d3019e151932f05e1a9a0252d681737651b13c741c665542a6ddb40ec27de96159ea7ad41f7f4
-  languageName: node
-  linkType: hard
-
 "supports-color@npm:^5.3.0, supports-color@npm:^5.5.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
@@ -11489,13 +11258,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinyqueue@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "tinyqueue@npm:2.0.3"
-  checksum: 0b6bda46b680dca072f84aef1acd22a7085a2ff2aa8e222bb41045c61a056943805056d77d7f976587ed6a0597872beb5c416043f65f0314304432d6c178dd20
-  languageName: node
-  linkType: hard
-
 "tmp@npm:^0.0.33":
   version: 0.0.33
   resolution: "tmp@npm:0.0.33"
@@ -11782,22 +11544,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typewise-core@npm:^1.2, typewise-core@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "typewise-core@npm:1.2.0"
-  checksum: c21e83544546d1aba2f17377c25ae0eb571c2153b2e3705932515bef103dbe43e05d2286f238ad139341b1000da40583115a44cb5e69a2ef408572b13dab844b
-  languageName: node
-  linkType: hard
-
-"typewise@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "typewise@npm:1.0.3"
-  dependencies:
-    typewise-core: ^1.2.0
-  checksum: eb3452b1387df8bf8e3b620720d240425a50ce402d7c064c21ac4b5d88c551ee4d1f26cd649b8a17a6d06f7a3675733de841723f8e06bb3edabfeacc4924af4a
-  languageName: node
-  linkType: hard
-
 "uglify-js@npm:^3.1.4":
   version: 3.17.4
   resolution: "uglify-js@npm:3.17.4"
@@ -11833,18 +11579,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"union-value@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "union-value@npm:1.0.1"
-  dependencies:
-    arr-union: ^3.1.0
-    get-value: ^2.0.6
-    is-extendable: ^0.1.1
-    set-value: ^2.0.1
-  checksum: a3464097d3f27f6aa90cf103ed9387541bccfc006517559381a10e0dffa62f465a9d9a09c9b9c3d26d0f4cbe61d4d010e2fbd710fd4bf1267a768ba8a774b0ba
-  languageName: node
-  linkType: hard
-
 "unique-filename@npm:^2.0.0":
   version: 2.0.1
   resolution: "unique-filename@npm:2.0.1"
@@ -12102,17 +11836,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vt-pbf@npm:^3.1.3":
-  version: 3.1.3
-  resolution: "vt-pbf@npm:3.1.3"
-  dependencies:
-    "@mapbox/point-geometry": 0.1.0
-    "@mapbox/vector-tile": ^1.3.1
-    pbf: ^3.2.1
-  checksum: 83375b7ffe2e92ab2a4c9924cf2cd80e311b38e9e616c244656140a76090c037c55a1b1379b234cb6567444f32e9cb40fd2c5b6e555ffff4330feba56250f90c
-  languageName: node
-  linkType: hard
-
 "w3c-keyname@npm:^2.2.4":
   version: 2.2.8
   resolution: "w3c-keyname@npm:2.2.8"
@@ -12148,6 +11871,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"web-worker@npm:^1.2.0":
+  version: 1.3.0
+  resolution: "web-worker@npm:1.3.0"
+  checksum: ed1f869aefd1d81a43d0fbfe7b315a65beb6d7d2486b378c436a7047eed4216be34b2e6afca738b6fa95d016326b765f5f816355db33267dbf43b2b8a1837c0c
+  languageName: node
+  linkType: hard
+
 "webidl-conversions@npm:^3.0.0":
   version: 3.0.1
   resolution: "webidl-conversions@npm:3.0.1"
@@ -12313,7 +12043,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which@npm:^1.2.9, which@npm:^1.3.1":
+"which@npm:^1.2.9":
   version: 1.3.1
   resolution: "which@npm:1.3.1"
   dependencies:
@@ -12516,6 +12246,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"xml-utils@npm:^1.0.2":
+  version: 1.10.1
+  resolution: "xml-utils@npm:1.10.1"
+  checksum: 60a312734f93a98b9c6cc97a9f7d2a14b315ad1528e8c55f44c2d7d0af6eee61255d0aafd6589b41b72fe6e9f6e9727a51c4ab42cfa24f8616724c741cc151ef
+  languageName: node
+  linkType: hard
+
 "xtend@npm:^4.0.2, xtend@npm:~4.0.0, xtend@npm:~4.0.1":
   version: 4.0.2
   resolution: "xtend@npm:4.0.2"
@@ -12684,3 +12421,10 @@ __metadata:
   checksum: f77b3d8d00310def622123df93d4ee654fc6a0096182af8bd60679ddcdfb3474c56c6c7190817c84a2785648cdee9d721c0154eb45698c62176c322fb46fc700
   languageName: node
   linkType: hard
+
+"zstddec@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "zstddec@npm:0.1.0"
+  checksum: 76113b43ec4031f9a120285c830e43bafae4c25c0a72f7a9e228af815c3e52432a8414c5d4eb6cfd3282443a4a3d2bc18b445dd702e770b1e330b6e39081750f
+  languageName: node
+  linkType: hard