How to get horizontal slider to work

BrianFoley1 · ‎10-18-2016

With Ken's help, I have created a map with a horizontal slider placed in the footer section of my map. Here is my jsfiddle : https://jsfiddle.net/befoley/xuhm1ph4/8/ . The problem I am now having is trying to get the slider to work.

RobertScheitlin__GISP · ‎10-18-2016

Brain,

Here is the code for connecting the slider with the map:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.17/esri/css/esri.css">
    <style type="text/css">
        html,
        body {
            height: 98%;
            width: 98%;
            margin: 0;
            padding: 5px;
            font-family: helvetica, arial, sans-serif;
            font-size: 90%;
            overflow: auto;
        }

        #content {
            position: fixed;
            top: 32px;
            width: 100%;
            height: 100%;
            left: 0;
            margin: 0;
            border: 0;
        }

        #header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 50px;
            left: 0;
            background: silver;
        }

        #footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 35px;
            left: 0;
            background: silver;
        }

        #map {
            position: fixed;
            width: 100%;
            height: 100%;
            border: 0;
            margin-left: -15px;
            margin-top: -15px;
            margin-right: -15px;
        }
        /*----------------------------------------------------------*/
        /* Styling the buttons for drop-down and drop-up menus.     */
        /*----------------------------------------------------------*/

        .claro .dijitButton .dijitButtonNode,
        .claro .dijitDropDownButton .dijitButtonNode,
        .claro .dijitComboButton .dijitButtonNode,
        .claro .dijitToggleButton .dijitButtonNode {
            border: 0;
            padding: 1px 200px 1px 1px;
            color: #000000;
            border-radius: 0;
            box-shadow: none;
            background: none;
            font-family: Calibri;
            font-size: 15px;
        }

        .dijitSlider {
            width: 200px;
        }
    </style>
    <title> by befoley</title>
    <script src="https://js.arcgis.com/3.17/"></script>
    <script type='text/javascript'>
        var map, toc, basemap, dynaLayer1;
        require([
                    "dojo/dom",
                    "dojo/parser",
                    "dojo/on",
                    "dojo/_base/lang",
                    "esri/map",
                    "esri/geometry/Extent",
                    "esri/layers/ArcGISTiledMapServiceLayer",
                    "esri/layers/ArcGISDynamicMapServiceLayer",
                    "dijit/layout/BorderContainer",
                    "dijit/layout/ContentPane",
                    "dijit/form/HorizontalSlider",
                    "dojo/domReady!"
                ],
                function(
                    dom, parser, on, lang,
                    Map, Extent, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
                    BorderContainer, ContentPane, HorizontalSlider
                ) {
                    parser.parse();

                    var initialExtent = new esri.geometry.Extent({
                        "xmin": -13133567.66,
                        "ymin": 3996227.94,
                        "xmax": -13031753.54,
                        "ymax": 4087952.37,
                        "spatialReference": {
                            "wkid": 102100
                        }
                    });

                    map = new Map("map", {
                        basemap: "streets",
                        extent: initialExtent,
                        smartNavigation: false,
                        logo: false,
                        showAttribution: false,
                        zoom: 14,
                        slider: false
                    });
                    map.on("layers-add-result", initSlider);

                    function initSlider() {
                        var slider = new HorizontalSlider({
                            map: map,
                            value: (map.getLevel() + 1),
                            minimum: 0,
                            maximum: 17,
                            intermediateChanges: true,
                            discreteValues: 17
                        }, dojo.byId("slider"));
                        on(slider, "change", lang.hitch(this, function(evt){
                          map.setLevel(parseInt(slider.value, 10));
                        }));
                    }

                    dynaLayer1 = new esri.layers.ArcGISDynamicMapServiceLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/MapServer", {
                        opacity: 0.8
                    });
                    map.addLayers([dynaLayer1]);
                }
            );
    </script>
</head>

<body>
    <div id="content" data-dojo-type="dijit/layout/BorderContainer" design="headline" gutters="true">
        <div id="header"></div>
        <div id="map" data-dojo-type="dijit/layout/ContentPane" region="center"></div>
    </div>
    <div id="footer">
        <div id="slider" style="position:absolute;left:650px;top:5px;vertical-align:middle;"></div>
    </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎10-18-2016

Brain,

I don't see anything in your code that attempts to use the slider to do anything... What is the slider suppose to do?

BrianFoley1 · ‎10-18-2016

I wanted it to zoom-in/zoom-out the map

RobertScheitlin__GISP · ‎10-18-2016

Brain,

Just by adding a slider does not connect it to the map for zooming in and out. Let me see if I can get you a sample for this.

BrianFoley1 · ‎10-18-2016

Thanks Robert

RobertScheitlin__GISP · ‎10-18-2016

Brain,

Here is the code for connecting the slider with the map:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.17/esri/css/esri.css">
    <style type="text/css">
        html,
        body {
            height: 98%;
            width: 98%;
            margin: 0;
            padding: 5px;
            font-family: helvetica, arial, sans-serif;
            font-size: 90%;
            overflow: auto;
        }

        #content {
            position: fixed;
            top: 32px;
            width: 100%;
            height: 100%;
            left: 0;
            margin: 0;
            border: 0;
        }

        #header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 50px;
            left: 0;
            background: silver;
        }

        #footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 35px;
            left: 0;
            background: silver;
        }

        #map {
            position: fixed;
            width: 100%;
            height: 100%;
            border: 0;
            margin-left: -15px;
            margin-top: -15px;
            margin-right: -15px;
        }
        /*----------------------------------------------------------*/
        /* Styling the buttons for drop-down and drop-up menus.     */
        /*----------------------------------------------------------*/

        .claro .dijitButton .dijitButtonNode,
        .claro .dijitDropDownButton .dijitButtonNode,
        .claro .dijitComboButton .dijitButtonNode,
        .claro .dijitToggleButton .dijitButtonNode {
            border: 0;
            padding: 1px 200px 1px 1px;
            color: #000000;
            border-radius: 0;
            box-shadow: none;
            background: none;
            font-family: Calibri;
            font-size: 15px;
        }

        .dijitSlider {
            width: 200px;
        }
    </style>
    <title> by befoley</title>
    <script src="https://js.arcgis.com/3.17/"></script>
    <script type='text/javascript'>
        var map, toc, basemap, dynaLayer1;
        require([
                    "dojo/dom",
                    "dojo/parser",
                    "dojo/on",
                    "dojo/_base/lang",
                    "esri/map",
                    "esri/geometry/Extent",
                    "esri/layers/ArcGISTiledMapServiceLayer",
                    "esri/layers/ArcGISDynamicMapServiceLayer",
                    "dijit/layout/BorderContainer",
                    "dijit/layout/ContentPane",
                    "dijit/form/HorizontalSlider",
                    "dojo/domReady!"
                ],
                function(
                    dom, parser, on, lang,
                    Map, Extent, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
                    BorderContainer, ContentPane, HorizontalSlider
                ) {
                    parser.parse();

                    var initialExtent = new esri.geometry.Extent({
                        "xmin": -13133567.66,
                        "ymin": 3996227.94,
                        "xmax": -13031753.54,
                        "ymax": 4087952.37,
                        "spatialReference": {
                            "wkid": 102100
                        }
                    });

                    map = new Map("map", {
                        basemap: "streets",
                        extent: initialExtent,
                        smartNavigation: false,
                        logo: false,
                        showAttribution: false,
                        zoom: 14,
                        slider: false
                    });
                    map.on("layers-add-result", initSlider);

                    function initSlider() {
                        var slider = new HorizontalSlider({
                            map: map,
                            value: (map.getLevel() + 1),
                            minimum: 0,
                            maximum: 17,
                            intermediateChanges: true,
                            discreteValues: 17
                        }, dojo.byId("slider"));
                        on(slider, "change", lang.hitch(this, function(evt){
                          map.setLevel(parseInt(slider.value, 10));
                        }));
                    }

                    dynaLayer1 = new esri.layers.ArcGISDynamicMapServiceLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/MapServer", {
                        opacity: 0.8
                    });
                    map.addLayers([dynaLayer1]);
                }
            );
    </script>
</head>

<body>
    <div id="content" data-dojo-type="dijit/layout/BorderContainer" design="headline" gutters="true">
        <div id="header"></div>
        <div id="map" data-dojo-type="dijit/layout/ContentPane" region="center"></div>
    </div>
    <div id="footer">
        <div id="slider" style="position:absolute;left:650px;top:5px;vertical-align:middle;"></div>
    </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

BrianFoley1 · ‎10-18-2016

That works perfectly. Again, thanks for all the help you've given me Robert as I continue to learn.