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,
Solved! Go to Solution.
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>
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
Juan,
Where are you seeing this "2017 USA Average Household Income"?
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.
Having an example will be fantastic, thanks
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>
Perfect, It worked great, thank you
Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.