anymap-ts 0.10.1 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anymap-ts",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "TypeScript frontend for anymap-ts interactive maps",
   "type": "module",
   "main": "src/index.ts",
@@ -10,7 +10,7 @@
     "build:leaflet": "esbuild src/leaflet/index.ts --bundle --format=esm --outfile=anymap_ts/static/leaflet.js --loader:.css=css --loader:.png=dataurl --minify",
     "build:deckgl": "esbuild src/deckgl/index.ts --bundle --format=esm --outfile=anymap_ts/static/deckgl.js --loader:.css=css --external:path --external:fs --minify",
     "build:openlayers": "esbuild src/openlayers/index.ts --bundle --format=esm --outfile=anymap_ts/static/openlayers.js --loader:.css=css --minify",
-    "build:cesium": "esbuild src/cesium/index.ts --bundle --format=esm --outfile=anymap_ts/static/cesium.js --loader:.css=css --minify",
+    "build:cesium": "esbuild src/cesium/index.ts --bundle --format=esm --outfile=anymap_ts/static/cesium.js --loader:.css=css --alias:cesium=./node_modules/cesium/Build/Cesium/index.js --alias:cesium-widgets-css=./node_modules/cesium/Build/Cesium/Widgets/widgets.css --define:CESIUM_BASE_URL='\"https://cesium.com/downloads/cesiumjs/releases/1.138/Build/Cesium/\"' --minify",
     "build:keplergl": "esbuild src/keplergl/index.ts --bundle --format=esm --outfile=anymap_ts/static/keplergl.js --loader:.css=css --minify",
     "build:potree": "esbuild src/potree/index.ts --bundle --format=esm --outfile=anymap_ts/static/potree.js --loader:.css=css --minify",
     "build:custom-css": "esbuild src/styles/maplibre.css --bundle --outfile=anymap_ts/static/custom.css --loader:.css=css --minify",
@@ -52,6 +52,7 @@
     "geotiff-geokeys-to-proj4": "^2024.4.13",
     "jspdf": "^4.1.0",
     "leaflet": "^1.9.4",
+    "leaflet.heat": "^0.2.0",
     "mapbox-gl": "^3.18.1",
     "maplibre-gl": ">=5.14.0",
     "maplibre-gl-components": "^0.15.0",

package/src/cesium/index.ts

@@ -1,25 +1,24 @@
 /**
  * Cesium 3D globe widget entry point.
  *
- * Cesium is loaded dynamically from CDN since it's too large to bundle
- * and the browser can't resolve bare module specifiers.
+ * Cesium is bundled from the npm package to avoid CORS issues
+ * in VS Code/Cursor notebook webviews.
  */
 
 import type { AnyModel } from '@anywidget/types';
-
-// Cesium CDN URLs
-const CESIUM_VERSION = '1.120';
-const CESIUM_BASE_URL = `https://cesium.com/downloads/cesiumjs/releases/${CESIUM_VERSION}/Build/Cesium`;
-const CESIUM_JS_URL = `${CESIUM_BASE_URL}/Cesium.js`;
-const CESIUM_CSS_URL = `${CESIUM_BASE_URL}/Widgets/widgets.css`;
-
-// Declare Cesium on window
-declare global {
-  interface Window {
-    Cesium: any;
-    CESIUM_BASE_URL: string;
-  }
-}
+import {
+  Viewer,
+  Cartesian3,
+  Ion,
+  UrlTemplateImageryProvider,
+  Terrain,
+  GeoJsonDataSource,
+  Color,
+  Math as CesiumMath,
+} from 'cesium';
+
+// Import Cesium widget CSS from the pre-built bundle
+import 'cesium-widgets-css';
 
 interface CesiumModel extends AnyModel {
   get(key: 'center'): [number, number];
@@ -30,50 +29,6 @@ interface CesiumModel extends AnyModel {
   get(key: '_js_calls'): Array<{ id: number; method: string; args: unknown[]; kwargs: Record<string, unknown> }>;
 }
 
-/**
- * Load Cesium CSS dynamically.
- */
-function loadCesiumCSS(): void {
-  if (!document.querySelector(`link[href="${CESIUM_CSS_URL}"]`)) {
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.href = CESIUM_CSS_URL;
-    document.head.appendChild(link);
-  }
-}
-
-/**
- * Load Cesium JS dynamically.
- */
-function loadCesiumJS(): Promise<void> {
-  return new Promise((resolve, reject) => {
-    // Check if already loaded
-    if (window.Cesium) {
-      resolve();
-      return;
-    }
-
-    // Check if script is already loading
-    const existingScript = document.querySelector(`script[src="${CESIUM_JS_URL}"]`);
-    if (existingScript) {
-      existingScript.addEventListener('load', () => resolve());
-      existingScript.addEventListener('error', () => reject(new Error('Failed to load Cesium')));
-      return;
-    }
-
-    // Set Cesium base URL for asset loading
-    window.CESIUM_BASE_URL = CESIUM_BASE_URL;
-
-    // Load script
-    const script = document.createElement('script');
-    script.src = CESIUM_JS_URL;
-    script.async = true;
-    script.onload = () => resolve();
-    script.onerror = () => reject(new Error('Failed to load Cesium'));
-    document.head.appendChild(script);
-  });
-}
-
 /**
  * Convert zoom level to camera height.
  */
@@ -100,18 +55,13 @@ class CesiumWidget {
   }
 
   async initialize(): Promise<void> {
-    const Cesium = window.Cesium;
-    if (!Cesium) {
-      throw new Error('Cesium not loaded');
-    }
-
     const accessToken = this.model.get('access_token') || '';
     const center = this.model.get('center') || [0, 0];
     const zoom = this.model.get('zoom') || 2;
 
     // Set access token
     if (accessToken) {
-      Cesium.Ion.defaultAccessToken = accessToken;
+      Ion.defaultAccessToken = accessToken;
     }
 
     // Set up parent element
@@ -129,8 +79,9 @@ class CesiumWidget {
     // Calculate camera height from zoom
     const height = zoomToHeight(zoom);
 
-    // Create viewer
-    this.viewer = new Cesium.Viewer(this.container, {
+    // Create viewer without default Ion imagery (which fails in VS Code webviews due to CORS).
+    // Use OpenStreetMap as the default base layer instead.
+    this.viewer = new Viewer(this.container, {
       baseLayerPicker: false,
       geocoder: false,
       homeButton: false,
@@ -142,11 +93,19 @@ class CesiumWidget {
       vrButton: false,
       selectionIndicator: false,
       infoBox: false,
+      baseLayer: false,
+    });
+
+    // Add OpenStreetMap as default basemap
+    const osmProvider = new UrlTemplateImageryProvider({
+      url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+      maximumLevel: 19,
     });
+    this.viewer.imageryLayers.addImageryProvider(osmProvider);
 
     // Set initial camera position
     this.viewer.camera.setView({
-      destination: Cesium.Cartesian3.fromDegrees(center[0], center[1], height),
+      destination: Cartesian3.fromDegrees(center[0], center[1], height),
     });
 
     // Process pending JS calls
@@ -182,37 +141,34 @@ class CesiumWidget {
   }
 
   private onCenterChange(): void {
-    const Cesium = window.Cesium;
     const newCenter = this.model.get('center');
-    if (this.viewer && Cesium) {
+    if (this.viewer) {
       const currentHeight = this.viewer.camera.positionCartographic.height;
       this.viewer.camera.flyTo({
-        destination: Cesium.Cartesian3.fromDegrees(newCenter[0], newCenter[1], currentHeight),
+        destination: Cartesian3.fromDegrees(newCenter[0], newCenter[1], currentHeight),
       });
     }
   }
 
   // Method handlers
   handle_addBasemap(args: unknown[], kwargs: Record<string, unknown>): void {
-    const Cesium = window.Cesium;
-    if (!this.viewer || !Cesium) return;
+    if (!this.viewer) return;
 
     const url = args[0] as string;
     const name = kwargs.name as string || 'basemap';
 
-    const imageryProvider = new Cesium.UrlTemplateImageryProvider({ url });
+    const imageryProvider = new UrlTemplateImageryProvider({ url });
     const layer = this.viewer.imageryLayers.addImageryProvider(imageryProvider);
     this.imageryLayers.set(name, layer);
   }
 
   handle_setTerrain(args: unknown[], kwargs: Record<string, unknown>): void {
-    const Cesium = window.Cesium;
-    if (!this.viewer || !Cesium) return;
+    if (!this.viewer) return;
 
     const url = kwargs.url as string;
     if (url === 'cesium-world-terrain' || !url) {
       this.viewer.scene.setTerrain(
-        Cesium.Terrain.fromWorldTerrain({
+        Terrain.fromWorldTerrain({
           requestVertexNormals: true,
           requestWaterMask: true,
         })
@@ -221,8 +177,7 @@ class CesiumWidget {
   }
 
   handle_flyTo(args: unknown[], kwargs: Record<string, unknown>): void {
-    const Cesium = window.Cesium;
-    if (!this.viewer || !Cesium) return;
+    if (!this.viewer) return;
 
     const lng = args[0] as number;
     const lat = args[1] as number;
@@ -232,10 +187,10 @@ class CesiumWidget {
     const duration = kwargs.duration as number ?? 2;
 
     this.viewer.camera.flyTo({
-      destination: Cesium.Cartesian3.fromDegrees(lng, lat, height),
+      destination: Cartesian3.fromDegrees(lng, lat, height),
       orientation: {
-        heading: Cesium.Math.toRadians(heading),
-        pitch: Cesium.Math.toRadians(pitch),
+        heading: CesiumMath.toRadians(heading),
+        pitch: CesiumMath.toRadians(pitch),
         roll: 0,
       },
       duration: duration,
@@ -248,8 +203,7 @@ class CesiumWidget {
   }
 
   async handle_addGeoJSON(args: unknown[], kwargs: Record<string, unknown>): Promise<void> {
-    const Cesium = window.Cesium;
-    if (!this.viewer || !Cesium) return;
+    if (!this.viewer) return;
 
     const data = kwargs.data as object;
     const name = kwargs.name as string || `geojson-${this.dataSources.size}`;
@@ -257,9 +211,9 @@ class CesiumWidget {
     const fill = kwargs.fill as string || 'rgba(51, 136, 255, 0.5)';
 
     try {
-      const dataSource = await Cesium.GeoJsonDataSource.load(data, {
-        stroke: Cesium.Color.fromCssColorString(stroke),
-        fill: Cesium.Color.fromCssColorString(fill),
+      const dataSource = await GeoJsonDataSource.load(data, {
+        stroke: Color.fromCssColorString(stroke),
+        fill: Color.fromCssColorString(fill),
         clampToGround: true,
       });
 
@@ -294,17 +248,6 @@ let widget: CesiumWidget | null = null;
  * anywidget render function.
  */
 async function render({ model, el }: { model: CesiumModel; el: HTMLElement }): Promise<() => void> {
-  // Load Cesium CSS and JS
-  loadCesiumCSS();
-
-  try {
-    await loadCesiumJS();
-  } catch (error) {
-    console.error('Failed to load Cesium:', error);
-    el.innerHTML = '<div style="padding: 20px; color: red;">Failed to load Cesium library</div>';
-    return () => {};
-  }
-
   // Create widget
   widget = new CesiumWidget(model as CesiumModel, el);
 
@@ -313,6 +256,7 @@ async function render({ model, el }: { model: CesiumModel; el: HTMLElement }): P
     await widget.initialize();
   } catch (error) {
     console.error('Failed to initialize Cesium viewer:', error);
+    el.innerHTML = '<div style="padding: 20px; color: red;">Failed to initialize Cesium viewer</div>';
   }
 
   // Return cleanup function