https://55mskn.netlify.app/styles/Locations_1_style.js

1var size = 0;
2var placement = 'point';
3function categories_Locations_1(feature, value, size, resolution, labelText,
4                       labelFont, labelFill, bufferColor, bufferWidth,
5                       placement) {
6                var valueStr = (value !== null && value !== undefined) ? value.toString() : 'default';
7                switch(valueStr) {case 'Food & Cofee':
8                    return [ new ol.style.Style({
9        image: new ol.style.Icon({
10                  imgSize: [580, 580],
11                  scale: 0.04482758620689655,
12                  anchor: [290.0, 290.0],
13                  anchorXUnits: "pixels",
14                  anchorYUnits: "pixels",
15                  rotation: 0.0,
16                  src: "styles/food_fastfood.svg"
17            }),
18        text: createTextStyle(feature, resolution, labelText, labelFont,
19                              labelFill, placement, bufferColor,
20                              bufferWidth)
21    })];
22                    break;
23case 'Section':
24                    return [ new ol.style.Style({
25        image: new ol.style.Icon({
26                  imgSize: [15, 15],
27                  scale: 1.7333333333333334,
28                  anchor: [7.5, 7.5],
29                  anchorXUnits: "pixels",
30                  anchorYUnits: "pixels",
31                  rotation: 0.0,
32                  src: "styles/college-11.svg"
33            }),
34        text: createTextStyle(feature, resolution, labelText, labelFont,
35                              labelFill, placement, bufferColor,
36                              bufferWidth)
37    })];
38                    break;
39case 'Integration event':
40                    return [ new ol.style.Style({
41        image: new ol.style.Icon({
42                  imgSize: [579.997, 579.997],
43                  scale: 0.04482781807492108,
44                  anchor: [289.9985, 289.9985],
45                  anchorXUnits: "pixels",
46                  anchorYUnits: "pixels",
47                  rotation: 0.0,
48                  src: "styles/amenity=fire_station.svg"
49            }),
50        text: createTextStyle(feature, resolution, labelText, labelFont,
51                              labelFill, placement, bufferColor,
52                              bufferWidth)
53    })];
54                    break;
55case 'Opening Ceremony of the Seminar':
56                    return [ new ol.style.Style({
57        image: new ol.style.Icon({
58                  imgSize: [580, 580],
59                  scale: 0.04482758620689655,
60                  anchor: [290.0, 290.0],
61                  anchorXUnits: "pixels",
62                  anchorYUnits: "pixels",
63                  rotation: 0.0,
64                  src: "styles/poi_embassy.svg"
65            }),
66        text: createTextStyle(feature, resolution, labelText, labelFont,
67                              labelFill, placement, bufferColor,
68                              bufferWidth)
69    })];
70                    break;
71case 'Registration of participants':
72                    return [ new ol.style.Style({
73        image: new ol.style.Icon({
74                  imgSize: [16, 16],
75                  scale: 1.625,
76                  anchor: [8.0, 8.0],
77                  anchorXUnits: "pixels",
78                  anchorYUnits: "pixels",
79                  rotation: 0.0,
80                  src: "styles/add-user_outline_16px.svg"
81            }),
82        text: createTextStyle(feature, resolution, labelText, labelFont,
83                              labelFill, placement, bufferColor,
84                              bufferWidth)
85    })];
86                    break;
87default:
88                    return [ new ol.style.Style({
89        image: new ol.style.Circle({radius: 4.0 + size,
90            displacement: [0, 0], stroke: new ol.style.Stroke({color: 'rgba(35,35,35,1.0)', lineDash: null, lineCap: 'butt', lineJoin: 'miter', width: 0.0}), fill: new ol.style.Fill({color: 'rgba(130,109,235,1.0)'})}),
91        text: createTextStyle(feature, resolution, labelText, labelFont,
92                              labelFill, placement, bufferColor,
93                              bufferWidth)
94    })];
95                    break;}};
96
97var style_Locations_1 = function(feature, resolution){
98    var context = {
99        feature: feature,
100        variables: {}
101    };
102    
103    var labelText = ""; 

104    var labelFont = "9.1px \'Britannic Bold\', sans-serif";
105    var labelFill = "#000000";
106    var bufferColor = "";
107    var bufferWidth = 0;
108    var textAlign = "center";
109    var offsetX = 15;
110    var offsetY = 10;
111    var feature
112	var value
113    var clusteredFeatures = feature.get("features");
114    size = clusteredFeatures.length;
115    if (size == 1) { // If cluster has one feature
116        var feature = clusteredFeatures[0];
117        value = clusteredFeatures[0].get("categ");
118        if (feature.get("Name") !== null) {
119            labelText = String(feature.get("Name"));
120        }
121    } else { // If cluster has more than one feature
122		labelText = size.toString();
123		var radius = 6 + Math.log(size) * 3;
124		var maxClusterSize = 80;
125		var relativeSize = Math.min(size / maxClusterSize, 1);
126		var redComponent, greenComponent, blueComponent = 0;
127		if (relativeSize < 0.5) {
128			redComponent = Math.floor(210 * (relativeSize / 0.5));
129			greenComponent = 210;
130		} else {
131			redComponent = 210;
132			greenComponent = Math.floor(210 * (1 - (relativeSize - 0.5) / 0.5));
133		}
134		var color = `rgba(${redComponent}, ${greenComponent}, ${blueComponent}, 0.75)`;
135		return [
136			new ol.style.Style({
137				image: new ol.style.Circle({
138					radius: radius + 4,
139					fill: new ol.style.Fill({
140						color: `rgba(${redComponent}, ${greenComponent}, ${blueComponent}, 0.3)`
141					})
142				})
143			}),
144			new ol.style.Style({
145				image: new ol.style.Circle({
146					radius: radius,
147					fill: new ol.style.Fill({
148						color: color
149					})
150				}),
151				text: new ol.style.Text({
152					font: labelFont,
153					text: labelText,
154					fill: new ol.style.Fill({
155						color: labelFill
156					}),
157					placement: placement
158				})
159			})
160		];
161	}
162    
163    var style = categories_Locations_1(feature, value, size, resolution, labelText,
164                            labelFont, labelFill, bufferColor,
165                            bufferWidth, placement);
166
167    return style;
168};