Here is the JavaScript code I used for the site, if you would like to see the HTML code as well I can upload it:
// JavaScript source code
var main = function () {
var map, toolbar, symbol, geomTask;
require([
"dojo/dom",
"dojo/on",
"dojo/mouse",
"esri/Color",
"dojo/keys",
"dojo/parser",
"esri/config",
"esri/arcgis/utils",
"esri/sniff",
"esri/map",
"esri/InfoTemplate",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/dijit/HomeButton",
"esri/dijit/LocateButton",
"esri/dijit/Scalebar",
"esri/dijit/Search",
"esri/SnappingManager",
"esri/dijit/Measurement",
"esri/layers/FeatureLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/renderers/SimpleRenderer",
"esri/tasks/GeometryService",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/toolbars/draw",
"esri/graphic",
"dijit/registry",
"dijit/form/Button",
"dijit/WidgetSet",
"esri/widget/LayerList",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/TitlePane",
"dijit/form/CheckBox",
"dijit/layout/AccordionContainer",
"dojo/domReady!"
], function (dom, on, mouse, Color, keys, parser, esriConfig, arcgisUtils, has, Map, InfoTemplate, Query, QueryTask, HomeButton, LocateButton, Scalebar, Search,
SnappingManager, Measurement, FeatureLayer, ArcGISDynamicMapServiceLayer, SimpleRenderer, GeometryService, SimpleMarkerSymbol,
SimpleLineSymbol, SimpleFillSymbol, Draw, Graphic, registry, LayerList, AccordionContainer) {
parser.parse();
//Replace with our own geometry service eventually
esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map = new Map("map", {
basemap: "topo",
center: [-112.321, 34.595],
zoom: 14
});
var transportation_layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://053034w7:6080/arcgis/rest/services/City_Map_Services/Transportation_Layer/MapServer");
map.addLayer(transportation_layer);
var parcel_layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://053034w7:6080/arcgis/rest/services/City_Map_Services/Parcels_Layer/MapServer");
map.addLayer(parcel_layer);
//-----Parcels Query Tool-----//
var queryTask = new QueryTask("http://053034w7:6080/arcgis/rest/services/City_Map_Services/Parcels_Layer/MapServer/7");
var parcel_ID_query = new Query();
parcel_ID_query.returnGeometry = false;
parcel_ID_query.outFields = ["OBJECTID", "PARCEL_ID", "PARLABEL", "COUNTY", "SUBCOMMON"];
on(dom.byId("parcel_execute"), "click", parcel_ID_execute);
function parcel_ID_execute() {
parcel_ID_query.where = "BOOK=" + dom.byId("parcel_book").value + "AND MAP=" + dom.byId("parcel_map").value + "AND PARCEL=" + dom.byId("parcel_ID").value;
parcel_ID_queryTask.execute(parcel_ID_query, parcel_ID_showResults);
}
function parcel_ID_showResults(parcel_ID_results) {
var parcel_ID_resultItems = [];
var parcel_ID_resultCount = parcel_ID_results.features.length;
for (var i = 0; i < parcel_ID_resultCount; i++) {
var featureAttributes = parcel_ID_results.features.attributes;
for (var attr in featureAttributes) {
parcel_ID_resultItems.push("<b>" + attr + ":</b> " + featureAttributes[attr] + "<br>");
}
parcel_ID_resultItems.push("<br>");
}
dom.byId("parcel_ID_info").innerHTML = parcel_ID_resultItems.join("");
}
//-----Address Query Tool-----//
var address_query = new Query();
address_query.returnGeometry = false;
address_query.outFields = ["OBJECTID", "PARCEL_ID", "PARLABEL", "COUNTY", "SUBCOMMON"];
on(dom.byId("address_execute"), "click", address_execute);
function address_execute() {
address_query.where = "BOOK=" + dom.byId("parcel_book").value + "AND MAP=" + dom.byId("parcel_map").value + "AND PARCEL=" + dom.byId("parcel_ID").value;
address_queryTask.execute(address_query, address_showResults);
}
function address_showResults(address_results) {
var address_resultItems = [];
var address_resultCount = address_results.features.length;
for (var i = 0; i < address_resultCount; i++) {
var featureAttributes = address_results.features.attributes;
for (var attr in featureAttributes) {
address_resultItems.push("<b>" + attr + ":</b> " + featureAttributes[attr] + "<br>");
}
address_resultItems.push("<br>");
}
dom.byId("address_info").innerHTML = address_resultItems.join("");
}
//-----Home Button-----//
var home = new HomeButton({
theme: "HomeButton",
map: map
}, "HomeButton");
home.startup();
//-----Locate Button-----//
geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();
//-----Scalebar-----//
var scale = new Scalebar({
map: map,
scalebarUnit: "dual"
});
//-----Search Widget-----//
var search = new Search({
enableButtonMode: true,
map: map,
zoomScale: 5000000
}, "search");
search.startup();
//-----Definitions of Symbols-----//
var sfs = new SimpleFillSymbol(
"solid",
new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2),
null
);
//-----This will be taken out later and replaced with our own FeatureLayer-----//
var parcelsLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/M...", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
parcelsLayer.setRenderer(new SimpleRenderer(sfs));
map.addLayers([parcelsLayer]);
//-----------------------------------------------------------------------------//
var snapManager = map.enableSnapping({
snapKey: has("mac") ? keys.META : keys.CTRL
});
var layerInfos = [{
layer: parcelsLayer
}];
snapManager.setLayerInfos(layerInfos);
//-----Measurement Tool-----//
var measurement = new Measurement({
map: map
}, dom.byId("measurementDiv"));
measurement.startup();
//-----Drawing Tool-----//
map.on("load", createToolbar);
// loop through all dijits, connect onClick event
// listeners for buttons to activate drawing tools
registry.forEach(function (d) {
// d is a reference to a dijit
// could be a layout container or a button
if (d.declaredClass === "dijit.form.Button") {
d.on("click", activateTool);
}
});
function activateTool() {
var tool = this.label.toUpperCase().replace(/ /g, "_");
toolbar.activate(Draw[tool]);
map.hideZoomSlider();
}
function createToolbar(themap) {
toolbar = new Draw(map, { tooltipOffset: 20, drawTime: 40 });
toolbar.on("draw-end", addToMap);
}
function addToMap(evt) {
var symbol;
toolbar.deactivate();
map.showZoomSlider();
switch (evt.geometry.type) {
//Sets the Marker symbol and styling for each point
case "point":
case "multipoint":
symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,
20, new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([240, 0, 0, 0.5]),
10
),
new Color([240, 0, 0, 0.9]));
break;
//Sets the Line symbol and styling for each freehand polyline
case "polyline":
symbol = new SimpleLineSymbol.setColor([225, 175, 20]);
break;
default:
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([200, 0, 0, 0.9]), 3.5), new Color([200, 0, 0, 0.3]))
break;
}
var graphic = new Graphic(evt.geometry, symbol);
map.graphics.add(graphic);
}
//-----Layer List-----//
function(response) {
var myWidget = new LayerList({
map: response.map,
layers: arcgisUtils.getLayerList(response)
},"layerList");
myWidget.startup();
};
function checkboxClick(value) {
var check = dojo.byId("parcelCheckBox");
if (registry.byId("parcelCheckBox").get("checked")) {
check.push("The box is checked");
}
}
});
//-----End of ArcGIS JavaScript-----//
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all elements with the class 'content' up
$(".content").slideUp();
// Now figure out what the 'title' attribute value is and find the element with that id. Then slide that down.
var content_show = $(this).attr("title");
$("#" + content_show).slideDown();
});
/*-----End of Tab Function-----*/
}
$(document).ready(main);
