esri-gl 1.0.5 → 2.0.0

package/dist/react-map-gl.js

@@ -1,9 +1,13 @@
-import { useState, useEffect, useMemo, useRef } from 'react';
-import { D as DynamicMapService, d as TiledMapService, c as ImageService, e as VectorTileService, V as VectorBasemapStyle, F as FeatureService } from './IdentifyImage-DmyKcbAv.js';
-export { a as Find, I as IdentifyFeatures, b as IdentifyImage, Q as Query, S as Service, T as Task, f as cleanTrailingSlash, g as find, h as getServiceDetails, i as identifyImage, q as query, u as updateAttribution } from './IdentifyImage-DmyKcbAv.js';
+import { D as DynamicMapService, d as TiledMapService, c as ImageService, e as VectorTileService, g as esriRequest, V as VectorBasemapStyle, F as FeatureService, k as serviceFromPortalItem } from './index-DsY1_0df.js';
+export { a as Find, I as IdentifyFeatures, b as IdentifyImage, Q as Query, S as Service, T as Task, f as cleanTrailingSlash, h as find, i as getServiceDetails, j as identifyImage, q as query, r as resolveAuthentication, s as searchPortalItems, l as servicesFromWebMap, u as updateAttribution } from './index-DsY1_0df.js';
 import { useMap } from 'react-map-gl/mapbox';
 import { useMap as useMap$1 } from 'react-map-gl/maplibre';
-import { b as useFeatureService, e as useVectorTileService, c as useImageService, d as useTiledMapService, u as useDynamicMapService } from './useFeatureService-E9PiUOLP.js';
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { b as useFeatureService, e as useVectorTileService, c as useImageService, d as useTiledMapService, u as useDynamicMapService } from './useFeatureService-BRY6PHUs.js';
+export { BasemapStyleSession } from '@esri/arcgis-rest-basemap-sessions';
+export { ApiKeyManager, ApplicationCredentialsManager, ArcGISAuthError, ArcGISIdentityManager, ArcGISRequestError } from '@esri/arcgis-rest-request';
+export { SearchQueryBuilder } from '@esri/arcgis-rest-portal';
+import '@esri/arcgis-rest-feature-service';
 import '@mapbox/tilebelt';
 import 'arcgis-pbf-parser';
 
@@ -41,83 +45,154 @@ function useReactMapGL() {
 }
 
 /**
- * React Map GL component for Esri Dynamic Map Service
+ * Copy any defined auth/passthrough props from a layer component's props
+ * onto a service-options object. Undefined values are skipped so they
+ * do not override service defaults.
  */
-function EsriDynamicLayer(props) {
-  const {
-    current: map
-  } = useReactMapGL();
-  const sourceId = props.sourceId || `esri-dynamic-${props.id}`;
-  const [isMapLoaded, setIsMapLoaded] = useState(false);
-  // Wait for map to be loaded before creating service
+function applyAuthOptions(options, props) {
+  const target = options;
+  if (props.token !== undefined) target.token = props.token;
+  if (props.apiKey !== undefined) target.apiKey = props.apiKey;
+  if (props.authentication !== undefined) target.authentication = props.authentication;
+  if (props.proxy !== undefined) target.proxy = props.proxy;
+  if (props.getAttributionFromService !== undefined) target.getAttributionFromService = props.getAttributionFromService;
+  if (props.requestParams !== undefined) target.requestParams = props.requestParams;
+  if (props.fetchOptions !== undefined) target.fetchOptions = props.fetchOptions;
+  return options;
+}
+
+/**
+ * Returns true once the underlying map's style has finished loading.
+ * Returns false when there is no map yet, the map does not expose the
+ * expected lifecycle API, or the style has not finished loading.
+ */
+function useMapLoaded(map) {
+  const [isLoaded, setIsLoaded] = useState(false);
   useEffect(() => {
-    if (!map) return;
+    if (!map) {
+      setIsLoaded(false);
+      return;
+    }
     const mapInstance = map.getMap?.();
-    const mi = mapInstance;
-    if (!mi || typeof mi.isStyleLoaded !== 'function') {
+    if (!mapInstance || typeof mapInstance.isStyleLoaded !== 'function') {
+      setIsLoaded(false);
       return;
     }
-    if (mi.isStyleLoaded()) {
-      setIsMapLoaded(true);
+    if (mapInstance.isStyleLoaded()) {
+      setIsLoaded(true);
       return;
     }
-    const handleLoad = () => setIsMapLoaded(true);
-    mi?.once?.('load', handleLoad);
+    const handleLoad = () => setIsLoaded(true);
+    mapInstance.once?.('load', handleLoad);
     return () => {
-      mi?.off?.('load', handleLoad);
+      mapInstance.off?.('load', handleLoad);
     };
   }, [map]);
-  const service = useMemo(() => {
-    if (!map || !isMapLoaded) return null;
-    const mapInstance = map.getMap?.();
-    if (!mapInstance) return null;
-    // Only include defined properties to avoid overriding defaults with undefined
-    const options = {
-      url: props.url
-    };
-    if (props.layers !== undefined) options.layers = props.layers;
-    if (props.layerDefs !== undefined) options.layerDefs = props.layerDefs;
-    if (props.format !== undefined) options.format = props.format;
-    if (props.dpi !== undefined) options.dpi = props.dpi;
-    if (props.transparent !== undefined) options.transparent = props.transparent;
-    return new DynamicMapService(sourceId, mapInstance,
-    // Type assertion for map compatibility
-    options);
-  }, [map, isMapLoaded, sourceId, props.url, props.layers, props.layerDefs, props.format, props.dpi, props.transparent]);
+  return isLoaded;
+}
+
+/**
+ * Shared lifecycle for react-map-gl components that wrap an Esri raster
+ * service. Waits for the map style to load, then (re)builds the service and its
+ * raster layer in a single effect so that when `serviceDeps` change the old
+ * source is torn down *before* the new service recreates it — otherwise the
+ * service constructor would see the stale source and skip re-adding it.
+ */
+function useRasterLayer(options) {
+  const {
+    map,
+    layerId,
+    sourceId,
+    beforeId,
+    visible,
+    serviceDeps,
+    createService
+  } = options;
+  const isMapLoaded = useMapLoaded(map);
+  const [service, setService] = useState(null);
+  // Keep the latest createService without making it a dependency (callers pass
+  // a fresh closure each render; serviceDeps captures what actually matters).
+  const createServiceRef = useRef(createService);
+  createServiceRef.current = createService;
   useEffect(() => {
-    if (!map || !service) return;
+    if (!map || !isMapLoaded) {
+      setService(null);
+      return;
+    }
     const mapInstance = map.getMap?.();
-    if (!mapInstance || typeof mapInstance.getLayer !== 'function' || typeof mapInstance.addLayer !== 'function') {
-      return () => {
-        service.remove();
-      };
+    if (!mapInstance || typeof mapInstance.addLayer !== 'function') {
+      return;
     }
-    // Add raster layer
-    if (!mapInstance.getLayer(props.id)) {
+    const svc = createServiceRef.current(mapInstance, sourceId);
+    setService(svc);
+    // Add the raster layer once its source exists.
+    const sourceReady = typeof mapInstance.getSource !== 'function' || Boolean(mapInstance.getSource(sourceId));
+    if (!mapInstance.getLayer?.(layerId) && sourceReady) {
       const layerConfig = {
-        id: props.id,
+        id: layerId,
         type: 'raster',
         source: sourceId,
         layout: {
-          visibility: props.visible !== false ? 'visible' : 'none'
+          visibility: visible !== false ? 'visible' : 'none'
         }
       };
-      if (props.beforeId) {
-        mapInstance.addLayer(layerConfig, props.beforeId);
-      } else {
-        mapInstance.addLayer(layerConfig);
+      try {
+        if (beforeId) {
+          mapInstance.addLayer?.(layerConfig, beforeId);
+        } else {
+          mapInstance.addLayer?.(layerConfig);
+        }
+      } catch (err) {
+        if (process.env?.NODE_ENV !== 'test') {
+          console.warn(`useRasterLayer: skipped adding layer "${layerId}"`, err);
+        }
       }
     }
-    // Cleanup function
     return () => {
-      if (mapInstance.getStyle?.() && mapInstance.getLayer?.(props.id)) {
-        mapInstance.removeLayer(props.id);
-      }
-      if (service) {
-        service.remove();
+      // Remove the layer first, then the service (which removes its source), so
+      // a subsequent rebuild gets a clean slate for the same sourceId.
+      try {
+        if (mapInstance.getStyle?.() && mapInstance.getLayer?.(layerId)) {
+          mapInstance.removeLayer?.(layerId);
+        }
+      } catch {
+        // layer may already be gone
       }
+      svc.remove();
     };
-  }, [map, service, props.id, props.beforeId, props.visible, sourceId]);
+    // serviceDeps is spread so any change rebuilds the layer + source.
+  }, [map, isMapLoaded, sourceId, layerId, beforeId, visible, ...serviceDeps]);
+  return service;
+}
+
+/**
+ * React Map GL component for Esri Dynamic Map Service
+ */
+function EsriDynamicLayer(props) {
+  const {
+    current: map
+  } = useReactMapGL();
+  const sourceId = props.sourceId || `esri-dynamic-${props.id}`;
+  useRasterLayer({
+    map,
+    layerId: props.id,
+    sourceId,
+    beforeId: props.beforeId,
+    visible: props.visible,
+    serviceDeps: [props.url, props.layers, props.layerDefs, props.format, props.dpi, props.transparent, props.token, props.apiKey, props.authentication, props.proxy, props.getAttributionFromService, props.requestParams, props.fetchOptions],
+    createService: (mapInstance, resolvedSourceId) => {
+      const options = {
+        url: props.url
+      };
+      if (props.layers !== undefined) options.layers = props.layers;
+      if (props.layerDefs !== undefined) options.layerDefs = props.layerDefs;
+      if (props.format !== undefined) options.format = props.format;
+      if (props.dpi !== undefined) options.dpi = props.dpi;
+      if (props.transparent !== undefined) options.transparent = props.transparent;
+      applyAuthOptions(options, props);
+      return new DynamicMapService(resolvedSourceId, mapInstance, options);
+    }
+  });
   return null;
 }
 
@@ -129,67 +204,21 @@ function EsriTiledLayer(props) {
     current: map
   } = useReactMapGL();
   const sourceId = props.sourceId || `esri-tiled-${props.id}`;
-  const [isMapLoaded, setIsMapLoaded] = useState(false);
-  // Wait for map to be loaded before creating service
-  useEffect(() => {
-    if (!map) return;
-    const mapInstance = map.getMap?.();
-    const mi = mapInstance;
-    if (!mi || typeof mi.isStyleLoaded !== 'function') {
-      return;
-    }
-    if (mi.isStyleLoaded()) {
-      setIsMapLoaded(true);
-      return;
-    }
-    const handleLoad = () => setIsMapLoaded(true);
-    mi?.once?.('load', handleLoad);
-    return () => {
-      mi?.off?.('load', handleLoad);
-    };
-  }, [map]);
-  const service = useMemo(() => {
-    if (!map || !isMapLoaded) return null;
-    const mapInstance = map.getMap?.();
-    if (!mapInstance) return null;
-    return new TiledMapService(sourceId, mapInstance, {
-      url: props.url
-    });
-  }, [map, isMapLoaded, sourceId, props.url]);
-  useEffect(() => {
-    if (!map || !service) return;
-    const mapInstance = map.getMap?.();
-    if (!mapInstance || typeof mapInstance.getLayer !== 'function' || typeof mapInstance.addLayer !== 'function') {
-      return () => {
-        service.remove();
-      };
-    }
-    // Add raster layer
-    if (!mapInstance.getLayer(props.id)) {
-      const layerConfig = {
-        id: props.id,
-        type: 'raster',
-        source: sourceId,
-        layout: {
-          visibility: props.visible !== false ? 'visible' : 'none'
-        }
+  useRasterLayer({
+    map,
+    layerId: props.id,
+    sourceId,
+    beforeId: props.beforeId,
+    visible: props.visible,
+    serviceDeps: [props.url, props.token, props.apiKey, props.authentication, props.proxy, props.getAttributionFromService, props.requestParams, props.fetchOptions],
+    createService: (mapInstance, resolvedSourceId) => {
+      const options = {
+        url: props.url
       };
-      if (props.beforeId) {
-        mapInstance.addLayer(layerConfig, props.beforeId);
-      } else {
-        mapInstance.addLayer(layerConfig);
-      }
+      applyAuthOptions(options, props);
+      return new TiledMapService(resolvedSourceId, mapInstance, options);
     }
-    // Cleanup function
-    return () => {
-      if (mapInstance.getStyle?.() && mapInstance.getLayer?.(props.id)) {
-        mapInstance.removeLayer(props.id);
-      }
-      if (service) {
-        service.remove();
-      }
-    };
-  }, [map, service, props.id, props.beforeId, props.visible, sourceId]);
+  });
   return null;
 }
 
@@ -201,72 +230,24 @@ function EsriImageLayer(props) {
     current: map
   } = useReactMapGL();
   const sourceId = props.sourceId || `esri-image-${props.id}`;
-  const [isMapLoaded, setIsMapLoaded] = useState(false);
-  // Wait for map to be loaded before creating service
-  useEffect(() => {
-    if (!map) return;
-    const mapInstance = map.getMap?.();
-    const mi = mapInstance;
-    if (!mi || typeof mi.isStyleLoaded !== 'function') {
-      return;
-    }
-    if (mi.isStyleLoaded()) {
-      setIsMapLoaded(true);
-      return;
-    }
-    const handleLoad = () => setIsMapLoaded(true);
-    mi?.once?.('load', handleLoad);
-    return () => {
-      mi?.off?.('load', handleLoad);
-    };
-  }, [map]);
-  const service = useMemo(() => {
-    if (!map || !isMapLoaded) return null;
-    const mapInstance = map.getMap?.();
-    if (!mapInstance) return null;
-    // Only include defined properties to avoid overriding defaults with undefined
-    const options = {
-      url: props.url
-    };
-    if (props.renderingRule !== undefined) options.renderingRule = props.renderingRule;
-    if (props.mosaicRule !== undefined) options.mosaicRule = props.mosaicRule;
-    if (props.format !== undefined) options.format = props.format;
-    return new ImageService(sourceId, mapInstance, options);
-  }, [map, isMapLoaded, sourceId, props.url, props.renderingRule, props.mosaicRule, props.format]);
-  useEffect(() => {
-    if (!map || !service) return;
-    const mapInstance = map.getMap?.();
-    if (!mapInstance || typeof mapInstance.getLayer !== 'function' || typeof mapInstance.addLayer !== 'function') {
-      return () => {
-        service.remove();
-      };
-    }
-    // Add raster layer
-    if (!mapInstance.getLayer(props.id)) {
-      const layerConfig = {
-        id: props.id,
-        type: 'raster',
-        source: sourceId,
-        layout: {
-          visibility: props.visible !== false ? 'visible' : 'none'
-        }
+  useRasterLayer({
+    map,
+    layerId: props.id,
+    sourceId,
+    beforeId: props.beforeId,
+    visible: props.visible,
+    serviceDeps: [props.url, props.renderingRule, props.mosaicRule, props.format, props.token, props.apiKey, props.authentication, props.proxy, props.getAttributionFromService, props.requestParams, props.fetchOptions],
+    createService: (mapInstance, resolvedSourceId) => {
+      const options = {
+        url: props.url
       };
-      if (props.beforeId) {
-        mapInstance.addLayer(layerConfig, props.beforeId);
-      } else {
-        mapInstance.addLayer(layerConfig);
-      }
+      if (props.renderingRule !== undefined) options.renderingRule = props.renderingRule;
+      if (props.mosaicRule !== undefined) options.mosaicRule = props.mosaicRule;
+      if (props.format !== undefined) options.format = props.format;
+      applyAuthOptions(options, props);
+      return new ImageService(resolvedSourceId, mapInstance, options);
     }
-    // Cleanup function
-    return () => {
-      if (mapInstance.getStyle?.() && mapInstance.getLayer?.(props.id)) {
-        mapInstance.removeLayer(props.id);
-      }
-      if (service) {
-        service.remove();
-      }
-    };
-  }, [map, service, props.id, props.beforeId, props.visible, sourceId]);
+  });
   return null;
 }
 
@@ -278,53 +259,38 @@ function EsriVectorTileLayer(props) {
     current: map
   } = useReactMapGL();
   const sourceId = props.sourceId || `esri-vector-tile-${props.id}`;
-  const [isMapLoaded, setIsMapLoaded] = useState(false);
+  const isMapLoaded = useMapLoaded(map);
   const serviceRef = useRef(null);
   const layerIdsRef = useRef([]);
-  // Wait for map to be loaded before creating service
-  useEffect(() => {
-    if (!map) return;
-    const mapInstance = map.getMap?.();
-    const mi = mapInstance;
-    if (!mi || typeof mi.isStyleLoaded !== 'function') return;
-    if (mi.isStyleLoaded()) {
-      setIsMapLoaded(true);
-      return;
-    }
-    const handleLoad = () => setIsMapLoaded(true);
-    mi?.once?.('load', handleLoad);
-    return () => {
-      mi?.off?.('load', handleLoad);
-    };
-  }, [map]);
-  // Create VectorTileService, fetch style, add layers, and clean up on unmount
   useEffect(() => {
     if (!map || !isMapLoaded) return;
     const mapInstance = map.getMap?.();
     if (!mapInstance) return;
-    const mi = mapInstance;
+    const layerApi = mapInstance;
     let cancelled = false;
-    const service = new VectorTileService(sourceId, mapInstance, {
+    const options = {
       url: props.url
-    });
+    };
+    applyAuthOptions(options, props);
+    const service = new VectorTileService(sourceId, mapInstance, options);
     serviceRef.current = service;
-    // Fetch the full style and add all layers from it
     service.getStyle().then(() => {
-      if (cancelled) return;
-      // Fetch the full style document to get all layers
-      const styleUrl = `${props.url}/resources/styles/root.json`;
-      return fetch(styleUrl);
-    }).then(response => {
-      if (cancelled || !response) return;
-      if (!response.ok) throw new Error(`Failed to fetch style: ${response.status}`);
-      return response.json();
+      if (cancelled) return undefined;
+      // Fetch the full style document through the shared request layer so
+      // auth (token / apiKey / authentication) is handled consistently.
+      return esriRequest(`${props.url}/resources/styles/root.json`, {
+        httpMethod: 'GET',
+        token: props.token,
+        apiKey: props.apiKey,
+        authentication: props.authentication
+      });
     }).then(data => {
       if (cancelled || !data?.layers) return;
       const addedIds = [];
       for (const layer of data.layers) {
         if (!layer['source-layer']) continue;
         const layerId = `${props.id}-${layer.id}`;
-        if (mi.getLayer?.(layerId)) continue;
+        if (layerApi.getLayer?.(layerId)) continue;
         const layerConfig = {
           id: layerId,
           type: layer.type,
@@ -336,17 +302,16 @@ function EsriVectorTileLayer(props) {
         if (layer.filter) layerConfig.filter = layer.filter;
         if (layer.minzoom !== undefined) layerConfig.minzoom = layer.minzoom;
         if (layer.maxzoom !== undefined) layerConfig.maxzoom = layer.maxzoom;
-        // Apply visibility from props
         if (props.visible === false) {
           layerConfig.layout = {
-            ...layerConfig.layout,
+            ...(layerConfig.layout || {}),
             visibility: 'none'
           };
         }
         if (props.beforeId) {
-          mi.addLayer(layerConfig, props.beforeId);
+          layerApi.addLayer?.(layerConfig, props.beforeId);
         } else {
-          mi.addLayer(layerConfig);
+          layerApi.addLayer?.(layerConfig);
         }
         addedIds.push(layerId);
       }
@@ -356,11 +321,10 @@ function EsriVectorTileLayer(props) {
     });
     return () => {
       cancelled = true;
-      // Remove layers we added
-      if (mi.getStyle?.()) {
+      if (layerApi.getStyle?.()) {
         for (const id of layerIdsRef.current) {
           try {
-            if (mi.getLayer?.(id)) mi.removeLayer(id);
+            if (layerApi.getLayer?.(id)) layerApi.removeLayer?.(id);
           } catch {
             // layer may already be gone
           }
@@ -370,7 +334,7 @@ function EsriVectorTileLayer(props) {
       service.remove();
       serviceRef.current = null;
     };
-  }, [map, isMapLoaded, sourceId, props.url, props.id, props.beforeId, props.visible]);
+  }, [map, isMapLoaded, sourceId, props.url, props.id, props.beforeId, props.visible, props.token, props.apiKey, props.authentication, props.proxy, props.getAttributionFromService, props.requestParams, props.fetchOptions]);
   return null;
 }
 
@@ -382,10 +346,15 @@ function EsriVectorBasemapLayer(props) {
     current: map
   } = useReactMapGL();
   const service = useMemo(() => {
-    return new VectorBasemapStyle(props.basemapEnum, {
-      token: props.token
-    });
-  }, [props.basemapEnum, props.token]);
+    // Forward all the auth/locale options VectorBasemapStyle supports (token or
+    // apiKey, plus language/worldview), only including the ones provided.
+    const auth = {};
+    if (props.token !== undefined) auth.token = props.token;
+    if (props.apiKey !== undefined) auth.apiKey = props.apiKey;
+    if (props.language !== undefined) auth.language = props.language;
+    if (props.worldview !== undefined) auth.worldview = props.worldview;
+    return new VectorBasemapStyle(props.basemapEnum, auth);
+  }, [props.basemapEnum, props.token, props.apiKey, props.language, props.worldview]);
   useEffect(() => {
     if (!map || !service) return;
     // Vector basemap styles replace the entire map style
@@ -409,47 +378,27 @@ function EsriFeatureLayer(props) {
     current: map
   } = useReactMapGL();
   const sourceId = props.sourceId || `esri-feature-${props.id}`;
-  const [isMapLoaded, setIsMapLoaded] = useState(false);
+  const isMapLoaded = useMapLoaded(map);
   const serviceRef = useRef(null);
   // Keep stable refs for object props to avoid effect re-runs on every render
   const paintRef = useRef(props.paint);
   paintRef.current = props.paint;
   const layoutRef = useRef(props.layout);
   layoutRef.current = props.layout;
-  // Wait for map to be loaded before creating service
-  useEffect(() => {
-    if (!map) return;
-    const mapInstance = map.getMap?.();
-    const mi = mapInstance;
-    if (!mi || typeof mi.isStyleLoaded !== 'function') {
-      return;
-    }
-    if (mi.isStyleLoaded()) {
-      setIsMapLoaded(true);
-      return;
-    }
-    const handleLoad = () => setIsMapLoaded(true);
-    mi?.once?.('load', handleLoad);
-    return () => {
-      mi?.off?.('load', handleLoad);
-    };
-  }, [map]);
-  // Create FeatureService, add layer, and clean up on unmount
   useEffect(() => {
     if (!map || !isMapLoaded) return;
     const mapInstance = map.getMap?.();
     if (!mapInstance) return;
-    const mi = mapInstance;
-    // Only include defined properties to avoid overriding defaults with undefined
+    const layerApi = mapInstance;
     const options = {
       url: props.url
     };
     if (props.where !== undefined) options.where = props.where;
     if (props.outFields !== undefined) options.outFields = props.outFields;
+    applyAuthOptions(options, props);
     const service = new FeatureService(sourceId, mapInstance, options);
     serviceRef.current = service;
-    // Add GeoJSON layer
-    if (typeof mi.getLayer === 'function' && typeof mi.addLayer === 'function' && !mi.getLayer(props.id)) {
+    if (typeof layerApi.getLayer === 'function' && typeof layerApi.addLayer === 'function' && !layerApi.getLayer(props.id)) {
       const layerType = props.type || 'fill';
       const defaultPaint = layerType === 'circle' ? {
         'circle-radius': 4,
@@ -469,87 +418,161 @@ function EsriFeatureLayer(props) {
         }
       };
       if (props.beforeId) {
-        mi.addLayer(layerConfig, props.beforeId);
+        layerApi.addLayer(layerConfig, props.beforeId);
       } else {
-        mi.addLayer(layerConfig);
+        layerApi.addLayer(layerConfig);
       }
     }
     return () => {
-      if (mi.getStyle?.() && mi.getLayer?.(props.id)) {
-        mi.removeLayer(props.id);
+      if (layerApi.getStyle?.() && layerApi.getLayer?.(props.id)) {
+        layerApi.removeLayer?.(props.id);
       }
       service.remove();
       serviceRef.current = null;
     };
-  }, [map, isMapLoaded, sourceId, props.url, props.where, props.outFields, props.id, props.beforeId, props.visible, props.type]);
+  }, [map, isMapLoaded, sourceId, props.url, props.where, props.outFields, props.id, props.beforeId, props.visible, props.type, props.token, props.apiKey, props.authentication, props.proxy, props.getAttributionFromService, props.requestParams, props.fetchOptions]);
   return null;
 }
 
 /**
- * Hook for using Esri services with Mapbox GL JS (via react-map-gl)
+ * React Map GL component that resolves an ArcGIS portal item id to the matching
+ * esri-gl service and adds a renderer-appropriate layer for it.
  */
-function useEsriMapboxLayer() {
+function EsriPortalLayer(props) {
   const {
-    current: mapRef
-  } = useMap();
-  const map = mapRef?.getMap();
+    current: map
+  } = useReactMapGL();
+  const sourceId = props.sourceId || `esri-portal-${props.id}`;
+  const isMapLoaded = useMapLoaded(map);
+  const serviceRef = useRef(null);
+  useEffect(() => {
+    if (!map || !isMapLoaded || !props.itemId) return;
+    const mapInstance = map.getMap?.();
+    if (!mapInstance) return;
+    const layerApi = mapInstance;
+    const layerId = props.id;
+    let cancelled = false;
+    const options = {};
+    applyAuthOptions(options, props);
+    if (props.layerId !== undefined) options.layerId = props.layerId;
+    if (props.portal !== undefined) options.portal = props.portal;
+    serviceFromPortalItem(sourceId, mapInstance, props.itemId, options).then(async result => {
+      if (cancelled) {
+        try {
+          result.service.remove();
+        } catch {
+          /* ignore */
+        }
+        return;
+      }
+      serviceRef.current = result.service;
+      if (layerApi.getLayer?.(layerId)) {
+        props.onResolve?.(result);
+        return;
+      }
+      let layerConfig;
+      if (result.kind === 'feature' || result.kind === 'vector-tile') {
+        // These services expose a default style (source already set to sourceId).
+        const styled = result.service;
+        const style = await styled.getStyle();
+        if (cancelled || layerApi.getLayer?.(layerId)) return;
+        layerConfig = {
+          ...style,
+          id: layerId,
+          source: sourceId
+        };
+      } else {
+        // dynamic / tiled / image → raster
+        layerConfig = {
+          id: layerId,
+          type: 'raster',
+          source: sourceId
+        };
+      }
+      if (props.visible === false) {
+        layerConfig.layout = {
+          ...(layerConfig.layout || {}),
+          visibility: 'none'
+        };
+      }
+      layerApi.addLayer?.(layerConfig, props.beforeId);
+      props.onResolve?.(result);
+    }).catch(err => {
+      if (!cancelled) console.warn('EsriPortalLayer: failed to resolve portal item', err);
+    });
+    return () => {
+      cancelled = true;
+      try {
+        if (layerApi.getLayer?.(layerId)) layerApi.removeLayer?.(layerId);
+      } catch {
+        /* layer may already be gone */
+      }
+      if (serviceRef.current) {
+        try {
+          serviceRef.current.remove();
+        } catch {
+          /* ignore */
+        }
+        serviceRef.current = null;
+      }
+    };
+    // Note: onResolve is intentionally excluded from deps to avoid re-resolving
+    // when an inline callback identity changes.
+  }, [map, isMapLoaded, sourceId, props.id, props.itemId, props.layerId, props.portal, props.beforeId, props.visible, props.token, props.apiKey, props.authentication]);
+  return null;
+}
+
+/**
+ * Build the `useEsri{Mapbox,Maplibre}Layer` hook result from a map collection
+ * returned by the corresponding react-map-gl `useMap` hook. Keeps the two
+ * flavors of the hook identical except for the map source.
+ */
+function createEsriLayerHooks(collection) {
+  // Preserve legacy return shape: `map` is undefined when no ref, the
+  // underlying map otherwise. Child hooks type `map: Map | null`, so we
+  // coerce for the injection below.
+  const map = collection?.current?.getMap?.();
+  const injectedMap = map ?? null;
   return {
     map,
     useDynamicMapService: options => useDynamicMapService({
       ...options,
-      map
+      map: injectedMap
     }),
     useTiledMapService: options => useTiledMapService({
       ...options,
-      map
+      map: injectedMap
     }),
     useImageService: options => useImageService({
       ...options,
-      map
+      map: injectedMap
     }),
     useVectorTileService: options => useVectorTileService({
       ...options,
-      map
+      map: injectedMap
     }),
     useFeatureService: options => useFeatureService({
       ...options,
-      map
+      map: injectedMap
     })
   };
 }
 
+/**
+ * Hook for using Esri services with Mapbox GL JS (via react-map-gl)
+ */
+function useEsriMapboxLayer() {
+  const collection = useMap();
+  return createEsriLayerHooks(collection);
+}
+
 /**
  * Hook for using Esri services with MapLibre GL JS (via react-map-gl/maplibre)
  */
 function useEsriMaplibreLayer() {
-  const {
-    current: mapRef
-  } = useMap$1();
-  const map = mapRef?.getMap();
-  return {
-    map,
-    useDynamicMapService: options => useDynamicMapService({
-      ...options,
-      map
-    }),
-    useTiledMapService: options => useTiledMapService({
-      ...options,
-      map
-    }),
-    useImageService: options => useImageService({
-      ...options,
-      map
-    }),
-    useVectorTileService: options => useVectorTileService({
-      ...options,
-      map
-    }),
-    useFeatureService: options => useFeatureService({
-      ...options,
-      map
-    })
-  };
+  const collection = useMap$1();
+  return createEsriLayerHooks(collection);
 }
 
-export { DynamicMapService, EsriDynamicLayer, EsriFeatureLayer, EsriImageLayer, EsriTiledLayer, EsriVectorBasemapLayer, EsriVectorTileLayer, FeatureService, ImageService, TiledMapService, VectorBasemapStyle, VectorTileService, useEsriMapboxLayer, useEsriMaplibreLayer };
+export { DynamicMapService, EsriDynamicLayer, EsriFeatureLayer, EsriImageLayer, EsriPortalLayer, EsriTiledLayer, EsriVectorBasemapLayer, EsriVectorTileLayer, FeatureService, ImageService, TiledMapService, VectorBasemapStyle, VectorTileService, esriRequest, serviceFromPortalItem, useEsriMapboxLayer, useEsriMaplibreLayer };
 //# sourceMappingURL=react-map-gl.js.map