-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
159 lines (140 loc) · 4.87 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
var mtlMurals = (function() {
const MURAL_URL = 'http://donnees.ville.montreal.qc.ca/dataset/53d2e586-6e7f-4eae-89a1-2cfa7fc29fa0/resource/d325352b-1c06-4c3a-bf5e-1e4c98e0636b/download/murales.json';
const $MURAL_INFO = $('.mural-info__title');
const $MURAL_IMAGE = $('.mural-info__image');
const $MURAL_LIST = $('.mural-list');
const MURAL_LIST_ITEM_CLASS = 'mural-list__item';
const MURAL_LIST_BUTTON_CLASS = 'mural-list__button';
const MURAL_LIST_META_CLASS = 'mural-list__meta';
const MURAL_LIST_IMAGE_CLASS = 'mural-list__image-wrapper';
const MURAL_LIST_ADDRESS_CLASS = 'mural-list__address';
const $MODAL_IMAGE = $('.mural-modal__image');
const $MODAL_HEADING = $('.mural-modal__heading');
const $MODAL_ARTIST = $('.mural-modal__meta-artist');
const $MODAL_YEAR = $('.mural-modal__meta-year');
const $MURAL_TOTAL_COUNT_NODE = $('.mural-count__total');
const $MURAL_VISIBLE_COUNT_NODE = $('.mural-count__visible');
const MODAL = $('[data-remodal-id=modal]').remodal();
let map = {};
let markers = [];
let totalCount = 0;
let visibleCount;
function initMap() {
map = new google.maps.Map(document.getElementById('map'));
window.addEventListener('resize', debounce(debouncedResize, 300));
getMuralData()
.then(function(data) {
map.addListener('dragend', updateMap);
map.addListener('zoom_changed', updateMap);
map.addListener('resize', updateMap);
return data;
})
.then(plotMarkers)
.then(populateList)
.then(function(){
$MURAL_VISIBLE_COUNT_NODE.html(totalCount);
$MURAL_TOTAL_COUNT_NODE.html(totalCount);
});
}
function getMuralData() {
return new Promise(function(resolve, reject) {
$.ajax({
dataType: 'json',
cache: false,
url: 'https://proxy.hackeryou.com',
data: {
reqUrl: MURAL_URL,
xmlToJSON: false
},
success: resolve,
error: reject
});
});
}
function plotMarkers(data) {
let muralSpotsArray = data.features;
totalCount = muralSpotsArray.length;
let bounds = new google.maps.LatLngBounds();
muralSpotsArray.forEach(function(muralSpot, index) {
let latitude = muralSpot.properties.latitude;
let longitude = muralSpot.properties.longitude;
let image = muralSpot.properties.image;
let address = muralSpot.properties.adresse;
let artist = muralSpot.properties.artiste;
let year = muralSpot.properties.annee;
let marker = new google.maps.Marker({
position: {lat: muralSpot.properties.latitude, lng: muralSpot.properties.longitude},
map: map,
title: address,
animation: google.maps.Animation.DROP,
id: index,
image: image,
address: address,
artist: artist,
year: year
});
let position = new google.maps.LatLng(latitude, longitude);
bounds.extend(position);
markers.push(marker);
marker.addListener('click', openModal);
});
map.fitBounds(bounds);
updateMap();
}
function openModal() {
$MODAL_HEADING.html(this.address);
$MODAL_ARTIST.html(this.artist);
$MODAL_YEAR.html(this.year);
$MODAL_IMAGE.attr('src', this.image);
MODAL.open();
};
function updateMap() {
let newBounds = map.getBounds();
visibleCount = 0;
// Can use Array Filter here later
markers.forEach(function(marker) {
if (newBounds.contains(marker.position)) {
$('[data-index=' + marker.id +']').show();
visibleCount++;
} else {
$('[data-index=' + marker.id +']').hide();
}
});
$MURAL_VISIBLE_COUNT_NODE.html(visibleCount);
}
function populateList() {
markers.forEach(function(marker) {
let markerListItem = document.createElement('li');
let markerListMarkup = `
<li class="${MURAL_LIST_ITEM_CLASS}" data-index="${marker.id}">
<button class="${MURAL_LIST_BUTTON_CLASS}">
<div data-bg="${marker.image}" class="lazyload ${MURAL_LIST_IMAGE_CLASS}"></div>
<p class=${MURAL_LIST_META_CLASS}>
<p class="${MURAL_LIST_ADDRESS_CLASS}">${marker.title}</p>
</p>
</button>
</li>
`;
markerListItem.innerHTML = markerListMarkup;
let markerListButton = $(markerListItem).find(`.${MURAL_LIST_BUTTON_CLASS}`)[0];
$MURAL_LIST[0].appendChild(markerListItem);
markerListButton.addEventListener('click', openModal.bind(marker));
});
}
function debouncedResize() {
google.maps.event.trigger(map, 'resize');
}
document.addEventListener('lazybeforeunveil', function(e){
var bg = e.target.getAttribute('data-bg');
if(bg){
e.target.style.backgroundImage = 'url(' + bg + ')';
}
});
document.addEventListener('closed', '.remodal', function(e){
console.log('Clogins')
});
return {
initMap: initMap
}
})();
mtlMurals.initMap();