Web Images Videos Maps News Shopping Gmail more »
Recently Visited Groups | Help | Sign in
Google Groups Home
Message from discussion How-to implement smooth zoom with the mouse wheel
The group you are posting to is a Usenet group. Messages posted to this group will make your email address visible to anyone on the Internet.
Your reply message has not been sent.
Your post was successful
 
From:
To:
Cc:
Followup To:
Add Cc | Add Followup-to | Edit Subject
Subject:
Validation:
For verification purposes please type the characters you see in the picture below or the numbers you hear by clicking the accessibility icon. Listen and type the numbers you hear
 
Joaquin Cuenca Abela  
View profile  
 More options Jul 26 2005, 3:41 pm
From: "Joaquin Cuenca Abela" <e98cu...@gmail.com>
Date: Tue, 26 Jul 2005 19:41:07 -0000
Local: Tues, Jul 26 2005 3:41 pm
Subject: How-to implement smooth zoom with the mouse wheel
Hi,

I've implemented smooth zoom with the mouse wheel for IE 6. You can
also zoom with the mouse wheel in firefox, but the zoom will not be
smooth [*].

You can see it in action at www.panoramio.com (alpha quality site, ya
da ya da).

If anybody wants to do it, you should add this to your javascript:

===========================================

function exO(a){return Math.round(a)+"px"}

GMap.prototype.applyZoom = function(a)
{
        var b = this;
        var c = Math.floor(Math.log(b.viewSize.width) * Math.LOG2E - 2);
        var d = b.zoomLevel - a;
        if (d > c)
        {
                d = c;
        }
        else if (d < -c)
        {
                d = -c;
        }

        var e = Math.pow(2, d);
        b.div.style.zoom = e;
        var f = b.viewSize.width * b.centerScreen.x;
        var h = b.viewSize.height * b.centerScreen.y;
        b.div.style.left = exO((this._savedOffset.x - f) * e + f);
        b.div.style.top = exO((this._savedOffset.y - h) * e + h);

}

GMap.prototype.smoothZoomTo = function(newZoom)
{
        var a = this;

        if (a.div.style.zoom == undefined)
        {
                a.zoomTo(newZoom);
                return;
        }

        a._currentZoom = parseInt(a.getZoomLevel());
        a._targetZoom = newZoom;
        a._savedOffset={"x" : a.div.offsetLeft, "y" : a.div.offsetTop};
        a.hideOverlays();

        this._zoomInterval = setInterval(function() {
                a._currentZoom += 0.3 * (a._targetZoom - a._currentZoom);

                if (Math.abs(a._targetZoom - a._currentZoom) < 0.05)
                {
                        if (a._savedOffset)
                        {
                                a.div.style.left=exO(a._savedOffset.x);
                                a.div.style.top=exO(a._savedOffset.y);
                        }
                        a.div.style.zoom = 1;
                        a.showOverlays();
                        a.zoomTo(a._targetZoom);
                        a._savedOffset = null;
                        window.clearInterval(a._zoomInterval);
                }
                else
                {
                        a.applyZoom(a._currentZoom);
                }
        }, 50);

}

function zoom(oEvent, scr)
{
        var new_zoom = map.getZoomLevel();
        if (scr >= 120)
                new_zoom--;
        else
                new_zoom++;

        map.smoothZoomTo(new_zoom);
        if (oEvent.preventDefault)
                oEvent.preventDefault();

}

// Hook the mouse wheel to zoom the map on Mozilla and Internet
Explorer 6.0 browsers
function hookMouseWheelHandlers(id)
{
        var d = document.getElementById(id);
        if (d)
        {
                try
                {
                        if (document.body.addEventListener)
                                d.addEventListener('DOMMouseScroll', function(oEvent) {
zoom(oEvent, oEvent.detail * -40); }, false);
                        else
                                d.onmousewheel = function() { zoom(event, event.wheelDelta); return
false; }
                } catch (ex) {}
        }

}

===========================================

And call hookMouseWheelHandlers(container); on your onLoad function
(where container is the container you pass to GMap).

[*]: Ideas to implement smooth scroll in firefox will be much
appreciated. I can only think of accessing the imgs that are inside the
map, and manually change their width / height, but it looks like a big
PITA.


    Reply to author    Forward  
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.

Create a group - Google Groups - Google Home - Terms of Service - Privacy Policy
©2009 Google