https://www.unibo.it/++resource++unibo.contents/unibo.map.js?v=12

1/*global window, document, jQuery, L*/
2(function ($) {
3    "use strict";
4 
5
6    if ((typeof window.gmap_app) === 'undefined') {
7        window.gmap_app = {};
8    }
9
10    var App = window.gmap_app;
11
12    App.MapWidget = function (trigger, settings) {
13        var self = this;
14
15        self.map = $(trigger);
16        self.gmap = $(trigger);
17
18        self.markers = {};
19        self.markers_wrapper = $('#markers');
20        self.markers_identifier = '.slidecampus';
21        self.active_marker = null;
22        self.active_class = 'is-active';
23        self.slideWidth = 273;
24        self.slideMargin = 7;
25        
26        self.default_icon = L.icon({
27            iconUrl: '++resource++unibo.contents/marker.png?v=3',
28            iconSize: [23, 30]
29        });
30        self.active_icon = L.icon({
31            iconUrl: '++resource++unibo.contents/active_marker.png?v=2',
32            iconSize: [33, 43]
33        });
34        self.center = [44.494887, 11.3426163];
35        self.zoom = 8;
36        self.slides = $(self.markers_identifier, self.markers_wrapper);
37        $.extend(true, self, settings);
38
39        self.init_map();
40        self.init_slider();
41    };
42
43    App.MapWidget.prototype = {
44        init_map: function () {
45            var self = this
46            
47            self.gmap = L.map(
48              self.map[0], {scrollWheelZoom: false, fullscreenControl: true}
49            ).setView(self.center, self.zoom);
50            L.control.scale({imperial: false}).addTo(self.gmap);
51            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
52                maxZoom: 19,
53                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
54            }).addTo(self.gmap);
55            //L.tileLayer.provider('OpenStreetMap.Mapnik').addTo(self.gmap);
56        
57            self.bounds = new L.latLngBounds([]);
58            self.setup_markers();
59            
60            //default marker
61            self.set_active_marker(self.markers[0]);
62        },
63
64        init_slider: function () {
65            var self = this;
66            
67            self.slider = new Splide( '#splideCampus', {
68                i18n: {
69                    prev: "Precedente",
70                    next: "Successiva",
71                    first: "Vai alla prima slide",
72                    last: "Vai all'ultima slide"
73                },
74                type   : 'loop',
75                pagination: false,
76                speed: 800,
77                breakpoints: {
78                  1024: {
79                    focus    : 'center',
80                    autoWidth: true,
81                    padding: '3rem',
82                    gap: '1rem',
83                  },
84                  500: {
85                    autoWidth: false,
86                  }
87      
88                  },
89            } );
90      
91            var bar = self.slider.root.querySelector( '.my-carousel-progress-bar-campus' );
92      
93              // Updates the bar width whenever the carousel moves:
94            self.slider.on( 'mounted move', function () {
95                var end  = self.slider.Components.Controller.getEnd() + 1;
96                var rate = Math.min( ( self.slider.index + 1 ) / end, 1 );
97                bar.style.width = String( 100 * rate ) + '%';
98            } );
99      
100            self.slider.mount();
101
102            self.slider.on('active', function(slide){
103                self.on_change_slide(slide.slide);
104            })
105    
106        },
107
108        on_change_slide: function (slide_active) {
109            var self = this,
110                slide_idx = $(slide_active).data('slideIdx'),
111                //slide_active = $(self.slides.get(slide_idx)).next(),
112                marker = self.markers[slide_idx];
113
114            self.reset_active_marker();
115            self.set_active_marker(marker);
116            self.set_active_class($(slide_active));
117        },
118
119        set_active_class: function (slide) {
120            var self = this;
121
122            $(self.markers_identifier, self.markers_wrapper).removeClass(self.active_class);
123            slide.addClass(self.active_class);
124        },
125
126        setup_markers: function () {
127            var self = this,
128                markers = $(self.markers_identifier);
129
130            markers.each(function () {
131                self.add_marker($(this));
132            });
133        },
134
135        add_marker: function (obj) {
136            var self = this,
137                slide_id = obj.data('slideIdx'),
138                lat = obj.data('mapLatitude'),
139                lang = obj.data('mapLongitude'),
140                gmarker,
141                marker_position;
142            
143            if (lat == undefined || lang == undefined)
144                return
145            
146            marker_position = new L.LatLng(lat,lang);
147
148            // extend bounds to fill zoom
149            self.bounds.extend(marker_position);
150
151            // add marker
152            gmarker = new L.Marker(marker_position, {
153                title: $('.marker-title', obj).text(),
154                icon: self.default_icon
155            }).addTo(self.gmap);
156
157            gmarker.metadata = {
158                id: slide_id
159            };
160
161            self.markers[slide_id] = gmarker;
162            
163            gmarker.on('click', function () {
164                self.change_slide(slide_id);
165            });
166        },
167
168        get_active_slide_idx: function () {
169            var self = this,
170                active = $('.' + self.active_class, self.slides.parent()),
171                idx = self.slides.length - 1,
172                active_idx = null;
173            if (active.length > 0) {
174                active_idx = $(active).data('slideIdx') - 1;
175                if (active_idx >= 0) {
176                    idx = active_idx;
177                }
178            }
179
180            return idx;
181        },
182
183        change_slide: function (idx) {
184            // // Vado alla slide precedente quella del marker selezionato
185            var self = this;
186            // if (idx === 0) {
187            //     idx = self.slides.length;
188            // }
189            // Vado alla slide precedente quella del marker selezionato
190            self.slider.go(idx);
191        },
192
193        set_active_marker: function (marker) {
194            if (marker == undefined)
195                return
196            var self = this;
197            self.active_marker = marker;
198            // https://github.com/hosuaby/Leaflet.SmoothMarkerBouncing
199            // marker.setAnimation(google.maps.Animation.BOUNCE);
200            if (marker.bounce) { marker.bounce(); }
201            marker.setIcon(self.active_icon);
202            if (marker._bringToFront) { marker._bringToFront(); }
203            self.gmap.panTo(marker.getLatLng());
204        },
205
206        reset_active_marker: function () {
207            var self = this;
208            if (self.active_marker) {
209                // self.active_marker.setAnimation(null);
210                if (self.active_marker.isBouncing && self.active_marker.isBouncing()) {

211                  self.active_marker.stopBouncing();
212                }
213                self.active_marker.setIcon(self.default_icon);
214            }
215        }
216    };
217
218    $.fn.extend({
219        carouselmapwidget: function (options) {
220            return this.each(function () {
221                var settings = $.extend(true, {}, options),
222                    $this = $(this),
223                    data = $this.data('carouselmapwidget'),
224                    mapwidget;
225                // If the plugin hasn't been initialized yet
226                if (!data) {
227                    mapwidget = new App.MapWidget(this, settings);
228                    $(this).data('carouselmapwidget', mapwidget);
229                }
230            });
231        }
232    });
233
234}(jQuery));