Hack 57. Do a Local Zoom with GxMagnifier

Context is key: GxMagnifier lets you choose the appropriate context.

The zoom feature on Google Maps is nice, except when you want to see a zoomed out view so that you have some context and yet still see detail. The normal cartographic answer to that conundrum would be that you are out of luck. Lucky for us, this is no ordinary cartographic environment!

6.8.1. The Hack

GxMagnifier is a free add-in control for Google Maps that creates a moveable, magnified window on top of your map. Figure 6-17 shows GxMagnifier in action.

Figure 6-17. GxMagnifier's "Hello World"

Does this look like an ordinary Google Map to you? Click the magnifier icon in the top-left corner of the map. Now, wherever you go on the map, you get a magnified view. This feature can be used with a mere two lines of code. Like a lot of JavaScript libraries, you first load it:

 

Then, add the control in your code:

map.addControl(new GxMagnifierControl());

Note that we're passing a custom control object to the standard map.addControl API call. This is all you need to do to get the basic magnifier control. This is only the most basic example of what GxMagnifier can do! The full documentation, with complete reference to the API can be found here: http://www.googlemappers.com/libraries/gxmagnifier/docs/default.htm.

6.8.2. Doing More with GxMagnifier

In our simple example we instantiated the GxMagnifierControl object within our map.addControl() call:

map.addControl(new GxMagnifierControl());

This is a dead simple approach, but it doesn't allow us to control the GxMagnifierControl later on. GxMagnifier can do more for us! The next examples will start with this basic framework, with the crucial lines highlighted. Of course, you'll need to use your own developer's key.

 

GxMagnifier Example Framework

That looks like a long example, but it is similar to the Google Maps "Hello World" example, with the addition of these lines:

var magControl = new GxMagnifierControl(); map.addControl(magControl); var mag = magControl.GxMagnifier;

 

This defines the variable magControl, which we can use to set attributes, and then adds the control to the map. The GxMagnifierControl class is just a wrapper, as most of the time we'll be accessing its related GxMagnifier object by reading the GxMagnifierControl.GxMagnifier property into the variable mag.

What can you do with magControl now that you have it? Many things!

6.8.2.1. Zooming.

GxMagnifier automatically adjusts its zoom level as your main map is zoomed. Here we make it magnify by 3 zoom levels, instead of the default 2.

mag.setMagnification(3);

 

You can also set a negative zoom level, which is useful in conjunction with docking, as described below.

6.8.2.2. Resizing.

By default, the magnified viewport is one third the size of your main map. You can change its dimensions.

mag.setSize(new GSize(150, 80));

 

6.8.2.3. Capturing the cick.

You may not want your magnifier to zoom in on the map when the user clicks it. Here we override the click event to tell us where we clicked and then close the magnifier window. You can use GEvent.bind( ) for more sophisticated handling.

mag.disableDefaultClickHandler( ); GEvent.addListener(mag, "click", function(point){ alert("You clicked " + point.toString( )); this.hide( ); // note, "this" is the GxMagnifier instance });

 

6.8.2.4. Moving the button.

Here we place the magnifying glass button 10 pixels from the top right corner. Note that GxMagnifierControl.setDefaultPosition( ) has to be called before adding the control to the map.

var magControl = new GxMagnifierControl( ); magControl.setDefaultPosition(new GxControlPositionHack(1, 10, 10)); map.addControl(magControl);

 

6.8.2.5. Automatically panning.

The magnifier can scroll the map when it gets moved near an edge. Note the panning region extends inward from the edges of the main map by half the size of the magnifier window.

mag.enableAutoPan();

 

6.8.2.6. Docking.

You can free the magnifier from the map's container and put it anywhere on the page. We do this by creating a GxMagnifier instance directly and telling it to use our own HTML div element. Here's a fullscreen map, with the magnifier docked to the bottom right corner. The example deviates a bit from our typical ones.

Inside the head element, we define some custom CSS styles for the page, the map, and our magnifier display:

 

In the body, we add HTML div elements for the map and the magnifier:

 

 

And, finally, here's the JavaScript:

// Create the magnifier var div = document.getElementById("magnifier"); div.style.zIndex = 10; // make it stay on top var mag = new GxMagnifier(map, null, div); mag.map.setMapType(G_SATELLITE_TYPE) // Monitor the window resize event and let the map know when it occurs // This isn't required for GxMagnifier, but it is required to accomplish // a correct fullscreen Google Map. if (window.attachEvent) { window.attachEvent("onresize", function( ) {this.map.onResize( )} ); } else { window.addEventListener("resize", function( ) {this.map.onResize( )} , false); }

 

Note the line:

mag.map.setMapType(G_SATELLITE_TYPE)

 

The docked map in the corner shows the satellite imagery that corresponds to the point of the mouse, as shown in Figure 6-18. You can find out more about this feature at http://www.googlemappers.com/libraries/gxmagnifier/docs/examples/docking.htm.

Figure 6-18. Magnifier docked with a satellite view

 

6.8.2.7. Multiple magnifiers and negative zoom.

You can include multiple GxMagnifiers on your map. Figure 6-19 expands on the previous example on docking, and uses a negative magnification factor to create a docked "birds eye view" of where you are on the map. See it in action at http://www.googlemappers.com/libraries/gxmagnifier/docs/examples/multiple.htm.

In case you're curious, I got the idea of trying to make a magnifier control for Google Maps after watching a concept video that shows a similar feature in mapping technology demonstrated under Windows Longhorn (a.k.a. Vista).

Figure 6-19. An orientation map and a magnified map

 

6.8.3. See Also

Richard Kagerer

Related

Категории