topic Re: How to customize default map slider for mobile? in ArcGIS JavaScript Maps SDK Questions

How to customize default map slider for mobile?

DanielMunoz — Wed, 20 Mar 2013 12:36:20 GMT

I want to customize the default map slider that comes with the mobile popup example but I can't seem to find any information. What I'm looking to do is add the home "zoom extend" in between the zoom in and zoom out buttons.
[ATTACH=CONFIG]22780[/ATTACH]

Right now after zooming and panning to see the full map the user has to reload the full webpage.

Thank you!

Re: How to customize default map slider for mobile?

ReneRubalcava — Wed, 20 Mar 2013 14:26:27 GMT

I don't know if it's in the docs, but using the slider has an id #map_zoom_slider.
It contains two divs of class .esriSimpleSliderIncrementButton and .esriSimpleSliderDecrementButton
You'll want to use dojo/dom-construct or your favorite DOM manipulation library, or even vanilla JS is easy.
Just add a new div with your icon after .esriSimpleSliderIncrementButton, give it an id to bind to and you should be good to go.

Firebug in Firefox is great for this type of experimenting, because it will let you edit the DOM live.
Attached is a screen of how I was able to test this in FireBug
[ATTACH=CONFIG]22787[/ATTACH]

Hope this helps.

Re: How to customize default map slider for mobile?

DanielMunoz — Wed, 20 Mar 2013 16:17:22 GMT

Rene,

Thank you for your input. The code I grabbed from the samples website was the very simple one, the body of the html has not many DIV tags, I was able to manipulate the placement of the zoom slider adding a css file with:

.esriSimpleSlider{
left:2% !important;
top:90% !important;

so I'm assuming all the goodies are inside of:

http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css

this is my first project and not a programmer hopefully i will catch up soon.

Re: How to customize default map slider for mobile?

ReneRubalcava — Wed, 20 Mar 2013 16:32:42 GMT

The other option would be to write your own zoom slider widget to handle zooming in and out, custom functions and disable the default zoom slider, but I prefer to handle most things like this via css and minimal js when possible rather than recreate the wheel.

Re: How to customize default map slider for mobile?

SteveCole — Sat, 11 Dec 2021 14:29:36 GMT

I'm trying to implement this via dojo under API v3.4 and my code is bombing:

 theZoomDiv = dojo.create("div", {
  id: "sliderZoomHomeBtn",
  innerHTML: "<img style=\"width:24px;height:24px;margin:0 auto;padding-top:3px\" src=\"images/zoomHome.png\">"
  },"map_zoom_slider");
 dojo.addClass(theZoomDiv, "esriSimpleSliderIncrementButton");

The error returned points to the API and says "Unable to get value of the property 'ownerDocument'". Does anyone have a working example they could share? It was easy to insert it interactively like Rene described but doing so via JS is a bit more bear-ish.

Thanks!
Steve

Re: How to customize default map slider for mobile?

KellyHutchins — Sat, 11 Dec 2021 14:29:39 GMT

Here's an example that shows how to add the button using the approach Rene suggested. Note that I specify the url to the image that will be used for the home icon via a css class.


<!DOCTYPE html>
<html>
<head>
  <title>Create a Map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
  <style>
    html, body, #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
    .esriSimpleSliderHomeButton{
      border-bottom: 2px solid #666666;
      background-image: url(../../forum/images/home.png);
      background-repeat:no-repeat;
      background-position:center; 
    }
  </style>
  
  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
  <script>
    dojo.require("esri.map");

    var initExtent;
  
    function init(){
 

     var map = new esri.Map("mapDiv", {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "streets"
      });

     //when the map's loaded add the new button to the slider.
     dojo.connect(map,"onLoad",function(){
        var initExtent = map.extent;

        dojo.create("div",{
          className: "esriSimpleSliderHomeButton",
          onclick: function(){
            map.setExtent(initExtent);
          }
        },dojo.query(".esriSimpleSliderIncrementButton")[0], "after");

    });
    }
    dojo.ready(init);
  </script>

</head>
<body class="claro">
  <div id="mapDiv"></div>
</body>
</html>

Re: How to customize default map slider for mobile?

SteveCole — Wed, 24 Apr 2013 19:37:38 GMT

Thanks, Kelly! You rock.

Our server wasn't cooperating this morning but I finally was able to insert your technique into my app and it works. Thanks again!

Steve

Re: How to customize default map slider for mobile?

DanielMunoz — Wed, 22 May 2013 16:07:36 GMT

Beautiful! Just what the site need it.
Kelly - thank you very much I don't know what we (non-programers) would do without people (good programers) like you.

Re: How to customize default map slider for mobile?

Allison_Laforet__Charko — Tue, 25 Jun 2013 18:55:14 GMT

How do you add this script to the Parks Finder or Government Services App when you're customizing them?

Re: How to customize default map slider for mobile?

DanielleLee — Fri, 28 Jun 2013 15:40:25 GMT

This also worked perfectly for me in a web application.

I changed it to:

.esriSimpleSliderHomeButton{
      border-bottom: 2px solid #666666;
      background-image: url('images/home.png');
      background-repeat:no-repeat;
      background-position:center;

to place the image button in my folder.

Thanks!! This should almost be a standard with it's usefulness.