John,
Here is your code cleaned up to remove Legacy and AMD styles being mixed together. And I have tried to hit all your wants in the list. I have made some comments on my changes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!--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>Find Address</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<script src="http://js.arcgis.com/3.13/"></script>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
#map {
border: solid 2px #808775;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin: 5px;
padding: 0px;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 22px;
left: 70px;
}
</style>
<script>
var map, roadsLayer;
require([
"dojo/dom",
"dojo/on",
"dojo/parser",
"dojo/_base/array",
"esri/map",
"esri/basemaps",
"esri/Color",
"esri/geometry/Extent",
"esri/layers/FeatureLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/InfoTemplate",
"esri/dijit/Measurement",
"esri/dijit/Geocoder",
"esri/dijit/BasemapToggle",
"esri/dijit/Scalebar",
"esri/dijit/Legend",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/Font",
"esri/symbols/TextSymbol",
"esri/graphic",
"esri/toolbars/draw",
"esri/tasks/GeometryService",
"esri/tasks/BufferParameters",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/config",
"esri/SpatialReference",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/layout/AccordionContainer",
"dijit/TitlePane",
"dojo/domReady!"], function (
dom,
on,
parser,
arrayUtils,
Map,
esriBasemaps,
Color,
Extent,
FeatureLayer,
ArcGISDynamicMapServiceLayer,
InfoTemplate,
Measurement,
Geocoder,
BasemapToggle,
Scalebar,
Legend,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
Font,
TextSymbol,
Graphic,
Draw,
GeometryService,
BufferParameters,
Query,
QueryTask,
esriConfig,
SpatialReference) {
parser.parse();
var locatorUrl = "http://gis.rtcsnv.com/arcgis/rest/services/Geocode/GISSDE_USStreets/GeocodeServer";
//Proxy URL if you need to use a proxy
//esriConfig.defaults.io.proxyUrl = "/Proxy/proxy.ashx";
//global variables
var defaultSymbol, highlightSymbol, resultTemplate;
var resultTemplate = new esri.InfoTemplate("Name", "<tr><td>${NAME}</tr></td>");
//Adding the map service as a dynamic layer instead of a FeatureLayer
roadsLayer = new ArcGISDynamicMapServiceLayer("http://gis.rtcsnv.com/arcgis/rest/services/Maps/PROD_ADA_CERT/MapServer", {id:"Routes"});
// Specify the infoTemplate for the one layer that is your bus routes layer in your map service
roadsLayer.setInfoTemplates({
2: { infoTemplate: resultTemplate }
});
//Set the visible layer just for the bus routes
roadsLayer.setVisibleLayers([2]);
//create map, set initial extent and disable default info window behavior
map = new esri.Map("map", {
basemap: "topo",
center: [-115.147541, 36.164419],
zoom: 12
});
//Add the layer now that the map is loaded
map.on('load', function(){
map.addLayer(roadsLayer);
});
/* ------------------------------------------------------------ */
// GEOCODE
// Symbol used for the Located Address (red circle)
var geoSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 18,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 153, 153, 0.5]), 8),
new Color([255, 0, 0]));
var gsvc = null;
gsvc = new GeometryService("http://gis.rtcsnv.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");
// Creates the Geocoder using the RTC Streets Geocoder
var myGeocoders = [{
url: locatorUrl,
name: "LocateLocationByAddress",
singleLineFieldName: "Single Line Input",
placeholder: "Search By Local Address"
}];
var geocoder = new Geocoder({
map: map,
autoComplete: true,
arcgisGeocoder: false,
geocoders: myGeocoders
}, dom.byId("search"));
geocoder.startup();
geocoder.on("select", function showLocation(evt) {
map.graphics.clear();
point = evt.result.feature.geometry;
doBuffer(point);
});
function doBuffer(point) {
//map.graphics.clear();
var params = new BufferParameters();
params.geometries = [point];
//buffer 200, 400, 600, 1320 feet.
params.distances = [200, 400, 600, 1320];
params.unit = GeometryService.UNIT_FOOT;
// Set to Nevada State Plane East wkid 3421 in order to accurately calculate buffer distances
params.bufferSpatialReference = new esri.SpatialReference({
wkid: 3421
});
params.outSpatialReference = map.spatialReference;
gsvc.buffer(params, showBuffer);
}
function showBuffer(geometries) {
// Setting the color of the buffer circles
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new dojo.Color([0, 0, 255, 0.65]), 2),
new dojo.Color([0, 0, 255, 0.3]));
var graphic;
dojo.forEach(geometries, function (geometry) {
graphic = new Graphic(geometry, symbol);
map.graphics.add(graphic);
});
createAddress(point);
locateRoads(geometries[geometries.length - 1]);
}
function createAddress(point) {
var graphic = new Graphic(point, geoSymbol);
// Adds the Graphics Symbol for the Address Point (Red)
map.graphics.add(graphic);
// This code will create the Text Element to show the address
var displayText = document.getElementById("search_input").value;
// Setting the look of the fone
var font = new Font(
"12pt",
Font.STYLE_NORMAL,
Font.VARIANT_NORMAL,
Font.WEIGHT_BOLD,
"Calibri");
var addressSymbol = new esri.symbol.TextSymbol(
displayText,
font,
new Color("#000000"));
addressSymbol.setAlign(TextSymbol.ALIGN_START);
addressSymbol.setOffset(12, -4);
// Adds the Geocoded Address Text Graphic only
map.graphics.add(new Graphic(point, addressSymbol));
}
// RED
highlightSymbol = new SimpleLineSymbol().setColor(new Color([255, 0, 0, 3.5]));
function locateRoads(geom) {
var queryTask = new esri.tasks.QueryTask("http://gis.rtcsnv.com/arcgis/rest/services/Maps/PROD_ADA_CERT/MapServer/2");
var query = new Query();
query.geometry = geom;
query.outSpatialReference = map.spatialReference;
query.outFields = ["NAME"];
query.returnGeometry = true;
queryTask.execute(query, addLinesToMap);
}
function addLinesToMap(featureSet) {
var results = [];
dojo.forEach(featureSet.features, function (feature) {
map.graphics.add(feature.setSymbol(highlightSymbol));
results.push('<tr><td>' + feature.attributes.NAME + '</tr></td>');
});
//display number of points in extent
dojo.byId("inextent").innerHTML = results.length;
//display list of points in extent
dojo.byId("results").innerHTML = "<table><tbody>" + results.join("") + "</tbody></table>";
}
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" style="width:620px; height:380px; border:1px solid #000;" data-dojo-props="region:'center'">
<div id="search"></div>
</div>
<!-- list points in extent -->
<div id="resultsDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
<b># of Routes Selected = <span id="inextent">0</span></b>
<div id="results" style="width:400px; height:200px; border:1px solid #000; overflow:auto;"></div>
</div>
</div>
</body>
</html>
