ADF Faces dvt:thematicMap to mark location using latitude and longitude

Sharing is Caring

Hello all,
this post is about simple use of dvt:thematicMap component, this map is used for displaying some information of a particular geographic location such as population, any trends or patterns
The map is called thematic because it doesn’t include geographic details of location as rivers, ocean etc.
If you want to use geographic features then use <dvt:map>

The thematic map includes different basemap as world map and all continents map
for details see Oracle docs – <dvt:thematicmap>
In this post, I am just spotting locations using their latitude and longitude coordinates

    • So first step is to create a fusion web application and drop a thematic map (world map) on page

 

 

 

    • then i have created a bean class to populate data in thematic map , this bean class contains properties (varaibles) for thematic map like Country Name,latitude and longitude

public class LocationDetail {
    private String location; // Name of Location
    private String countryNm; // Name of Country
    private String textDisp; // Additional Information to display
    private float lattitude; // Latitude of location
    private float longitude; // Longitude of Location

    public LocationDetail() {
        super();
    }

    public void setLocation(String location) {
        this.location = location;
    }

    public String getLocation() {
        return location;
    }

    public void setCountryNm(String countryNm) {
        this.countryNm = countryNm;
    }

    public String getCountryNm() {
        return countryNm;
    }

    public void setTextDisp(String textDisp) {
        this.textDisp = textDisp;
    }

    public String getTextDisp() {
        return textDisp;
    }

    public void setLattitude(float lattitude) {
        this.lattitude = lattitude;
    }

    public float getLattitude() {
        return lattitude;
    }

    public void setLongitude(float longitude) {
        this.longitude = longitude;
    }

    public float getLongitude() {
        return longitude;
    }
}

 

    • Created a managed bean and a List data structure to add location detail and added this List reference to thematic map component

<dvt:thematicMap basemap="world" id="tm1" summary="World Map" styleClass="AFStretchWidth"
                                     partialTriggers="::b1" inlineStyle="background-color:#e9ffdc;">
                        <dvt:areaLayer layer="continents" id="al2">
                            <dvt:pointDataLayer id="dl1" value="#{viewScope.MapBean.mapDetail}" var="row">
                                <dvt:pointLocation id="pl1" type="pointXY" pointY="#{row.lattitude}"
                                                   pointX="#{row.longitude}">
                                    <dvt:marker id="m1" shortDesc="#{row.textDisp}"
                                                fillColor="#ff0000" borderWidth="1.0" scaleX="2.0" scaleY="2.0"
                                                labelDisplay="on" labelPosition="bottom" shape="triangleDown"
                                                value="#{row.location}" labelStyle="color:maroon;font-size:10px;"/>
                                </dvt:pointLocation>
                            </dvt:pointDataLayer>
                        </dvt:areaLayer>
                    </dvt:thematicMap>

 

    • Then I have added a form on the page to add a new location by the user, this form has 5 fields (Country Name, Location, Latitude, Longitude and Description) and a button to add this information to list

<af:panelBox text="Add New Location" id="pb1" showDisclosure="false">
                        <f:facet name="toolbar"/>
                        <af:panelFormLayout id="pfl1" rows="1" maxColumns="2">
                            <f:facet name="footer">
                                <af:button text="Add Location" id="b1"
                                           actionListener="#{viewScope.MapBean.addLocationButton}"/>
                            </f:facet>
                            <af:inputText label="Country" id="it3"
                                          contentStyle="width:100px;font-weight:bold;color:navy;"
                                          binding="#{viewScope.MapBean.cntryNmBind}"/>
                            <af:inputText label="Location" id="it4"
                                          contentStyle="width:100px;font-weight:bold;color:navy;"
                                          binding="#{viewScope.MapBean.locationBind}"/>
                            <af:inputText label="Latitude" id="it1" contentStyle="width:100px;color:red;"
                                          binding="#{viewScope.MapBean.latitudeBind}"/>
                            <af:inputText label="Longitude" id="it2" contentStyle="width:100px;color:red;"
                                          binding="#{viewScope.MapBean.longitudeBind}"/>
                            <af:inputText label="Description" id="it5" contentStyle='width:200px;color:darkgreen;'
                                          binding="#{viewScope.MapBean.descriptionBind}"/>
                        </af:panelFormLayout>
                    </af:panelBox>

 

 

    • Now see the managed bean code to add this information to list and to populate default locations

public class MapBean {
    //List to contain Location Detail
    private List<LocationDetail> mapDetail = new ArrayList<LocationDetail>();
    // Bindings of page component to access value
    private RichInputText cntryNmBind;
    private RichInputText latitudeBind;
    private RichInputText longitudeBind;
    private RichInputText locationBind;
    private RichInputText descriptionBind;

    public MapBean() {
  // Add Default location to map
LocationDetail location = new LocationDetail();
location.setCountryNm("India");
location.setLocation("Mumbai");
location.setTextDisp("Economic Capital of India");
location.setLongitude((float) 72.8258);
location.setLattitude((float) 18.9750);
mapDetail.add(location);

location = new LocationDetail();
location.setCountryNm("India");
location.setLocation("Kanpur");
location.setTextDisp("Industrial City in North India");

location.setLongitude((float) 80.20);
location.setLattitude((float) 26.28);
mapDetail.add(location);

System.out.println("List is-" + mapDetail);
    }

    public void setMapDetail(List mapDetail) {
        this.mapDetail = mapDetail;
    }

    public List getMapDetail() {
        return mapDetail;
    }

    /**Method to add new Location
 * @param actionEvent
 */
    public void addLocationButton(ActionEvent actionEvent) {
        if (cntryNmBind.getValue() != null && latitudeBind.getValue() != null && longitudeBind.getValue() != null &&
locationBind.getValue() != null && descriptionBind.getValue() != null) {

LocationDetail location = new LocationDetail();
location = new LocationDetail();
location.setCountryNm(cntryNmBind.getValue().toString());
location.setLocation(locationBind.getValue().toString());
location.setTextDisp(descriptionBind.getValue().toString());

location.setLongitude(Float.parseFloat((String) longitudeBind.getValue()));
location.setLattitude(Float.parseFloat((String) latitudeBind.getValue()));
mapDetail.add(location);
        }
    }

    public void setCntryNmBind(RichInputText cntryNmBind) {
        this.cntryNmBind = cntryNmBind;
    }

    public RichInputText getCntryNmBind() {
        return cntryNmBind;
    }

    public void setLatitudeBind(RichInputText latitudeBind) {
        this.latitudeBind = latitudeBind;
    }

    public RichInputText getLatitudeBind() {
        return latitudeBind;
    }

    public void setLongitudeBind(RichInputText longitudeBind) {
        this.longitudeBind = longitudeBind;
    }

    public RichInputText getLongitudeBind() {
        return longitudeBind;
    }

    public void setLocationBind(RichInputText locationBind) {
        this.locationBind = locationBind;
    }

    public RichInputText getLocationBind() {
        return locationBind;
    }

    public void setDescriptionBind(RichInputText descriptionBind) {
        this.descriptionBind = descriptionBind;
    }

    public RichInputText getDescriptionBind() {
        return descriptionBind;
    }

 

    • You can see in thematicMap map source – how bean variables are used to point latitude, longitude etc
    • Run this application, you will see default location is marked at the first time

 

    • Now add any other location using ‘Add New Location’ form

 

 

  • See this video how locations are added to thematic map using their latitude and longitude

and finally, after adding all location, the map looks like this

dvt:thematicMap

Sample ADF Application
Cheers 🙂 Happy Learning

Related Posts

I’m an Oracle ACE, Blogger, Reviewer,
Technical Lead working on Oracle ADF

0 thoughts on “ADF Faces dvt:thematicMap to mark location using latitude and longitude”

  1. Greate Post
    but why I get :
    pointY="#{row.lattitude}"
    pointX="#{row.longitude}"
    shortDesc="#{row.textDisp}"
    value="#{row.location}"
    reference "row. "not found
    in my page
    and your application also so any new location couldn't be added

  2. Thanks for this post but my requirement is slightly different when user selects any region then all location should show in diagram as per selected region.
    Ex suppose user select Mumbai as a region then all location like Andheri, Bandra, Kurala, Boriwali,…et
    All show in a diagram.. Please help me how can achieve this.

    — Anu —

  3. Ashish, I get value with this syntax [oracle.jbo.Key[300110001 ]]
    i want to get the number only, how?
    note: this value of i object.

Leave a Reply

Your email address will not be published. Required fields are marked *