AnsweredAssumed Answered

setExtent does not work properly

Question asked by yanwangGIS on Jun 10, 2016
Latest reply on Jun 13, 2016 by yanwangGIS

I'm just starting to learn javascript API and copy/pasted some very simple code to test and run. On click of the button the map suppose to zoom in but after a second or 2 it just zooms back to it's initial extent. What have I done wrong? Please help! Thanks in advance.

 

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>

    <title>Simple Map</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">

    <style>

      html, body, #map {

        height: 100%;

        margin: 0;

        padding: 0;

      }

    </style>

    <script src="https://js.arcgis.com/3.16/"></script>

    <script>

      var map;

 

      require(["esri/map", "dojo/domReady!"], function (Map) {

        map = new Map("map", {

          basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd

          center: [-122.45, 37.75], // longitude, latitude

          zoom: 13

        });

      });

 

      function zoomIn() {

        var extent = map.extent;

        map.setExtent(extent.expand(0.5));

      }

 

    </script>

  </head>

 

  <body>

    <form runat="server">

    <div id="map"></div>

      <div>

    <asp:Button runat="server" ID="zoomIn" Text="Zoom to extent" OnClientClick="zoomIn();" />

  </div>

      </form>

  </body>

</html>

Outcomes