{"id":201202,"date":"2018-09-06T07:30:23","date_gmt":"2018-09-06T14:30:23","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=201202"},"modified":"2018-09-05T11:14:53","modified_gmt":"2018-09-05T18:14:53","slug":"now-showing-in-3d-mapimagelayer","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer","title":{"rendered":"Now Showing in 3D: 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":[23771],"tags":[27491,43591],"industry":[],"product":[36831,36601],"class_list":["post-201202","blog","type-blog","status-publish","format-standard","hentry","category-3d-gis","tag-jsapi4","tag-mapimagelayer","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Use 3D symbology with the MapImageLayer class and the 4.x version of the ArcGIS API for JavaScript.","flexible_content":[{"acf_fc_layout":"content","content":"

MapImageLayer<\/a> is a big deal. So big that it can be displayed in MapViews<\/a> or SceneViews<\/a>, with labels, with popups, with registered workspaces<\/a>, and it can be dynamically rendered on the fly when dynamic layers are enabled<\/a>\u00a0on the Map Service. For more background information, you can check out the previous blog:\u00a0What\u2019s the Deal with MapImageLayer?<\/a><\/p>\n

At the\u00a0April release<\/a> of the ArcGIS API for JavaScript, you can create a FeatureLayer equivalent of a MapImageLayer sublayer by using the\u00a0createFeatureLayer()<\/a> method on the Sublayer<\/a> class. This means that you can now do things like unlock the power of 3D web mapping using a 2D MapImageLayer by making use of the 3D capabilities of the FeatureLayer.<\/p>\n"},{"acf_fc_layout":"content","content":"

Kristian Ekenes<\/a>\u00a0recently published a blog about building 3D web apps with 2D data<\/a>, which inspired me to think more about 3D web applications. Using the new\u00a0createFeatureLayer()<\/a> method on the Sublayer class you can now make use of visualization tools like Smart Mapping<\/a>\u00a0and\u00a0visual variables<\/a>. You can also use 3D symbologies like PointSymbol3D<\/a> and WebStyleSymbol<\/a>. Now let’s take a look at a 3D web application using this new createFeatureLayer() method with MapImageLayer.<\/p>\n

This\u00a0sample app<\/a> shows population in US cities in a SceneView, using a map service<\/a> as the data source.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":291412,"id":291412,"title":"data-dynamic-layer","filename":"data-dynamic-layer.png","filesize":166978,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/data-dynamic-layer.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer\/data-dynamic-layer","alt":"","author":"7451","description":"","caption":"","name":"data-dynamic-layer","status":"inherit","uploaded_to":201202,"date":"2018-07-30 21:43:26","modified":"2018-07-30 21:43:26","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":1882,"height":786,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/data-dynamic-layer.png","thumbnail-width":213,"thumbnail-height":89,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/data-dynamic-layer.png","medium-width":464,"medium-height":194,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/data-dynamic-layer.png","medium_large-width":768,"medium_large-height":321,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/data-dynamic-layer.png","large-width":1882,"large-height":786,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/data-dynamic-layer.png","1536x1536-width":1536,"1536x1536-height":641,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/data-dynamic-layer.png","2048x2048-width":1882,"2048x2048-height":786,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/data-dynamic-layer.png","card_image-width":826,"card_image-height":345,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/07\/data-dynamic-layer.png","wide_image-width":1882,"wide_image-height":786}},"image_position":"left-center","orientation":"horizontal","hyperlink":"https:\/\/noashx.github.io\/blog\/3D_dynamic_data_layers.html"},{"acf_fc_layout":"content","content":"

First, we initialize the MapImageLayer, and define the sublayers. Here we make extensive use of dynamic layers<\/a>\u00a0for their ability to render and create layers on the fly. Four of the sublayers are accessbile directly from the REST endpoint<\/a>, and two are DynamicDataLayers<\/a>. These DynamicDataLayers reside in registered workspaces, and are created using a TableDataSource<\/a> and a\u00a0QueryTableDataSource<\/a>. Note that the Places sublayer will be used later to create a FeatureLayer, so it’s visibility is initially set to false<\/code>.<\/p>\n

const<\/span> mlayer = new<\/span> MapImageLayer({\r\n  url: \"https:\/\/sampleserver6.arcgisonline.com\/arcgis\/rest\/services\/USA\/MapServer\"<\/span>,\r\n  sublayers: [\r\n  {\r\n    id: 0<\/span>,\r\n    title: \"Cities\"<\/span>,\r\n    visible: false<\/span>\r\n  }, {\r\n    id: 1<\/span>,\r\n    title: \"Highways\"<\/span>,\r\n    visible: false<\/span>\r\n  }, {\r\n    id: 2<\/span>,\r\n    title: \"States\"<\/span>,\r\n    visible: true<\/span>,\r\n    renderer: stateRenderer\r\n  }, {\r\n    id: 3<\/span>,\r\n    title: \"Counties\"<\/span>,\r\n    visible: false<\/span>\r\n  }, {\r\n    id: 4<\/span>,\r\n    title: \"Places\"<\/span>,\r\n    visible: false<\/span>,\r\n    source: {\r\n      type: \"data-layer\"<\/span>,\r\n      dataSource: {\r\n        type: \"query-table\"<\/span>,\r\n        workspaceId: \"MyDatabaseWorkspaceIDSSR2\"<\/span>,\r\n        query: \"SELECT * FROM ss6.gdb.Places WHERE population > 20000\"<\/span>,\r\n        oidFields: \"objectid\"<\/span>\r\n      }\r\n    }\r\n  }, {\r\n    id: 5<\/span>,\r\n    title: \"Railroads\"<\/span>,\r\n    visible: true<\/span>,\r\n    renderer: railRenderer,\r\n    source: {\r\n      type: \"data-layer\"<\/span>,\r\n      dataSource: {\r\n        type: \"table\"<\/span>,\r\n        workspaceId: \"MyDatabaseWorkspaceIDSSR2\"<\/span>,\r\n        dataSourceName: \"ss6.gdb.Railroads\"<\/span>\r\n      }\r\n    }\r\n  }]\r\n});\r\n<\/code><\/pre>\n
mlayer.when(function<\/span>() {\r\n  const<\/span> mSublayer = mlayer.findSublayerById(4<\/span>);\r\n  const<\/span> mSublayerFeatureLayer = mSublayer.createFeatureLayer();\r\n  mSublayerFeatureLayer.visible = true<\/span>;\r\n\r\n  map.add(mSublayerFeatureLayer);\r\n};\r\n<\/code><\/pre>\n
mSublayerFeatureLayer.renderer = {\r\n  type: \"simple\"<\/span>,  \/\/ autocasts as new SimpleRenderer()<\/span>\r\n  symbol: {\r\n    type: \"point-3d\"<\/span>,  \/\/ autocasts as new PointSymbol3D()<\/span>\r\n    symbolLayers: [\r\n      {\r\n        type: \"object\"<\/span>,  \/\/ autocasts as new ObjectSymbol3DLayer()<\/span>\r\n        resource: {\r\n          primitive: \"cylinder\"<\/span>\r\n        },\r\n        width: 25000<\/span>  \/\/ width of the symbol in meters<\/span>\r\n      }\r\n    ]\r\n  },\r\n  label: \"Population\"<\/span>,\r\n  visualVariables: [\r\n    {\r\n      type: \"size\"<\/span>,  \/\/ SizeVisualVariable<\/span>\r\n      field: \"population\"<\/span>,\r\n      stops: [\r\n        {\r\n          value: 20000<\/span>,\r\n          size: 25000<\/span>\r\n        },\r\n        {\r\n          value: 2500000<\/span>,\r\n          size: 1000000<\/span>\r\n        }\r\n      ],\r\n      axis: \"height\"<\/span>\r\n    }, {\r\n      type: \"color\"<\/span>,  \/\/ ColorVisualVariable<\/span>\r\n      field: \"population\"<\/span>,\r\n      stops: [\r\n        {\r\n          value: 20000<\/span>,\r\n          color: \"yellow\"<\/span>\r\n        },\r\n        {\r\n          value: 2500000<\/span>,\r\n          color: \"red\"<\/span>\r\n        }\r\n      ]\r\n    }, {\r\n      type: \"size\"<\/span>,\r\n      axis: \"width-and-depth\"<\/span>,\r\n      useSymbolValue: true<\/span>  \/\/ uses the width value defined in the symbol layer<\/span>\r\n    }\r\n  ]\r\n};\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
Raluca Nicola<\/a>\u00a0created another app<\/a>,\u00a0showing population in world cities in a local WebScene<\/a>, to demonstrate just how beautiful and powerful this functionality can be.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":313042,"id":313042,"title":"raluca_app","filename":"raluca_app.png","filesize":103430,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/raluca_app.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer\/raluca_app","alt":"","author":"7451","description":"","caption":"","name":"raluca_app","status":"inherit","uploaded_to":201202,"date":"2018-09-05 18:02:27","modified":"2018-09-05 18:02:27","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":1371,"height":590,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/raluca_app.png","thumbnail-width":213,"thumbnail-height":92,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/raluca_app.png","medium-width":464,"medium-height":200,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/raluca_app.png","medium_large-width":768,"medium_large-height":331,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/raluca_app.png","large-width":1371,"large-height":590,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/raluca_app.png","1536x1536-width":1371,"1536x1536-height":590,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/raluca_app.png","2048x2048-width":1371,"2048x2048-height":590,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/raluca_app.png","card_image-width":826,"card_image-height":355,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/raluca_app.png","wide_image-width":1371,"wide_image-height":590}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ralucanicola.github.io\/JSAPI_demos\/urban-population-3d\/index.html?mode=local"},{"acf_fc_layout":"content","content":"
This is a great example of using custom WebStyleSymbols<\/a>\u00a0to symbolize a MapImageLayer containing 2D data. A web style can be referenced with a URL<\/a> or a registered style’s unique name<\/a>\u00a0(you can learn how to publish your own custom WebStyleSymbol in this blog<\/a>). Instead of dots and cylinders, we now have custom 3D building symbols rendered with a ClassBreaksRenderer<\/a>, which are also added to the legend. Then,\u00a0two\u00a0LabelClasses<\/a>\u00a0are added to display labels for cities of certain population sizes (> 2,000,000), and popups\u00a0are added using the\u00a0PopupTemplate<\/a>.<\/p>\n
 <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":312562,"id":312562,"title":"MajorCities","filename":"MajorCities.png","filesize":9219,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/MajorCities.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer\/majorcities","alt":"","author":"7451","description":"","caption":"","name":"majorcities","status":"inherit","uploaded_to":201202,"date":"2018-09-04 21:36:52","modified":"2018-09-04 21:36:52","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":311,"height":216,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/MajorCities.png","thumbnail-width":213,"thumbnail-height":148,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/MajorCities.png","medium-width":311,"medium-height":216,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/MajorCities.png","medium_large-width":311,"medium_large-height":216,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/MajorCities.png","large-width":311,"large-height":216,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/MajorCities.png","1536x1536-width":311,"1536x1536-height":216,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/MajorCities.png","2048x2048-width":311,"2048x2048-height":216,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/MajorCities.png","card_image-width":311,"card_image-height":216,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/MajorCities.png","wide_image-width":311,"wide_image-height":216}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
For comparison, here<\/a> is what the Map Service looked like when it was initially published.<\/p>\n
This blog explored using 3D symbology and visual variables with the MapImageLayer. Combining the\u00a0createFeatureLayer()<\/a> method with the dynamic abilities of MapImageLayer greatly enhances the visualization options that are available. Other opportunities, such as using smart mapping with the MapImageLayer<\/a>, can also be found in our samples. One last thing worth noting is that while we can now create a\u00a0FeatureLayer<\/a>\u00a0instance based on a Sublayer’s configuration,\u00a0FeatureLayers\u00a0can also be constructed with dynamic data sources by passing the appropriate data source to the\u00a0dynamicDataSource<\/a> property of the FeatureLayer. Stay tuned for more exciting developments with the ArcGIS API for JavaScript.<\/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":164041,"post_author":"7451","post_date":"2018-05-08 07:01:50","post_date_gmt":"2018-05-08 07:01:50","post_content":"","post_title":"What\u2019s the Deal with MapImageLayer?","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"whats-the-deal-with-mapimagelayer","to_ping":"","pinged":"","post_modified":"2018-05-08 16:37:03","post_modified_gmt":"2018-05-08 16:37:03","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=164041","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":156611,"post_author":"6561","post_date":"2018-04-24 07:00:01","post_date_gmt":"2018-04-24 07:00:01","post_content":"","post_title":"Build 3D web apps with your 2D data","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"build-3d-web-apps-with-your-2d-data","to_ping":"","pinged":"","post_modified":"2018-04-23 23:12:30","post_modified_gmt":"2018-04-23 23:12:30","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=156611","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":307942,"post_author":"6561","post_date":"2018-09-04 08:00:09","post_date_gmt":"2018-09-04 15:00:09","post_content":"","post_title":"Build web apps for exploring data in dynamic workspaces","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"explore-data-in-dynamic-workspaces-with-smart-mapping","to_ping":"","pinged":"","post_modified":"2018-08-31 12:48:12","post_modified_gmt":"2018-08-31 19:48:12","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=307942","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\/06\/card-1.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/09\/newBanner3.png"},"yoast_head":"\nNow Showing in 3D: 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\/3d-gis\/now-showing-in-3d-mapimagelayer\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Now Showing in 3D: MapImageLayer\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\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\/3d-gis\/now-showing-in-3d-mapimagelayer#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer\"},\"author\":{\"name\":\"Noah Sager\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/31358cd525c152696fcd5fe96f49e068\"},\"headline\":\"Now Showing in 3D: MapImageLayer\",\"datePublished\":\"2018-09-06T14:30:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"jsapi4\",\"MapImageLayer\"],\"articleSection\":[\"3D Visualization & Analytics\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer\",\"name\":\"Now Showing in 3D: MapImageLayer\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2018-09-06T14:30:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Now Showing in 3D: 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":"Now Showing in 3D: 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\/3d-gis\/now-showing-in-3d-mapimagelayer","og_locale":"en_US","og_type":"article","og_title":"Now Showing in 3D: MapImageLayer","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","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\/3d-gis\/now-showing-in-3d-mapimagelayer#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer"},"author":{"name":"Noah Sager","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/31358cd525c152696fcd5fe96f49e068"},"headline":"Now Showing in 3D: MapImageLayer","datePublished":"2018-09-06T14:30:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer"},"wordCount":5,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["jsapi4","MapImageLayer"],"articleSection":["3D Visualization & Analytics"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer","name":"Now Showing in 3D: MapImageLayer","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2018-09-06T14:30:23+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/now-showing-in-3d-mapimagelayer#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Now Showing in 3D: 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":"September 6, 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\/09\/newBanner3.png","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"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":23771,"name":"3D Visualization & Analytics","slug":"3d-gis","term_group":0,"term_taxonomy_id":23771,"taxonomy":"category","description":"","parent":0,"count":694,"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":363,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":765,"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\/201202","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=201202"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/201202\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=201202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=201202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=201202"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=201202"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=201202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
We also add two LabelClasses<\/a> to display labels for cities of certain population sizes. Cities with populations over 1,000,000 people have large labels, and cities with populations between 400,000 and 1,000,000 have small labels. Cities with fewer than 400,000 people are not labeled to avoid overcrowding the map. For more information about labeling, refer to our Labeling Guide<\/a> page.<\/p>\n
Next, we can treat the newly created FeatureLayer much the same way we treat any FeatureLayer. We apply a SimpleRenderer<\/a> using PointSymbol3D<\/a>, and enhance the display with two visual variables: size<\/a> and color<\/a>. Now we have our features rendered with continuous size and color ramps, defined by stops<\/code> we configured in the code.<\/p>\n
After the MapImageLayer is ready, we use the\u00a0findSublayerById()<\/a>\u00a0method on the MapImageLayer to return the Places sublayer. Then we call the\u00a0createFeatureLayer()<\/a> method on that same sublayer to create a new FeatureLayer, set its visibility to true<\/code>, and add it to the map.<\/p>\n