<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9,IE=10"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>UGA Campus Map</title> <style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } @import "http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css"; .zoominIcon { background-image:url(images/nav_zoomin.png); width:16px; height:16px; } .zoomoutIcon { background-image:url(images/nav_zoomout.png); width:16px; height:16px; } .zoomfullextIcon { background-image:url(images/nav_fullextent.png); width:16px; height:16px; } .zoomprevIcon { background-image:url(images/nav_previous.png); width:16px; height:16px; } .zoomnextIcon { background-image:url(images/nav_next.png); width:16px; height:16px; } .panIcon { background-image:url(images/nav_pan.png); width:16px; height:16px; } .deactivateIcon { background-image:url(images/nav_decline.png); width:16px; height:16px; } </style> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css"> <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css"/> <script>var dojoConfig = { parseOnLoad: true };</script> <script src="http://js.arcgis.com/3.7/"></script> <script> var map, navToolbar; require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dijit/dijit", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dijit/form/TextBox", "dijit/form/Button", "dijit/Toolbar", "dijit/Tooltip", "esri/toolbars/navigation", "dojo/domReady!" ], function ( Map, ArcGISDynamicMapServiceLayer, Navigation ) { var startExtent = new esri.geometry.Extent({ "xmin": 2534400, "ymin": 1438400, "xmax": 2538900, "ymax": 1440900, "spatialReference": { "wkid": 102667 } }); map = new Map("map", { "logo": false, "extent": startExtent }); var campusData = new ArcGISDynamicMapServiceLayer( "http://eagle.camplan.uga.edu:6080/arcgis/rest/services/CampusMap/UGA_CampusMap_Base/MapServer", { }); navToolbar = new esri.toolbars.Navigation(map); dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler); function extentHistoryChangeHandler() { //Makes the first and last extent visited disable the first and last extent button dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent(); dijit.byId("zoomnext").disabled = navToolbar.isLastExtent(); } map.addLayer(campusData); }); function panCursor() { //activates pan navigation tools and change cursor to pan arrows navToolbar.activate(esri.toolbars.Navigation.PAN); map.setMapCursor("move"); } function deactivateNavToolbar() { //deactivates navbar and returns cursor to default navToolbar.deactivate(); map.setMapCursor("default"); } function zoomInCursor() { //deactivates navbar and returns cursor to default navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN); map.setMapCursor("crosshair"); } function zoomOutCursor() { //deactivates navbar and returns cursor to default navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT); map.setMapCursor("crosshair"); } function fullExtent() { //Goes to full extent and returns cursor to default navToolbar.zoomToFullExtent(); map.setMapCursor("default"); } function prevExtent() { //Goes to previous extent and returns cursor to default navToolbar.zoomToPrevExtent(); map.setMapCursor("default"); } function nextExtent() { //Goes to next extent and returns cursor to default navToolbar.zoomToNextExtent(); map.setMapCursor("default"); } </script> </head> <body class="claro"> <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;border:1px solid #000"> <div id="header" dojotype="dijit.layout.ContentPane" region="top"> <div id="TopContainer" style="overflow:hidden; border:1px solid #000; width:220px; float:left;"> <div id="navToolbar" data-dojo-type="dijit.Toolbar" style="float:left"> <div data-dojo-type="dijit.form.Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon', onClick:function(){zoomInCursor();}"></div> <span id="zoomin_tt" position="below" dojoType="dijit.Tooltip" connectId="zoomin">Activates Zoom In Tool. Click or Drag Box. You can also zoom with scroll wheel!</span> <div data-dojo-type="dijit.form.Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){zoomOutCursor();}"></div> <span id="zoomout_tt" position="below" dojoType="dijit.Tooltip" connectId="zoomout">Activates Zoom Out Tool. Click or Drag Box. You can also zoom with scroll wheel!</span> <div data-dojo-type="dijit.form.Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon', onClick:function(){fullExtent();}"></div> <span id="zoomfullext_tt" position="below" dojoType="dijit.Tooltip" connectId="zoomfullext">Zooms Map to Full Extent.</span> <div data-dojo-type="dijit.form.Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon', onClick:function(){prevExtent();}"></div> <span id="zoomprev_tt" position="below" dojoType="dijit.Tooltip" connectId="zoomprev">Goes Back One View.</span> <div data-dojo-type="dijit.form.Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon', onClick:function(){nextExtent();}"></div> <span id="zoomnext_tt" position="below"dojoType="dijit.Tooltip" connectId="zoomnext">Goes Forward One View</span> <div data-dojo-type="dijit.form.Button" id="pan" data-dojo-props="iconClass:'panIcon', onClick:function(){panCursor();}"></div> <span id="pan_tt" position="below" dojoType="dijit.Tooltip" connectId="pan">Activates Panning Tool. You Can Also Right Click Map and Drag.</span> <div data-dojo-type="dijit.form.Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon' ,onClick:function(){deactivateNavToolbar()}"></div> <span id="deact_tt" position="below" dojoType="dijit.Tooltip" connectId="deactivate">Deactivate and return to default arrow.</span> </div> </div> <div id="searchContainer" style="overflow:hidden; width:360px; float:left"> <div id="FindBuilding" style="width:360px; height:4%; float:left; padding-top:6px; padding-left:4px"> <label for="searchText">UGA Building Search</label> <input type="text" style="height:4%" id="searchText" autocomplete="off" value="Name or 4-Digit Code" onkeypress="{if (event.keyCode==13)execute(dojo.byId('searchText').value);}" onClick="SelectAll('searchText');"/> <input type="button" value="Find" onclick="execute(dojo.byId('searchText').value);" /> </div> </div> </div> <div id="leftPane" dojotype="dijit.layout.ContentPane" region="left" splitter="true" style="width:200px"> <div dojotype="dijit.layout.BorderContainer" design="sidebar" > <div id="thumbContainer" dojoType="dijit.layout.ContentPane" region="center" style="padding-left:20px; width:100%;height:100%;border:1px solid #000"> <div id="basemapGallery"></div> </div> </div> </div> <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="width:100%; height:100%; border:1px solid #000"> </div> </div> </body> </html>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script>var dojoConfig = { parseOnLoad: true, async: true };</script>
require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dijit/dijit", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dijit/form/TextBox", "dijit/form/Button", "dijit/Toolbar", "dijit/Tooltip", "esri/toolbars/navigation", "dojo/domReady!" ], function ( Map, ArcGISDynamicMapServiceLayer, Navigation ) {
require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/toolbars/navigation", "dijit/dijit", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/layout/AccordionContainer", "dijit/form/TextBox",
"dijit/form/Button", "dijit/Toolbar", "dijit/Tooltip", "dojo/domReady!"
], function (
Map, ArcGISDynamicMapServiceLayer, Navigation
) {