Stupid zoom question

[jaykapalczynski]

Looking at this example...I can see the locate button widget.

I am not seeing where the Zoom in and Zoom out buttons are being defined !

https://developers.arcgis.com/javascript/jssamples/widget_locate.html

[MichaelVolz]

It looks like it is part of the template used for that sample.  It would be great if an ESRI representative can weigh in on this question.

[jaykapalczynski]

I agree.....then same goes for the Overview Map I think...I want to place the overview map outside the MAP but cant figure out how that location is being defined.

[MichaelVolz]

Where is this Overview map you are talking about in the Live sample?

[JakeSkinner · Accepted solution]

The navigation zoom in/out will always be created when using the Map class.  For the Overview window, you can control this by specifying the 'attachTo' parameter:

require([   "esri/map", "esri/dijit/OverviewMap", ...  ], function(Map, OverviewMap, ... ) {   var map = new Map( ... );   var overviewMapDijit = new OverviewMap({     map: map,     attachTo: "bottom-right",     color:" #D84E13",     opacity: .40   });   ... });

or by specifying an HTML element:

require([   "esri/map", "esri/dijit/OverviewMap", "dojo/dom", ...  ], function(Map, OverviewMap, dom, ... ) {   var map = new Map( ... );   var globals;   globals.overviewMapDijit = new OverviewMap({     map: map   }, dom.byId('overviewMapDiv'));   ... });

See the following link for more info:

https://developers.arcgis.com/javascript/jsapi/overviewmap-amd.html

[KenBuja]

That's a part of the Map class. When you initialize it, you have several slider options to set.

[jaykapalczynski]

I am doing this and not getting anything but the Home Button and Locate Button

No zoom in  or zoom out

#map{
     padding:0;
     margin:0;      
        width:auto;
 height:auto;
 border:1px solid red;
 border-radius: 20px;
        background-color: #fff;
}

#HomeButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
}
#LocateButton {
      position: absolute;
      top: 135px;
      left: 20px;
      z-index: 50;
} 

    <div id="CenterPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
     <div id="MapContainer" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
      <div id="map" class="map">
       <div id="HomeButton"></div>
       <div id="LocateButton"></div>
         </div>
     </div>
  <div id="TabBottomContainer" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'bottom'">
   <div data-dojo-type="dijit/layout/ContentPane" title="Boat Ramps">
    <div id="info2" >
     <div id="grid" class="slate"></div>
    </div>
   </div>
  </div>
    </div>

[JakeSkinner]

Can you post your JavaScript code, or create a jfsiddle?

[KenBuja]

Did you initialize your Map with the option "slider: false"?

This example creates a map with no slider or pan arrows. 
require([
  "esri/map", ...
], function(Map, ... ) {
  var map = new Map("mapDiv", { slider:false, nav:false });
  ...
});

[jaykapalczynski]

    var app = {};

    app.map = new esri.Map("map", {
       basemap: "topo",
       center: [-77.4329, 37.5410],
       zoom: 7,
       slider: false,
       showAttribution:false,
       logo: false
    });

      var home = new HomeButton({
        map: app.map
      }, "HomeButton");
      home.startup();

      var geoLocate = new LocateButton({
        map: app.map
      }, "LocateButton");
      geoLocate.startup();