Marker Clusterer in Primefaces Gmap

Hi!

wiKlimb development is running smoothly and i'm learning a lot meanwhile. The latest feature it's clustering markers on the main google maps window.

Why clustering?

 As Google says too many markers can be a pain to render and gives poor usability to your users. wiKlimb right now does not need clustering as the numer of locations is low, but have to very close locations and the user may have a hard time selecting one of them with out zooming in.

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:

<script type="text/javascript" src="./wiklimb/js/markerclusterer_compiled.js" />

view raw gistfile1.js hosted with ❤ by GitHub

3. Use PF gmap normally. wiKlimb main map for example:

	<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>

view raw gistfile1.js hosted with ❤ by GitHub

4.Add the following code to the map page:

	<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();
	});
	</script>

view raw gistfile1.js hosted with ❤ by GitHub

All your markers will be clustered, and clicking on a cluster fill zoom in to fit all of them.

If you update the map in any action you need to call clusterMarkers(); again in order to cluster the updated markers. For example, wiKlimb uses different buttons to filter the map by climbing style.

	<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>

view raw gistfile1.js hosted with ❤ by GitHub

That's it!