<dvt:map>

dvt:map map map

UIComponent class: oracle.adf.view.faces.bi.component.geoMap.UIGeoMap
Component type: oracle.dss.adf.geoMap.GeoMap

The Map component provides the ablity to display different maps and enables high performance panning, zooming and display of different layers (aka Themes) of data. Unlike other ADF Faces component, the Map component itself doesn't take a data model via the 'value' attribute. Instead, it only needs a configuration that contains a URL to a Map Viewerer service and optionally a Geo-Coder service if address data will have to be converted to longitutde and latitude.

Each layer/theme on the Map has its own data model which can be set on the theme via the 'value' attribute. The Map provides a very flexible way to show data from different sources on top of the same base map so it's easy to view different data sets on a single Map component.

The base maps displayed on the Map component include geographic and political features such as rivers and roads. If these features are not required on your maps, then using the <dvt:thematicMap> tag might be better suited for your application. Note, however, that the <dvt:mapToolbar> is only available for use with the <dvt:map> tag.

You can get started quickly by using the Hosted service provided by Oracle or if you have an existing Map Viewer instance with your own base maps you can use that as well.

Quick Links: Hosted Services | Themes | Toolbar | Selections | OverviewMap | Legend | AutoZoom |

Hosted Services

To get started, you can use Oracle's hosted eLocation services when you create a configuration for the Map component if you do not have an existing Map Viewer service available. The URLs for theses services are the following:

• Map Viewer: http://elocation.oracle.com/mapviewer
• Geocoder: http://elocation.oracle.com/geocoder/gcserver

You should use ELOCATION_MERCATOR.WORLD_MAP for the baseMapName.

You can also choose to use your own Map Viewer & Geocoder instances if they are available. These instances must use Map Viewer version 11 or higher. You should use the name of the map tile's layer on your mapviewer as the baseMapName, which should be in the form of data-source-name.map-tile-layer-name.

Model

To show your data on the map, you need to add themesto your map. Your data should be binded to the value attribute of the themes. Your data should be an instance of oracle.adf.view.faces.bi.model.GeoMapDataModel.

Themes

The map supports display of multiple layers of information called themes, which could be one of the following types:

Theme Types	Description and Example	Sample Image
Color Theme	The map will color different regions on the map based on the data associated with the region. For example, you can build a US map that color states based on the sales number of each state using the Color Theme
Bar Graph Theme	The map will draw a bar graph for each of the region in the underlying data. For example, you can build a map that shows a bar chart that shows the sales figure for each state.
Pie Graph Theme	The map will draw a pie graph for each of the region in the underlying data.
Point Theme	The map will draw an image, or a HTML tag for each point in the underlying data.
Predefined Theme	The map will draw a theme that is defined using the Map Admininstrator tool on top of the map.

Map Toolbar

To use the map toolbar, you need to add the <dvt:mapToolbar> to your page, and set the mapId attribute to the id of the map. The mapToolbar tag is not a child tag of the map.

The toolbar lets users pan, zoom, marquee zoom on the map, turn themes off and on, make selections on the map, calculate distance and area, display legend, or show the coordinate of the mouse cursor location of the map.

Selections

The toolbar lets users make rectangle, circle, polygon or point selections on the map. You can control the color of the selected region through the selectionFillColor, selectionStrokeColor and selectionFillOpacity. You can add your listener code through the selectionListener attribute to work on the selected data.

Overview Map

By default, the map has an overview map. You can set the width, height and visibility of the overview map by the <dvt:mapOverview> tag. The <dvt:mapOverview> tag is a child tag of the map.

Legend

The map has a legend which can be displayed by default or launched via the toolbar. You can customize the appearance of the legend by the <dvt:mapLegend> tag.

AutoZoom

The map has an autozoom feature that let the map to focus on the data of a theme. To use this feature, you need to set the autoZoomThemeId to the theme that you want the map to focus on. The map supports two autozoom strategies:

• <MAXZOOM> - The map will zoom down to the maximum level where all objects in autoZoomThemeId is visible. This is the default value.
• <CENTERATZOOMLEVEL> - The map will center on the theme in autoZoomThemeId, and will use the value in the mapZoom attribute as the starting zoom level.

Sample

   <dvt:mapToolbar mapId="map1"/>
   <dvt:map startingY="0.0" startingX="0.0" mapZoom="0"
            mapServerConfigId="mapConfig1"
            baseMapName="ELOCATION_MERCATOR.WORLD_MAP"
            inlineStyle="width:100%; height:600px;" id="map1"
            autoZoomThemeId="mapColorTheme1">
     
     <dvt:mapOverview/>
     
     <dvt:mapColorTheme id="mapColorTheme1" themeName="MAP_STATES_NAME" 
                        value="#{geoMapBacking.colorModel}"
                        minColor="#33FF33" maxColor="#FF3333" 
                        bucketCount="5"/>
     
     <dvt:mapPieGraphTheme id="mapPieTheme1" themeName="MAP_STATES_NAME"
                           pieRadius="10"
                           locationColumn="POLYGON_NAME"
                           value="#{geoMapBacking.barPieModel}"/>
     
     <dvt:mapPointTheme id="pointTheme" value="#{geoMapBacking.pointModel}"/>
 
   </dvt:map>
       

Setting Width and Height

The inlineStyle attribute can be used to specify a map's width and height. For example, inlineStyle="width:600px;height:400px" or inlineStyle="width:100%;height:400px".

Relationship with other tags

The <dvt:map> tag can have the following children:

• <dvt:mapLegend>
• <dvt:mapOverview>
• <dvt:mapColorTheme>
• <dvt:mapPointTheme>
• <dvt:mapBarGraphTheme>
• <dvt:mapPieGraphTheme>

Geometry Management

• This component can be stretched by a parent layout component that stretches its children, e.g. panelStretchLayout, panelSplitter
• This component does stretch to fill up the browser's viewport when it is the "sole visual root component" in the component tree.
• When NOT stretched, this component will be displayed in its default dimensions which are provided by the skin. This can be modified by applying a dimension using the inlineStyle or styleClass attributes.
• This component does not stretch its children.

Screen Shot(s)

Events

Supported Facets

Attributes

public void processSelection(MapSelectionEvent mapSelectionEvent) { 
    Iterator iterator = mapSelectionEvent.getIterator(); 
    while (iterator.hasNext()) { 
        DataContent dt = (DataContent)iterator.next(); 
        String selectedLocation = dt.getLocationName(); 
        System.out.println (selectedLocation); 
    } 
}