The API provides clustering of markers on map in order to remove overlap of markers.
Currently, grid-based clustering algorithm is used. It supports thumbnail markers of photos and also icons as follow:
Single object | Cluster | |
Thumbnail |
![]() |
![]() |
Icon |
![]() |
![]() |
1- Click on single object: opens information window on map
2- Click on main icon of cluster: zoom in to cluster
3- Click on circle icon of cluster thumbnail: opens information window on map and by repeating click it displays the next object’s information
clusteringLogic.js | includes clustering functions |
clusteringInterface.js | includes functions to handle information on map |
mapFunctions.js | includes some extra functions related to map and handling markers on it |
markerFunctions.js | includes marker creation and handling click and information window |
mopsiMarkerClustering (map, options) |
constructor |
addObject(object) | adds the input json object to the array markersData of cluseringObj |
apply() | performs clustering and displays markers on map |
remoteClick(i) | opens information window of selected object i from all data |
clean() | removes all marker clusters and also listeners from map |
1- If the thumbnail is selected and the photo does not exist, the following default photo is used:
2- You can design, the content of information window in the function “createInfoWindow” of markerX class in markerFunctions.js
3- To apply a new clustering using the same object that has already been used, first use clean() function to destroy the previous clustering on map.