Home > Developer > JavaScript
This example shows how to include a custom button for panning a map. The map is placed in a fixed-width central unit of an HTML table with a width of 3 columns and a height of 3 rows. The remaining cells in the table are labeled with abbreviated buttons in 8 main directions. Each button invokes a different translation function on the map. For example, the "NW" button calls Map.panupperleft.
<button onclick= "Map.panupperleft (); Id= "Button1" >NW</button>
In your app, you can choose the format of any button. You can even choose to use pictures or other controls instead of buttons.
1 <!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD">2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/>5 <Metahttp-equiv= "X-ua-compatible"content= "Ie=7" />6 <title>Custom navigation arrows</title>7 <Linkrel= "stylesheet"type= "Text/css"href= "Http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">8 <Scripttype= "Text/javascript"src= "http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></Script>9 <Scripttype= "Text/javascript">Ten Dojo.require ("Esri.map"); One A varmap; - functioninit () { - Map= NewESRI. Map ("Map"); the Map.addlayer (NewEsri.layers.ArcGISTiledMapServiceLayer ("Http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer")); - } - - dojo.addonload (init); + </Script> - </Head> + <Body> A This application shows how to create custom navigation buttons. at <Tablebgcolor= "#eee"> - <tbody> - <TR> - <TD><Buttononclick= "Map.panupperleft ();">NW</Button></TD> - <TDAlign= "Center"><Buttononclick= "Map.panup">N</Button></TD> - <TD><Buttononclick= "map.panupperright ();">NE</Button></TD> in </TR> - <TR> to <TDvalign= "Middle"><Buttononclick= "Map.panleft ();">W</Button></TD> + <TD><DivID= "Map"class= "Soria"style= "width:1024px;height:512px;border:1px solid #000"></Div></TD> - <TDvalign= "Middle"><Buttononclick= "map.panright ();">E</Button></TD> the </TR> * <TR> $ <TD><Buttononclick= "Map.panlowerleft ();">SW</Button></TD>Panax Notoginseng <TDAlign= "Center"><Buttononclick= "Map.pandown ();">S</Button></TD> - <TD><Buttononclick= "map.panlowerright ();">SE</Button></TD> the </TR> + </tbody> A </Table> the </Body> + </HTML>
ArcGIS API for javascript--map configuration-Custom navigation arrows
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
