MapBox GL JS Map instance
ID to be used when adding refering to this source from layers
Location of the service. Should end in /MapServer
Source id used in the map style
Clears all map event listeners setup by this instance.
Update the list of sublayers and re-render the the map. If
supportsDynamicLayers is enabled, sublayer order and opacity will be
respected.
// reverses layer rendering order and sets one sublayer to 50% transparency
mapService.updateLayers([
{ sublayer: 1, opacity: 0.5 },
{ sublayer: 0, opacity: 1 }
]);SublayerState is an array of objects with sublayer and
optional opacity props.
Update query params sent with each export request and re-render the map. A
list of supported parameters can be found in the Esri REST API docs.
Query parameters will override any values set by this library, such as
format, dpi, size, and bbox.
mapServiceSource.updateQueryParameters({
format: 'png32',
// visualize temporal datasets!
historicMoment: slider.value
})
Update support for adjusting image resolution based on devicePixelRatio and re-render the map. Useful for giving users the option to toggle high-resolution images depending on network conditions.
Generated using TypeDoc
Add an Esri Dynamic Map Service as an image source to a MapBox GL JS map, and use the included methods to update visible sublayers, set layer order and opacity, support high-dpi screens, and transparently deal with issues related to crossing the central meridian.
import { ArcGISDynamicMapService } from "mapbox-gl-esri-sources"; // ... setup your map const populatedPlaces = new ArcGISDynamicMapService( map, "populated-places-source", "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer", { supportsDynamicLayers: true, sublayers: [ { sublayer: 0, opacity: 1 }, { sublayer: 1, opacity: 1 }, { sublayer: 2, opacity: 0.5 }, ], queryParameters: { format: 'png32' } } }); // Don't forget to add a layer to reference your source map.addLayer({ id: "ags-layer", type: "raster", source: populatedPlaces.id, paint: { "raster-fade-duration": 0, "raster-opacity": 0.9 }, }); // turn off the third sublayer and update opacity populatedPlaces.updateLayers([ { sublayer: 0, opacity: 0.5 }, { sublayer: 1, opacity: 1 }, ]); // disable high-dpi screen support populatedPlaces.updateUseDevicePixelRatio(false);ArcGISDynamicMapService