map navigation
Widget gallery Zooming
Dropdown menu
On a scale of one to ten, how would you rate this widget?
To minimise screen real estate, Multimap provides a dropdown menu from which users select the zoom level of the map. Releasing the mouse button, the map page refreshes and the map is displayed at the selected zoom level. Note that the map centre may have moved upon refresh due to Multimap's proprietary map tiling approach.
The dropdown menu is created using the select element, each choice represented by an option element. The refresh of the map page occurs instantly upon releasing the mouse button through JavaScript executed at the onchange event, instead of a submit button. The appearance of the widget is controlled by CSS.
The scale notation used on the Multimap website reads for example “1:50000” (note the omission of the thousand separator). This notation is typically found on paper maps. Users may find this notation difficult to grasp and to apply it to maps online. The smallest map scale is at the top of the dropdown menu, the largest map scale at the bottom. This order may assist users to understand map scale. Small scale maps show the geography at a low level of detail: the viewpoint is far from the Earth surface (top). Large scale maps show the geography at a high level of detail: the viewpoint is close to the Earth surface (bottom). Fortunately, there's also a horizontal steps zooming widget users can click on to change the map scale.
From screen pixels to real-world distance.
Users select the zoom level from the dropdown menu and then hit the ‘Go’ button to change the map scale. To easily grasp the scale of the map, the dropdown menu indicates the map width in real-world distances so users immediately see the size of the geographic area displayed in the map view.
The smallest map scale, the largest real-world distance, is at the top of the dropdown menu, the largest map scale, the smallest real-world distance, at the bottom. This order assists users to understand the map scale. Small scale maps show the geography at a low level of detail: the viewpoint is far from the Earth surface (top). Large scale maps show the geography at a high level of detail: the viewpoint is close to the Earth surface (bottom).
The dropdown menu is implemented using standard form elements such as the select and option element together with JavaScript. Instead of a submit button, the ‘Go’ button (a hyperlinked image) triggers a JavaScript function to zoom in on the map.