Switch to maplibre + some tweaks

geojupyter · Jun 19, 2024 · 9c4ca6e · 9c4ca6e
1 parent 4752863
commit 9c4ca6e
Show file tree

Hide file tree

Showing 6 changed files with 423 additions and 162 deletions.
diff --git a/packages/base/package.json b/packages/base/package.json
@@ -59,7 +59,7 @@
     "@types/d3-color": "^3.1.0",
     "@types/three": "^0.134.0",
     "d3-color": "^3.1.0",
-    "ol": "^9.2.4",
+    "maplibre-gl": "^4.4.1",
     "react": "^18.0.1",
     "styled-components": "^5.3.6",
     "three": "^0.135.0",

diff --git a/packages/base/src/commands.ts b/packages/base/src/commands.ts
@@ -29,8 +29,8 @@ const LAYERS = {
       return {
         name: newName('TileLayer', model),
         url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
-        maxZoom: 10,
-        minZoom: 1
+        maxZoom: 24,
+        minZoom: 0
       };
     }
   },

diff --git a/packages/base/src/mainview/mainview.tsx b/packages/base/src/mainview/mainview.tsx
@@ -11,9 +11,9 @@ import { User } from '@jupyterlab/services';
 import { JSONValue } from '@lumino/coreutils';
 import * as React from 'react';
 
-import * as OpenLayer from './ol';
+import * as MapLibre from 'maplibre-gl';
 
-import 'ol/ol.css';
+// import 'maplibre-gl.css';
 
 import { isLightTheme } from '../tools';
 import { MainViewModel } from './mainviewmodel';
@@ -93,22 +93,11 @@ export class MainView extends React.Component<IProps, IStates> {
 
   generateScene = (): void => {
     if (this.divRef.current) {
-      this._openLayersMap = new OpenLayer.Map({
-        target: this.divRef.current,
-        // layers: [
-        //   new OpenLayer.TileLayer({
-        //     source: new OpenLayer.XYZ({
-        //       url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
-        //     })
-        //   })
-        // ],
-        view: new OpenLayer.View({
-          center: [0, 0],
-          zoom: 2
-        })
+      this._Map = new MapLibre.Map({
+        container: this.divRef.current
       });
 
-      console.log('created map', this._openLayersMap);
+      console.log('created map', this._Map);
 
       this.setState(old => ({ ...old, loading: false }));
     }
@@ -148,12 +137,18 @@ export class MainView extends React.Component<IProps, IStates> {
       switch(layer.layerType) {
         case 'TileLayer':
           const tileLayerParameters = layer.parameters as ITileLayer;
-          const tileLayer = new OpenLayer.TileLayer({
-            source: new OpenLayer.XYZ({
-              url: tileLayerParameters.url
-            })
+          this._Map.addSource('raster-source', {
+            'type': 'raster',
+            'tiles': [tileLayerParameters.url],
+            'tileSize': 256,
+          });
+          this._Map.addLayer({
+            id: 'simple-tiles',
+            type: 'raster',
+            source: 'raster-source',
+            minzoom: tileLayerParameters.minZoom,
+            maxzoom: tileLayerParameters.maxZoom,
           });
-          this._openLayersMap.addLayer(tileLayer);
       }
     }
   }
@@ -195,7 +190,7 @@ export class MainView extends React.Component<IProps, IStates> {
 
   private divRef = React.createRef<HTMLDivElement>(); // Reference of render div
 
-  private _openLayersMap: OpenLayer.Map;
+  private _Map: MapLibre.Map;
 
   private _model: IJupyterGISModel;
   private _mainViewModel: MainViewModel;

diff --git a/packages/base/src/mainview/ol.ts b/packages/base/src/mainview/ol.ts
diff --git a/packages/schema/src/schema/tilelayer.json b/packages/schema/src/schema/tilelayer.json
@@ -11,12 +11,14 @@
       },
       "maxZoom": {
         "type": "number",
-        "exclusiveMinimum": 0,
+        "minimum": 0,
+        "maximum": 24,
         "description": "The maximum zoom level for the tile layer"
       },
       "minZoom": {
         "type": "number",
-        "exclusiveMinimum": 0,
+        "minimum": 0,
+        "maximum": 24,
         "description": "The minimum zoom level for the tile layer"
       }
     }