POST
|
Thanks Ken. However, now the popup shows the values for all the layers. Is it possible to show only the toggled layers? (put the && layer.visible back?) When the popup shows the value for a toggled layer, it also shows the value for a hidden layer (not included in the layerlist but added to the map and set as not visible).
... View more
08-02-2019
11:47 AM
|
0
|
0
|
887
|
POST
|
Thanks Ken. I have a few more questions: (1) How to change the popup text based on different layers? (2) Is it possible to access the attribute table (The rasterURL2 has a attribute table with a text field and I would like to show the text instead of the value field)? (3) Can I show pixel values for two layers together in the identifytask popup box (even if I have only one layer toggled)? One layer is visible and the other layer is hidden.
... View more
08-02-2019
07:32 AM
|
0
|
2
|
887
|
POST
|
I am trying to incorporate the code from this thread into my work but it seems something is wrong. multiple ArcGISDynamicMapServiceLayer IdentifyTask I would appreciate your help. Thanks. <!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>soil map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<style>
html, body, .container, #map {
height:100%;
width:100%;
margin:0;
padding:0;
margin:0;
font-family: "Open Sans";
}
#map {
padding:0;
}
#layerListPane{
width:25%;
}
.esriLayer{
background-color: #fff;
}
.esriLayerList .esriList{
border-top:none;
}
.esriLayerList .esriTitle {
background-color: #fff;
border-bottom:none;
}
.esriLayerList .esriList ul{
background-color: #fff;
}
#search {
display: block;
position: absolute;
z-index: 3;
top: 20px;
left: 75px;
}
#HomeButton {
position: absolute;
top: 100px;
left: 15px;
z-index: 50;
}
</style>
//<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://js.arcgis.com/3.29/"></script>
<script>
require([
"dojo/parser",
"esri/dijit/Popup",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/Color",
"dojo/dom-construct",
"esri/map",
"esri/dijit/HomeButton",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/dijit/LayerList",
"esri/dijit/Search",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"dojo/_base/array",
"esri/InfoTemplate",
"dojo/dom",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/promise/all",
"dojo/domReady!"
], function (
parser, Popup, SimpleFillSymbol, SimpleLineSymbol, Color, domConstruct,
Map, HomeButton, ArcGISDynamicMapServiceLayer, LayerList, Search, Legend, Scalebar,
IdentifyTask, IdentifyParameters, arrayUtils, InfoTemplate, All,
dom
) {
parser.parse();
var map, identifyTask, identifyParams;
var popup = new Popup({
fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))
}, domConstruct.create("div"));
map = new Map("map", {
basemap: "topo",
center: [-90.125, 40],
zoom: 8,
infoWindow: popup
});
dojo.connect(map, "onLoad", mapReady);
var rasterURL1 = "https://mapsweb.lib.purdue.edu/arcgis/rest/services/Ag/Subirrigation_suitability/MapServer";
var operationalLayer1 = new ArcGISDynamicMapServiceLayer(rasterURL1,{ opacity: .90 });
var rasterURL2 = "https://mapsweb.lib.purdue.edu/arcgis/rest/services/Ag/Drainage_class/MapServer";
var operationalLayer2 = new ArcGISDynamicMapServiceLayer(rasterURL5,{ opacity: .90 });
map.addLayers([operationalLayer1,operationalLayer2]);
var layerList = new LayerList({
map: map,
layers: [
{
layer: operationalLayer1,
id: "Subirrigation_suitability"
},
{
layer: operationalLayer2,
id: "Drainage_class"
}
],
showLegend: true,
showSubLayers: false,
showOpacitySlider: false
},"layerList");
layerList.startup();
var search = new Search({
map: map,
}, dom.byId("search"));
search.startup();
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
var scalebar = new Scalebar({
map: map,
scalebarUnit: "dual"
});
scalebar.startup();
function mapReady(map) {
dojo.connect(map, "onClick", runIdentifies);
}
function runIdentifies(evt) {
identifyResults = [];
idPoint = evt.mapPoint;
var layers = dojo.map(map.layerIds, function (layerId) {
return map.getLayer(layerId);
});
layers = dojo.filter(layers, function (layer) {
if (layer.visibleLayers[0] !== -1) {
return layer.getImageUrl && layer.visible
}
}); //Only dynamic layers have the getImageUrl function. Filter so you only query visible dynamic layers
var tasks = dojo.map(layers, function (layer) {
return new esri.tasks.IdentifyTask(layer.url);
}); //map each visible dynamic layer to a new identify task, using the layer url
var defTasks = dojo.map(tasks, function (task) {
return new dojo.Deferred();
}); //map each identify task to a new dojo.Deferred
var params = createIdentifyParams(layers, evt);
var promises = [];
for (i = 0; i < tasks.length; i++) {
promises.push(tasks[i].execute(params[i])); //Execute each task
}
//document.write(r);
var allPromises = new All(promises);
allPromises.then(function (r) { executeIdentifyTask(r, tasks); });
}
function createIdentifyParams(layers, evt) {
var identifyParamsList = [];
identifyParamsList.length = 0;
dojo.forEach(layers, function (layer) {
var idParams = new esri.tasks.IdentifyParameters();
idParams.width = map.width;
idParams.height = map.height;
idParams.geometry = evt.mapPoint;
idParams.mapExtent = map.extent;
idParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;
var visLayers = layer.visibleLayers;
if (visLayers !== -1) {
var subLayers = [];
for (var i = 0; i < layer.layerInfos.length; i++) {
if (layer.layerInfos[i].subLayerIds == null)
subLayers.push(layer.layerInfos[i].id);
}
idParams.layerIds = subLayers;
} else {
idParams.layerIds = [];
}
idParams.tolerance = 3;
idParams.returnGeometry = true;
identifyParamsList.push(idParams);
});
return identifyParamsList;
}
function executeIdentifyTask(r, tasks) {
var results = [];
var taskUrls = [];
r = dojo.filter(r, function (result) {
return r[0];
});
for (i = 0; i < r.length; i++) {
results = results.concat(r[i]);
for (j = 0; j < r[i].length; j++) {
taskUrls = taskUrls.concat(tasks[i].url);
}
}
window.alert(taskUrls);
results = dojo.map(results, function (result, index) {
var feature = result.feature;
var layerName = result.layerName;
var serviceUrl = taskUrls[index];
feature.attributes.layerName = result.layerName;
var template = new InfoTemplate("", "Service Url: " + serviceUrl + "<br/><br/>Layer name: " + result.layerName + "Subirrigation suitability for this pixel is (scaled at 0-1): " + parseFloat(feature.attributes['Pixel Value']).toFixed(2));
feature.setInfoTemplate(template);
var resultGeometry = feature.geometry;
var resultType = resultGeometry.type;
return feature;
});
if (results.length === 0) {
map.infoWindow.clearFeatures();
} else {
map.infoWindow.setFeatures(results);
}
map.infoWindow.show(idPoint);
return results;
}
});
</script>
</head>
<body class="claro">
<div class="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="layerList"></div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div id="search"></div>
<div id="HomeButton"></div>
</div>
</div>
</body>
</html>
... View more
08-02-2019
06:33 AM
|
0
|
4
|
1071
|
POST
|
Robert, I found another example from this thread and try to incorporate into my code but it does not work correctly. I will create a new question and would appreciate your inputs. Thanks. https://community.esri.com/thread/94154 Feng
... View more
08-02-2019
06:22 AM
|
0
|
0
|
264
|
POST
|
Robert, Thanks, but I still do not understand the concept of async tasks. I am new to javascript and is there any simpler way to do this? What I need is just to provide users with toggle on/off (by click) for layers and popup for currently toggled layers.
... View more
08-01-2019
01:56 PM
|
0
|
2
|
264
|
POST
|
Robert, Thanks. Would it be possible to provide an example for this? How do I return the currently toggled layers and show specific popups for them?
... View more
08-01-2019
06:19 AM
|
0
|
4
|
1408
|
POST
|
Thanks Robert. So how to use this for raster layers (pixel values)? Some of my raster layers have attribute table but some do not (float type).
... View more
08-01-2019
05:35 AM
|
0
|
6
|
1408
|
POST
|
Thank you very much Robert. I would like to know if you have any comment on the identifyTask? I want to show the values for each layer that is toggled on in the layerlist panel. identifyTask = new IdentifyTask(rasterURL1);
... View more
07-31-2019
08:49 AM
|
0
|
8
|
1408
|
POST
|
Robert, Thank you for your response. I added this missing css file and it does look better. However, all of the widgets and the layerlist are stacked together on the left. Could you collaborate a bit more about the placement since I have already set the panel to the right?
... View more
07-31-2019
07:04 AM
|
0
|
10
|
1408
|
POST
|
I want to combine the popup function (identify the pixel values or feature attributes for MapService) and layerlist widget, potentially add some other widgets. I follow the example for the ESRI's javascript API description but the widgets seem to be misplaced and the popup does not show in the current location. The content plane has been set to the right and the widgets to the left, but still not working. I would appreciate any inputs regarding this issue. <!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>soil map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/themes/calcite/esri/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
<style>
html, body, .container, #map {
height:100%;
width:100%;
margin:0;
padding:0;
margin:0;
font-family: "Open Sans";
}
#map {
padding:0;
}
#layerListPane{
width:25%;
}
.esriLayer{
background-color: #fff;
}
.esriLayerList .esriList{
border-top:none;
}
.esriLayerList .esriTitle {
background-color: #fff;
border-bottom:none;
}
.esriLayerList .esriList ul{
background-color: #fff;
}
#search {
display: block;
position: absolute;
z-index: 3;
top: 20px;
left: 75px;
}
#HomeButton {
position: absolute;
top: 100px;
left: 15px;
z-index: 50;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://js.arcgis.com/3.29/"></script>
<script>
require([
"esri/dijit/Popup",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/Color",
"dojo/dom-construct",
"esri/map",
"esri/dijit/HomeButton",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/dijit/LayerList",
"esri/dijit/Search",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"dojo/_base/array",
"esri/InfoTemplate",
"dojo/dom",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function (
Popup, SimpleFillSymbol, SimpleLineSymbol, Color, domConstruct,
Map, HomeButton, ArcGISDynamicMapServiceLayer, LayerList, Search, Legend, Scalebar,
IdentifyTask, IdentifyParameters, arrayUtils, InfoTemplate,
dom
){
var map, identifyTask, identifyParams;
var popup = new Popup({
fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))
}, domConstruct.create("div"));
map = new Map("map", {
basemap: "topo",
center: [-90.125, 40],
zoom: 8,
infoWindow: popup
});
map.on("load", mapReady);
var rasterURL1 = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
var operationalLayer1 = new ArcGISDynamicMapServiceLayer(rasterURL1, { opacity: .80 });
map.addLayers([operationalLayer1]);
var layerList = new LayerList({
map: map,
layers: [{
layer: operationalLayer1,
id: "sub"
}],
showLegend: true,
showSubLayers: false,
showOpacitySlider: true
},"layerList");
layerList.startup();
var rasterURL2 = "https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer";
map.addLayer(new ArcGISDynamicMapServiceLayer(rasterURL2,
{ opacity: .90 }));
var search = new Search({
map: map,
}, dom.byId("search"));
search.startup();
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
var scalebar = new Scalebar({
map: map,
scalebarUnit: "dual"
});
scalebar.startup();
function mapReady () {
map.on("click", executeIdentifyTask);
//create identify tasks and setup parameters
identifyTask = new IdentifyTask(rasterURL1);
identifyParams = new IdentifyParameters();
identifyParams.tolerance = 1;
identifyParams.returnGeometry = true;
identifyParams.layerIds = [0,1];
identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
identifyParams.width = map.width;
identifyParams.height = map.height;
}
function executeIdentifyTask (event) {
identifyParams.geometry = event.mapPoint;
identifyParams.mapExtent = map.extent;
var deferred = identifyTask
.execute(identifyParams);
deferred.addCallback(function (response) {
return arrayUtils.map(response, function (result) {
var feature = result.feature;
var layerName = result.layerName;
//alert(result);
feature.attributes.layerName = layerName;
if (layerName === 'Census Block Points') {
var taxParcelTemplate = new InfoTemplate(layerName,
"the oject value is: " + feature.attributes['STATE_FIPS']);
feature.setInfoTemplate(taxParcelTemplate);
}
else if (layerName === 'KS_FIELD_OUTLINES_SPRING2005_GEONAD27') {
var taxParcelTemplate = new InfoTemplate(layerName,
"the oject value is: : " + feature.attributes['FIELD_NAME']);
feature.setInfoTemplate(taxParcelTemplate);
}
return feature;
});
});
map.infoWindow.setFeatures([deferred]);
map.infoWindow.show(event.mapPoint);
}
});
</script>
</head>
<body class="claro">
<div class="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false">
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="layerList"></div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="search" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"></div>
<div id="legendDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"></div>
<div id="HomeButton" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"></div>
</div>
</body>
</html>
... View more
07-31-2019
06:29 AM
|
1
|
12
|
2213
|
POST
|
Hi Dawn! Could you share your insights on what is the best way to visualize flood events in ArcGIS? I have modeled flood and runoff results and high resolution DEM and satellite imagery available to use. I would like to accurately show the results and effects in 3D, instead of using coarse representation of uniform water level. Thanks!
... View more
12-08-2017
10:52 AM
|
2
|
1
|
577
|
Title | Kudos | Posted |
---|---|---|
1 | 07-31-2019 06:29 AM | |
2 | 12-08-2017 10:52 AM |
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:23 AM
|