[GIS] Disabling map in ArcGIS API for Javascript

arcgis-javascript-api

Here is my code for my map:

 omap = new 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();

Yet, when I run it, the map navigation is NOT disabled, the keyboard navigation is NOT disabled, the pan is NOT disabled, the rubber band zoom is NOT disabled, and the scroll wheel also continues to operate. Please tell me how to disable all of this functionality in my web map.

Best Answer

You have to wait until the map is ready to have those methods attached to it.

This disables the navigation.

    <!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>
Related Question