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