Marker Cluster in PF gmaps

UI Components for JSF
Post Reply
konum
Posts: 3
Joined: 03 Jul 2015, 02:25

03 Jul 2015, 02:33

Hi!

I'm making and app witch it's index its a map with a lot of locations and clustering markers is a must. After wandering around I came with a simple and efective solution:

1. Download last version of markerClusterer (I used markerclusterer_compiled.js at http://google-maps-utility-library-v3.g ... terer/src/)

2. Import script int your page:

Code: Select all

<script type="text/javascript" src="./wiklimb/js/markerclusterer_compiled.js" />
3. Use PF gmap normally. Mine for example:

Code: Select all

<p:gmap center="#{mainMapController.lat}, #{mainMapController.lng}"
			zoom="#{mainMapController.zoom}" type="HYBRID" widgetVar="map"
			style="width:80%;height:400px" model="#{mainMapController.markers}"
			disableDefaultUI="true" rendered="#{devController.net}">
			<p:ajax event="overlaySelect"
				listener="#{mainMapController.onMarkerSelect}" />
			<p:ajax event="stateChange"
				listener="#{mainMapController.onStatusChange}" />
			<p:gmapInfoWindow id="infoWindow">  info window stuff
                        </p:gmapInfoWindow>
		</p:gmap>
4. Add the following code:

Code: Select all

<script>
         function clusterMarkers(){
		var mcOptions = {gridSize: 50, maxZoom: 15};
		var mc = new MarkerClusterer(PF('map').map, PF('map').map.markers,mcOptions);
		PF('map').map.fitBounds = google.maps.Map.prototype.fitBounds;
	}
	$(window).load(function() {
                    clusterMarkers();
});
All your markers will be clustered, and clicking on a cluster fill zoom in to fit all of them.

Edit: In my app I have several buttons to filter the map by marker type.

Code: Select all

<p:selectManyButton value="#{mainMapController.filter}" id="typeList">
				<f:selectItems value="#{comboController.routeTypeList}"
					var="routeType" itemLabel="#{i18nBean.get(routeType.type)}"
					itemValue="#{routeType.idroutetype}" />
				<p:ajax update="dataPanel" listener="#{mainMapController.filterMap}" oncomplete="clusterMarkers();"></p:ajax>
			</p:selectManyButton>
If you update the map in any action you need to call clusterMarkers(); again in order to cluster the updated markers.
PF 5.2 - Mojarra 2.2.4 - JDK 1.8 - PF Extensions 3.2.0

itelecom
Posts: 10
Joined: 14 Nov 2016, 19:23

03 Nov 2017, 21:28

Thank you !

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 25 guests