Interactive maps, webmapping, USA map, map of US, map of England, map of France,statistics, atlas : Geoclip




			Intuitive and smart cartography

		Our offer
		Products
		Gallery
		Achievements
		Typical project
		Services
		Getting started
		Paste your data
		Save your project
		Features
		What is Géoclip?
		A smooth interface
		A wealth of information
		Multiple themes
		Technical information
		From GIS to the Web
		Zooming, selecting...
		Database access
		Display modes
		Flash, SVG and so on
		Resources
		Sites and forums
		Referencing sites
		Who are we?
		Our team
		Partners
		Customers

Technical information > Zooming and selecting
How to program the basic navigation features

When a map is displayed, most users feel the urge to take a closer look at their grandparents' town, their birthplace or their homeland. Wouldn't you? That alone makes the zoom feature essential. This feature allows users to get closer to the territory that is displayed or further away from it, in order to get a more detailed or more global view.
Once they have gotten a closer look, users will surely be tempted to click on their town, region or country to get more information. This is what the selection feature is for: identifying part of the displayed territory, in order to access other data. This part can consist of one or more geographic units selected using the mouse or geographic links, such as all cities within 15km of a given point.

Zoom feature
The usual (and simple) technique used in the world of GISs is to draw a zoom box on the map using the mouse. How is this implemented in Géoclip?

Let us first look at a diagram:

lc and hc are the width and height of the map frame, lz and hz are the width and height of the zoom area. The zoom factor is determined using the minimum value between hc/hz and lc/lz. This enlargement factor will be applied to the entire map.

But once the map has been scaled, there is no reason why the zoom centre should be the same as the centre of the map window. The map must therefore be moved (translated) so that the centre of the zoom box is at the centre of the map window. The problem is there are two different coordinate systems: the screen's, in which the map window and its centre always have the same coordinates, and the map's, which is subjected to scalings and translations.

We must therefore make two points coincide: the centre of the map window, whose screen coordinates are (CX,CY), and the zoom centre, whose coordinates in the map system are (zcx,zcy). The correction that must be made is determined using the distance between the two points in one coordinate system or the other, the main thing being that it be measured in the same system for both points. For example, let work with the screen system. We must therefore calculate the coordinates of the zoom centre in this system, i.e. change (zcx,zcy) to (ZCX,ZCY) and perform the translation (CX-ZCX,CY-ZCY). For more informatoin on calculating new coordinates, see Converting coordinates. But since Flash includes features for changing coordinate systems, we might as well use them. We must use the LocalToGlobal() function, which allows us to switch from the coordinate system of a particular object (here, the object "map" that contains the map) to the screen system:

centre_zoom = [ { x : zcx , y : zcy } ];
map.localToGlobal(centre_zoom);
ZCX=centre_zoom.x; ZCY=centre_zoom.y;

the corrective translation (CX-ZCX,CY-ZCY) must then be performed in the coordinate system of the screen.

Selection feature
The simplest geographic selections allow users to select geographic units by drawing a selection circle or box using the mouse. How does this work in Géoclip? It is based on the following process: detecting whether or not a point is inside a particular polygon. One method consists in drawing a radius from a given point in any direction and to count the number of intersections with the target polygon. If this number is odd, the point is inside the polygon, if it is even, it is outside.

Flash includes an automatic testing function. Let us consider the polygon pg and a point with its coordinates x and y:
pg.hitTest(x,y,1) is true (1) if the point is inside, false (0) if the point is outside.
There is a variant of this function that can compare any two shapes:
test=shape1.hitTest(shape2);

Here is an example (in Flash format) of how this function can be implemented:

When applied to geographic selections, this function allows users to identify, for example, the base map objects whose geometrical or administrative centre is inside the selection area.

Optimisation tip: the hitTest function, when written pg.hitTest(x,y,1), includes a third parameter that can be set to 0. In this case, it is the presence of the point (x,y) inside the box which is verified, as in the example below (selection box shown dotted):

This test is not precise but is much quicker than the first one. It can be used as a preliminary filter for objects that may be selected, before applying the second test.