I am developing a solution to map the locations of a person in the field when submitting data via a mobile application. All data submitted from the mobile application is send to a remote database from where I display all the data in tabular veiw using primefaces datatable object.
On row selection, a record of interest is selected, with accompanying triangulation coordianates submitted togetther with that particular record.
My challenge lies in changing the the focus of the map once I move from one record to the other, it is forcing me to refresh the entire xhtml page for the new coordinates selected to be located on the map and also with a marker attached.
Here is the code for the problem I got:
<ui:define name="main_content">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<h:form id="hsc">
<p:ajax event="rowSelect" update=":ewreg:display" oncomplete="helpDialog.show()" />
<p:dataTable id="tbl" value="#{merchadiseBeanList.merchadiseData}" var="merchadiseitem" scrollable="true" scrollHeight="400" resizableColumns="false" paginator="true" rows="20"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="10,50,100" selection="#{merchadiseBeanList.selectedmerchadise}" selectionMode="single">
<f:facet name="header">
Merchandise Report.
</f:facet>
<p:column sortBy="#{merchadiseitem.repMobile}" filterBy="#{merchadiseitem.repMobile}" headerText="Rep Mobile" style="width: 110px" >
<f:facet name="header">
<h:outputText value="Rep Mobile" />
</f:facet>
<h:outputText value="#{merchadiseitem.repMobile}" />
</p:column>
<p:column sortBy="#{merchadiseitem.dealerNo}" filterBy="#{merchadiseitem.dealerNo}" headerText="Dealer No" style="width: 100px" >
<f:facet name="header">
<h:outputText value="Dealer No" />
</f:facet>
<h:outputText value="#{merchadiseitem.dealerNo}" />
</p:column>
<p:column sortBy="#{merchadiseitem.weekNo}" filterBy="#{merchadiseitem.weekNo}" headerText="Week No" style="width: 110px" >
<f:facet name="header">
<h:outputText value="Week No" />
</f:facet>
<h:outputText value="#{merchadiseitem.weekNo}" />
</p:column>
<p:column sortBy="#{merchadiseitem.brandId}" filterBy="#{merchadiseitem.brandId}" headerText="Brand Id" style="width: 110px" >
<f:facet name="header">
<h:outputText value="Brand Id" />
</f:facet>
<h:outputText value="#{merchadiseitem.brandId}" />
</p:column>
<p:column sortBy="#{merchadiseitem.percentage}" filterBy="#{merchadiseitem.percentage}" headerText="Percentage" style="width: 110px" >
<f:facet name="header">
<h:outputText value="Percentage" />
</f:facet>
<h:outputText value="#{merchadiseitem.percentage}" />
</p:column>
<p:column sortBy="#{merchadiseitem.total}" filterBy="#{merchadiseitem.total}" headerText="Total" style="width: 110px" >
<f:facet name="header">
<h:outputText value="Total" />
</f:facet>
<h:outputText value="#{merchadiseitem.total}" />
</p:column>
<p:column sortBy="#{merchadiseitem.merchandisingDone}" filterBy="#{merchadiseitem.merchandisingDone}" headerText="MerchandisingDone" style="width: 110px" >
<f:facet name="header">
<h:outputText value="MerchandisingDone" />
</f:facet>
<h:outputText value="#{merchadiseitem.merchandisingDone}" />
</p:column>
<p:column sortBy="#{merchadiseitem.comments}" filterBy="#{merchadiseitem.comments}" headerText="Comments" style="width: 110px" >
<f:facet name="header">
<h:outputText value="Comments" />
</f:facet>
<h:outputText value="#{merchadiseitem.comments}" />
</p:column>
<p:column sortBy="#{merchadiseitem.regDate}" filterBy="#{merchadiseitem.regDate}" headerText="Reg Date" style="width: 110px" >
<f:facet name="header">
<h:outputText value="Reg Date" />
</f:facet>
<h:outputText value="#{merchadiseitem.regDate}" />
</p:column>
<f:facet name="footer">
<h:commandLink title="Export entire table Data to an Excel document." style="float: left">
<h:graphicImage library="images" name="excelAll.png" />
<p:spacer width="10" />
<p:dataExporter type="xls" target="tbl" fileName="Merchandising_Report_Full"
postProcessor="#{exporter.postProcessXLS}"/>
</h:commandLink>
<h:commandLink title="Export Filtered Page Data: Filter and Sort the
data and ensure that all the data is in one page by changing the number of records per page" style="float: left">
<h:graphicImage library="images" name="excel2.png" />
<p:dataExporter type="xls" target="tbl" fileName="Merchandising_Report_Filtered"
pageOnly="true" postProcessor="#{exporter.postProcessXLS}"/>
</h:commandLink>
<p:commandButton value="View" image="ui-icon ui-icon-document-b"
update="hsc:display" oncomplete="hscDialog.show()" />
<p:commandButton type="button" image="ui-icon ui-icon-pin-s" update="hsc:dlg"
value="Show Map" onclick="dlg.show()" oncomplete="dlg.show()"/>
</f:facet>
</p:dataTable>
<p:dialog widgetVar="dlg" width="625" height="400" modal="true"
onShow="mymap.checkResize()" dynamic="true">
<p:gmap center="#{merchadiseBeanList.selectedmerchadise.latitude},
#{merchadiseBeanList.selectedmerchadise.longitude}"
zoom="13" type="ROADMAP" draggable="true"
style="width:600px;height:400px" widgetVar="mymap"
model="#{merchadiseBeanList.simpleModel}" />
</p:dialog>
<p:dialog widgetVar="dllg" width="625" height="400" modal="true"
onShow="imap.checkResize()">
<p:gmap center="-1.29079655, 36.80600445" zoom="15" type="ROADMAP" draggable="true"
style="width:600px;height:400px" widgetVar="imap" />
</p:dialog>
<p:dialog header="Sales Record Detail" widgetVar="hscDialog" resizable="true"
width="240" showEffect="clip" hideEffect="fold" modal="true" >
<h:panelGrid id="display" columns="2" cellpadding="3" cellspacing="3" >
<f:facet name="header">
<h:graphicImage library="images" name="logo.png" />
</f:facet>
<h:outputText value="Id" />
<h:outputText value="#{merchadiseBeanList.selectedmerchadise.ID}" />
<h:outputText value="Rep Mobile Number" />
<h:outputText value="#{merchadiseBeanList.selectedmerchadise.repMobile}" />
<h:outputText value="Week Number" />
<h:outputText value="#{merchadiseBeanList.selectedmerchadise.weekNo}" />
<h:outputText value="Dealer No" />
<h:outputText value="#{merchadiseBeanList.selectedmerchadise.dealerNo}" />
<h:outputText value="Brand Id" />
<h:outputText value="#{merchadiseBeanList.selectedmerchadise.brandId}" />
<h:outputText value="Percentage" />
<h:outputText value="#{merchadiseBeanList.selectedmerchadise.percentage}" />
<h:outputText value="MerchandisingDone" />
<h:outputText value="#{merchadiseBeanList.selectedmerchadise.merchandisingDone}" />
<h:outputText value="Comments" />
<h:outputText value="#{merchadiseBeanList.selectedmerchadise.comments}" />
<h:outputText value="Reg Date" />
<h:outputText value="#{merchadiseBeanList.selectedmerchadise.regDate}" />
<h:outputText value="MerchandisingDone" />
<h:outputText value="#{merchadiseBeanList.selectedmerchadise.merchandisingDone}" />
<h:outputText value="Latitude" />
<h:outputText value="#{merchadiseBeanList.selectedmerchadise.latitude}" />
<h:outputText value="Longititude" />
<h:outputText value="#{merchadiseBeanList.selectedmerchadise.longitude}" />
</h:panelGrid>
<p:commandButton type="button" image="ui-icon ui-icon-pin-s" update="hsc:dlg"
value="Show Map" onclick="dlg.show()" oncomplete="dlg.show()"/>
</p:dialog>
</h:form>
</ui:define>
here is the code which does the plotting of a marker to the respective latitude and longitude:
private MapModel simpleModel = new DefaultMapModel();
LatLng coord1;
double lati;
double longi;
public LatLng mapparams() {
try {
System.out.println("i am in smapparams method1");
try {
System.out.println("am checking fisrt");
lati = this.selectedmerchadise.Latitude;
longi = this.selectedmerchadise.Longitude;
System.out.println("am checking fisrt3");
} catch (NullPointerException np) {
System.out.println("NP is catched " + np);
} catch (Exception ex) {
System.out.println("this is bean ex" + ex);
System.out.println("coords at exception" + lati + " " + longi);
}
if (longi != 0 && lati != 0) {
System.out.println("i am in smapparams method3");
coord1 = new LatLng(lati, longi);
System.out.println("coords3: " + lati + " " + longi);
} else {
System.out.println("coords r null");
coord1 = new LatLng(0, 0);
}
} catch (Exception ex) {
System.out.println("this is the exceptions" + ex);
}
System.out.println("final cordianates" + coord1);
return coord1;
}
public MapModel getSimpleModel() {
this.mapparams();
System.out.println("i am in simple marker method");
simpleModel.addOverlay(new Marker(coord1, "Sales Rep Here"));
return simpleModel;
}