beginner: changing map extent on click

MikeOnzay · ‎11-03-2011

I want the map extent to change by clicking on some text. I'm using the example Add Dynamic Map and I have added the following code

function myzoom() {
          
        var axtent = new esri.geometry.Extent(55.6153456, 5.7191691, 105.6673614, 37.0016790, map.SpatialReference);
        map.setExtent(axtent);
        
        }

I have tried placing it both outside of the init function and inside the init function. In both cases I get an error when I call it

<p id="test" onClick="myZoom();">click for zoom</p>

If I add an alert function outside of the init function

  function nTest(){
   alert("test2");
  }

and call it from here

<p id="test2" onClick="nTest();">click for alert</p>

it works.

Why?

- Mike

derekswingley1 · ‎11-03-2011

JavaScript is case-sensitive. Your function name is "myzoom" but your onClick says "myZoom".

I probably should have posted a more complete code sample in the other thread where this was recently discussed. Here's a simple page demoing this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Zoom to Extent Test</title>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
<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">djConfig = { parseOnLoad: true }</script>
  <script type="text/javascript">
    dojo.require("esri.map");
    
    var map, layer;
    function Init() {
      map = new esri.Map("mapDiv");
      layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer"); 
      map.addLayer(layer);
      dojo.connect(dojo.byId('button2'), 'onclick', myzoom);
    }

    function myzoom() {
      console.log('my zoom fired');
      var axtent = new esri.geometry.Extent(55.6153456, 5.7191691, 105.6673614, 37.0016790, map.SpatialReference);
      // var axtent = new esri.geometry.Extent(105.6673614, 37.0016790, 55.6153456, 5.7191691, map.SpatialReference);
      console.log('xmin: ', axtent.xmin, '; ymin: ', axtent.ymin);
      map.setExtent(axtent);
    }
    dojo.ready(Init);
  </script>
</head>
<body class="tundra">
  <div id = "mapDiv" style="width:800px; height:300px"> </div>
  <input id="button2" type="button" value="Zoom To India" />
</body>
</html>

MikeOnzay · ‎11-03-2011

Thanks for posting the complete code from the other post.

I caught that case sensitivity after I published my original post.

When I fixed my function name problem I still got an error that myZoom was not defined. I see from your example that while I placed my function in the head section I did not tie it together with dojo.connect.

I found that it in the dojo.connect that you can use either
dojo.byId('button2') or just button2 in the dojo.connect statement. Is this a matter of preference or is there a reason why you were more specific?

The reason why I coded the way I did was because I had looked at this example and I saw that there was an onChange event in the combobox. It calls a function which changes the map based on a layer definition. So I thought it would be okay to do something similar with an onClick event.

Why does this example not use a dojo.connect statement to tie it together as you showed in my original example?

derekswingley1 · ‎11-03-2011

I prefer to use dojo.connect() to wire up events as it keeps JavaScript separate from HTML. I do not like to embed JS in my markup. Separation of concerns and all that...

For the first argument to dojo.connect, I prefer using dojo.byId() because it's explicit what is happening. It's perfectly reasonable to just use a string that corresponds to a DOM node's ID.

MikeOnzay · ‎11-03-2011

Thanks for your help and clear explanations.