import { Map } from 'maplibre-gl';
import { DynamicMapService, VectorTileService, FeatureService } from 'esri-gl';

const map = new Map({
  container: 'map',
  style: 'https://demotiles.maplibre.org/style.json',
  center: [-95, 37],
  zoom: 4
});

map.on('load', () => {
  // Add a dynamic map service
  const dynamicService = new DynamicMapService('census-source', map, {
    url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer'
  });

  map.addLayer({
    id: 'census-layer',
    type: 'raster',
    source: 'census-source'
  });

  // Add a feature service with smart vector tile detection
  const featureService = new FeatureService('parcels-source', map, {
    url: 'https://services.arcgis.com/.../FeatureServer/0',
    useVectorTiles: true, // Automatically detects and falls back to GeoJSON if needed
    useBoundingBox: true, // Optimize with viewport filtering
    where: "STATUS = 'Active'", // Server-side filtering
    outFields: '*'
  });

  map.addLayer({
    id: 'parcels-layer',
    type: 'fill',
    source: 'parcels-source',
    paint: {
      'fill-color': '#007cbf',
      'fill-opacity': 0.5
    }
  });
});

import mapboxgl from 'mapbox-gl';
import { VectorBasemapStyle, ImageService } from 'esri-gl';

mapboxgl.accessToken = 'your-mapbox-token';

const map = new mapboxgl.Map({
  container: 'map',
  center: [-95, 37],
  zoom: 4
});

map.on('load', () => {
  // Add Esri vector basemap style
  const basemapService = new VectorBasemapStyle('basemap-source', map, {
    style: 'arcgis/streets'
  });

  // Add image service for analytical raster data
  const imageService = new ImageService('elevation-source', map, {
    url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Elevation/ImageServer',
    renderingRule: {
      rasterFunction: 'Hillshade'
    }
  });

  map.addLayer({
    id: 'elevation-layer',
    type: 'raster',
    source: 'elevation-source'
  });
});

const service = new DynamicMapService('source-id', map, {
  url: 'https://example.com/arcgis/rest/services/MyService/MapServer',
  layers: [0, 1, 2], // Specific layers to display
  layerDefs: {
    0: "POP2000 > 100000", // Filter layer 0
    1: "STATE_NAME = 'California'" // Filter layer 1
  },
  transparent: true,
  format: 'png32'
});

const service = new TiledMapService('source-id', map, {
  url: 'https://example.com/arcgis/rest/services/MyTiledService/MapServer'
});

const service = new FeatureService('source-id', map, {
  url: 'https://example.com/arcgis/rest/services/MyService/FeatureServer/0',
  useVectorTiles: true, // Smart detection with fallback
  useBoundingBox: true, // Viewport-based loading
  where: '1=1',
  outFields: '*',
  maxRecordCount: 2000
});

const service = new VectorTileService('source-id', map, {
  url: 'https://example.com/arcgis/rest/services/MyService/VectorTileServer'
});

const service = new ImageService('source-id', map, {
  url: 'https://example.com/arcgis/rest/services/MyImageService/ImageServer',
  renderingRule: {
    rasterFunction: 'Stretch',
    rasterFunctionArguments: {
      StretchType: 6,
      NumberOfStandardDeviations: 2
    }
  },
  mosaicRule: {
    mosaicMethod: 'esriMosaicLockRaster',
    lockRasterIds: [1, 2, 3]
  }
});

const service = new VectorBasemapStyle('source-id', map, {
  style: 'arcgis/streets', // or 'arcgis/navigation', 'arcgis/topographic', etc.
  language: 'en',
  worldview: 'USA'
});

import { IdentifyFeatures } from 'esri-gl';

const identifyService = new IdentifyFeatures({
  url: 'https://example.com/arcgis/rest/services/MyService/MapServer'
});

// Identify features at a point
const results = await identifyService
  .at({ lng: -95, lat: 37 })
  .tolerance(5)
  .layers('all')
  .returnGeometry(true)
  .run(map);

console.log('Identified features:', results);

import { identifyImage } from 'esri-gl';

const results = await identifyImage({
  url: 'https://example.com/arcgis/rest/services/Elevation/ImageServer'
}).at({ lng: -120, lat: 40 });

console.log('Elevation value:', results.value);

import { query } from 'esri-gl';

const results = await query({
  url: 'https://example.com/arcgis/rest/services/MyService/FeatureServer/0'
})
.where("STATE_NAME = 'California'")
.intersects({
  type: 'Point',
  coordinates: [-118, 34]
})
.run();

// Add layers dynamically
const service = new DynamicMapService('census-source', map, {
  url: 'https://example.com/MapServer'
});

// Update visible layers
service.setLayers([0, 2, 5]);

// Update layer definitions
service.setLayerDefs({
  0: "POP2000 > 50000",
  2: "STATE_NAME IN ('California', 'Nevada')"
});

// Clean up
service.remove();

const service = new FeatureService('smart-source', map, {
  url: 'https://example.com/FeatureServer/0',
  useVectorTiles: true // Will automatically:
  // 1. Check for VectorTileServer endpoint
  // 2. Test various URL patterns
  // 3. Fall back to GeoJSON if vector tiles unavailable
  // 4. Log the decision process to console
});

const service = new FeatureService('optimized-source', map, {
  url: 'https://example.com/FeatureServer/0',
  useBoundingBox: true, // Only load features in current viewport
  maxRecordCount: 1000, // Limit records per request
  where: 'STATUS = "Active"', // Server-side filtering
  outFields: ['OBJECTID', 'NAME', 'STATUS'] // Limit fields
});

import type { 
  DynamicMapServiceOptions,
  FeatureServiceOptions,
  IdentifyResult,
  EsriGeoJSONFeatureCollection 
} from 'esri-gl';

const options: FeatureServiceOptions = {
  url: 'https://example.com/FeatureServer/0',
  useVectorTiles: true,
  where: '1=1'
};