jason.deckman

Making buttons for bookmarks

Discussion created by jason.deckman on Jun 3, 2010
Latest reply on Jun 3, 2010 by DSwingley-esristaff
Here's what I want to do, but can't seem to figure out.  I want to have a custom extent set when the map loads, but then place two or three buttons to zoom to a preset extent that will save the user the trouble of scrolling and panning around if they don't know where something is. (In my map, they're zooming to parks.)  Whether or not they use the bookmark buttons, the user should still be able to pan and zoom as usual.

I'll admit to not understanding Javascript all that well.  Here's my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>Dynamic Map Service Layer with Custom Projection and Extent</title>

    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>

    <script type="text/javascript">

      dojo.require("esri.map");
 var xmin
 var ymin
 var xmax
 var ymax
  
      function init(xmin,ymin,xmax,ymax) {
 
        var customExtentAndSR = new esri.geometry.Extent(xmin,ymin,xmax,ymax,new esri.SpatialReference({"wkid":102113}));
        //create map with new custom spatial reference and extent.  Coords are xmin, ymin, xmax, ymax
        var map = new esri.Map("map", {extent:customExtentAndSR});
        //map service layer has a default spatial reference of 102113.
        var mapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://maps.ctcog.org/ArcGIS/rest/services/CTTN/TrailMap/MapServer");
        map.addLayer(mapServiceLayer);
      }

      dojo.addOnLoad(init);
    </script>

  </head>
  <body>
    <div id="map" class="tundra" style="position:relative; width:700px; height:700px; border:2px solid #000;background-color:#FFFFFF;"></div>
 <div style="position:relative; width:700px; height:80px; border:2px solid #000;background-color:#FFFFFF;">
  <form>
   <input type="button" onClick="init(-10879012.737,3627863.523,-10838639.948,3668236.312)"; value="Bell County" style="width:180px">
   <input type="button" onClick="int(-10851234.816,3645620.340,-10848711.517,3648143.640)"; value="Miller Springs Nature Area" style="width:180px">
   <input type="button" onClick="int(-10868184.178,3633926.650,-10863137.580,3638973.249)"; value="Dana Peak Park" style="width:180px">
  </form>
 </div>
  </body>
</html>


The buttons and formatting are there, but the buttons do nothing, and when you try to manually pan around, the map is locked to its original extent.

Thanks in advance for any help you folks can offer.

Outcomes