How do I disable pan and zoom on a map?

BrentHoskisson · ‎11-13-2014

Here is my map definition:

Yet it doesn't disable any of the things below that it says to disable.

And this is the absolute worst user interface in the the world. Someone at esri needs to be takenout and shot.!!!!

omap = Map("overviewMap", { extent: initExtent, logo: false, slider: false });

tmoverview = new ArcGISDynamicMapServiceLayer(mylayer, { "opacity": 1.0, "visible": true });



omap.addLayer(tmoverview);


omap.disableMapNavigation();

omap.disableKeyboardNavigation();








omap.disablePan();

omap.disableRubberBandZoom();

omap.disableScrollWheelZoom();

KenBuja · ‎11-13-2014

Wait until the map is loaded before applying those methods.

<!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="http://js.arcgis.com/3.11/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.11/"></script>
    <script>
      var map;

      require(["esri/map", "dojo/domReady!"], function(Map) {
        map = new Map("map", {
          basemap: "topo",
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 13
        });
        map.on("load", function(){
          console.log("Map loaded");
          map.disableMapNavigation();
          map.disableKeyboardNavigation();
          map.disablePan();
          map.disableRubberBandZoom();
          map.disableScrollWheelZoom();
        });
      });
    </script>
  </head>

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

View solution in original post

KenBuja · ‎11-13-2014

Wait until the map is loaded before applying those methods.

<!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="http://js.arcgis.com/3.11/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.11/"></script>
    <script>
      var map;

      require(["esri/map", "dojo/domReady!"], function(Map) {
        map = new Map("map", {
          basemap: "topo",
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 13
        });
        map.on("load", function(){
          console.log("Map loaded");
          map.disableMapNavigation();
          map.disableKeyboardNavigation();
          map.disablePan();
          map.disableRubberBandZoom();
          map.disableScrollWheelZoom();
        });
      });
    </script>
  </head>

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