Map Integration

/**
 * Mapbox GL JS integration overlay
 * Renders deck.gl layers over Mapbox base maps
 */
class MapboxOverlay {
  constructor(props?: MapboxOverlayProps);
  /** Add overlay to Mapbox map instance */
  addTo(map: mapboxgl.Map): this;
  /** Remove overlay from map */
  remove(): this;
  /** Update overlay properties */
  setProps(props: Partial<MapboxOverlayProps>): void;
  /** Clean up overlay resources */
  finalize(): void;
  /** Get underlying deck instance */
  getDeck(): Deck;
}

interface MapboxOverlayProps extends Omit<DeckProps, 'container' | 'canvas'> {
  /** Overlay interaction policy */
  interleaved?: boolean;
  /** Map instance reference */
  map?: mapboxgl.Map;
}

import mapboxgl from 'mapbox-gl';
import { MapboxOverlay } from '@deck.gl/mapbox';
import { ScatterplotLayer } from 'deck.gl';

// Create Mapbox map
const map = new mapboxgl.Map({
  container: 'map-container',
  style: 'mapbox://styles/mapbox/light-v9',
  center: [-122.4, 37.8],
  zoom: 10,
  accessToken: 'your-mapbox-token'
});

// Create deck.gl overlay
const overlay = new MapboxOverlay({
  interleaved: true,
  layers: [
    new ScatterplotLayer({
      id: 'scatter',
      data: myData,
      getPosition: d => d.coordinates,
      getRadius: 100,
      getFillColor: [255, 0, 0, 128]
    })
  ]
});

// Add overlay to map
map.on('load', () => {
  map.addControl(overlay);
});

// Update layers
overlay.setProps({
  layers: [
    new ScatterplotLayer({
      id: 'updated-scatter',
      data: newData,
      getPosition: d => d.coordinates,
      getRadius: 50,
      getFillColor: [0, 255, 0, 128]
    })
  ]
});

/**
 * Google Maps integration overlay
 * Renders deck.gl layers over Google Maps base tiles
 */
class GoogleMapsOverlay {
  constructor(props?: GoogleMapsOverlayProps);
  /** Set the Google Maps instance */
  setMap(map: google.maps.Map | null): void;
  /** Update overlay properties */
  setProps(props: Partial<GoogleMapsOverlayProps>): void;
  /** Clean up overlay resources */
  finalize(): void;
  /** Get underlying deck instance */
  getDeck(): Deck;
}

interface GoogleMapsOverlayProps extends Omit<DeckProps, 'container' | 'canvas'> {
  /** Map instance reference */
  map?: google.maps.Map;
}

import { GoogleMapsOverlay } from '@deck.gl/google-maps';
import { HexagonLayer } from 'deck.gl';

// Create Google Maps instance
const map = new google.maps.Map(document.getElementById('map'), {
  center: { lat: 37.8, lng: -122.4 },
  zoom: 10,
  mapId: 'your-map-id' // Required for WebGL overlays
});

// Create deck.gl overlay
const overlay = new GoogleMapsOverlay({
  layers: [
    new HexagonLayer({
      id: 'hexagon',
      data: myData,
      getPosition: d => d.coordinates,
      radius: 1000,
      elevationScale: 4,
      extruded: true,
      getFillColor: [255, 140, 0]
    })
  ]
});

// Add overlay to map
overlay.setMap(map);

// Listen for map events
map.addListener('zoom_changed', () => {
  console.log('Map zoom changed:', map.getZoom());
});

/**
 * ArcGIS layer integration
 * Enables deck.gl layers within ArcGIS Maps SDK
 */
const DeckLayer: any; // ArcGIS Layer class

/**
 * ArcGIS renderer integration for 3D scenes
 * Renders deck.gl layers in ArcGIS 3D scenes
 */
const DeckRenderer: any; // ArcGIS ExternalRenderer

/**
 * Utility function to load ArcGIS modules dynamically
 */
function loadArcGISModules(modules: string[]): Promise<any[]>;

import { loadArcGISModules, DeckLayer } from '@deck.gl/arcgis';
import { ScatterplotLayer } from 'deck.gl';

// Load ArcGIS modules
loadArcGISModules([
  'esri/Map',
  'esri/views/MapView'
]).then(([ArcGISMap, MapView]) => {
  
  // Create ArcGIS map
  const map = new ArcGISMap({
    basemap: 'streets-vector'
  });

  // Create map view
  const view = new MapView({
    container: 'map-container',
    map: map,
    center: [-122.4, 37.8],
    zoom: 10
  });

  // Create deck.gl layer
  const deckLayer = new DeckLayer({
    'deck-layers': [
      new ScatterplotLayer({
        id: 'scatter',
        data: myData,
        getPosition: d => d.coordinates,
        getRadius: 100,
        getFillColor: [255, 0, 0]
      })
    ]
  });

  // Add layer to map
  map.add(deckLayer);
});

import { MapboxOverlay } from '@deck.gl/mapbox';
import mapboxgl from 'mapbox-gl';

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  center: [-122.4, 37.8],
  zoom: 10
});

const overlay = new MapboxOverlay({
  layers: myLayers,
  
  // Sync with Mapbox view state
  onViewStateChange: ({viewState}) => {
    map.jumpTo({
      center: [viewState.longitude, viewState.latitude],
      zoom: viewState.zoom,
      bearing: viewState.bearing,
      pitch: viewState.pitch
    });
  }
});

// Sync Mapbox changes back to deck.gl
map.on('move', () => {
  const center = map.getCenter();
  overlay.setProps({
    viewState: {
      longitude: center.lng,
      latitude: center.lat,
      zoom: map.getZoom(),
      bearing: map.getBearing(),
      pitch: map.getPitch()
    }
  });
});

import mapboxgl from 'mapbox-gl';

class DeckLayerControl {
  private map: mapboxgl.Map;
  private overlay: MapboxOverlay;
  
  constructor(overlay: MapboxOverlay) {
    this.overlay = overlay;
  }
  
  onAdd(map: mapboxgl.Map): HTMLElement {
    this.map = map;
    
    const container = document.createElement('div');
    container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';
    
    const button = document.createElement('button');
    button.textContent = 'Toggle Layers';
    button.onclick = () => this.toggleLayers();
    
    container.appendChild(button);
    return container;
  }
  
  onRemove(): void {
    // Cleanup
  }
  
  private toggleLayers(): void {
    const currentLayers = this.overlay.getDeck().props.layers;
    const visible = currentLayers.length > 0;
    
    this.overlay.setProps({
      layers: visible ? [] : myLayers
    });
  }
}

// Add custom control
const control = new DeckLayerControl(overlay);
map.addControl(control, 'top-right');

import { MapboxOverlay } from '@deck.gl/mapbox';

// Create overlay with multiple layer groups
const overlay = new MapboxOverlay({
  interleaved: true, // Enable layer interleaving
  layers: [
    // Background layers (render under map labels)
    new HeatmapLayer({
      id: 'heatmap',
      data: heatmapData,
      beforeId: 'watername_ocean' // Render before this Mapbox layer
    }),
    
    // Foreground layers (render over map labels)  
    new ScatterplotLayer({
      id: 'points',
      data: pointData,
      beforeId: null // Render on top
    })
  ]
});

// Use interleaved mode for better performance with large datasets
const overlay = new MapboxOverlay({
  interleaved: true,
  
  // Optimize picking
  pickingRadius: 5,
  
  // Limit updates
  onBeforeRender: () => {
    // Custom optimization logic
  },
  
  layers: optimizedLayers
});

// Batch layer updates
const updateLayers = (newData) => {
  overlay.setProps({
    layers: [
      new ScatterplotLayer({
        id: 'scatter',
        data: newData,
        updateTriggers: {
          getPosition: newData.timestamp
        }
      })
    ]
  });
};

import { MapboxOverlay } from '@deck.gl/mapbox';

const overlay = new MapboxOverlay({
  layers: myLayers,
  
  onError: (error) => {
    console.error('deck.gl error:', error);
    
    // Handle specific error types
    if (error.message.includes('WebGL')) {
      showWebGLErrorMessage();
    } else if (error.message.includes('data')) {
      showDataErrorMessage();
    }
  },
  
  onLoad: () => {
    console.log('deck.gl overlay loaded successfully');
  }
});

// Mapbox error handling
map.on('error', (e) => {
  console.error('Mapbox error:', e.error);
});

function showWebGLErrorMessage() {
  alert('WebGL is not supported in your browser. Please use a modern browser.');
}

function showDataErrorMessage() {
  alert('Error loading data. Please try again.');
}