Geographic Map

dvtm:geographicMap

A Geographic Map component displays typical geographic view of a map. It uses either Oracle map or Google map data layers. Variations include Address and Geo Code. Google Maps API offers hybrid, roadmap, satellite, and terrain types.

This component is commonly used on tablets and phones.

Appearance

Appearance characteristics for this component.

Type: Maps can be displayed as hybrid, street, satellite and terrain.

Behavior

Common behaviors for this component.

Zoom Level: Maps can have multiple zoom levels available and will have a center point.
Zoom In: Zooming in on a map can be done by the user pressing the map and spreading their fingers apart.
Zoom Out: Zooming out on a map can be done by the user pressing the map and pinch their fingers to together.
Pan: One finger drag allows the user to pan around the map.
Marker: A drop animated for map markers is optional when initially displaying a Google map.

Usage

Usage guidelines for this component.

It is recommended to show a title above each map on the page that clearly describes its content.
Product teams decide the themes that appear on the map.
Performance tends to decline as more themes are displayed at the same time. It is recommended to display no more than two themes at one time.
The recommended size of the map is to be close to full page on the Phone and a majority of the page on the tablet. However, it is recommended that an application dedicate as much space as possible to the Map component so that users can see and work with the map easily.
It is not recommended to display two or more maps on a page. If users need to compare more than two sets of data, use a Chart instead.

Sample

DVTM sample code for this component.

 <dvtm:geographicMap id="g1"
    mapType="ROADMAP"
    centerX="-98.57"
    centerY="39.82"
    zoomLevel="2"
    initialZooming="auto">

    <dvtm:pointDataLayer id="pl1"
    var="row"
    value="#{bindings.locationData.collectionModel}"
    dataSelection="multiple"
    selectionListener="#{myBean.doSomeGood}">

    <dvtm:pointLocation id="pl1"
    type="address"
    address="#{row.address}">
    <dvtm:marker shortDesc="#{row.shortDesc}">

    </dvtm:pointLocation>

    </dvtm:pointDataLayer>

    </dvtm:geographicMap>

Used On: Phone, Tablet
Also Called: Map
Related Components: Thematic Map, Tree Map
Resources: None

Fig 1. iOS and Android - Geographic Map