Zooming to an Area
Tyipcally, you'll want to zoom your map to a specific area. This is done with the "ZoomTo()" and "SetRefCenter()" functions.
TheView.ZoomTo(1); TheView.SetRefCenter(10,10);
Scroll the code down a bit and you'll see how we call the "ZoomTo()" and "SetRefCenter()" function calls in the "View" object for the CanvasMap. Try changing these values a bit and see how it effects the map. If you lose the map, just referesh the page and start again.
|
|
Zooming to an area
To zoom to a specific area, you'll need to:
- Set the "ZoomToBoundsOnLoad" setting for all layers to keep CanvasMap from zooming to your data after it loads. We've changed this in the example above.
- Put the "ZoomTo()" and "SetRefCenter()" calls after the "StartMap()" function call so the HTML Canvas object is ready to position the map.
The zoom level value you'll specify for the "ZoomTo()" function is a scaling factor between the pixels on the screen and your reference or "map" units for your data. Since the data for the example is in geographic, a zoom level of 0 will give us one pixel per degree. A value of 1 will give us two pixels per degree, making the map "zoom in" to a higher resolution. Each time the zoom level increases, the map will zoom in by a factor of two so when we specifcy a value of 2, the map will zoom in to four pixels per degree. A value of 0.5 will make the map zoom out or give us 0.5 pixels per degree (or 2 degrees per pixel). Try different values of the zoom to see the effect. Remember that when we start displaying projected data, the zoom levels will change quite a bit because the map units will be in meters or feet.
| ZoomLevel | Pixels Per Map Unit (Degrees, Meters) | Map Units Per Pixel |
|---|---|---|
| 3 | 8 | 1/8 or 0.125 |
| 2 | 4 | 1/4 or 0.25 |
| 1 | 2 | 1/2 or 0.5 |
| 0 | 1 | 1 |
| -1 | 1/2 or 0.5 | 2 |
| -2 | 1/4 or 0.25 | 4 |
| -3 | 1/8 or 0.125 | 8 |
The values for the "SetRefCenter()" function are just the X (Longitude or Easting) and the Y (Latitude or Northing) for the center of the area to zoom to. Try zooming to different areas of the map and then zoom to one of the continents and write down the "ZoomTo()" and "SetRefCenter()" values for the next tutorial.
If you want the map to zoom to a layer when its data has finished loading, you can set the "ZoomToBoundsOnLoad" setting for the other layers to "false".