Right, sorry I meant to say the form button. This script has been modified from this example. The draw widget there stays staionary on the screen if the map is resized. I want it to stay fixed in the upper left corner, next to the home button and under the search bar. I've tried moving the div around, to no avail. Here is my script:
<!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>GP Task Population Zonal Stats</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html, body, #mapDiv {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#info {
bottom: 20px;
color: #255;
height: auto;
font-family: arial;
font-size: 14px;
left: 30px;
margin: 5px;
padding: 10px;
position: absolute;
text-align: center;
width: 200px;
z-index: 40;
}
#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
.esriPopup .titleButton.maximize {
display: none
}
.esriPopup .sizer {
position: relative;
width: 150px;
z-index: 1;
}
.esriPopup .contentPane {
text-align: left;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 75px;
}
.esriPopup .actionsPane .zoomTo{
display: none;
}
#reportLink {
text-decoration: none;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
var app;
require([
"esri/config",
"esri/map",
"esri/arcgis/utils",
"esri/tasks/Geoprocessor",
"esri/tasks/GeometryService",
"esri/tasks/BufferParameters",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/graphic",
"esri/toolbars/draw",
"esri/geometry/webMercatorUtils",
"esri/SpatialReference",
"esri/tasks/FeatureSet",
"esri/symbols/SimpleFillSymbol",
"esri/dijit/Popup",
"esri/dijit/PopupTemplate",
"esri/InfoTemplate",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/dijit/InfoWindow",
"esri/dijit/BasemapGallery",
"esri/dijit/HomeButton",
"esri/dijit/Search",
"dojo/dom-construct",
"esri/Color",
"dojo/dom",
"dojo/i18n!esri/nls/jsapi",
"dojo/dom-attr",
"dojo/query",
"dojo/on",
"dojo/parser",
"dojo/string",
"dijit/registry",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/TitlePane",
"dojo/domReady!"
],
function( esriConfig, Map, arcgisUtils, Geoprocessor, GeometryService,
BufferParameters, ArcGISDynamicMapServiceLayer, Graphic, Draw, webMercatorUtils,
SpatialReference, FeatureSet, SimpleFillSymbol, Popup, PopupTemplate,
InfoTemplate, FeatureLayer, SimpleMarkerSymbol,
SimpleLineSymbol, InfoWindow,
BasemapGallery, HomeButton, Search, domConstruct,
Color, dom, esriBundle, domAttr, query, on, parser, string, registry){
var map, gp, toolbar;
app = {
"map": map,
"toolbar": toolbar
};
app.map = map = new Map("mapDiv", {
basemap: "hybrid",
center: [-95, 40],
zoom: 5,
infoWindow: infoWindow
});
map.on("load", initTools);
esriBundle.widgets.Search.main.placeholder = "Find a location";
esriConfig.defaults.io.corsDetection = false;
esriConfig.defaults.geometryService = new GeometryService("http://<ourserver>/arcgis/rest/services/Utilities/Geometry/GeometryServer");
esriConfig.defaults.io.proxyUrl = "http://<ourserver>/DotNet/proxy.ashx";
esri.config.defaults.io.alwaysUseProxy = false;
esriConfig.defaults.io.timeout = 180000;
(function() {
var cors_api_host = 'cors-anywhere.herokuapp.com';
var cors_api_url = 'https://' + cors_api_host + '/';
var slice = [].slice;
var origin = window.location.protocol + '
var open = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
var args = slice.call(arguments);
var targetOrigin = /^https?:\/\/([^\/]+)/i.exec(args[1]);
if (targetOrigin && targetOrigin[0].toLowerCase() !== origin &&
targetOrigin[1] !== cors_api_host) {
args[1] = cors_api_url + args[1];
}
return open.apply(this, args);
};
})();
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
var search = new Search({
map: map,
showInfoWindowOnSelect: false,
enableLabel: false,
enableHighlight: false,
showSuggestions: false
}, "search");
search.startup();
var infoWindow = new InfoWindow;
function initTools(evtObj) {
var locationStr;
var dots;
gpReport = new Geoprocessor("http://<ourserver>/arcgis/rest/services/Region_Report/GPServer/RegionReport");
app.toolbar = toolbar = new Draw(evtObj.map);
toolbar.on("draw-end",generateReport);
function generateReport(evtObj){
var geometry = evtObj.geometry;
var mp = webMercatorUtils.webMercatorToGeographic(geometry);
var extent = mp.getExtent();
var center = geometry.getCentroid();
var xmin = extent.xmin.toFixed(2);
var ymin = extent.ymin.toFixed(2);
var xmax = extent.xmax.toFixed(2);
var ymax = extent.ymax.toFixed(2);
var locationStr = prompt("Please Enter a Region Name","");
var taskParams = {
"region_name": locationStr,
"west_lon": xmin,
"south_lat": ymin,
"east_lon": xmax,
"north_lat": ymax
};
console.log(xmin);
console.log(ymin);
console.log(xmax);
console.log(ymax);
var locationNew = locationStr.replace(/ /g,"_");
var symbol = new SimpleFillSymbol("none", new SimpleLineSymbol("dashdot", new Color([255,0,0]), 2), new Color([255,255,0,0.25]));
var graphic = new Graphic(geometry,symbol);
map.graphics.add(graphic);
toolbar.deactivate();
var features= [];
features.push(graphic);
gpReport.execute(taskParams,displayResults,gpreportFailure);
map.graphics.clear();
map.infoWindow.resize(256,256);
map.infoWindow.show(center,map.getInfoWindowAnchor(center));
map.infoWindow.setTitle(locationNew);
map.infoWindow.setContent("Forecast Analysis Report")
var msg = "Generating Report";
var dots = window.setInterval(function() {
if (msg === "Generating Report...."){
msg = "Generating Report";
}
map.infoWindow.setContent(msg);
msg += ".";
}, 400);
function displayResults(results, messages){
map.infoWindow.setTitle(locationNew);
map.infoWindow.clearFeatures();
var contentResult;
var pdfIcon = "http://<ourserver>/PDF_icon.png";
var reportPath = "http://<ourserver>/PDF_Reports/" + locationNew + "_Forecast_Report.pdf";
if(results == 0){
contentResult ='<a target="_blank" href="' + reportPath + '"><IMG SRC="' + pdfIcon + '"width=25% height=25%/></a>';
}
else{
contentResult = "Unable To Generate Report";
}
clearInterval(dots);
map.infoWindow.resize(256,256);
map.infoWindow.setContent(contentResult);
map.infoWindow.setTitle(locationNew + " Forecast Report");
};
function gpreportFailure(error){
var details = domConstruct.create("div", {
"innerHTML": "Error: " + error
}, query(".break", map.infoWindow.domNode)[0],"after" );
console.error("Error occurred: ", error);
clearInterval(dots);
map.infoWindow.setContent("Unable To Generate Report");
};
};
}
});
</script>
</head>
<body class="claro">
<div id="mapDiv">
</div>
<div id="search"></div>
<div id="HomeButton"></div>
<div style="position:absolute; left:15px; bottom:15px; z-Index:999;"></div>
<div id="info" class="esriSimpleSlider" style="position:absolute; left:82px; bottom:700px;">
Click button to draw a polygon on the map. A current forecast report will be generated for your chosen region.<br>
<div data-dojo-type="dijit.form.Button" id="drawPoly" onclick="app.toolbar.activate(esri.toolbars.Draw.RECTANGLE);app.map.hideZoomSlider();">
Draw
</div>
</div>
</body>
</html>
