openlayers pan zoom bar modification

Question

i am new at openlayers and i want to learn how can i add pan zoom bar like http://maps.cloudmade.com/ zoombar. it shows some tag as building , country etc. when you on this pan...

Answer 1

You can override OpenLayers.Control.PanZoom, for example:

    idecan.PanZoom = OpenLayers.Class(OpenLayers.Control.PanZoom, {

        bounds: null,

        initialize: function(options) {
            this.position = new OpenLayers.Pixel(OpenLayers.Control.PanZoom.X,
                                                 OpenLayers.Control.PanZoom.Y);

            if (arguments[0].bounds)
                this.bounds = arguments[0].bounds;
            OpenLayers.Control.prototype.initialize.apply(this, arguments);
        },

        includeButtons: {
            "zoomin": {
                outImageSrc: "zoom-plus-mini.png",
                overImageSrc: "zoom-plus-mini-over.png"
            },
            "zoomout": {
                outImageSrc: "zoom-minus-mini.png",
                overImageSrc: "zoom-minus-mini-over.png"
            },
            "zoomworld": {
                outImageSrc: "zoom-world-mini.png",
                overImageSrc: "zoom-world-mini-over.png"
            }
        },

        makeMouseCallback: function(id, state) {
            var selector = state + "ImageSrc";
            var src = OpenLayers.Util.getImagesLocation() + this.includeButtons[id][selector];
            return function(evt) {
                var img = this.firstChild;
                if (img.src != src) {
                    img.src = src;
                }
            };
        },

        _addButton: function(id, img, xy, sz) {

            if (id in this.includeButtons) {
                var src = this.includeButtons[id].outImageSrc;
                var size = new OpenLayers.Size(18,18);
                var btn = OpenLayers.Control.PanZoom.prototype._addButton.call(this, id, src, xy, size);

                if (this.bounds) {
                    var bounds = this.bounds;
                    var getBounds = function() {
                        return bounds;
                    };
                    btn.getBounds = getBounds;
                }

                btn.className = this.displayClass + id.capitalize();
                btn._btnId = id;
                OpenLayers.Event.observe(btn, "mouseover", OpenLayers.Function.bindAsEventListener(this.makeMouseCallback(id, "over"), btn));
                OpenLayers.Event.observe(btn, "mouseout", OpenLayers.Function.bindAsEventListener(this.makeMouseCallback(id, "out"), btn));
                return btn;
            }
        },

        buttonDown: function (evt) {
            if (!OpenLayers.Event.isLeftClick(evt)) {
                return;
            }

            switch (this.action) {
                case "panup": 
                    this.map.pan(0, -this.getSlideFactor("h"));
                    break;
                case "pandown": 
                    this.map.pan(0, this.getSlideFactor("h"));
                    break;
                case "panleft": 
                    this.map.pan(-this.getSlideFactor("w"), 0);
                    break;
                case "panright": 
                    this.map.pan(this.getSlideFactor("w"), 0);
                    break;
                case "zoomin": 
                    this.map.zoomIn(); 
                    break;
                case "zoomout": 
                    this.map.zoomOut(); 
                    break;
                case "zoomworld":
                    if (map.center) 
                        map.setCenter(idecan.center, idecan.zoom);
                        //this.map.zoomToExtent(this.getBounds());
                    else
                        this.map.zoomToMaxExtent(); 
                    break;
            }

            OpenLayers.Event.stop(evt);
        },

        CLASS_NAME: "idecan.PanZoom"
    });

Answer 2

I'm also currently implementing a customized derivate of OpenLayer's PanZoom control. Unfortunately, the PanZoom control contains a lot of cruft code, many lines are just devoted to some hard-coded control styling that could be done much easier in CSS (eg why must every control button be 18x18 pixels?)

Felix' answer is a good starting point, but if you don't need to implement your PanZoom control super urgent, I'd wait until OpenLayers 2.11 or some newer version is out. The OpenLayers devs are currently refactoring many of the hard coded formatting to CSS, making the control code slimmer and more easy to understand.