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.

3 comments

3 Responses

Subscribe to comments with RSS.

Morten said, on October 10, 2008 at 6:09 pm

People should stop being so afraid of tables. We have listened too much to the CSS guys without getting the whole story. They definitely have their place, and for something like a slider with interval steps, tables are the right tool for the job.
Tables are bad for general page layout. If you for instance want to move your menu from the left to the right side, you can’t do it through a pure styled approach if you had used tables for defining the layout structure. This is where the table warning is valid.
You wouldn’t want to change the layout structure of a slider – it has specific structure that doesn’t change.
There is also the issue with rendering speed of tables, but IMHO that’s a thing of the past and in falls in the category of premature optimizations (all that extra CSS is probably going to take longer to download than the extra time it takes to render a table).

Reply
viswaug said, on October 10, 2008 at 8:55 pm

Hi Morten,

I do agree with the “Don’t be afraid of tables” statement. But I should also say that I see the jQuery slider as being much more of an elegant solution for the scale slider than the Dojo Slider. I am pretty sure that the slider can be used for countless other things for which it needs to be more complex.

Using the jQuery slider, I have 2 DIVs and 1 A tag on much page. Whereas, when I use a dojo slider, i have ~ 30-40 elements on my page(all the Table, tr, td, Input tags generated). If they both do the same thing, then I would rather use the jQuery slider over the Dojo slider. That said, I had to do the jQuery slider because of a customer requirement…

Vish

Reply
A better jQuery scale slider « Vish’s ramblings said, on November 10, 2008 at 6:00 am

[…] by viswaug on November 10, 2008 I was looking to make the jQuery slider I had posted about earlier a little better. After a little bit of work and ‘leveraging‘ some code from this […]

Reply