nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Vind meer berichten getagd met

Accepted answers

JakeSkinner

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

All comments

MikeVolz

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.

MikeVolz

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

JakeSkinner

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();

jaykapalczynski

trying to get this to work....topo wont even display

Trying to get a home button, Location Button, and the Zoom in and zoom out

http://jsfiddle.net/Jaykapalczynski/WyMzY/11/

JakeSkinner

Looks like you forgot to call the "dojo/parser" module.

http://jsfiddle.net/WyMzY/12/

LuciHawkins

You need to reference the esri stylesheet and javascript api

<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<script src="//js.arcgis.com/3.9/"></script>

Also, you will not get the zoom in/out buttons with slider: false needs to be slider: true

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

Hope this helps,

Luci

jaykapalczynski

So weird I have no idea whats going on...I clear my cache and refreshed my Website...

The parser was added here but still no Zoom in and ZOom out

http://jsfiddle.net/Jaykapalczynski/WyMzY/15/

Below is a snip of my code that should be making this happen, but no go...the Hoem and Locate button are there but no Zoom in Zoom out

     
        <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>

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

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

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

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

LuciHawkins

Change your code:

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

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

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

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

If you change slider: false, to slider: true, you will see the + - zoom buttons

Luci

jaykapalczynski

alright its working in the JSFiddle but for some reason not in my code....this is so simple dont know why I am having an issue.
Will try again...

jaykapalczynski

Alright this is VERY weird....I got the example aobve working fine in JS Fiddle.

I pasted all my code from my project into JS Fiddle and it worked. The exact same code in my project does not display the zoom buttons....wow

The only thing thats different between my project is that JSFiddle requires the below

where i define the stylesheets
removal of the meta data
removal of the <html><head> tags
removal of my defined .js page and .css page....of which were copied verbatum into the JS Fiddle.

I cleared my cache many times
I refreshed the web service many times.
Check in 3 different browsers (IE, Chrome, Firefox)
No blatant errors in the Chromes debugging Console window

This is driving me nuts....what the heck can be different or causing this

JakeSkinner

If you'd like, post your code as you have it in your project. Be sure to wrap it in CODE tags.

jaykapalczynski

THINKING I MIGHT HAVE GOTTEN IT...I REMOVED A TON OF MY CODE AND STARTED FROM SCRATCH

I am going to add each piece back untill i error out....BRB

jaykapalczynski

THINK I MIGHT HAVE GOTTEN IT......BRB

JonathanUihlein

Make sure you are using the correct CSS file.

jaykapalczynski

I have no idea what was going on.....I copied my HTML Page, JS page, and css page....
Erased all code in them.
Started to bring back the code one piece at a time. Replaced the code VERBATIM and it works now...There is nothing different between the two projects that I can see....really weird.

I THANK YOU ALL for your thoughts....very helpful and trying to work through these challenges....

Much appreciated.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.