This Class allows you to display a large number of markers on a map by using marker clustering technique. The NOSTRA Map JavaScript API will combine markers of close proximity into clusters and display the number of each combination on a cluster symbol. You can also adjust and customize marker like the position, the cluster icon, icon size and the average distance between markers that are combined into a cluster.
1var map = new nostra.maps.Map("map");
2var dataClustering = {
3 "latitude": 12.56824,
4 "longitude": 101.467152,
5 "info": {
6 "Name": "Sai Kaew Beach Resort",
7 "address": "Phe, Mueang Rayong, Rayong, 21160",
8 "rating": "4",
9 "revenue": "15000000"
10 }
11 },
12 {
13 "latitude": 7.829639,
14 "longitude": 98.294675,
15 "info": {
16 "Name": "Karon Beach Resort",
17 "address": "Karon, Mueang Phuket, Phuket, 83100",
18 "rating": "4",
19 "revenue": "8000"
20 }
21 }
22}
23var markerPin = new nostra.maps.symbols.MarkerClusterer({
24 attributeToSetSum: "revenue",
25 data:
26 [
27 {
28 url: "https://developer.nostramap.com/developer/asset/image/iconCluster/Sum_Rev_lt10.png",
29 width: 60,
30 height: 60,
31 range: 1
32 },
33 {
34 url: "https://developer.nostramap.com/developer/asset/image/iconCluster/Sum_Rev_10-50.png",
35 width: 70,
36 height: 70,
37 range: 10000000
38 },
39 {
40 url: "https://developer.nostramap.com/developer/asset/image/iconCluster/Sum_Rev_50up.png",
41 width: 80,
42 height: 80,
43 range: 50000000
44 }
45 ]
46});
47var markerPin = new nostra.maps.symbols.MarkerPin({
48 attributeToSetType: "rating",
49 data:
50 [
51 {
52 url: "https://developer.nostramap.com/developer/asset/image/iconCluster/ratting_4.png",
53 type: "4",
54 width: 34,
55 height: 42
56 },
57 {
58 url: "https://developer.nostramap.com/developer/asset/image/iconCluster/ratting_4.5.png",
59 type: "4.5",
60 width: 34,
61 height: 42
62 },
63 {
64 url: "https://developer.nostramap.com/developer/asset/image/iconCluster/ratting_5.png",
65 type: "5",
66 width: 34,
67 height: 42
68 }
69 ]
70});
71var cluster = new nostra.maps.ClusterLayer({
72 "map": map,
73 "data": dataClustering,
74 "callout": {
75 "width": 300,
76 "height": 150
77 },
78 "markerClusterer": markerClusterer,
79 "markerPin": markerPin
80});
