How to get the Home button between the two default zoom sliders?

AlexGole · ‎08-26-2014

Hi all,

I am trying to insert vertically the home button in between the zoom sliders ( + and -). How can I achieve that?

Thank you,

Alex

DanielSmith · ‎06-15-2016

nm. removed the absolute position and was good to go.

VeenaHosur · ‎01-07-2016

Robert,

can you tell me how to change icon of arcgis navigation tools

RobertScheitlin__GISP · ‎01-07-2016

Veena,

Actually those are text and not icons:

<div id="map_zoom_slider" class="esriSimpleSlider esriSimpleSliderVertical esriSimpleSliderTL" style="z-index: 30;">
    <div class="esriSimpleSliderIncrementButton" title="Zoom In">
        <span>+</span>
    </div>
    <div class="esriSimpleSliderDecrementButton" title="Zoom Out">
        <span>–</span>
    </div>
</div>

So you would have to manipulate the dom and replace the span elements with an image. I have never had a desire to do this so I don't have a code sample for that.

ChrisSmith7 · ‎01-07-2016

Veena,

Here's some example code:

<!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></title>


  <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">    
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
  <style> 
    html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    #map{
  padding:0;
    }

  .increment {
  background-image: url('https://useiconic.com/open-iconic/svg/fullscreen-exit.svg');
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: center;
  }

  .decrement {
  background-image: url('https://useiconic.com/open-iconic/svg/fullscreen-enter.svg');
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: center;
  }
  </style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://js.arcgis.com/3.15/"></script>
  <script> 
    var map;
    require([
      "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
      "dojo/parser", "dojo/on",


      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
      "dojo/domReady!"
    ], function(
      Map, BasemapGallery, arcgisUtils,
      parser, on
    ) {
      parser.parse();


      map = new Map("map", {
        basemap: "topo",
        center: [-105.255, 40.022],
        zoom: 13
      });


      //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();
      
      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error:  ", msg);
      });
   
   //remove +- span and replace with SVG
   map.on("load", function (e) {
       $('div.esriSimpleSliderIncrementButton').find('span').remove();
   $('div.esriSimpleSliderDecrementButton').find('span').remove();
   
   $('div.esriSimpleSliderIncrementButton').append("<div class='increment'></div>");
   $('div.esriSimpleSliderDecrementButton').append("<div class='decrement'></div>");
   });
    });
  </script> 
</head> 


<body class="claro"> 
  <div data-dojo-type="dijit/layout/BorderContainer" 
       data-dojo-props="design:'headline', gutters:false" 
       style="width:100%;height:100%;margin:0;">


    <div id="map" 
         data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region:'center'" 
         style="padding:0;">


      <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div data-dojo-type="dijit/TitlePane" 
             data-dojo-props="title:'Switch Basemap', closable:false, open:false">
          <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
          </div>
        </div>
      </div>


    </div>
  </div>
</body> 


</html>