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

How to customize default map slider for mobile?

DanielMx

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!

ZE.png

Vind meer berichten getagd met

Accepted answers

All comments

DanielleLee

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.

acharko

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

DanielMx

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.

evtguy

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

khutchins

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>

evtguy

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

RRubalcava

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.

DanielMx

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.

RRubalcava

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.

slidertest.jpg

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.