Making buttons for bookmarks

JasonDeckman · ‎06-03-2010

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.

derekswingley1 · ‎06-03-2010

Try this:

<!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 map;
  
      function init() {
        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);
      }
      
      function parkZoom(xmin,ymin,xmax,ymax) {
        console.log(xmin,ymin,xmax,ymax);
        map.setExtent(new esri.geometry.Extent({
            xmin: xmin, 
            ymin: ymin, 
            xmax: xmax, 
            ymax: ymax, 
            spatialReference: map.spatialReference
        }));
      }
      
      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="parkZoom(-10879012.737,3627863.523,-10838639.948,3668236.312)"; value="Bell County" style="width:180px">
   <input type="button" onClick="parkZoom(-10851234.816,3645620.340,-10848711.517,3648143.640)"; value="Miller Springs Nature Area" style="width:180px">
   <input type="button" onClick="parkZoom(-10868184.178,3633926.650,-10863137.580,3638973.249)"; value="Dana Peak Park" style="width:180px">
  </form>
 </div>
  </body>
</html>

The biggest change is separating your map initialization code and code that zooms to a specific extent. In the code above there's a function for each.

JasonDeckman · ‎06-03-2010

Thanks! I've been reading about the different properties and methods, but couldn't quite make sense of it.

JasonDeckman · ‎06-03-2010

http://www.centraltexastrails.org/gismap.html

Giving credit where credit is due.

derekswingley1 · ‎06-03-2010

Glad to help!