{"id":164041,"date":"2018-05-08T07:01:50","date_gmt":"2018-05-08T07:01:50","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=164041"},"modified":"2018-05-08T16:37:03","modified_gmt":"2018-05-08T16:37:03","slug":"whats-the-deal-with-mapimagelayer","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer","title":{"rendered":"What\u2019s the Deal with MapImageLayer?"},"author":7451,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[30801,30031,24921,27491,43591],"industry":[],"product":[36831,36601],"class_list":["post-164041","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-dynamic-layers","tag-dynamic-map-services","tag-javascript","tag-jsapi4","tag-mapimagelayer","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Learn more about dynamic layers and the exciting MapImageLayer class with the 4.x version of the ArcGIS API for JavaScript.","flexible_content":[{"acf_fc_layout":"content","content":"

At the 2018 Dev Summit, Yann Cabon<\/a> and I presented on Dynamic Map Services<\/a> with the 4.x version of the ArcGIS API for JavaScript<\/a>. We received a lot of excellent feedback, and quickly realized that this topic deserved additional attention. This blog will serve as an opportunity to reintroduce you to MapImageLayer<\/a>, and highlight the highlights from the presentation. Future blogs will dive even deeper into specific capabilities of this class.<\/p>\n

Background<\/h2>\n

If you\u2019re familiar with the 3.x version of the API, then you might remember the class ArcGISDynamicMapServerLayer<\/a>,\u00a0which is both one of the longest and most favored classes in the API. This class is known as MapImageLayer<\/a>\u00a0in the 4.x version of the API. It’s worth noting that\u00a0dynamic layers must be enabled<\/a>\u00a0on the Map Service to unlock the dynamic abilities of MapImageLayer if you are working with ArcGIS Enterprise<\/a>.<\/p>\n

The MapImageLayer proposes a revamped API that allows the developer to easily manipulate Sublayers<\/a>, which represent the different layers of the service, organized in a tree structure.\u00a0MapImageLayer handles all processing on the server, not the client, and\u00a0exports images of features. For example, when a map’s\u00a0View<\/a> stops moving after a user interaction, the MapImageLayer sends a request to the service to get an updated image of the map. In some cases, offloading the processing to the server allows MapImageLayer to render more features with a higher level of performance than other layers.<\/p>\n"},{"acf_fc_layout":"content","content":"

Creating a MapImageLayer<\/h2>\n

MapImageLayers can be created two different ways: from a\u00a0service URL<\/a>\u00a0or from an ArcGIS\u00a0portal\u00a0item ID<\/a>\u00a0(ArcGIS Online or ArcGIS Enterprise). If working with a service URL, MapImageLayers with one or more\u00a0Sublayers<\/a>\u00a0can only be created from a MapServer<\/a>\u00a0(not a FeatureServer<\/a>).<\/p>\n

Here\u2019s an example from a service URL:<\/p>\n

\r\nrequire<\/span>([\"esri\/layers\/MapImageLayer\"<\/span>], function<\/span>(MapImageLayer) {\r\n\r\n  const<\/span> layer = new<\/span> MapImageLayer({\r\n    url: \"https:\/\/sampleserver6.arcgisonline.com\/arcgis\/rest\/services\/USA\/MapServer\"<\/span>\r\n  });\r\n\r\n  map.add(layer);\r\n  \r\n});\r\n<\/code><\/pre>\n
Here\u2019s an example from a portal item:<\/p>\n
\r\nrequire<\/span>([\"esri\/layers\/MapImageLayer\"<\/span>], function<\/span>(MapImageLayer) {\r\n\r\n  const<\/span> layer = new<\/span> MapImageLayer({\r\n    portalItem: {  \/\/ autocasts as new PortalItem()<\/span>\r\n      id: \"e7e03ad8f72b42709e7d63dde8c6c3f5\"<\/span>\r\n    }\r\n  });\r\n\r\n  map.add(layer);\r\n\r\n});\r\n<\/code><\/pre>\n
Customizing a MapImageLayer<\/h2>\n
There are two big deals with\u00a0MapImageLayer. First is the ability to create dynamic layers from map service layers for creating on the fly\u00a0rendering<\/a>, labeling<\/a>, definition expressions<\/a>, and popups<\/a>, with DynamicMapLayer<\/a>. Second is the ability to\u00a0create dynamic layers from other sources in registered workspaces such as tables and table joins, using\u00a0DynamicDataLayer<\/a>. Now let’s explore two specific use cases for working with the\u00a0MapImageLayer.<\/p>\n
1. DynamicMapLayer<\/strong><\/p>\n
Here is a sample app<\/a> that illustrates the power of on the fly customization. The goal is to display information about the populations of major cities in the US. It sets a renderer on three of the Sublayers (Cities, States, and Highways) to make the map visually appealing, and applies both a definition expression and a popup to the Cities Sublayer to allow for further investigation by the user. As a bonus feature, there is an interactive slider at the bottom of the app that allows the user to change the minimum population value for the Cities definition expression to display smaller or larger metropolitan areas.<\/p>\n"},{"acf_fc_layout":"storymap","title":"DynamicMapLayer","description":"","static":false,"storymap_url":"https:\/\/noashx.github.io\/blog\/SublayerPower.html<\/a>"},{"acf_fc_layout":"content","content":"
First, let’s take a look at the renderering. We define three different\u00a0SimpleRenderers<\/a> using\u00a0SimpleMarkerSymbol<\/a>,\u00a0SimpleFillSymbol<\/a>, and\u00a0SimpleLineSymbol<\/a>. Fun fact: none of these class modules will appear in the require statement because they are all autocast<\/a>. Thanks 4.x!<\/p>\n
\r\nvar<\/span> citiesRenderer = {\r\n  type: \"simple\"<\/span>, \/\/ autocasts as new SimpleRenderer()<\/span>\r\n  symbol: {\r\n    type: \"simple-marker\"<\/span>, \/\/ autocasts as new SimpleMarkerSymbol()<\/span>\r\n    size: 14<\/span>,\r\n    color: {a: 1<\/span>, b: 200<\/span>, g: 0<\/span>, r: 0<\/span>},\r\n    style: \"circle\"<\/span>\r\n  },\r\n  label: \"Cities\"<\/span>\r\n};\r\n\r\nvar<\/span> statesRenderer = {\r\n  type: \"simple\"<\/span>, \/\/ autocasts as new SimpleRenderer()<\/span>\r\n  symbol: {\r\n    type: \"simple-fill\"<\/span>, \/\/ autocasts as new SimpleFillSymbol()<\/span>\r\n    style: \"solid\"<\/span>,\r\n    color: {a: 1<\/span>, b: 0<\/span>, g: 0<\/span>, r: 0<\/span>},\r\n    outline: {\r\n      width: 2<\/span>,\r\n      color: {a: 1<\/span>, b: 0<\/span>, g: 200<\/span>, r: 0<\/span>}\r\n    }\r\n  },\r\n  label: \"State boundaries\"<\/span>\r\n};\r\n\r\nvar<\/span> highwaysRenderer = {\r\n  type: \"simple\"<\/span>, \/\/ autocasts as new SimpleRenderer()<\/span>\r\n  symbol: {\r\n    type: \"simple-line\"<\/span>, \/\/ autocasts as new SimpleLineSymbol()<\/span>\r\n    style: \"solid\"<\/span>,\r\n    width: 1.5<\/span>,\r\n    color: {a: 1<\/span>, b: 100<\/span>, g: 100<\/span>, r: 100<\/span>}\r\n  },\r\n  label: \"Interstate highway\"<\/span>\r\n};\r\n<\/code><\/pre>\n
\r\nvar<\/span> layer = new<\/span> MapImageLayer({\r\n  portalItem: { \/\/ autocasts as new PortalItem()<\/span>\r\n    id: \"e7e03ad8f72b42709e7d63dde8c6c3f5\"<\/span>\r\n  },\r\n  sublayers: [\r\n  {\r\n    id: 2<\/span>,\r\n    title: \"States\"<\/span>,\r\n    visible: true<\/span>,\r\n    renderer: statesRenderer\r\n  },\r\n  {\r\n    id: 3<\/span>,\r\n    title: \"Counties\"<\/span>,\r\n    visible: false<\/span>\r\n  },\r\n  {\r\n    id: 1<\/span>,\r\n    title: \"Highways\"<\/span>,\r\n    visible: true<\/span>,\r\n    renderer: highwaysRenderer\r\n  },\r\n  {\r\n    id: 0<\/span>,\r\n    title: \"Cities\"<\/span>,\r\n    visible: true<\/span>,\r\n    renderer: citiesRenderer,\r\n    definitionExpression: \"pop2000 > 100000\"<\/span>,\r\n    popupTemplate: {\r\n      title: \"{areaname}\"<\/span>,\r\n      content: \"{pop2000} people call the city of {areaname}, {st} home\"<\/span>\r\n    }\r\n  }]\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
2. DynamicDataLayer<\/strong><\/p>\n
Here is a another\u00a0sample app<\/a> that illustrates the ability to create a DynamicDataLayer from\u00a0a TableDataSource. This layer shows Railroads, and is initially turned off (visibility set to false). You can toggle on the visibility of Railroads by selecting the layer name at the bottom. There is also a dark-themed Legend<\/a>, which is inordinately large in the embedded app, but normal size in the link to the sample above.<\/p>\n"},{"acf_fc_layout":"storymap","title":"DynamicDataLayer","description":"","static":false,"storymap_url":"https:\/\/noashx.github.io\/blog\/DynamicDataLayer.html<\/a>"},{"acf_fc_layout":"content","content":"
The renderer for the Railroad layer is similar to that of the other layers. The interesting part is how the Railroad is added as a Sublayer. Notice that everything looks much the same, except we have a new property called dataSource<\/strong>. For a\u00a0TableDataSource, the\u00a0workspaceId<\/span>\u00a0<\/strong>is the workspace where the table resides as defined in the ArcGIS Server Manager. The\u00a0dataSourceName<\/span>\u00a0<\/strong>is the\u00a0name of the table in the registered workspace. Again, I get these values from our\u00a0ArcGIS Server<\/span>\u00a0administrator who published the workspace. Lastly, if there are multiple versions of the geodatabase, the\u00a0gdbVersion<\/span>\u00a0<\/strong>references the specific\u00a0geodatabase version that we want to target. Here is a code snippet that shows this in action.<\/p>\n
\r\nvar<\/span> railroadsRenderer = {\r\n  type: \"simple\"<\/span>,  \/\/ autocasts as new SimpleRenderer()<\/span>\r\n  symbol: {\r\n    type: \"simple-line\"<\/span>,  \/\/ autocasts as new SimpleLineSymbol()<\/span>\r\n    color: [255<\/span>, 255<\/span>, 255<\/span>, 0.5<\/span>],\r\n    width: 2<\/span>,\r\n    style: \"long-dash-dot-dot\"<\/span>\r\n  },\r\n  label: \"Railroad\"<\/span>\r\n};\r\n\r\n\/*...*\/<\/span>\r\n\r\nlayer = new<\/span> MapImageLayer({\r\n  portalItem: {  \/\/ autocasts as new PortalItem()<\/span>\r\n    id: \"e7e03ad8f72b42709e7d63dde8c6c3f5\"<\/span>\r\n  },\r\n  sublayers: [\r\n  {\r\n    id: 2<\/span>,\r\n    title: \"States\"<\/span>,\r\n    visible: true<\/span>,\r\n    renderer: statesRenderer\r\n  }, {\r\n    id: 1<\/span>,\r\n    title: \"Highways\"<\/span>,\r\n    visible: true<\/span>,\r\n    renderer: highwaysRenderer\r\n  }, {\r\n    id: 4<\/span>,\r\n    title: \"Railroads\"<\/span>,\r\n    visible: false<\/span>,\r\n    renderer: railroadsRenderer,\r\n    source: {\r\n      \/\/ indicates the source of the sublayer is a dynamic data layer<\/span>\r\n      type: \"data-layer\"<\/span>,\r\n      \/\/ this object defines the data source of the layer<\/span>\r\n      \/\/ in this case it's a feature class table from a file geodatabase<\/span>\r\n      dataSource: {\r\n        type: \"table\"<\/span>,\r\n        \/\/ workspace name<\/span>\r\n        workspaceId: \"MyDatabaseWorkspaceIDSSR2\"<\/span>,\r\n        \/\/ table name<\/span>\r\n        dataSourceName: \"ss6.gdb.Railroads\"<\/span>\r\n      }\r\n    }\r\n  }, {\r\n    id: 0<\/span>,\r\n    title: \"Cities\"<\/span>,\r\n    visible: true<\/span>,\r\n    renderer: citiesRenderer,\r\n    definitionExpression: \"pop2000 > 50000\"<\/span>\r\n  }]\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
MapImageLayer and FeatureLayer<\/h2>\n
A common question we get asked while talking about MapImageLayer is: “When do I use MapImageLayer instead of FeatureLayer?”<\/p>\n
Here are the three main reasons<\/strong> people typically choose MapImageLayer instead of FeatureLayer:<\/p>\n
    \n
  1. Server-side processing of MapImageLayer can improve the speed and performance of the application<\/li>\n
  2. Rendering and labeling use cases that are not supported on the client<\/li>\n
  3. Ability to display and interrogate features in registered workspaces<\/li>\n<\/ol>\n
    Because the FeatureLayer requires downloading the features to the client for processing, the\u00a0MapImageLayer can be more performant in some use cases. There are several factors that affect\u00a0speed and performance, so this will not be true for every application. Similarly, some rendering (e.g. military symbology) might not be supported on the client, so choosing\u00a0MapImageLayer and server-side processing would be the best solution, regardless of performance. Lastly, the ability to\u00a0display, query, and join data in registered workspaces is a powerful ability that\u00a0MapImageLayer offers to developers.<\/p>\n
    However, for all their differences, the 4.x API introduced a lot of commonality between these two classes as well. Both MapImageLayers and FeatureLayers can be created from an ArcGIS portal\u00a0item ID. If working with a service URL, MapImageLayers can only be created from a MapServer, while FeatureLayers can be created from a MapServer\u00a0or a FeatureServer. While a MapServer or FeatureServer can have multiple FeatureLayers, a MapServer will typically only have one MapImageLayer with one or more Sublayers (each Sublayer can be thought of as the URL equivalent to a FeatureLayer). Here’s an example from a MapServer:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":165081,"id":165081,"title":"USAMapServer","filename":"USAMapServer.png","filesize":13023,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/USAMapServer.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer\/usamapserver","alt":"","author":"7451","description":"","caption":"","name":"usamapserver","status":"inherit","uploaded_to":164041,"date":"2018-04-26 18:49:16","modified":"2018-04-26 18:49:16","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":873,"height":529,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/USAMapServer.png","thumbnail-width":213,"thumbnail-height":129,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/USAMapServer.png","medium-width":431,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/USAMapServer.png","medium_large-width":768,"medium_large-height":465,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/USAMapServer.png","large-width":873,"large-height":529,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/USAMapServer.png","1536x1536-width":873,"1536x1536-height":529,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/USAMapServer.png","2048x2048-width":873,"2048x2048-height":529,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/USAMapServer.png","card_image-width":767,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/USAMapServer.png","wide_image-width":873,"wide_image-height":529}},"image_position":"left-center","orientation":"horizontal","hyperlink":"http:\/\/sampleserver6.arcgisonline.com\/arcgis\/rest\/services\/USA\/MapServer"},{"acf_fc_layout":"content","content":"
    Here is a code snippet that shows how to create a FeatureLayer for each layer in the MapServer:<\/p>\n
    \r\nrequire<\/span>([\"esri\/layers\/FeatureLayer\"<\/span>], function<\/span>(FeatureLayer) {\r\n\r\n  const<\/span> layer_0 = new<\/span> FeatureLayer({\r\n    url: \"https:\/\/sampleserver6.arcgisonline.com\/arcgis\/rest\/services\/USA\/MapServer\/0\"<\/span>,\r\n    title: \"Cities\"<\/span>\r\n  });\r\n\r\n  const<\/span> layer_1 = new<\/span> FeatureLayer({\r\n    url: \"https:\/\/sampleserver6.arcgisonline.com\/arcgis\/rest\/services\/USA\/MapServer\/1\"<\/span>,\r\n    title: \"Highways\"<\/span>\r\n  });\r\n\r\n  const<\/span> layer_2 = new<\/span> FeatureLayer({\r\n    url: \"https:\/\/sampleserver6.arcgisonline.com\/arcgis\/rest\/services\/USA\/MapServer\/2\"<\/span>,\r\n    title: \"States\"<\/span>\r\n  });\r\n\r\n  const<\/span> layer_3 = new<\/span> FeatureLayer({\r\n    url: \"https:\/\/sampleserver6.arcgisonline.com\/arcgis\/rest\/services\/USA\/MapServer\/3\"<\/span>,\r\n    title: \"Counties\"<\/span>\r\n  });\r\n\r\n  map.addMany([layer_2, layer_3, layer_1, layer_0])\r\n\r\n});\r\n<\/code><\/pre>\n
    And here is a code snippet that shows how to create a MapImageLayer from the same MapServer. The Sublayer IDs correspond to the URLs of the FeatureLayers:<\/p>\n
    \r\nrequire<\/span>([\"esri\/layers\/MapImageLayer\"<\/span>], function<\/span>(MapImageLayer) {\r\n\r\n  const<\/span> layer = new<\/span> MapImageLayer({\r\n  url: \"https:\/\/sampleserver6.arcgisonline.com\/arcgis\/rest\/services\/USA\/MapServer\"<\/span>,\r\n    sublayers: [\r\n     {\r\n       id: 2<\/span>,\r\n       title: \"States\"<\/span>\r\n       visible: true<\/span>\r\n     }, {\r\n       id: 3<\/span>,\r\n       title: \"Counties\"<\/span>\r\n       visible: true<\/span>\r\n     }, {\r\n       id: 1<\/span>,\r\n       title: \"Highways\"<\/span>\r\n       visible: true<\/span>\r\n     }, {\r\n       id: 0<\/span>,\r\n       title: \"Cities\"<\/span>,\r\n       visible: true<\/span>\r\n     }\r\n   ]\r\n  });\r\n\r\n  map.add(layer);\r\n\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
    Notice that we added the FeatureLayers to the map in the same order that we ordered the Sublayers in the MapImageLayer constructor. This allows us to maintain a logical drawing order with the points (cities) on top, followed by highways (polylines), then counties (polygons) and lastly states (polygons) on the bottom.<\/p>\n"},{"acf_fc_layout":"content","content":"
    Conclusion<\/h2>\n
    MapImageLayer is a big deal. This blog reviewed some core concepts, and highlighted two use cases. If you’re looking for more examples, here is a link to the MapImageLayer samples<\/a> we host on our site.\u00a0Stay tuned for future blogs that will dive deeper into specific capabilities of the\u00a0MapImageLayer class.<\/p>\n"}],"authors":[{"ID":7451,"user_firstname":"Noah","user_lastname":"Sager","nickname":"Noah Sager","user_nicename":"noah-sager","display_name":"Noah Sager","user_email":"NSager@esri.com","user_url":"https:\/\/www.noahsager.net\/","user_registered":"2018-03-21 18:21:19","user_description":"Passionate about JavaScript, maps, and writing (not necessarily in that order). Big fan of squirrels. Journeyman mapper of Utility Lines and Public Restrooms. Product Engineer on the ArcGIS API for JavaScript team. In Noah\u2019s spare time, he also enjoys parenting.","user_avatar":""}],"related_articles":[{"ID":72001,"post_author":"6561","post_date":"2016-05-25 06:00:32","post_date_gmt":"2016-05-25 06:00:32","post_content":"","post_title":"Smart Mapping with dynamic workspaces","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"smart-mapping-with-dynamic-workspaces","to_ping":"","pinged":"","post_modified":"2018-05-25 22:42:20","post_modified_gmt":"2018-05-25 22:42:20","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/smart-mapping-with-dynamic-workspaces\/","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":82461,"post_author":"7641","post_date":"2018-04-17 20:45:15","post_date_gmt":"2018-04-17 20:45:15","post_content":"","post_title":"Refreshing dynamic layers automatically","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"refreshing-dynamic-layers-automatically","to_ping":"","pinged":"","post_modified":"2018-04-18 03:53:03","post_modified_gmt":"2018-04-18 03:53:03","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/refreshing-dynamic-layers-automatically\/","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":140441,"post_author":"7451","post_date":"2018-04-19 17:30:15","post_date_gmt":"2018-04-19 17:30:15","post_content":"","post_title":"ArcGIS API for JavaScript versions 4.7 and 3.24 released","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"arcgis-api-for-javascript-versions-4-7-and-3-24-released","to_ping":"","pinged":"","post_modified":"2018-05-07 16:18:46","post_modified_gmt":"2018-05-07 16:18:46","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=140441","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/card.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/wide.png"},"yoast_head":"\nWhat\u2019s the Deal with MapImageLayer?<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What\u2019s the Deal with MapImageLayer?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2018-05-08T16:37:03+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer\"},\"author\":{\"name\":\"Noah Sager\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/31358cd525c152696fcd5fe96f49e068\"},\"headline\":\"What\u2019s the Deal with MapImageLayer?\",\"datePublished\":\"2018-05-08T07:01:50+00:00\",\"dateModified\":\"2018-05-08T16:37:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"dynamic layers\",\"dynamic map services\",\"JavaScript\",\"jsapi4\",\"MapImageLayer\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer\",\"name\":\"What\u2019s the Deal with MapImageLayer?\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2018-05-08T07:01:50+00:00\",\"dateModified\":\"2018-05-08T16:37:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What\u2019s the Deal with MapImageLayer?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/31358cd525c152696fcd5fe96f49e068\",\"name\":\"Noah Sager\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6807cdccf3ddd5b30b84cdf9368ce6736c3d0ff9bd0a09c1f5efc03253069b64?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6807cdccf3ddd5b30b84cdf9368ce6736c3d0ff9bd0a09c1f5efc03253069b64?s=96&d=blank&r=g\",\"caption\":\"Noah Sager\"},\"description\":\"Passionate about JavaScript, maps, and writing (not necessarily in that order). Big fan of squirrels. Journeyman mapper of Utility Lines and Public Restrooms. Product Engineer on the ArcGIS API for JavaScript team. In Noah\u2019s spare time, he also enjoys parenting.\",\"sameAs\":[\"https:\/\/www.noahsager.net\/\",\"https:\/\/www.linkedin.com\/in\/noah-sager\",\"https:\/\/x.com\/noashx\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/noah-sager\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What\u2019s the Deal with MapImageLayer?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer","og_locale":"en_US","og_type":"article","og_title":"What\u2019s the Deal with MapImageLayer?","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2018-05-08T16:37:03+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer"},"author":{"name":"Noah Sager","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/31358cd525c152696fcd5fe96f49e068"},"headline":"What\u2019s the Deal with MapImageLayer?","datePublished":"2018-05-08T07:01:50+00:00","dateModified":"2018-05-08T16:37:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer"},"wordCount":6,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["dynamic layers","dynamic map services","JavaScript","jsapi4","MapImageLayer"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer","name":"What\u2019s the Deal with MapImageLayer?","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2018-05-08T07:01:50+00:00","dateModified":"2018-05-08T16:37:03+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"What\u2019s the Deal with MapImageLayer?"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/31358cd525c152696fcd5fe96f49e068","name":"Noah Sager","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6807cdccf3ddd5b30b84cdf9368ce6736c3d0ff9bd0a09c1f5efc03253069b64?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6807cdccf3ddd5b30b84cdf9368ce6736c3d0ff9bd0a09c1f5efc03253069b64?s=96&d=blank&r=g","caption":"Noah Sager"},"description":"Passionate about JavaScript, maps, and writing (not necessarily in that order). Big fan of squirrels. Journeyman mapper of Utility Lines and Public Restrooms. Product Engineer on the ArcGIS API for JavaScript team. In Noah\u2019s spare time, he also enjoys parenting.","sameAs":["https:\/\/www.noahsager.net\/","https:\/\/www.linkedin.com\/in\/noah-sager","https:\/\/x.com\/noashx"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/noah-sager"}]}},"text_date":"May 8, 2018","author_name":"Noah Sager","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/noah-sager","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/wide.png","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":30801,"name":"dynamic layers","slug":"dynamic-layers","term_group":0,"term_taxonomy_id":30801,"taxonomy":"post_tag","description":"","parent":0,"count":5,"filter":"raw"},{"term_id":30031,"name":"dynamic map services","slug":"dynamic-map-services","term_group":0,"term_taxonomy_id":30031,"taxonomy":"post_tag","description":"","parent":0,"count":2,"filter":"raw"},{"term_id":24921,"name":"JavaScript","slug":"javascript","term_group":0,"term_taxonomy_id":24921,"taxonomy":"post_tag","description":"","parent":0,"count":151,"filter":"raw"},{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"filter":"raw"},{"term_id":43591,"name":"MapImageLayer","slug":"mapimagelayer","term_group":0,"term_taxonomy_id":43591,"taxonomy":"post_tag","description":"","parent":0,"count":2,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2683,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":361,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":761,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/164041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/7451"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=164041"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/164041\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=164041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=164041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=164041"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=164041"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=164041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
A DynamicDataLayer<\/a> is created on the fly from data stored in a\u00a0registered workspace<\/a>, but isn’t explicitly exposed via the service URL. There are four types of these DynamicDataLayers, which are classified based on their data source:\u00a0JoinTableDataSource<\/a>,\u00a0QueryTableDataSource<\/a>,\u00a0RasterDataSource<\/a>, and\u00a0TableDataSource<\/a>.\u00a0The data may be tables with or without geometries, feature classes, or rasters.\u00a0Data from tables may be joined to other tables or dynamic map layers. For reference, look back at the\u00a0USA (MapServer)<\/a> mentioned earlier in this blog; there were four Sublayers listed, but no tables or other types of registered workspaces. However, I know that our\u00a0ArcGIS Server\u00a0administrator published a registered workspace here as well. Here’s a screenshot from ArcGIS Server Manager where you could do this configuration.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":169871,"id":169871,"title":"ServerManagerScreenshot_2","filename":"ServerManagerScreenshot_2.png","filesize":66140,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/05\/ServerManagerScreenshot_2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/whats-the-deal-with-mapimagelayer\/servermanagerscreenshot_2","alt":"","author":"7451","description":"","caption":"Enabling dynamic layers and registered workspaces with ArcGIS Server Manager.","name":"servermanagerscreenshot_2","status":"inherit","uploaded_to":164041,"date":"2018-05-02 17:38:56","modified":"2018-05-02 17:43:24","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":964,"height":740,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/05\/ServerManagerScreenshot_2.png","thumbnail-width":213,"thumbnail-height":164,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/05\/ServerManagerScreenshot_2.png","medium-width":340,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/05\/ServerManagerScreenshot_2.png","medium_large-width":768,"medium_large-height":590,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/05\/ServerManagerScreenshot_2.png","large-width":964,"large-height":740,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/05\/ServerManagerScreenshot_2.png","1536x1536-width":964,"1536x1536-height":740,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/05\/ServerManagerScreenshot_2.png","2048x2048-width":964,"2048x2048-height":740,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/05\/ServerManagerScreenshot_2.png","card_image-width":606,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/05\/ServerManagerScreenshot_2.png","wide_image-width":964,"wide_image-height":740}},"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
Next, let’s apply those renderers to the relevant Sublayers, and then add the definition expression (to only display cities with a population greater than 100,000 initially) and popupTemplate<\/a> (to display the exact city population and name in the respective state) to the Cities Sublayer. It’s worth mentioning that when you define Sublayers, you will want to manually order them so they display in a logical drawing order (e.g. polygons on bottom, point on top).<\/p>\n
Both methods create the same MapImageLayer. One of the benefits of working with a portal item<\/a> is that the styling (e.g. symbology, definition expressions, popups) that was previously configured is honored in the new MapImageLayer. This reduces the amount of code the developer needs to add. Now let’s dive into customizing the MapImageLayer in the code.<\/p>\n"},{"acf_fc_layout":"content","content":"