Dear Esri-Users,
the checkbox of our application activate 1 layer. I’m interested how to activate 2 layers with the same checkbox.
This is our application: http://gis.uba.de/website/luft/index.html .
The Checkbox (named as "Spots") is hidden, you can select "Schadtsoff" -> "Stickstoffdioxid" and choose a year. Look at the screenshot in the attachment please.
Thank you so much!
Best regards!
Konrad
------------------------------
Code-Snippets:
//(1)
// Featurelayer Spots NO2 2013
SPno213 = new esri.layers.FeatureLayer("http://atlas-bp2:6080/arcgis/rest/services/Lu/WMS_UBA_Lu_OI_Spots_Test/MapServer/5" && "http://atlas-bp2:6080/arcgis/rest/services/Lu/WMS_UBA_Lu_OI_Spots_Test/MapServer/10", {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
id: "idSP_5",
visible: true
});
//(2)
if(selectJahr.value == 400)
addOILayer(selectSchad,StickLayer00,StickLayer00I,SPno200,2000,4,16,30,44,checkBox,selectAuswert);
else if(selectJahr.value == 401)
else if(selectJahr.value == 413)
addOILayer(selectSchad,StickLayer13,StickLayer13I,SPno213,2013,3,12,21,32,checkBox,selectAuswert);
Konrad,
You can have a checkbox execute any code you choose on its click event or change event. So activating/adding two layer is no issue at all.
But:
SPno213 = new esri.layers.FeatureLayer("http://atlas-bp2:6080/arcgis/rest/services/Lu/WMS_UBA_Lu_OI_Spots_Test/MapServer/5" && "http://atlas-bp2:6080/arcgis/rest/services/Lu/WMS_UBA_Lu_OI_Spots_Test/MapServer/10", {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
id: "idSP_5",
visible: true
});
Is not going to work. The constructor for FeatureLayer is only expecting one layer url.
Robert Scheitlin, GISP thank you so much!
Which contructor should I use instead of "FeatureLayer"? Otherwhise I can create two variables like "SPno213a" and "SPno213b". But I don't know how to integrate them into the if-loop.
Thank you very much!
There is no layer type that will allow you to define two urls in the constructor. I would define two FeatureLayers and then in your checkbox change event handler you can trun both layers visibility to true.
rscheitlin thank you, I know what you mean. The problem is, I have no experience with the "event handler". Do you have a code-snippet for example?
Tank you so much.
Here is a sample:
<!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>Feature Layer Only Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.shadow {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color: #999999;
padding: 8px;
}
#footer {
height: 90px;
width: 300px;
margin: 0 auto;
padding: 15px;
position: absolute;
bottom: 20px;
left: 20px;
z-index: 30;
}
#topic {
font-weight: 600;
font-size: 130%;
}
</style>
<script src="https://js.arcgis.com/3.18/"></script>
<script>
//var fl, fl2
require([
"dojo/dom",
"dojo/on",
"esri/map",
"esri/layers/FeatureLayer",
"esri/geometry/Extent",
"esri/InfoTemplate",
"dojo/parser",
"dijit/form/CheckBox",
"dojo/domReady!"
], function(
dom,
on,
Map,
FeatureLayer,
Extent,
InfoTemplate,
parser
) {
parser.parse();
var bounds = new Extent({
"xmin": -16045622,
"ymin": -811556,
"xmax": 7297718,
"ymax": 11142818,
"spatialReference": {
"wkid": 102100
}
});
var map = new Map("map", {
extent: bounds
});
var url = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/2";
var template = new InfoTemplate("World Regions", "Region: ${REGION}");
var fl = new FeatureLayer(url, {
id: "world-regions",
infoTemplate: template
});
var fl2 = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer/1", {
id: "world-time zones"
})
map.addLayers([fl, fl2]);
on(dom.byId("mycheck"), "change", function(evt){
if(dom.byId("mycheck").checked){
fl.setVisibility(true);
fl2.setVisibility(true);
}else{
fl.setVisibility(false);
fl2.setVisibility(false);
}
})
});
</script>
</head>
<body class="claro">
<div id="map">
<div id="footer" class="shadow">
<span id='topic'>Toggle Layers</span><br><br>
<div style="display: flex">
<input id="mycheck" data-dojo-type="dijit/form/CheckBox" checked /> <label for="mycheck">World Layers Visibility</label>
</div>
</div>
</div>
</body>
</html>
I've found a solution and now it works! I'll post the solution here in the next days. Thank you so much rscheitlin !
Konrad,
Did you not see the sample code I posted yesterday?