Not sure how well this will work. I can't give actual links since the services are not public yet.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<!--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>EDF Land-Use Viewer</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<link rel="stylesheet" type="text/css" href="../st30_huc/agsjs/css/agsjs.css" />
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.esriScalebar {
padding: 20px 20px;
}
#map {
padding: 0;
}
</style>
<script type="text/javascript">
var djConfig = {
parseOnLoad : true,
paths : {
//if you want to host on your own server, download and put in folders then use
// path like:
agsjs : location.pathname.replace(/\/[^/]+$/, '') + '/../st30_huc/agsjs'
}
};
</script>
<script src="//js.arcgis.com/3.10/"></script>
<script type="text/javascript">
require(["dojo/_base/connect", "dojo/dom", "dojo/parser", "dojo/on", "dojo/_base/Color", "esri/map", "esri/geometry/Extent", "esri/layers/FeatureLayer", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/symbols/SimpleFillSymbol", "esri/renderers/ClassBreaksRenderer", "agsjs/dijit/TOC", "esri/dijit/BasemapToggle", "dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/form/Button", "dijit/layout/ContentPane", "dijit/form/CheckBox", "dijit/dijit", "dojo/fx", "dojo/domReady!"], function(connect, dom, parser, on, Color, Map, Extent, FeatureLayer, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, SimpleFillSymbol, ClassBreaksRenderer, TOC, BasemapToggle) {
/* dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.CheckBox");
dojo.require("esri.dijit.Legend");
dojo.require("esri.dijit.BasemapToggle");*/
var myOnClick_connect, aspf, legend, dynamicLayer;
var map, toggle;
function init() {
var lods = [{
"level" : 5,
"resolution" : 4891.96981024998,
"scale" : 1.8489297737236E7
}, {
"level" : 6,
"resolution" : 2445.98490512499,
"scale" : 9244648.868618
}, {
"level" : 7,
"resolution" : 1222.99245256249,
"scale" : 4622324.434309
}, {
"level" : 8,
"resolution" : 611.49622628138,
"scale" : 2311162.217155
}, {
"level" : 9,
"resolution" : 305.748113140558,
"scale" : 1155581.108577
}, {
"level" : 10,
"resolution" : 152.874056570411,
"scale" : 577790.554289
}, {
"level" : 11,
"resolution" : 76.4370282850732,
"scale" : 288895.277144
}, {
"level" : 12,
"resolution" : 38.2185141425366,
"scale" : 144447.638572
}, {
"level" : 13,
"resolution" : 19.1092570712683,
"scale" : 72223.819286
}, {
"level" : 14,
"resolution" : 9.55462853563415,
"scale" : 36111.909643
}, {
"level" : 15,
"resolution" : 4.77731426794937,
"scale" : 18055.954822
}, {
"level" : 16,
"resolution" : 2.38865713397468,
"scale" : 9027.977411
}];
var initialExtent = new esri.geometry.Extent({
"xmin" : -10829199.684,
"ymin" : 4415445.069,
"xmax" : -9713948.365,
"ymax" : 5868854.92,
"spatialReference" : {
"wkid" : 102100
}
});
map = new Map("map", {
extent : initialExtent,
lods : lods,
basemap : "streets"
});
var dynamicUrl = "http://localhost/server30/rest/services/edf/MapServer";
toggle = new BasemapToggle({
map : map,
visible : false,
basemap : "satellite"
}, "BasemapToggle");
toggle.startup();
dynamicLayer = new esri.layers.ArcGISTiledMapServiceLayer(dynamicUrl);
dojo.connect(map, 'onLayersAddResult', function(results) {
legend = new TOC({
map : map,
layerInfos : [{
layer : dynamicLayer,
title : ' '
}]
}, "legendDiv");
legend.startup();
});
map.addLayers([dynamicLayer]);
identifyTask = new esri.tasks.IdentifyTask("http://localhost/server30/rest/services/edf/MapServer");
identifyParams = new esri.tasks.IdentifyParameters();
identifyParams.tolerance = 3;
identifyParams.returnGeometry = true;
identifyParams.layerIds = [2];
identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
identifyParams.width = map.width;
identifyParams.height = map.height;
var layer = map.getLayer(map.layerIds[0]);
layer.setVisibility(false);
dojo.connect(map, "onExtentChange", showExtent);
dojo.connect(dijit.byId("val1"), "onChange", function(isChecked) {
if (isChecked) {
dojo.disconnect(myOnClick_connect);
}
});
dojo.connect(dijit.byId("val2"), "onChange", function(isChecked) {
if (isChecked) {
dojo.disconnect(myOnClick_connect);
myOnClick_connect = dojo.connect(map, "onClick", doIdentify);
}
});
dojo.connect(dijit.byId("val3"), "onChange", function(isChecked) {
if (isChecked) {
dojo.disconnect(myOnClick_connect);
myOnClick_connect = dojo.connect(map, "onClick", doIdentify);
}
});
}
function showExtent(extent) {
var layer = map.getLayer(map.layerIds[0]);
if (map.getLevel() > 5) {
toggle.show();
layer.setVisibility(true);
if (aspf) {
aspf.setVisibility(true);
}
} else {
toggle.hide();
layer.setVisibility(false);
if (aspf) {
aspf.setVisibility(false);
}
}
if (map.getLevel() > 4) {
document.getElementById("active").style.visibility = "visible";
} else {
document.getElementById("active").style.visibility = "hidden";
}
}
function doIdentify(evt) {
if ((dijit.byId("val2").checked && map.getLevel() > 4) || dijit.byId("val3").checked) {
identifyParams.geometry = evt.mapPoint;
identifyParams.mapExtent = map.extent;
identifyTask.execute(identifyParams, function(idResults) {
addToMap(idResults, evt);
});
}
}
function addToMap(idResults, evt) {
var idResult;
for (var i = 0, il = idResults.length; i < il; i++) {
idResult = idResults.feature;
}
if (dijit.byId("val2").checked) {
window.open("http://localhost/ST30_EDF_PDF/FB" + idResult.attributes.HUC_12 + ".pdf");
}
if (dijit.byId("val3").checked) {
if (map.getLevel() > 5) {
aspf = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost/server30/rest/services/acpf/MapServer", {
visible : true
});
} else {
aspf = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost/server30/rest/services/acpf/MapServer", {
visible : false
});
}
map.addLayer(aspf);
legend.layerInfos.splice(1, 0, {
layer : aspf,
title : " ",
autoToggle : false
});
legend.refresh();
}
}
dojo.addOnLoad(init);
});
</script>
</head>
<body class="claro">
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline"
gutters="false" style="width:100%; height:100%;">
<div id="header" dojotype="dijit.layout.ContentPane" region="top">
ACPF Land-Use Viewer
</div>
<div dojotype="dijit.layout.ContentPane" id="leftPane" region="left">
<div dojotype="dijit.layout.TabContainer" >
<div dojotype="dijit.layout.ContentPane" title = "Legend" selected="true">
<div id="legendDiv"></div>
<input dojoType="dijit.form.RadioButton" id="val1" name="group1"
checked="checked" value="nav" type="radio" />
<label for="val1"> Navigate </label>
<input dojotype="dijit.form.RadioButton" id="val2" name="group1"
value="pdf" type="radio" />
<label for="val2"> PDFs </label>
<input dojotype="dijit.form.RadioButton" id="val3" name="group1"
value="add" type="radio" />
<label for="val3"> Populate </label>
<br /> <br />
<label id="active" style=" color:Red; font-size:large; visibility:hidden;">PDFs Active</label>
<br /> <br />
<label >To use this map:
<br /> - Use your mouse to Pan and Zoom
<br /> - Zooming in will activate the PDF downloads, "PDFs Active" note will appear.
<br /> - Select the PDF button to enable to PDF downloads
<br /> - Click on a watershed to obtain the PDF
<br /> - Select the Populate button to enable detailed information
<br /> - Click on a watershed to bring up extra information </label>
<br /> <br />
<div style="width:64px;">
<div id="BasemapToggle" ></div>
</div> </div> </div> </div>
<div id="map" dojotype="dijit.layout.ContentPane" region="center" >
</div> </div>
</body>
</html>
