https://chemicalparks.com/_assets/ef0ca339b789324e0bf397399302ec41/js/ChemicalparkFilter.js?1724335221

1(async() => {
2    while (!window.hasOwnProperty("google"))
3        await new Promise(resolve => setTimeout(resolve, 500));
4
5    (function (window, $, google, undefined) {
6        if ($ === undefined) {
7            alert('Error: jQuery not loaded');
8            return
9        }
10
11
12        var eWorksJs = window.eWorksJs || {},
13            ChemicalParksFilter = eWorksJs.ChemicalParksFilter
14                || (eWorksJs.ChemicalParksFilter = {});
15
16        $.extend(ChemicalParksFilter, {
17            selectors: {
18                form: '#chemicalparks-filter-form',
19                slider: '#filter-slider',
20                chemicalParksList: '#chemicalparks-list',
21                chemicalParksListItem: '.chemicalparks-filter-list-item',
22                sizeMeasureValueLabel: '.size-measure-value',
23                sizeMeasureNameLabel: '.size-measure-name',
24                sizeMeasureToggle: '.measure-toggle',
25                map: '#map',
26                chemicalparkExportSelector: '.chemicalpark-export-selector'
27            },
28            elements: {
29                $slider: null,
30                $chemicalParksList: null,
31
32                $map: null,
33                map: null,
34                markers: [],
35                infoWindows: []
36            },
37            options: {
38                currentMultiplyer: 1,
39                mapActivated: true,
40
41                map: null
42            },
43
44            __formatNumber: function (number) {
45                return Math.floor(Number(number)).toLocaleString();
46            },
47
48            initSlider: function (self) {
49                self.elements.$slider = $(self.selectors.slider).slider({
50                    step: 100,
51                    min: 0,
52                    max: 1000000,
53                    value: "0",
54                    range: false,
55                    tooltip: 'always',
56                    tooltip_split: false,
57                    handle: 'square',
58                    formatter: function (value) {
59                        if (Array.isArray(value)) {
60                            return value;
61                        } else {
62                            return self.__formatNumber(
63                                value * self.options.currentMultiplyer);
64                        }
65                    }
66                });
67            },
68
69            initIsotope: function (self) {
70                self.elements.$chemicalParksList = $(
71                    self.selectors.chemicalParksList).isotope({
72                    itemSelector: self.selectors.chemicalParksListItem,
73                    layoutMode: 'vertical',
74                    hiddenStyle: {
75                        opacity: 0
76                    },
77                    visibleStyle: {
78                        opacity: 1
79                    },
80                    transitionDuration: 0,
81                    filter: function () {
82                        var $this = $(this);
83                        var space = $this.attr('data-space-available');
84
85                        $(self.selectors.chemicalparkExportSelector)
86                            .prop('checked', false);
87
88                        var sliderValue = self.elements.$slider.slider(
89                            'getValue');
90
91                        return (sliderValue <= space);
92                    }
93                });
94            },
95
96            initGoogleMaps: function (self) {
97                if (!self.options.mapActivated) {
98                    return;
99                }
100                self.elements.$map = $(self.selectors.map);
101
102                self.options.map.options.center = new google.maps.LatLng(
103                    51.14897, 10.3742);
104                self.options.map.options.mapTypeId
105                    = google.maps.MapTypeId.ROADMAP;
106                self.options.map.oStyle = new google.maps.StyledMapType(
107                    self.options.map.styles,
108                    {name: "Styled Map"}
109                );
110
111                self.options.map.pin = new google.maps.MarkerImage(
112                    self.elements.$map.attr('data-pin-uri'),
113                    new google.maps.Size(52, 52),
114                    new google.maps.Point(0, 0)
115                );
116                self.options.map.pinOn = new google.maps.MarkerImage(
117                    self.elements.$map.attr('data-pin-on-uri'),
118                    new google.maps.Size(52, 52),
119                    new google.maps.Point(0, 0)
120                );
121
122                self.elements.map = new google.maps.Map(
123                    self.elements.$map[0],
124                    self.options.map.options
125                );
126                self.elements.map.mapTypes.set(
127                    'map_style', self.options.map.oStyle);
128                self.elements.map.setMapTypeId('map_style');
129            },
130
131            removeMapMarkers: function (self) {
132                if (!self.options.mapActivated) {
133                    return;
134                }
135                for (var i = 0; i < self.elements.markers.length; i++) {
136                    self.elements.markers[i].setMap(null);
137                }
138                self.elements.markers = [];
139                for (var j = 0; j < self.elements.infoWindows.length; j++) {
140                    self.elements.infoWindows[j].setMap(null);
141                }
142                self.elements.markers = [];
143            },
144
145            setMapMarkers: function (self) {
146                if (!self.options.mapActivated) {
147                    return;
148                }
149                self.removeMapMarkers(self);
150
151                $(self.selectors.chemicalParksListItem + ':visible')
152                    .each(function () {
153                        var $chemicalPark = $(this);
154                        var markerInfoContent = $('<textarea />')
155                            .html($chemicalPark.attr('data-marker-info'))
156                            .text();
157
158                        var location = new google.maps.LatLng(
159                            Number($chemicalPark.attr('data-latitude')),
160                            Number($chemicalPark.attr('data-longitude'))
161                        );
162
163                        var markerInfo = new google.maps.InfoWindow({
164                            content: markerInfoContent,
165                            maxWidth: 400
166                        });
167                        var marker = new google.maps.Marker({
168                            draggable: false,
169                            raiseOnDrag: false,
170                            icon: self.options.map.pin,
171                            position: location,
172                            map: self.elements.map
173                        });
174                        marker.addListener('click', function () {
175                            var currentMeasure = $(
176                                self.selectors.sizeMeasureToggle
177                                + ' .active input');
178                            for (
179                                var i = 0; i < self.elements.infoWindows.length;
180                                i++
181                            ) {
182                                self.elements.infoWindows[i].close();
183                            }
184                            markerInfo.open(self.elements.map, marker);
185                            self.toggleMeasure(
186                                self,
187                                eWorksJs.Constants.measures[currentMeasure.val()],
188                                currentMeasure.parent('label').text()
189                            );
190                        });
191                        google.maps.event.addListener(
192                            marker, "mouseover", function () {
193                                marker.setIcon(self.options.map.pinOn)
194                            });
195                        google.maps.event.addListener(
196                            marker, "mouseout", function () {
197                                marker.setIcon(self.options.map.pin)
198                            });
199
200                        self.elements.markers.push(marker);
201                        self.elements.infoWindows.push(markerInfo);
202
203                        markerInfo.open(self.elements.map, marker);
204                        markerInfo.close();
205                    });
206            },
207
208            toggleMeasure: function (self, multiplyer, measure) {
209                self.options.currentMultiplyer = multiplyer;
210                $(self.selectors.sizeMeasureValueLabel).each(function () {
211                    var $sizeMeasure = $(this);
212                    $sizeMeasure.text(
213                        self.__formatNumber(
214                            $sizeMeasure.attr('data-measure-original')
215                            * self.options.currentMultiplyer
216                        )
217                    );
218                });
219                $(self.selectors.sizeMeasureNameLabel).text(measure.trim());
220
221                self.elements.$slider.slider('relayout');
222            },
223
224          triggerMarkerClick: function (latitude, longitude) {
225            var self = this;
226
227            $('html, body').animate({
228              scrollTop: $(self.selectors.map).offset().top - 172
229            }, 172, function () {
230              for (var i = 0; i < self.elements.markers.length; i++) {
231                var markerPosition = self.elements.markers[i].getPosition();
232                if (markerPosition.lat() === latitude && markerPosition.lng() === longitude) {
233                  self.elements.map.setCenter(markerPosition);
234
235                  google.maps.event.trigger(self.elements.markers[i], 'click');
236                  break;
237                }
238              }
239            });
240          },
241
242            init: function () {
243                var self = this;
244
245                if (typeof google !== 'object' || typeof google.maps !== 'object') {
246                    console.log('Google maps could not be loaded');
247                    return;
248                }
249                if ($(self.selectors.chemicalParksList).length === 0) {
250                    return;
251                }
252                self.options.map = eWorksJs.Constants.mapStyles;
253                self.options.mapActivated = !!$(self.selectors.map).length;
254
255
256                self.initGoogleMaps(self);
257
258                self.initSlider(self);
259                self.initIsotope(self);
260
261                self.setMapMarkers(self);
262
263                $('a[data-latitude][data-longitude]').on('click', function (e) {
264                  e.preventDefault();
265                  var latitude = parseFloat($(this).data('latitude'));
266                  var longitude = parseFloat($(this).data('longitude'));
267                  self.triggerMarkerClick(latitude, longitude);
268                });
269
270                self.elements.$slider.on('slideStop', function () {
271                    self.elements.$chemicalParksList.isotope();
272                });
273
274                $(self.selectors.sizeMeasureToggle + ' input')
275                    .on('change', function () {
276                        self.toggleMeasure(
277                            self, eWorksJs.Constants.measures[$(this).val()],
278                            $(this).parent('label').text()
279                        );
280                    });
281
282                self.elements.$chemicalParksList.on(
283                    'arrangeComplete',
284                    function (event, filteredItems) {
285                        self.setMapMarkers(self);
286                    }
287                );
288
289                $(self.selectors.sizeMeasureToggle + ' input:first')
290                    .trigger('change');
291
292                $(self.selectors.form).on("submit", function (e) {
293                    if (!self.elements.$chemicalParksList.find(
294                        self.selectors.chemicalparkExportSelector
295                        + ":visible").length) {
296                        e.preventDefault();
297                        return;
298                    }
299                    self.elements.$chemicalParksList.find(
300                        self.selectors.chemicalparkExportSelector
301                        + ":not(:visible)").prop("checked", false);
302                    if (!self.elements.$chemicalParksList.find(
303                        self.selectors.chemicalparkExportSelector
304                        + ":visible:checked").length) {
305                        self.elements.$chemicalParksList.find(
306                            self.selectors.chemicalparkExportSelector
307                            + ":visible").prop("checked", true);
308                    }
309
310                });
311            }
312        });
313
314        window.eWorksJs = eWorksJs;
315    })(this, jQuery, google);
316
317    eWorksJs.ChemicalParksFilter.init();
318})();