https://www.repsol.us/content/dam/aplicaciones/repsol-paises/us/en/renewable-projects/js/main.js

1/* exported App */
2var App = function($) {
3
4    var config = $.ajax({
5            url: '/content/dam/aplicaciones/repsol-paises/us/en/renewable-projects/config/config.json', 
6            async: false,
7            dataType: 'json',
8            contentType: "application/x-www-form-urlencoded;charset=ISO-8859-15",            
9            cache: false,
10        }).responseText;
11        $.parseJSON(config);
12        config =  $.parseJSON(config);
13
14    var datos = $.ajax({
15            url: '/content/dam/aplicaciones/repsol-paises/us/en/renewable-projects/data/data.json',
16            async: false,
17            dataType: 'json',
18            cache: false,
19        }).responseText;
20        $.parseJSON(datos);
21        datos =  $.parseJSON(datos);
22    
23    var data = [],
24        map,
25        results = [],
26        markers = [],
27        bounds = new google.maps.LatLngBounds(),        
28        geolocationAvailable = false,
29
30    initEvents = function() {
31        $(document)
32            .on('click', '.marker-info__name, .marker-info__address', function(e) {
33				google.maps.event.trigger(markers[$(this).data('marker')],'click');	
34            })
35            .on('click', '#markers > a', function(e) { 
36				var $this = $(this),
37                    $scroll = $('#scroll'),
38                    jump = 100,
39                    position = ($this.is(':first-of-type')) ? ($scroll.scrollTop() - jump) : ($scroll.scrollTop() + jump);
40                    $scroll.animate({scrollTop:position}, 500, 'swing');
41                e.preventDefault();
42            })
43            .on('scroll', '#scroll', function() {
44                var elem = $("#scroll");
45                if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
46                    $('#arrow-down').hide();
47                } else if (elem.scrollTop() === 0) {
48                    $('#arrow-up').hide();
49                } else {
50                    $('#arrow-up').show();
51                    $('#arrow-down').show();
52                }
53            });
54    },
55
56    detectGeolocation = function() {
57        if (navigator.geolocation) {
58            navigator.geolocation.getCurrentPosition(initMap, initMapWithoutGeolocation, {
59                maximumAge: 60000,
60                timeout: 4000
61            });
62            geolocationAvailable = false;
63        }
64    },
65
66    initMap = function(position) {
67        bounds = new google.maps.LatLngBounds();
68
69        map = new google.maps.Map(document.getElementById('map-canvas'), {
70            zoom: 5,
71            center: new google.maps.LatLng(40.000000, -100.000000),
72            disableDefaultUI: true,
73            maxZoom: 10,
74            minZoom: 5,
75            styles: config['estilos_mapa'],     
76        });
77
78        if (geolocationAvailable === true) {
79            var marker = new google.maps.Marker({
80                position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
81                map: map,
82                title: 'You are here',
83                icon: '/content/dam/aplicaciones/repsol-paises/us/en/renewable-projects/current-location.png'
84            });
85            bounds.extend(marker.position);
86        }
87     
88        $.each(datos, function(index, marker) {
89            marker.distance = 0;
90            data.push(marker);
91        });
92
93        data.sort(function(a, b) {
94            if (geolocationAvailable === true) {
95                return (parseInt(a.distance) - parseInt(b.distance));    
96            } else {
97                if (a.name < b.name) return -1;
98                if (a.name > b.name) return 1;
99                return 0;
100            }
101        });
102        
103        getResults(data);
104        map.fitBounds(bounds);
105    },
106
107    getResults = function(data){
108        let results = data;
109
110        $.each(results, function(index, result) {
111               addMarkerToMap(result);
112        });
113    },
114
115    initMapWithoutGeolocation = function() {
116        geolocationAvailable = false; 
117        initMap();
118        var myoverlay = new google.maps.OverlayView();
119        myoverlay.draw = function () {
120            this.getPanes().markerLayer.id='markerLayer';
121        };

122        myoverlay.setMap(map);
123    },
124
125    addMarkerToMap = function(data) {
126        const icon = {
127            url: `/content/dam/aplicaciones/repsol-paises/us/en/renewable-projects/img/iconos/${data.icon}`,
128            size: new google.maps.Size(50, 50),
129            scaledSize: new google.maps.Size(50, 50), // scaled size
130            origin: new google.maps.Point(0,0), // origin
131        };
132
133        var marker = new google.maps.Marker({
134            position: new google.maps.LatLng(data.lat, data.lng),
135            map: map,
136            icon: icon,
137            optimized: false
138        });
139
140        markers.push(marker);
141        bounds.extend(marker.position);
142        
143        var contenido = `
144            <div class="card">
145                <div class="card-header">
146                    <h3>${data.name}</h3>
147                </div>`
148        
149        if (data.image) {
150            contenido += `
151                <div class="card-body">
152                    <div style="overflow:hidden;width: 100%; height: 200px;">
153                        <img style="object-fit:contain; max-width:100%;" src='/content/dam/aplicaciones/repsol-paises/us/en/renewable-projects/img/fotos/${data.image}'/>
154                    </div>`
155        }
156        
157        contenido += `
158                    <div style="padding-left:20px; font-size:1.2em">
159                        ${data.capacity?"<p style='margin:10px;'><b>Capacity: </b>"+data.capacity+"</p>":""}
160                        ${data.location?"<p style='margin:10px;'><b>Location: </b>"+data.location+"</p>":""}
161                        ${data.notes?"<p style='margin:10px;font-size:0.8em'><b>Notes: </b>"+data.notes+"</p>":""}
162                    </div>`
163        
164        contenido += `</div>`
165        
166        if (data.url) {
167            contenido += `
168                <div class="card-footer">
169                    <input type="submit" class="btn aplicar" style="float: right; margin-bottom:15px; margin-right:15px" value="Learn more" onClick='javascript:window.open("${data.url}")' />
170                </div>`
171        }
172        
173        contenido += `</div>`;
174            
175        marker['infowindow'] = new google.maps.InfoWindow({
176          content: contenido,
177          maxWidth: 500,
178          width: 500
179        });
180
181        google.maps.event.addListener(marker, 'click', function(){
182            window.parent.postMessage({
183                    'func': 'eventosGTM',
184                    'category': 'busqueda',
185                    'action': 'busqueda-mapa',
186                    'label': data.subTitle
187                }, "*");
188
189            hideAllInfoWindows(map);
190            marker['infowindow'].open(map, marker);			
191        });
192
193        google.maps.event.addListener(marker['infowindow'],'closeclick',function(){
194            map.fitBounds(bounds);
195         });
196    },
197
198    
199    hideAllInfoWindows = function(map) {
200        markers.forEach(function(marker) {
201            marker.infowindow.close(map, marker);
202        });
203    },
204    setMapOnAll = function(map) {
205        for (var i = 0; i < markers.length; i++) {
206          markers[i].setMap(map);
207        }
208    };
209
210    return {
211        init: function() {
212            detectGeolocation();
213            initEvents();
214            
215        }
216    };
217
218}(jQuery);
219App.init();