How can I draw a Polygon on the Gmap without refreshing the whole Gmap component?

[warjaguur]

I'm developing an app with JSF and Primefaces.
I have a Primefaces Gmap component on a page. I want to allow the user to draw a map polygon on screen, simply clicking each vertex, and see how the polygon constructs on the fly with each click. And also receive each point data in the Backing Bean, so I can store/persist the data in the database.

I followed the logic "For each click I want to update the map, and the model in the backing bean", so I did put update="@this" in the <p:ajax> tag in the <p:gmap> component. Problem is, making so, the whole Gmap component totally reloads, and loses its position, zoom and center coordinates. Resetting to it's init values. This makes the draw operation extremely problematic because user has to zoom and pan to the zone where the polygon is wanted to be drawn, with each click.

I need the gmap to update without totally reload it. I know the solution involves JS, sadly I'm not very expert in that language.

I made a Minimal reproducible example.

JSF page:

Code: Select all

       <h:head>
            <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
        </h:head>
        <h:body>
            <h:form id="frmMap2"> 
                <p:gmap center="41.381542, 2.122893" 
                        zoom="15" 
                        type="HYBRID" 
                        style="width:100%;height:400px"
                        model="#{testMapBean.polygonModel}">
                       <p:ajax event="pointSelect" 
                               listener="#{testMapBean.onPointSelect}" 
                               update="@this"/>
                </p:gmap>
            </h:form>
        </h:body>

The backing bean (View Scoped):

Code: Select all

   @Named(value = "testMapBean")
    @ViewScoped
    public class TestMapBean implements Serializable {
    
        private MapModel polygonModel;
        
        private Polygon polygon;
        
        public TestMapBean() 
        {
            
        }
    
        @PostConstruct
        public void init()
        {
            polygonModel = new DefaultMapModel();
     
            polygon = new Polygon();
            polygon.setStrokeColor("#FF9900");
            polygon.setFillColor("#FF9900");
            polygon.setStrokeOpacity(0.7);
            polygon.setFillOpacity(0.7);
    
            polygonModel.addOverlay(polygon);
        }
         
        public void onPointSelect(PointSelectEvent event) 
        {
            LatLng latlng = event.getLatLng();
            polygon.getPaths().add(latlng);
            
        }
        // public getters and setters omitted for brevity...

So this is it.

How can I keep the model of the gmap in the page, to be synched to the model object in the backing bean?. Thank you!

I'm using:
JSF 2.3 (mojarra)
Primefaces 10.0
Wildfly 26.1
Apache Netbeans 13
Browser is Google Chrome 103
OS is win10 1903

[jepsar]

Answered on StackOverflow: https://stackoverflow.com/questions/728 ... -component