topic Re: How to add "Map Image Layer" created from "Dynamic Map Service" to a map using javascript api in ArcGIS JavaScript Maps SDK Questions

How to add "Map Image Layer" created from "Dynamic Map Service" to a map using javascript api

JuanBetancourt — Thu, 30 Nov 2017 15:49:32 GMT

How to add "Map Image Layer" created from "Dynamic Map Service" to a map using javascript api

I am trying to incorporate the layer "2017 USA Median Household Income" to an ArcGIS javascript map, how can I do that,

Re: How to add "Map Image Layer" created from "Dynamic Map Service" to a map using javascript api

RobertScheitlin__GISP — Thu, 30 Nov 2017 16:14:33 GMT

Juan,

In 3.x:

Add two dynamic maps | ArcGIS API for JavaScript 3.22

In 4.x:

MapImageLayer - Toggle sublayer visibility | ArcGIS API for JavaScript 4.5

Re: How to add "Map Image Layer" created from "Dynamic Map Service" to a map using javascript api

JuanBetancourt — Thu, 30 Nov 2017 16:58:21 GMT

Hi Robert,

thanks for your quick response, im using javascript 3.21

In that example they work straight from the Dynamic Map Service Layer, which would be in my case USA_Demographics_and_Boundaries_2017 which has 49 layers and 1893 attributes

I would prefer to include a layer already build from it like 2017 USA Average Household Income which points to the same url https://demographics7.arcgis.com/arcgis/rest/services/USA_Demographics_and_Boundaries_2017/MapServer, and seems to be build from it and it is already limited to 8 layers and only a few attributes.

2017 USA Average Household Income shows as a "Map Image Layer" in the site, can I just add that layer to my map instead of having to customize the DynamicMapServiceLayer in the javascript code.

Thanks for your patience, I'm probably missing some important concepts here

thanks

Re: How to add "Map Image Layer" created from "Dynamic Map Service" to a map using javascript api

RobertScheitlin__GISP — Thu, 30 Nov 2017 17:09:52 GMT

Juan,

Where are you seeing this "2017 USA Average Household Income"?

Re: How to add "Map Image Layer" created from "Dynamic Map Service" to a map using javascript api

JuanBetancourt — Thu, 30 Nov 2017 17:20:06 GMT

http://www.arcgis.com/home/item.html?id=4b3e17633560425fa1f68a64ab1b573d

Re: How to add "Map Image Layer" created from "Dynamic Map Service" to a map using javascript api

RobertScheitlin__GISP — Thu, 30 Nov 2017 19:03:11 GMT

Juan,

Here is no utility in the JS API to just add a Portal Item like that to the map easily. I am working on a sample for you.

Re: How to add "Map Image Layer" created from "Dynamic Map Service" to a map using javascript api

JuanBetancourt — Fri, 01 Dec 2017 14:26:28 GMT

Having an example will be fantastic, thanks

Re: How to add "Map Image Layer" created from "Dynamic Map Service" to a map using javascript api

RobertScheitlin__GISP — Sat, 11 Dec 2021 22:15:51 GMT

Juan,

Here is the sample:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Create Map and add a dynamic layer</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
    <style>
      html, body, #mapDiv{
        padding: 0;
        margin: 0;
        height: 100%;
      }
    </style>
    <script src="http://js.arcgis.com/3.22/"></script>
    <script>
      var map, portalItem;

      require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/ImageParameters",
        "esri/geometry/Extent",
        "esri/request",
        "esri/arcgis/utils",
        "dojo/Deferred",
        "dojo/_base/array",
        "dojo/_base/lang",
        "esri/layers/DynamicLayerInfo",
        "esri/layers/LayerDrawingOptions"
      ], function (
        Map, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, ImageParameters,
        Extent, esriRequest, arcgisUtils, Deferred, array, lang, DynamicLayerInfo, LayerDrawingOptions) {

        map = new Map("mapDiv", {
          basemap: "topo",
          center: [-122.45, 37.75],
          zoom: 3
        });

        var portalItemStr = "4b3e17633560425fa1f68a64ab1b573d";
        arcgisUtils.getItem(portalItemStr).then(function(result) {
          portalItem = result;
          newMapServiceLayer(portalItem.itemData).then(function(lyr){
            map.addLayer(lyr);
          });
        });

        function newMapServiceLayer(itemData) {
          var self = this,
            dfd = new Deferred();
          var checkVisibleLayers = false;
          var serviceUrl = portalItem.item.url;
          var content = {
            f: "json"
          };
          esriRequest({
            url: serviceUrl,
            content: content,
            handleAs: "json",
            callbackParamName: "callback"
          }, {}).then(
            function(response) {
              var lyr = null;
              var options = {
                id: "2017 USA Average Household Income"
              };
              if (response.tileInfo) {
                lyr = new ArcGISTiledMapServiceLayer(serviceUrl, options);
              } else {
                if (response && response.supportedImageFormatTypes &&
                    response.supportedImageFormatTypes.indexOf("PNG32") !== -1) {
                  options.imageParameters = new ImageParameters();
                  options.imageParameters.format = "png32";
                }
                lyr = new ArcGISDynamicMapServiceLayer(serviceUrl, options);

                if (itemData && itemData.layers && itemData.layers.length > 0) {
                  var expressions = [];
                  var dynamicLayerInfo;
                  var dynamicLayerInfos = [];
                  var drawingOptions;
                  var drawingOptionsArray = [];
                  var source;
                  array.forEach(itemData.layers, function(layerInfo){
                    if (layerInfo.layerDefinition && layerInfo.layerDefinition.definitionExpression) {
                      expressions[layerInfo.id] = layerInfo.layerDefinition.definitionExpression;
                    }
                    if (layerInfo.layerDefinition && layerInfo.layerDefinition.source) {
                      dynamicLayerInfo = null;
                      source = layerInfo.layerDefinition.source;
                      if (source.type === "mapLayer") {
                        var metaLayerInfos = array.filter(response.layers, function(rlyr) {
                          return rlyr.id === source.mapLayerId;
                        });
                        if (metaLayerInfos.length) {
                          dynamicLayerInfo = lang.mixin(metaLayerInfos[0], layerInfo);
                        }
                      }
                      else {
                        dynamicLayerInfo = lang.mixin({}, layerInfo);
                      }
                      if (dynamicLayerInfo) {
                        dynamicLayerInfo.source = source;
                        delete dynamicLayerInfo.popupInfo;
                        dynamicLayerInfo = new DynamicLayerInfo(dynamicLayerInfo);
                        if (itemData.visibleLayers) {
                          var vis = ((typeof itemData.visibleLayers) === "string") ?
                            itemData.visibleLayers.split(",") : itemData.visibleLayers;
                          if (array.indexOf(vis, layerInfo.id) > -1) {
                            dynamicLayerInfo.defaultVisibility = true;
                          } else {
                            dynamicLayerInfo.defaultVisibility = false;
                          }
                        }
                        dynamicLayerInfos.push(dynamicLayerInfo);
                      }
                    }
                    if (layerInfo.layerDefinition && layerInfo.layerDefinition.source &&
                        layerInfo.layerDefinition.drawingInfo) {
                      drawingOptions = new LayerDrawingOptions(layerInfo.layerDefinition.drawingInfo);
                      drawingOptionsArray[layerInfo.id] = drawingOptions;
                    }
                  });

                  if (expressions.length > 0) {
                    lyr.setLayerDefinitions(expressions);
                  }
                  if (dynamicLayerInfos.length > 0) {
                    lyr.setDynamicLayerInfos(dynamicLayerInfos, true);
                    if (drawingOptionsArray.length > 0) {
                      lyr.setLayerDrawingOptions(drawingOptionsArray, true);
                    }
                  } else {
                    checkVisibleLayers = true;
                  }
                }
              }
              dfd.resolve(lyr);
            },
            function(error) {
              dfd.reject(error);
            }
          );
          return dfd;
        }
      });
    </script>
  </head>
  <body class="claro">
    <div id="mapDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to add "Map Image Layer" created from "Dynamic Map Service" to a map using javascript api

JuanBetancourt — Fri, 01 Dec 2017 18:55:06 GMT

Perfect, It worked great, thank you

Re: How to add "Map Image Layer" created from "Dynamic Map Service" to a map using javascript api

RobertScheitlin__GISP — Fri, 01 Dec 2017 18:55:45 GMT

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.