https://mcmsmedia.antalya.bel.tr/MediaFolder/6770156cf267483097290…/67702b79a43748f7852976d2_map.js?v=20260924

1
2let map = document.querySelector('#map'); 
3
4ymaps.ready(init);
5let degerleri = "Değerleri";
6let degeri = "";
7$(document).ready(function () {
8    degerleri = $('#degerleri').val()
9    degeri = $('#degeri').val() 
10});
11let objectId;
12
13var myMap;
14function init() {
15    myMap = new ymaps.Map('map', {
16            center: [36.926311,30.707650],
17            zoom: 8,
18            controls: []
19        }, {
20            searchControlProvider: 'yandex#search'
21        }),
22        objectManager = new ymaps.ObjectManager({
23            // Setting an option to make placemarks start clusterizing.
24            clusterize: true,
25            // ObjectManager accepts the same options as the clusterer.
26            gridSize: 64,
27            // The layout of the pieChart cluster placemark.
28            clusterIconLayout: "default#pieChart"
29        });
30    myMap.geoObjects.add(objectManager);
31
32    myMap.events.add('click', function (e) {
33        if ($('.mapDeatilContainer').hasClass('open')) {
34            $('.mapDeatilContainer').removeClass('open')
35        }
36
37    })
38
39    myMap.geoObjects.events.add('click', function (e) {
40        //alert('Event on the map'); // Occurs when the click is on the map, but not on a placemark.
41        objectId = e.get('objectId');
42
43        if (typeof(objectId) === 'number') {
44            loadToMenu(objectId);
45        }
46    });
47
48    if ($('.pageName').hasClass('seaWaterQualityPage') || $('.pageName').hasClass('Dashboard')) {
49        $.ajax({

50            url: "/Cevre/deniz-suyu-kalitesi-listesi",
51            method:'POST',
52            success:function(e){
53            }
54        }).done(function (data) {
55            objectManager.add(data);
56        });
57
58    } else if ($('.pageName').hasClass('airPollutionPage')) {
59        $.ajax({
60            url: "/js/airPollutionData.json"
61        }).done(function (data) {
62            objectManager.add(data);
63        });
64
65        
66    } else {}
67}
68
69let sliderOption = {
70  // Optional parameters
71  direction: 'horizontal',
72  freeMode: false,
73  init: true,
74  autoHeight: true,
75  autoplay: {
76      delay: 5000
77  },
78  loop:true,
79  // Navigation arrows
80  navigation: {
81    nextEl: '.swiper-button-next',
82    prevEl: '.swiper-button-prev',
83  },
84}
85
86var mySwiper = new Swiper('.mapDetailSliderContainer', sliderOption);
87
88let swiperWrapper = $('.swiper-wrapper');
89let multiMediaUrl;
90var myvar;
91
92function loadToMenu(Id){
93    $('.mapDeatilContainer').addClass('open');
94     if (Id > 0) {
95         $.ajax({

96             url: '/Cevre/deniz-suyu-kalitesi-detay',
97             type: 'post',
98             data: {Id:Id},
99             success: function (response){
100
101                 //mySwiper.destroy()
102                 let detailElems = $('.mapDeatilContainer').find('.mapDetailContent');
103                 let tableCount = response.seaWaterDetailListViewModelAPI.length;
104                 let table = $('.mapDetailTable tbody');
105
106                 mySwiper.removeAllSlides();
107                 $(detailElems[0]).find('.mapDetailContentContent').text(response.seaSamplePointName)
108                 $(detailElems[1]).find('.mapDetailContentContent').text(response.seaWaterDetailListViewModelAPI.seaWaterPointName)
109                 table.empty();
110                 let icon ='';
111                 if (response.multiMediaUrl.length > 0) {
112                     $('.mapDetailSlider').removeAttr('style');
113                     multiMediaUrl = response.multiMediaUrl.split(',');
114                     let imgHeight;
115                     const img = new Image();
116                         img.onload = function() {
117                             imgHeight = this.height;
118                             $('.swiper-wrapper').css('height', $('.swiper-slide-active .SlideImgContainer img').height());
119                         }
120
121                     img.src = multiMediaUrl[0];
122                     multiMediaUrl.map(function(index,elem)  {
123                         if(elem > 0) {
124                            $('.swiper-button-prev, .swiper-button-next').removeClass('d-none');
125                             myvar = setInterval(swiperTriggerFunc, 5000);
126
127                                
128                         } else {
129                             $('.swiper-button-prev, .swiper-button-next').addClass('d-none')
130                         }
131                         return mySwiper.addSlide(elem, "<div data-swiper-autoplay='2000' class=\"swiper-slide\">\n<div class=\"SlideImgContainer\">\n<img class=\"img-fluid\" src=\"".concat(index, "\">\n</div>\n</div>"));
132                     });
133                 } else {
134                     $('.mapDetailSlider').css('display', 'none');
135                 }
136
137                 for (var i = 0; i < tableCount; i++) {
138                     if (response.seaWaterDetailListViewModelAPI[i].escherichiaColi <= 100 && response.seaWaterDetailListViewModelAPI[i].intestinalEnterokok <= 100 ) {
139                         icon ='<i class="em em-slightly_smiling_face" aria-role="presentation" aria-label="SLIGHTLY SMILING FACE"></i>'; 
140                     } else if ((response.seaWaterDetailListViewModelAPI[i].escherichiaColi >= 100 && (response.seaWaterDetailListViewModelAPI[i].escherichiaColi <= 1000) ) && (response.seaWaterDetailListViewModelAPI[i].intestinalEnterokok >= 100 && (response.seaWaterDetailListViewModelAPI[i].intestinalEnterokok <= 370) ) ) {
141                         icon ='<i class="em em-expressionless" aria-role="presentation" aria-label="EXPRESSIONLESS FACE"></i>'; 
142                        
143                     } else {
144                         icon ='<i class="em em-nauseated_face" aria-role="presentation" aria-label="NAUSEATED FACE"></i>'; 
145                     }
146
147                     table.append("  <tr>\n<td class=\"text-center\">".concat(response.seaWaterDetailListViewModelAPI[i].measurementDateString, "</td>\n                                        <td class=\"text-center\">").concat(response.seaWaterDetailListViewModelAPI[i].seaWaterPointName, "</td>\n                                        <td class=\"text-center\">").concat(response.seaWaterDetailListViewModelAPI[i].escherichiaColi, "</td>\n                                        <td class=\"text-center\">").concat(response.seaWaterDetailListViewModelAPI[i].intestinalEnterokok, "</td>\n                                        <td class=\"text-center\">").concat(icon, "</td>\n                                    </tr>"));
148                 }
149
150             }
151         });
152        
153     } else {
154        myChart = new Chart(ctx, chartData);
155        let activeTab = $('#airPollutionTab').find('.nav-link.active').attr('href')
156         if (activeTab !== '#NO2') {
157             $('#airPollutionTab').find('#NO2-tab').trigger('click');
158             getChartData('NO2 ' + degerleri, myChart, 'NO2Value');
159         }
160     }
161}
162var container = $(".mapDeatilContainer");
163
164
165
166 $(document).ready(function () {
167     if (!(navigator.appName == 'Microsoft Internet Explorer' || !!(navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/rv:11/)) || (typeof $.browser !== "undefined" && $.browser.msie == 1))) {
168
169         $(window).mouseup(function(e) 
170         {
171             // if the target of the click isn't the container nor a descendant of the container
172             if ((!container.is(e.target) && container.has(e.target).length === 0) && !$('#exampleModal').hasClass('show'))  {
173                 container.removeClass('open');
174                 myStopFunction();
175             }
176         });
177    }
178    
179    $(document).on('click', '.closeMapDetailContainerBtn', function(event) {
180        container.removeClass('open');
181        myChart.destroy();
182        myStopFunction();
183        //mySwiper.autoplay.stop();
184    });

185    
186    $(document).on('click', '.selector', function(event) {
187        event.preventDefault();
188        /* Act on the event */
189    });
190
191     $(document).find('figure table').addClass('table table-bordered').parent().removeClass('table').addClass('table-responsive')
192     $(document).find('figure img').addClass('img-fluid')    
193})
194
195var chartData = {
196    responsive: true,
197    type: 'bar',
198    data: {
199        labels: [],
200        datasets: []
201    },
202    options: {
203        scales: {
204            yAxes: [{
205                ticks: {
206                    beginAtZero: true
207                }
208            }]
209        }
210    }
211}
212
213let ctx;
214
215if($('.chart').length > 0) {
216    if ($('#NO2Chart').length > 0) {
217        ctx = document.getElementById('NO2Chart').getContext('2d');
218    
219    } else {
220        ctx = document.getElementById('AllChart').getContext('2d');
221        chartData.type = 'line';
222    }
223    var myChart = new Chart(ctx, chartData);
224}
225
226
227
228
229
230
231
232
233var getChartData = function (argument, chartElem, elementName) {
234    $.ajax({

235        url: '/Cevre/hava-kalitesi-listesi',
236        type: 'post',
237        dataType: 'json',
238        success: function (d) {
239            if ($('.errorMessage').length > 0) {
240                $('.errorMessage').remove();
241            }
242            chartElem.data.labels = d.axisLabels;
243
244
245            if (elementName == 'All') {
246                chartData.type = 'line';
247
248                chartElem.data.datasets = [];
249                d.datasetsAll.map(function (index, elem) {
250                    return chartElem.data.datasets.push(index)
251                })
252            } else {
253                //chartElem.data.datasets[0].data = [];
254                d.defaultData.label = argument
255
256                chartElem.data.datasets = [];
257                chartElem.data.datasets.push(d.defaultData);
258                chartElem.data.datasets[0].data = d.datasets.map(function (index, elem) {
259                    //console.log(d.datasets[elem][elementName]);
260                    return d.datasets[elem][elementName];
261                    //return something;
262                });
263                d.label = argument
264
265            }
266            chartElem.update();
267
268        },
269        error: function (error) {
270            $('.mapDeatilContainer.fullWidth .container .col-md-12').css('display', 'none');
271            $('.mapDeatilContainer.fullWidth .container .row').append('<div class="col-md-12 text-center errorMessage"><div class="alert alert-warning" role="alert">Bir Hata ile karşılaşıldı.</div></div>')
272        }
273    })
274}
275
276document.addEventListener('DOMContentLoaded', function () {
277    // your code here
278
279    
280    if ($('#map').length > 0) {
281            if ($('#NO2Chart').length > 0) {
282                getChartData('NO2 ' + degerleri, myChart, 'NO2Value');
283            } else {
284                getChartData('Tüm Değerler', myChart, 'All');
285            }
286
287    }
288
289}, false);
290
291
292$('#airPollutionTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
293
294    let id = $(e.target).attr('href');
295    let preId = $(e.relatedTarget).attr('href');
296    id = id.replace('#', '');
297
298    let activeElem = $(document).find('#' + id).find($("canvas[id^=" + id + "]"));
299    let activeElemId = $(document).find('#' + id).find($("canvas[id^=" + id + "]")).attr('id');
300
301    myChart.destroy();
302    ctx = document.getElementById(activeElemId);
303
304    let mainLabel = id + ' '+ degerleri;
305    chartData.data.datasets[0].label = mainLabel;
306
307    //if (true) {} else {}
308    if (id == "All") {
309        myChart = new Chart(ctx, chartData);
310        getChartData('', myChart, id);
311
312    } else {
313
314        chartData.type = 'bar';
315        myChart = new Chart(ctx, chartData);
316        myChart.reset();
317        let label = id + ' ' + degerleri;
318        id = id + 'Value';
319        getChartData(label, myChart, id);
320    }
321    //e.target // newly activated tab
322    //e.relatedTarget // previous active tab
323})
324
325
326function swiperTriggerFunc() {
327    $('.swiper-button-next').trigger('click');
328}
329
330function myStopFunction() {
331    clearInterval(myvar);
332}
333
334$(document).ready(function () {
335    //Yesicam Walking Road Map
336    if ($('#yesilcamMap').length > 0) {
337        ymaps.ready(init);
338        var yesilcamMap;
339        function init() {
340            yesilcamMap = new ymaps.Map('yesilcamMap', {
341                center: [36.849810, 30.567456],
342                zoom: 12,
343                controls: []
344            });
345
346            var url =  document.getElementById("MapKmlUrl").value;
347            ymaps.geoXml.load(url)
348                .then(function (res) {
349                    yesilcamMap.geoObjects.add(res.geoObjects);
350                });            
351        }
352    }
353
354    if ($('#yesilcamMapBike').length > 0) {
355        ymaps.ready(init);
356        var yesilcamMapBike;
357        function init() {
358            yesilcamMapBike = new ymaps.Map('yesilcamMapBike', {
359                center: [36.849810, 30.567456],
360                zoom: 12,
361                controls: []
362            });
363
364
365
366
367
368            var url = document.getElementById("MapKmlUrlBike").value;
369            ymaps.geoXml.load(url)
370                .then(function (res) {
371                    yesilcamMapBike.geoObjects.add(res.geoObjects);
372                });
373        }
374    }
375});