POST
|
Thank you Christian for pointing me in the right direction! I have figured it out and am happy with the results. If anyone else is interested, swap the view.when function in the previous code sample with the function shown is this code snippet. var layerListUSA = new LayerList({
view: view,
container: "listDiv1"
});
var layerListCensus = new LayerList({
view: view,
container: "listDiv2"
});
view.when(function() {
watchUtils.when(layerListUSA, 'operationalItems.length', function() {
var elementsUSA = document.getElementsByClassName('esri-layer-list__item esri-layer-list__item--has-children');
elementsUSA[0].style.display = "none";
});
watchUtils.when(layerListCensus, 'operationalItems.length', function() {
var elementsCensus = document.getElementsByClassName('esri-layer-list__item esri-layer-list__item--has-children');
elementsCensus[3].style.display = "none";
});
});
... View more
07-01-2020
01:52 PM
|
3
|
0
|
2113
|
POST
|
Hi Christian, Thank you for the suggestion. I have tried to play with the listMode before but it hides the layer in both LayerLists. Your method gave me a different approach but unfortunately it didn't work. In my test example below I want the USALayer to display in the layerlist on the left and the CensusLayer to show on the right. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>LayerList widgets testing - 4.15</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.divClass {
width: 240px;
border: 2px solid #00467F;
background-color: white;
border-radius: 10px;
}
#listDiv1 {
position: absolute;
top: 30px;
left: 55px;
}
#listDiv2 {
position: absolute;
top: 30px;
right: 40px;
}
</style>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GroupLayer",
"esri/layers/MapImageLayer",
"esri/widgets/LayerList"
], function(Map, MapView, GroupLayer, MapImageLayer, LayerList) {
var USALayer = new MapImageLayer({
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
title: "US Sample Data"
});
var censusLayer = new MapImageLayer({
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
title: "US Sample Census",
visible: false
});
var map = new Map({
basemap: "dark-gray"
});
var view = new MapView({
center: [-98.5795, 39.8282],
zoom: 5,
container: "viewDiv",
map: map
});
map.addMany([USALayer, censusLayer]);
var layerListUSA = new LayerList({
view: view,
container: "listDiv1"
});
var layerListCensus = new LayerList({
view: view,
container: "listDiv2"
});
view.when(function() {
var hideInDiv1 = ["US Sample Census"];
var hideInDiv2 = ["US Sample Data"];
var itemsUSA = layerListUSA.operationalItems.items;
for (var j = 0; j < itemsUSA.length; j++) {
if (hideInDiv1.indexOf(itemsUSA[j].title) >= 0) {
itemsUSA[j].layer.listMode = "hide";
}
}
var itemsCensus = layerListCensus.operationalItems.items;
for (var j = 0; j < itemsCensus.length; j++) {
if (hideInDiv2.indexOf(itemsCensus[j].title) >= 0) {
itemsCensus[j].layer.listMode = "hide";
}
if (hideInDiv1.indexOf(itemsCensus[j].title) >= 0) {
itemsCensus[j].layer.listMode = "show";
}
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="listDiv1" class="divClass"></div>
<div id="listDiv2" class="divClass"></div>
</body></html>
... View more
06-22-2020
08:19 AM
|
0
|
2
|
2113
|
POST
|
I am developing a web app using JS api 4.15. The clients really want to have multiple layerlists where each contains a different category of data. I was excited to find the example in this thread Multiple LayerLists In Web App but while it works in 4.12, I can't figure out how to get it to work in 4.15. Has anyone successfully adapted this code to work in 4.15 or can anyone help me with this?
... View more
06-21-2020
04:49 PM
|
0
|
5
|
2366
|
POST
|
Hi, I am trying to modify the multiple layerList code for use with the latest ArcGIS JavaScript api 4.15 and am not having much luck. I tried removing dojo query and domStyle and substituting vanilla javascript but got lost trying to capture the list and manipulate it. Has anyone successfully upgrade this code or can anyone help me with this? Thanks.
... View more
06-02-2020
02:00 PM
|
0
|
0
|
689
|
POST
|
Thank you so much Kelly! Your changes made a world of difference and I can now complete my project.
... View more
07-06-2016
06:27 AM
|
1
|
0
|
1815
|
POST
|
Hi, I have based my Javascript api 3.17 code on the Info window with chart | ArcGIS API for JavaScript 3.17 sample. I am using a dynamicMapServiceLayer instead of a FeatureLayer and I have defined a layout in html. I have programmatically created a tab container within the popup so that the user can view info about the polygon and then see graphs and a table in the other tabs. My problem is that when I click on the map and the popup appears, the first tab appears selected but no content is shown. Other tabs clicked work appropriately. When the original tab is click, then the content is visible. I would like the content to be visible when the popup opens and not have to click back and forth on the tabs to see the first content pane. I've done a lot of searching and have seen one or two posts with a similar problem. The solution given is to do a resize, however that doesn't seem to work for me. Perhaps I did not put it in the correct place. I have also inspected the elements and see that the div with role="tabpanel" has a class="dijitTabContainerTopChildWrapper dijitHidden" . When a tab in the tabcontainer is clicked and shows its contents then the class changes to "dijitTabContainerTopChildWrapper dijitVisible". I am at a loss on how to make my selected tab be visible. Can anyone please help me? I have included my test code below. <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Info Window with Chart</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<style>
html,
body, #contentDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
padding: 0;
border-color: black;
border-width: 1px;
}
#header {
height: 60px;
}
#rightPane {
width: 20%;
}
.claro .tabStripButton {
display: none;
}
</style>
<script src="https://js.arcgis.com/3.17/"></script>
<script>
var map;
var theme = "Wetland";
require([
"esri/map", "esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
"esri/dijit/InfoWindow", "esri/InfoTemplate", "esri/dijit/Popup", "esri/layers/ImageParameters",
"esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
"dijit/layout/ContentPane", "dijit/layout/TabContainer",
"dojox/charting/Chart2D", "dojox/charting/plot2d/Pie",
"dojox/charting/action2d/Highlight", "dojox/charting/action2d/MoveSlice", "dojox/charting/action2d/Tooltip",
"dojox/charting/themes/" + theme,
"dojo/dom-construct", "dojo/dom-class",
"dojo/number", "dojo/parser", "dijit/layout/BorderContainer", "dojo/domReady!"
], function (
Map, FeatureLayer, ArcGISDynamicMapServiceLayer,
InfoWindow, InfoTemplate, Popup, ImageParameters,
SimpleFillSymbol, SimpleRenderer,
ContentPane, TabContainer,
Chart2D, Pie,
Highlight, MoveSlice, Tooltip,
dojoxTheme,
domConstruct, domClass,
number, parser
) {
parser.parse();
// Use the info window instead of the popup.
var popupOptions = {
marginLeft: "40",
marginTop: "100"
};
var vosaraPopup = new Popup(popupOptions, domConstruct.create("div"));
vosaraPopup.visibleWhenEmpty = false;
vosaraPopup.hideDelay = 0;
// InfoTemplate titles ....
var reefInfoTemplate = new InfoTemplate();
reefInfoTemplate.setTitle("<b>${NAME}: ${SQMI} sq miles</b>");
reefInfoTemplate.setContent(getWindowContent);
map = new Map("map", {
basemap: "streets",
center: [-76.6435, 37.3905],
infoWindow: vosaraPopup,
zoom: 10
});
map.infoWindow.resize(400, 350);
var imageParametersCen = new ImageParameters();
var layerDefsFP = [];
layerDefsFP[3] = "STATE_FIPS LIKE '51%'";
imageParametersCen.layerDefinitions = layerDefsFP;
imageParametersCen.layerIds = [2];
imageParametersCen.layerOption = ImageParameters.LAYER_OPTION_SHOW;
imageParametersCen.transparent = true;
var censusLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", {
"imageParameters": imageParametersCen,
"opacity": 1,
id: 'census'
});
censusLayer.setVisibility(true);
censusLayer.setVisibleLayers([2]);
censusLayer.setInfoTemplates({
2: {
infoTemplate: reefInfoTemplate
}
});
map.addLayer(censusLayer);
function getWindowContent(censusLayer) {
// Make a tab container.
var tc = new TabContainer({
style: "width:100%;height:100%;",
id: "tabc"
}, domConstruct.create("div"));
// Display attribute information.
var cp1 = new ContentPane({
title: "Details",
content: "<br>Description: <br><br><b>County/City Name:</b>" + censusLayer.attributes.NAME + "<br><b>2000 Population:</b>" + censusLayer.attributes.POP2000 + "<br><b>2007 Population:</b>" + censusLayer.attributes.POP2007 + "<br>"
});
var cp2 = new ContentPane({
title: "Oyster Graph",
content: "a graph here"
});
var cp3 = new ContentPane({
title: "Shell Graph",
content: "another graph"
});
var cp5 = new ContentPane({
title: "Harvest Table",
content: "a table here"
});
tc.addChild(cp1);
tc.addChild(cp2);
tc.addChild(cp3);
tc.addChild(cp5);
return tc.domNode;
}
});
</script>
</head>
<body class="claro">
<div id="contentDiv" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<p id="pTitle">Header</p>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden">
</div>
<div id="rightPane" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'right'">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Map Contents:'">
<div id="bcrs" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', region: 'right', gutters: false">
<div id="tocDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
</div>
<div id="legDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom', splitter: true">
</div>
</div>
</div>
<div data-dojo-type="dijit/layout/TabContainer" title="About" nested="true" selected="true">
<div id="introDiv1" data-dojo-type="dijit/layout/ContentPane" title="Intro" selected="true">
Help me figure this out! Click on a county and a popwindow appears. Notice that the first tab (Details) is selected but no content shows. Click another tab and content is visible. Click on the Details tab and now the content shows. How do I get the content to be visible without having to click back and forth?
</div>
<div id="methDiv" data-dojo-type="dijit/layout/ContentPane" title="Methods">
more text here
</div>
<div id="helpDiv" data-dojo-type="dijit/layout/ContentPane" title="Help">
still more text here.
</div>
</div>
</div>
</div>
</body>
</html>
Thank so much for any help that can be provided! edit: sorry, I don't think inserting my code worked so I've added it as an attachment.
... View more
07-04-2016
10:43 AM
|
0
|
6
|
5393
|
POST
|
I am using NLiu's TOC widget in my javascript api 3.16 webapp and it is working quite well. However, I have added several Feature Layers that are scale dependent and would like to have them grayed out and the check boxes disabled when they are out of scale. The TOC widget does this for my Dynamic map service layers but not for my Feature Layers. I have used the developer tools to inspect the elements of the TOC and I can see that the check boxes and the divs for each layer have ids. I can use these ids in the css file to change style properties but I can not seem to find a way to programmatically disable/enable the check boxes or gray out the div from within the Javascript code. For example: registry.byId("dijit_form_CheckBox_0").disabled = true; results in "TypeError: Cannot set property 'disabled' of undefined(…)" dom.byId("dijit_form_CheckBox_0").disabled = true; results in "TypeError: Cannot set property 'disabled' of null(…)" domStyle.set("dijit__Widget_1", "color", "rgba(130,130,130,127)"); results in "TypeError: Cannot read property 'style' of null(…)" Here is what I see when I inspect the TOC with the developer tools: Does anyone have any suggestions? Thanks.
... View more
06-02-2016
08:15 AM
|
0
|
0
|
1934
|
POST
|
That is it! Thank you so much. I spent far too long trying to figure that out!
... View more
05-31-2016
02:22 PM
|
0
|
0
|
1178
|
POST
|
I am using esri/dijit/Popup in my javascript api 3.16 web application to return information about various layers. I have an image service identify task tied to the map click that returns an elevation and displays it in a div in the corner of the map. I would like to be able to hide the elevation div when I close the popup window, however I don't know what to listen for when I click the close button since there is no "id" associated with it. I've looked at the api reference for the popup class and I have tried using the code snippet - connect.connect(popup,"onHide",function(){ console.log('info window is hidden'); }); I've tried using '"on" instead of "connect" but nothing works. I saw someone had posted a similar question and received an answer however that solution works only in the new javascript api 4.0. Can anyone help me? Thanks!
... View more
05-31-2016
12:11 PM
|
1
|
2
|
4738
|
POST
|
Hi, I have modified the identify code to give me results for multiple data layers and show them in a viewstack within the info window. My problem is that I can't figure out how to clear the previous text values when a new identify is performed. For example: the first identify is on an overlapping point and line so I have results for the line in one viewstack content and results for the point in another viewstack content. The second identify is only on a line - I get new results for the line but the previous point result is retained. I have tried setting the infoTextArea.htmlText to a blank value or a set text within the mapClickHandler function but my infowindow doesn't open. I've tried setting it within the the myResultFunction and had luck when the first infoTextArea.htmlText was set but when more than one was set, the infowindow did not open. Does anyone have any suggestions? Here is part of my code (I have commented out my attempts at resetting my infoTextArea.htmlText): private function mapClickHandler(event:MapMouseEvent):void { clickGraphicsLayer.clear(); var identifyParams:IdentifyParameters = new IdentifyParameters(); identifyParams.returnGeometry = true; identifyParams.tolerance = 5; identifyParams.width = mapOne.width; identifyParams.height = mapOne.height; identifyParams.geometry = event.mapPoint; identifyParams.mapExtent = mapOne.extent; identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL; identifyParams.spatialReference = mapOne.spatialReference; var clickGraphic:Graphic = new Graphic(event.mapPoint, clickPtSym); clickGraphicsLayer.add(clickGraphic); //infoTextArea2.htmlText = "No data"; //infoTextArea3.htmlText = "No data"; //infoTextArea13.htmlText = "No data"; //infoTextArea17.htmlText = "No data"; identifyTask.execute(identifyParams, new AsyncResponder(myResultFunction, myFaultFunction, clickGraphic)); } private function myResultFunction(results:Array, clickGraphic:Graphic = null):void { if (results && results.length > 0) { var resultsArray0:Array = []; var resultsArray1:Array = []; var resultsArray2:Array = []; var resultsArray3:Array = []; //var emptyLabel2:String; //var emptyLabel3:String; //var emptyLabel13:String; //var emptyLabel17:String; //infoTextArea2.htmlText = emptyLabel2; //infoTextArea3.htmlText = emptyLabel3; //infoTextArea13.htmlText = emptyLabel13; //infoTextArea17.htmlText = emptyLabel17; for (var i:int = 0; i < results.length; i++) { var result:IdentifyResult = results; var resultGraphic:Graphic = result.feature; var mapPoint:MapPoint = MapPoint(clickGraphic.geometry); var point:Point = mapOne.toScreen(mapPoint); var label:String; var re:int = result.layerId; switch (result.layerId) { case 0: { resultsArray0.push(result.feature.attributes); Alert.show("permit"); infoTextArea2.htmlText = "<b>Permit Number: </b>" + resultGraphic.attributes.PERMIT_NO; resultGraphic.symbol = smsIdentify; break; } case 1: { resultsArray1.push(result.feature.attributes); Alert.show("astru"); infoTextArea3.htmlText = "<b>Access Structure: </b>" + resultGraphic.attributes.PNTSTRUC + "\n<b>Field Survey Date: </b>" + resultGraphic.attributes.GPS_Date; resultGraphic.symbol = smsIdentify; break; } case 2: { resultsArray2.push(result.feature.attributes); Alert.show("lubc"); infoTextArea13.htmlText = "<b>Field Survey Date: </b>" + resultGraphic.attributes.gps_date; infoTextArea13.height = 150; resultGraphic.symbol = slsIdentify; break; } case 3: { resultsArray3.push(result.feature.attributes); Alert.show("smm"); infoTextArea17.htmlText = "<b>Undefended Shoreline Recommendation: </b>" + resultGraphic.attributes.treatment; infoTextArea17.height = 150; resultGraphic.symbol = slsIdentify; break; } } lastIdentifyResultGraphic = resultGraphic; mapOne.infoWindow.label = "Identify Results"; mapOne.infoWindow.show(mapOne.toMap(point)); } } else { Alert.show("Please click on the shoreline to identify shoreline attributes."); }; } ///Code break ///// <esri:Map id="mapOne" width="100%" height="100%" mapClick="mapClickHandler(event)"> <esri:infoWindowContent> <s:VGroup> <s:BorderContainer backgroundColor="white" borderColor="#5478E4" cornerRadius="5" width="200" minHeight="0" minWidth="0" > <s:VGroup width="100%" paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10" > <s:BorderContainer width="100%" borderColor="#FFFFFF" > <s:TileGroup top="10" left="10" horizontalGap="3" verticalGap="3" requestedRowCount="3"> <s:Button id="permButton" label="Permits" click="myViewStack.selectedChild=permInfo;" visible="{permit.selected}" includeInLayout="{permit.selected}"/> <s:Button id="pntButton" label="Access" click="myViewStack.selectedChild=pntInfo;" toolTip="Shoreline Access Structures" visible="{pntStru.selected}" includeInLayout="{pntStru.selected}"/> <s:Button id="luButton" label="Land Use" click="myViewStack.selectedChild=luInfo;" toolTip="Riparian Land Use" visible="{ripLU.selected}" includeInLayout="{ripLU.selected}"/> <s:Button id="smmButton" label="SMM" click="myViewStack.selectedChild=smmInfo;" toolTip="Shoreline Management Model" visible="{smm.selected}" includeInLayout="{smm.selected}"/> </s:TileGroup> </s:BorderContainer> </s:VGroup> </s:BorderContainer> <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" resizeToContent="true" color="0x323232" > <s:NavigatorContent id="permInfo" backgroundColor="0xDCDCDC" width="100%" height="100%" > <s:VGroup > <s:Label text="Permit Information" fontWeight="bold"/> <mx:TextArea id="infoTextArea2" editable="false" width="100%" paddingLeft="5" paddingTop="5" /> </s:VGroup> </s:NavigatorContent> <s:NavigatorContent id="pntInfo" backgroundColor="0xDCDCDC" width="100%" height="100%"> <s:VGroup> <s:Label text="Shoreline Access Structure"/> <mx:TextArea id="infoTextArea3" editable="false" width="100%" paddingLeft="5" paddingTop="5" /> </s:VGroup> </s:NavigatorContent> <s:NavigatorContent id="luInfo" backgroundColor="0xDCDCDC" width="100%" height="100%"> <s:VGroup> <s:Label text="Riparian Land Use" fontWeight="bold"/> <mx:TextArea id="infoTextArea13" editable="false" width="100%" paddingLeft="5" paddingTop="5" /> </s:VGroup> </s:NavigatorContent> <s:NavigatorContent id="smmInfo" backgroundColor="0xDCDCDC" width="100%" height="100%" > <s:VGroup > <s:Label text="Shoreline Management Recommendations"/> <mx:TextArea id="infoTextArea17" editable="false" width="100%" paddingLeft="5" paddingTop="5" /> </s:VGroup> </s:NavigatorContent> </mx:ViewStack> </s:VGroup> </esri:infoWindowContent> Any help will be greatly appreciated! Thanks, Tami
... View more
10-10-2011
11:25 AM
|
0
|
0
|
597
|
Title | Kudos | Posted |
---|---|---|
1 | 07-06-2016 06:27 AM | |
3 | 07-01-2020 01:52 PM | |
1 | 05-31-2016 12:11 PM |
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:24 AM
|