Working with Dynamic Map Services
in the ArcGIS API for JavaScript
6:00PM - 6:30PM
Wednesday - 03/06/2019
Noah Sager (Product Engineer)
##
Introduction To MapImageLayer
MapImageLayer may be created in two ways: - from a service URL - from an ArcGIS portal item ID
## 1) Reference a service URL ```js require(["esri/layers/MapImageLayer"], function(MapImageLayer){ // references an ArcGIS Enterprise server Map Service var layer = new MapImageLayer({ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer" }); map.add(layer); // adds the layer to the map }); ```
## 2) Reference a portal item ID ```js require(["esri/layers/MapImageLayer"], function(MapImageLayer){ // references an ArcGIS Online item pointing to a Map Service, // this could also be an ArcGIS Enterprise portal Item var layer = new MapImageLayer({ portalItem: { // autocasts as new PortalItem id: "e7e03ad8f72b42709e7d63dde8c6c3f5" } }); map.add(layer); // adds the layer to the map }); ```
## sublayers ```js var layer = new MapImageLayer({ url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", sublayers: [{ id: 2, visible: false }, { id: 1, visible: true }] }); ``` ## allSublayers ```js // finds one sublayer from a parent sublayer of the MapImageLayer var tractsId = 5; var tracksSublayer = layer.allSublayers.find(function(sublayer){ return sublayer.id === tracksId; }); ```
##
LayerList and Legend Widgets with MapImageLayer
## LayerList Widget ```js view.when(function() { var layerList = new LayerList({ view: view }); //Add LayerList widget to the top right corner of the view view.ui.add(layerList, "top-right"); }); ```
## Legend Widget ```js view.when(function() { var legend = new Legend({ view: view }); //Add Legend widget to the bottom left corner of the view view.ui.add(legend, "bottom-left"); }); ```
##
Renderers On Sublayer
## Renderers On Sublayer ```js var statesRenderer = { type: "simple", // autocasts as new SimpleRenderer() symbol: { type: "simple-fill", // autocasts as new SimpleFillSymbol() style: "solid", color: {a: 1, b: 0, g: 0, r: 0}, } }; var layer = new MapImageLayer({ portalItem: { id: "e7e03ad8f72b42709e7d63dde8c6c3f5"}, sublayers: [{ id: 2, renderer: statesRenderer }] }); ```
##
Definition Expression On Sublayer
## Definition Expression on Sublayer ```js var layer = new MapImageLayer({ portalItem: { // autocasts as new PortalItem() id: "e7e03ad8f72b42709e7d63dde8c6c3f5" }, sublayers: [ { id: 0, visible: true, renderer: citiesRenderer, definitionExpression: "pop2000 > 100000" }] }); ```
##
Label Sublayers
## Label Sublayers ```js sublayers: [{ id: 3, labelsVisible: true, labelingInfo: [{ // labelingInfo autocasts to an array of LabelClass objects labelExpression: "[name]", labelPlacement: "always-horizontal", symbol: { type: "text", // autocasts as new TextSymbol() color: [255, 255, 255, 0.7], haloColor: [0, 0, 0, 0.7], haloSize: 1, font: { size: 11 } } }] }] ```
##
Popups on Sublayers
## Popups on Sublayers ```js sublayers: [ { id: 0, renderer: citiesRenderer, opacity: 0.6, popupTemplate: { title: "{areaname}", content: "{pop2000} people call the city of {areaname},{st} home" } }] ```
##
Layer From Workspace + Toggle Sublayers
####
https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer
## Layer From Workspace + Toggle Sublayers ```js sublayers: [ { id: 4, visible: false, title: "Railroads", renderer: railroadsRenderer, source: { // indicates the source of the sublayer is a dynamic data layer type: "data-layer", // this object defines the data source of the layer (feature class table from a file geodatabase) dataSource: { type: "table", workspaceId: "MyDatabaseWorkspaceIDSSR2", // workspace name dataSourceName: "ss6.gdb.Railroads" // table name } }] ```
##
Dynamic Layer with Table Join
## Dynamic Layer with Table Join ```js var layer = new MapImageLayer({ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", title: "United States Population", sublayers: [{ title: "Share of population with Norwegian Ancestry", id: 0, opacity: 0.75, source: { // indicates the source of the sublayer is a dynamic data layer type: "data-layer", // this object defines the data source of the layer // in this case it's a joined table dataSource: { type: "join-table", // for joined tables you need to define a left table source // and a right table source. In this case, the left table // is the map layer containing feature geometries. The ID // is the layer ID of the sublayer in the service. leftTableSource: { type: "map-layer", mapLayerId: 3 }, // The right table source is another data layer object. // In this case it is a plain table that resides in the // workspace. Simply indicate the ID of the workspace and // the name of the table rightTableSource: { type: "data-layer", dataSource: { type: "table", workspaceId: "CensusFileGDBWorkspaceID", dataSourceName: "ancestry" } }, // For the joint to be complete, you must indicate the // primary key and the foreign key to match the table // records from each respective source. In this case // we will match table records with the state name. // So we must indicate the field in each table containing // the state name. leftTableKey: "STATE_NAME", rightTableKey: "State", // Indicates the join type. In this case all records from // the map layer are retained even if they don't have // matching records in the ancestry table. joinType: "left-outer-join" } }, ```
##
Dynamic Layer with Raster Data
## Dynamic Layer with Raster Data ```js var layer = new MapImageLayer({ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Elevation/GlacierBay/MapServer", minScale: 2000000, sublayers: [{ id: 1, title: "hillshade", source: { // indicates the source of the sublayer is a dynamic data layer type: "data-layer", // this object defines the data source of the layer // in this case it's a raster located in a registered workspace dataSource: { type: "raster", workspaceId: "GlacierBayID", dataSourceName: "gb_hillshade" } } }, { id: 0, title: "dem" }] }); ```
## Smart Mapping and Visual Variables? ### createFeatureLayer()
## Smart Mapping ```js require(["esri/renderers/smartMapping/creators/size"], function(sizeRendererCreator) { view.when(function(){ var states = layer.findSublayerById(0); sizeRendererCreator.createContinuousRenderer({ layer: states.createFeatureLayer(), field: "pop2000", basemap: "dark-gray", maxValue: 1000000 }).then(function(r){ states.renderer = r.renderer; }); }); } ```