Vishful thinking…

Replacing the Dojo scale slider with the jQuery slider for the ESRI JS API

Posted in Uncategorized by viswaug on October 10, 2008

The Dojo slider widget that is used by the ESRI JS API gets rendered to the web page as table element. It is surprising that the Dojo would use the table element for layout purposes when rendering the scale slider. JQuery’s slider on the other hand uses DIVs and generates much cleaner HTML for it’s rendering purposes. The HTML page provided below replaces the Dojo Slider with jQuery’s slider.

Click here to see demo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery Slider for the ESRI JS APIs</title>
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.1/js/dojo/dijit/themes/tundra/tundra.css" />
        <link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" />
        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js"></script>
        <script type="text/javascript">
          dojo.require("esri.map");
          var map;
          var setupSlider = function(mapLoaded) {
              if (mapLoaded._baseLayer.tileInfo) {
                var lods = mapLoaded._baseLayer.tileInfo.lods;
                //initialize the scale slider
                $("#scaleSlider").slider({
                    min:0,
                    max:lods.length - 1,
                    slide: function(e, ui) { //the function that handles the event when the user uses the slider and changes the map extent
                        map.setLevel(ui.value);
                    }
                    });
                //hook up the listener to listen to the scale changes on the map and updates the slider accordingly
                dojo.connect(mapLoaded, "onExtentChange", function(extent, delta, levelChange, lod){
                    if(levelChange) {
                        $("#scaleSlider").slider("moveTo", mapLoaded.getLevel(), 0)
                    }
                });
                $("#scaleSlider").slider("moveTo", mapLoaded.getLevel(), 0);
            }
            else {
                $("#scaleSlider").hide();
            }
          };
          var init = function() {
            map = new esri.Map("map", {slider:false});
            var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
            map.addLayer(tiledMapServiceLayer);
            dojo.connect(map, "onLoad", setupSlider)
          };
          dojo.addOnLoad(init);
        </script>
    </head>
    <body class="tundra">
        <div id="map" style="position:relative; width:900px; height:600px; border:1px solid #000;">
            <div id='scaleSlider' class='ui-slider-1' style="position:absolute; right:5px; bottom:5px; color:#fff; z-index:50;">
                <div id="scaleSliderHandle" class='ui-slider-handle'></div>
            </div>
        </div>
    </body>
</html>

And that’s it. The jQuery slider works seamlessly with the ESRI JS API map. The slider currently positioned at the bottom right of the map. But it can be positioned as desired and also can be used with a vertical orientation like with the default slider.

Advertisement

3 comments