Finding polygon area with primefaces

Question

I am trying to find an area of a polygon using prime faces. I am able to put down markers and create a polygon and make it display. I was hoping to subject the polygon to a JavaScript geometry API function call, but I can't access the polygon that has been drawn since it was created by the backing bean. My current plan is to have two polygon objects that represent the same polygon, one in pure JavaScript and one in Google Maps/Prime Faces, but I'm not sure if it will work. Here is what i have so far:

 <p:gmap id="gmap" center="52.561201, -9.256510" zoom="13" type="HYBRID" style="width:100%;height:400px"
                        model="#{map.emptyModel}" onPointClick="handlePointClick(event);" widgetVar="map" />



                <p:dialog widgetVar="dlg" showEffect="fade">
                    <h:form prependId="false">
                        <h:panelGrid columns="2">
                            <h:outputLabel for="title" value="Are you Sure?" />


                            <f:facet name="footer">
                                <p:commandButton value="Yes" actionListener="#{map.addMarker}" update=":messages" oncomplete="markerAddComplete()" />
                                <p:commandButton value="No" onclick="return cancel()" />
                            </f:facet>
                        </h:panelGrid>

                        <h:inputHidden id="lat" value="#{map.lat}" />
                        <h:inputHidden id="lng" value="#{map.lng}" />
                        <h:inputHidden id="area" value="#{map.area}" />
                    </h:form>
                </p:dialog>

                <script type="text/javascript">
                    var currentMarker = null;
                    var markers = [];
                    var path = new google.maps.MVCArray;
                    var poly;
                    function handlePointClick(event) {
                        //if statement handles bean markers and coordinates
                        if (currentMarker === null) {
                            document.getElementById('lat').value = event.latLng.lat();
                            document.getElementById('lng').value = event.latLng.lng();

                            currentMarker = new google.maps.Marker({
                                position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
                            });



                            PF('map').addOverlay(currentMarker);

                            PF('dlg').show();


                        }
                        // javascript to mimic polygon copy
                        path.insertAt(path.length, event.latLng);
                        poly =  new google.maps.Polygon();
                        poly.setPaths(new google.maps.MVCArray([path]));
                        document.getElementById('area').value =  document.getElementById('area').value = google.maps.geometry.spherical.computeArea(measure.polygon.getPath());
                        console.log(path);
                    }

Everything in the if statement relates to xhtml code located above the script, everything else below that is my attempt to get the area, but its not working. If any one has any ideas on how to achieve an area of polygon in prime faces, please share, thank you.

Answer 1

If you are using JavaScript in your application anyway, it would probably be easier to just have a Google Maps event listener that builds a polygon whenever the user clicks a part of the map, or when you use a menu of some sort to manually enter a point (as I presume you are doing already):

var polygonCoords = [];

//can be called using forms
function addMarker(lat, lng){ //split apart from google.maps.latLng to make compatible with form
  polygonCoords.push(new google.maps.LatLng(lat, lng));
}

google.maps.event.addListener(map, 'click', function(event){
  addPoint(event.latLng.lat(), event.latLng.lng());
}

function getArea(pts){
  return google.maps.geometry.spherical.computeArea(pts);
}

//to get area do:
getArea(polygonCoords);
//this will return a float of the area

This solution will require that the geometry library be included.

I did not include code for displaying (or actually making!) the polygon, since I am not sure how you want to do it. Also, making a polygon is not necessary to calculate the area of it.

As I understand it, PrimeFaces is used similarly to jQuery. That being said, I do not think it is important to retrieve coordinates using PrimeFaces, especially when Google Maps supports it better already.