Clustering markers

[chfranca]

Hello guys, I'm creating a page that displays a map and thousands of markers. I need the markers are grouped according to the bounds informations (center and zoom), however, I am having trouble updating the map when I change the model within the stateChange event via ajax. What is the best way to do this clustering of markers? And why when I use the update in ajax after io stateChange the map is not rendered?

Thank's.

My code in JSF:

Code: Select all

 
<p:gmap id="map" model="#{VMGeo.map}" center="#{VMGeo.center}" zoom="#{VMGeo.zoom}" type="ROADMAP" styleClass="map_google" fitBounds="false">
     <p:ajax event="stateChange" listener="#{VMGeo.onStateChange}"  update="map"/>
</p:gmap>

My code onStateChange, the code below only want to show or hide the polygons that define the states according to the level of zoom. The problem specifically, I believe it is in the map update when the model changes.

Code: Select all

public void onStateChange(StateChangeEvent event) {
        //My object of config geoLocations in DB
        locality.defineZoom(event.getZoomLevel());

        if (event.getZoomLevel() < 11) {
            if (!Polygons.UF.equals(showing)) {

                if (ufs == null || ufs .isEmpty()) {
                    List<GeoUFDTO> dtos = serviceLoadEntityDB.listAll(GeoEstadoDTO.class);
                    ufs = new ArrayList<>();

                    for (GeoUFDTO dto : dtos) {

                        Polygon polygon = new Polygon();
                        for (Coordinate coordenadas : dto.getPerimetro().getCoordinates()) {
                            polygon.getPaths().add(new LatLng(coordenadas.y, coordenadas.x));
                        }

                        polygon.setStrokeColor("#FF0000");
                        polygon.setFillOpacity(0);
                        polygon.setId(dto.getEstado().getDescription());
                        ufs.add(polygon);
                    }
                }

                ufs.stream().forEach((p) -> {
                    locality.addPolygon(p);
                });
            }

        } else {
            locality.getMap().getPolygons().clear();

        }
    }