Hey everybody,
I use the following code to create a map with a legend:
<!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>NOAA</title>
<link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.12/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" href="https://js.arcgis.com/3.13/esri/css/esri.css"/>
<link rel="stylesheet" type="text/css" href="https://timw1984.github.io/agsjs/css/agsjs.css" />
<style>
html, body{
height: 100%;
width: 100%;
margin: 0;
padding: 1px;
font-family: helvetica, arial, sans-serif;
font-size: 90%;
overflow: hidden;
}
#borderContainer {
width: 100%;
height: 100%;
}
#leftPane {
width: 20%;
}
#bottomPane {
width: 100%;
}
#centerPane {
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
var dojoConfig = {
paths: {
agsjs: location.pathname.replace(/\/[^/]+$/, '') + 'https://timw1984.github.io/agsjs'
}
};
</script>
<script src="https://js.arcgis.com/3.13/"></script>
<script>
var map;
require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/parser", "agsjs/dijit/TOC","dojo/_base/connect","dojo/dom", "dojo/parser","dojo/on", "dojo/_base/Color","dijit/form/Button","esri/layers/FeatureLayer","dojo/dom-construct",
"dijit/layout/BorderContainer","dijit/layout/ContentPane","dijit/layout/AccordionContainer","dijit/layout/ContentPane", "dijit/layout/AccordionContainer","dijit/form/TextBox","dojo/domReady!"],
function(Map,ArcGISDynamicMapServiceLayer, parser,TOC,connect, dom, parser, on,Color, Button, FeatureLayer,domConstruct) {
parser.parse();
map = new Map("map", {
basemap: "topo",
center: [-95.45, 37.75],
zoom: 4
});
var county;
var AddedLayer = "";
var gauge = new ArcGISDynamicMapServiceLayer("http://gis.srh.noaa.gov/arcgis/rest/services/ahps_gauges/MapServer",{
refreshInterval: 1,
visible: false
});
var radar = new ArcGISDynamicMapServiceLayer("http://gis.srh.noaa.gov/arcgis/rest/services/RIDGERadar/MapServer",{
refreshInterval: 1,
visible: false
});
var hazard = new ArcGISDynamicMapServiceLayer("http://gis.srh.noaa.gov/arcgis/rest/services/cpc_weather_hazards/MapServer",{
refreshInterval: 1,
visible: false
});
map.addLayers([radar,hazard,gauge] );
map.on('layers-add-result', legenddoit);
function legenddoit(evt){
if ( AddedLayer == "") {
var LegendLayers = [{
layer: hazard,
title: "Hazard",
collapse: true
},{
layer: radar,
title: "Radar",
collapsed: true, // whether this root layer should be collapsed initially, default false.
slider: true,
noLegend: true // whether to display a transparency slider.
},{
layer: gauge,
title: "Gauge",
collapse: true,
}];
//radar.setVisibleLayers([0]);
//gauge.setVisibleLayers([0]);
//hazard.setVisibleLayers([0]);
toc = new TOC({
map: map,
layerInfos: LegendLayers
}, 'tocDiv');
toc.startup();
} else {
var LegendLayers = [{
layer: hazard,
title: "Hazard",
collapse: true
},{
layer: radar,
title: "Radar",
collapsed: true,
slider: true,
noLegend: true
},{
layer: gauge,
title: "Gauge",
collapse: true,
}, {
layer: county,
title: "County",
collapse: true,
}];
toc2 = new TOC({
map: map,
layerInfos: LegendLayers
}, 'tocDiv');
toc2.startup();
}
};
var myButton = new Button({
label: "Click me!",
onClick: function(){
if (county !== undefined){
console.log(county);
map.removeLayer(county);
}
// Do something:
NeededValue = dom.byId("myURL").value;
console.log(NeededValue);
county = new FeatureLayer(NeededValue,{
outFields: ['*']
});
var MyName = county.name;
map.addLayers([county]);
AddedLayer = "Gotem";
domConstruct.destroy("tocDiv");
dojo.create("div", {id: "tocDiv"}, "LegendInHere");
}
}, "progButtonNode").startup();
});
</script>
</head>
<body class ="claro">
<div id="borderContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true, liveSplitters:true">
<div id="centerPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'center'">
<div id="map">
</div>
</div>
<div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'bottom'">
<label for="firstname">Add a layer:</label>
<input type="text" name="myURL" value="http://gis.brevardcounty.us/gissrv/rest/services/Base_Map/General_WKID102100/MapServer/5"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true" id="myURL" />
<button id="progButtonNode" type="button"></button><div id="result1"></div>
</div>
<div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'">
<div data-dojo-type="dijit/layout/AccordionContainer" style="height: 300px;">
<div data-dojo-type="dijit/layout/ContentPane" title="Legend" selected="true">
<div id ="LegendInHere">
<div id="tocDiv">
</div>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="Pane 2">
<div id="tocDiv2">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I try to accomplish is that if you click on the button, the layer in the textbox is added, the current legend will be destroyed and rebuild with the new layer added. Everything works, if I change the id in line 161 to anything but the id that I destroy a line before. The problem is that I need it to be the same name. any idea what I am doing wrong?
You can test to see what I want it to look like by replacing tocDiv in line 161 and 137 to tocDiv2
Thanks!
Tim