[OpenLayers-Users] tabbed popups

[Les Szklanny]

Robert Buzink wrote:
> hi Les,
>
> I think http://www.slippymap.com/ is a very nice implementation of 
> openlayers. Could you give us a clue how you:
>
> 1. Created the tabbed windows
> 2. Made the links outside the map activate the popups of the markers?
>
> If you have limited time, a general description would allready be very 
> helpfull. I'll dig into your code for the details.
>
> Robert.
>
> On 2/13/07, * Les Szklanny* <lszklanny at where2getit.com 
> <mailto:lszklanny at where2getit.com>> wrote:
>
>     users-request at openlayers.org <mailto:users-request at openlayers.org>
>     wrote:
>     > Send Users mailing list submissions to
>     >       users at openlayers.org <mailto:users at openlayers.org>
>     >
>     > To subscribe or unsubscribe via the World Wide Web, visit
>     >       http://openlayers.org/mailman/listinfo/users
>     > or, via email, send a message with subject or body 'help' to
>     >       users-request at openlayers.org
>     <mailto:users-request at openlayers.org>
>     >
>     > You can reach the person managing the list at
>     >       users-owner at openlayers.org <mailto:users-owner at openlayers.org>
>     >
>     > When replying, please edit your Subject line so it is more specific
>     > than "Re: Contents of Users digest..."
>     >
>     >
>     > Today's Topics:
>     >
>     >    1. Re: no predefined zoomlevels (Christopher Schmidt)
>     >    2. Re: What is the easiest way to grab the URL     string
>     being sent
>     >       to a WMS server? (Erik Uzureau)
>     >    3. TileCache Mailing List (Christopher Schmidt)
>     >    4. Re: TileCache Mailing List (percy)
>     >    5. zoom to scale, revisited (Bart van den Eijnden (OSGIS))
>     >    6. tabbed popups? (Lance Dyas)
>     >    7. Re: tabbed popups? (Bill Woodall)
>     >    8. Disappear layers with large scale google maps (Ishikawa
>     Hiroshi)
>     >    9. Re: tabbed popups? (Christopher Schmidt)
>     >   10. Re: Disappear layers with large scale google maps
>     >       (Christopher Schmidt)
>     >   11. Re: tabbed popups? (Lance Dyas)
>     >   12. Re: Disappear layers with large scale google maps
>     >       (Ishikawa Hiroshi)
>     >
>     >
>     >
>     ----------------------------------------------------------------------
>     >
>     > Message: 1
>     > Date: Mon, 12 Feb 2007 12:07:03 -0500
>     > From: Christopher Schmidt < crschmidt at metacarta.com
>     <mailto:crschmidt at metacarta.com>>
>     > Subject: Re: [OpenLayers-Users] no predefined zoomlevels
>     > To: "Bart van den Eijnden (OSGIS)" < bartvde at osgis.nl
>     <mailto:bartvde at osgis.nl>>
>     > Cc: users at openlayers.org <mailto:users at openlayers.org>
>     > Message-ID: <20070212170703.GA13765 at metacarta.com
>     <mailto:20070212170703.GA13765 at metacarta.com>>
>     > Content-Type: text/plain; charset=us-ascii
>     >
>     > On Mon, Feb 12, 2007 at 05:21:39PM +0100, Bart van den Eijnden
>     (OSGIS) wrote:
>     >
>     >> Okay, that makes sense.
>     >>
>     >> Would I still be able to use the PanZoomBar control and assign
>     a set of
>     >> scales to the PanZoomBar? So that it would represent street level,
>     >> neighbourhood level etc.? Or does it always take the scales
>     from the map?
>     >>
>     >
>     > You'd have to do something different. I think it only draws
>     once, but
>     > after that, it uses zoomTo() to go to a zoom level, which obviously
>     > wouldn't work for you :)
>     >
>     > Regards,
>     >
>     See the tabbed popups that we implemented here:
>
>     http://www.slippymap.com/
>
>     Les Szklanny
>     http://www.where2getit.com/
>     _______________________________________________
>     Users mailing list
>     Users at openlayers.org <mailto:Users at openlayers.org>
>     http://openlayers.org/mailman/listinfo/users
>
>
>
>
> -- 
> Robert Buzink, website ontwerp en ontwikkeling
> Sint-Pietersaalststraat 123
> 9000 Gent
> +32 (0)9 33 00 267
> +32 (0)487 548 414
> post at robertbuzink.nl <mailto:post at robertbuzink.nl>
> robertbuzink.nl/webdesign <http://robertbuzink.nl/webdesign>
Robert, hi!

The html code for the tabbed bubble is is an html template.  View page 
source and search for <div id="bubble"> to see the code.

The markerClick handler is added to all elements in the panel that have 
the 'recnum' attribute, see the code below:

        /**
         * @method
         * @param {DOMElement} element
         */
        addDisplayBubbleObservers: function(element) {
            var els = Element.getElementsBySelector(element, '*[recnum]');
            els.each(function(e) {
                var recnum = parseInt(e.getAttribute('recnum')) - 1;
                Event.observe(e, 'click', 
this.markerClick.bind(this.features[recnum]));
            }.bind(this));   
        },   
               
        /**
         * @param {Event} evt
         */
        markerClick: function(evt) {
            if (!this.popup) {
                var popup = this.createPopup();
                popup.bubbleSize = this.data.icon.bubbleSize;
                popup.bubbleMargin = this.data.icon.bubbleMargin;
                popup.bubbleOffset = this.data.icon.bubbleOffset;
                this.layer.map.addPopup(popup, true);    
                this.layer.map.adjustForBubble(this.marker.lonlat, 
popup.bubbleSize, popup.bubbleMargin, popup.bubbleOffset);   
            } else {
                this.layer.map.removePopup(this.popup);    
                this.popup.destroy();
                this.popup = null;               
            }
            OpenLayers.Event.stop(evt);   
        }

Regards,
Les Szklanny
http://www.where2getit.com/