How to customize default map slider for mobile?

1411
9
03-20-2013 05:36 AM
DanielMunoz
Occasional Contributor
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!
0 Kudos
9 Replies
ReneRubalcava
Frequent Contributor
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.
0 Kudos
DanielMunoz
Occasional Contributor
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.
0 Kudos
ReneRubalcava
Frequent Contributor
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.
0 Kudos
SteveCole
Frequent Contributor
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
0 Kudos
KellyHutchins
Esri Frequent Contributor
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>



0 Kudos
SteveCole
Frequent Contributor
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
0 Kudos
DanielMunoz
Occasional Contributor
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.
0 Kudos
Allison_Laforet__Charko
New Contributor III
How do you add this script to the Parks Finder or Government Services App when you're customizing them?
0 Kudos
DanielleLee
New Contributor II
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.
0 Kudos