This map uses the visualisation "Info Layer" - instead of showing pins for each data point, it renders the Info column as HTML within a div at each location.
Query for map plugin:
select c003 as lat, c004 as lng, c002 as name, c001 as id,
'<div class="info">'
|| '<div class="infoTitle">' || c002 || '</div>'
|| '<div class="infoText">' || c006 || '</div>'
|| '<img class="infoIcon" src="#APP_IMAGES#' || c008 || '">'
|| '</div>' as info
from apex_collections where collection_name = 'MAP' and mod(c001,3)=0
The page's Inline CSS includes the following to style the content of each info overlay:
div.info {
background-color: #ffffff;
border-radius: 5px;
border: 1px solid #73AD21;
padding: 3px;
max-width: 100px;
text-align: center;
opacity: 80%;
cursor: pointer;
}
div.infoTitle {
font-weight:bold;
}
div.infoSelected {
background-color: #9bff70;
border-width: 3px;
opacity: 90%;
}
A dynamic action on the map region on the marker clicked event runs the following JavaScript code to add the "infoSelected" class to the selected info box (after removing it from any other info box if they had previously clicked another one):
$(".infoSelected").removeClass("infoSelected");
this.data.infoDiv.firstChild.classList.toggle("infoSelected");
It should be noted that in the dynamic action code, this.data.infoDiv is a reference to the div containing the content that the plugin generated, not the actual content itself; this is why we need to navigate to the firstChild to get the div that we generated in the SQL query.