feat: use globe view

package.json

@@ -35,7 +35,7 @@
     "@tmcw/togeojson": "~5.5.0",
     "@turf/centroid": "6.5.0",
     "@turf/helpers": "6.5.0",
-    "@types/mapbox-gl": "^1.6.3",
+    "@types/mapbox-gl": "^2.7.15",
     "@types/tinycolor2": "^1.4.0",
     "arlas-d3": "~11.1.0",
     "core-js": "~3.26.1",
@@ -44,7 +44,7 @@
     "iv-viewer": "~2.0.1",
     "jsts": "2.1.0",
     "jszip": "^3.2.1",
-    "mapbox-gl": "^1.6.1",
+    "mapbox-gl": "^2.15.0",
     "moment": "^2.29.4",
     "ng-lazyload-image": "^9.0.0",
     "ngeohash": "^0.6.0",
@@ -66,8 +66,8 @@
     "@angular-eslint/template-parser": "~14.4.0",
     "@angular/cli": "^14.2.10",
     "@angular/compiler-cli": "^14.2.12",
-    "@gisaia/ngx-translate-extract": "8.2.0",
     "@biesbjerg/ngx-translate-extract-marker": "1.0.0",
+    "@gisaia/ngx-translate-extract": "8.2.0",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^16.18.1",
     "@typescript-eslint/eslint-plugin": "^5.36.2",

projects/arlas-components/package.json

@@ -26,14 +26,14 @@
     "@mapbox/mapbox-gl-draw-static-mode": "^1.0.1",
     "@turf/centroid": "6.5.0",
     "@turf/helpers": "6.5.0",
-    "@types/mapbox-gl": "^1.6.3",
+    "@types/mapbox-gl": "^2.7.15",
     "arlas-d3": "~11.1.0",
     "geojson-polygon-self-intersections": "1.2.1",
     "geojson-validation": "0.2.1",
     "iv-viewer": "~2.0.1",
     "jsts": "2.1.0",
     "jszip": "^3.2.1",
-    "mapbox-gl": "^1.6.1",
+    "mapbox-gl": "^2.15.0",
     "ng-lazyload-image": "^9.0.0",
     "ngeohash": "^0.6.0",
     "ngx-loading": "^14.0.0",

projects/arlas-components/src/lib/components/mapgl/mapgl.component.ts

@@ -728,10 +728,11 @@ export class MapglComponent implements OnInit, AfterViewInit, OnChanges, AfterCo
       this.maxZoom = 0;
     }
 
+    // TODO: add token
+    (mapboxgl as any).accessToken = ;
     this.map = new mapboxgl.Map({
       container: this.id,
       style: afterViewInitbasemapStyle.styleFile,
-      center: this.initCenter,
       zoom: this.initZoom,
       maxZoom: this.maxZoom,
       minZoom: this.minZoom,
@@ -742,7 +743,8 @@ export class MapglComponent implements OnInit, AfterViewInit, OnChanges, AfterCo
         'NavigationControl.ZoomOut': this.translate.instant(ZOOM_OUT),
         'NavigationControl.ResetBearing': this.translate.instant(RESET_BEARING)
       },
-      transformRequest: this.transformRequest
+      transformRequest: this.transformRequest,
+      projection: {name: 'globe', center: this.initCenter}
     });
     fromEvent(window, 'beforeunload').subscribe(() => {
       const bounds = (<mapboxgl.Map>this.map).getBounds();
@@ -1177,6 +1179,7 @@ export class MapglComponent implements OnInit, AfterViewInit, OnChanges, AfterCo
     const moveend = fromEvent(this.map, 'moveend')
       .pipe(debounceTime(750));
     moveend.subscribe(e => {
+      console.log(this.map.getBounds());
       this.west = this.map.getBounds().getWest();
       this.south = this.map.getBounds().getSouth();
       this.east = this.map.getBounds().getEast();
@@ -1196,7 +1199,8 @@ export class MapglComponent implements OnInit, AfterViewInit, OnChanges, AfterCo
       const bottomLeftOffset = bottomLeft.add(new mapboxgl.Point(this.offset.west, this.offset.south));
       const topRghtOffset = topRght.add(new mapboxgl.Point(this.offset.east, this.offset.north));
 
-      const bottomLeftOffsetLatLng = this.map.unproject(bottomLeftOffset);
+      console.log(topRghtOffset);
+      const bottomLeftOffsetLatLng = (this.map as mapboxgl.Map).unproject(bottomLeftOffset);
       const topRghtOffsetLatLng = this.map.unproject(topRghtOffset);
 
       const wrapWestOffset = bottomLeftOffsetLatLng.wrap().lng;