Toggle overlay in a Primefaces GoogleMap - google-maps

Question

I am using Primefaces gmap to show markers and circle overlays on some markers. I want to toggle the circle overlay on a button click. Any idea how I can do that? I am using JSF 2.2 and Primefaces 3.4.2.
This is how I load the map in the jsf page.
<p:gmap center="21, 78" id="map"
zoom="2"
type="roadmap"
style="width:99%;height:90%;position:absolute"
model="#{SCNBean.supplyChainMapModel}"
widgetVar="mapVar">
This is how I load the markers and circle overlays in my backing bean.
#PostConstruct
public void viewSupplyChainNetwork(){
for (Node node : supplyChainNodes) {
LatLng coord = new LatLng(node.getLatitude(), node.getLongitude());
marker = new Marker(coord, node.getAddress(), node, getMarkerIcon(node.getNodeType()));
supplyChainMapModel.addOverlay(marker);
//adding circle overlay
Circle circle1 = new Circle(coord, riskval*10000);
circle1.setStrokeColor("#d93c3c");
circle1.setFillColor("#d93c3c");
circle1.setFillOpacity(0.7);
supplyChainMapModel.addOverlay(circle1);
}
Here is how the button on the map is created using javascript
function HeatMapControl(heatMapControlDiv, gmap) {
heatMapControlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.title = 'Heat Map';
heatMapControlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.innerHTML = '<strong>Heat Map</strong>';
controlUI.appendChild(controlText);
google.maps.event.addDomListener(controlUI, 'click', function() {
heatmap.setMap(heatmap.getMap() ? null : gmap);
});
I want to make the circle overlay toggle on the click of a button on the map. How can I achieve this?

Answer 1

I would move the mapModel to a requestScoped Bean, let's call it SomeRequestScopedMapBean
it should have a reference to your current bean as a ManagedProperty
Your xhtml could work like this: (I don't think there is any need to create it with javascript, but I dit it with a commandButton)
<p:gmap
model="#{someRequestScopedMapBean.supplyChainMapModel}"
widgetVar="mapVar"
id="pgmapId">
<p:commandButton value="Toggle Circles"
actionListener="#{sCNBean.toggleShowCircles}"
ajax="true"
update="pgmapId"
/>
Here's the callback for your action, in your viewScoped Backing bean
public void toggleShowCircles(){
if(showCircles)
showCircles = false;
else
showCircles = true;
}
The MapModel construction is moved to your SomeRequestScopedMapBean
#PostConstruct
public void drawMapModel(){
for (Node node : sCNBean.supplyChainNodes) {
LatLng coord = new LatLng(node.getLatitude(), node.getLongitude());
marker = new Marker(coord, node.getAddress(), node, getMarkerIcon(node.getNodeType()));
supplyChainMapModel.addOverlay(marker);
if(sCNBean.showCircles){
//adding circle overlay
Circle circle1 = new Circle(coord, riskval*10000);
circle1.setStrokeColor("#d93c3c");
circle1.setFillColor("#d93c3c");
circle1.setFillOpacity(0.7);
supplyChainMapModel.addOverlay(circle1);
}
}