faircoinmap-webapp/statics/index.js
statics/index.jsRaw
1var allitems = []; // array with all the items before filtering
2var items = []; // the items showed in the map, after the categories
3var categories = [];
4var allCheckbox = {checked: true};
5
6function hexToRGBA(hex,opacity){
7 hex = hex.replace('#','');
8 r = parseInt(hex.substring(0,2), 16);
9 g = parseInt(hex.substring(2,4), 16);
10 b = parseInt(hex.substring(4,6), 16);
11
12 result = 'rgba('+r+','+g+','+b+','+opacity+')';
13 return result;
14}
15function printFiltersList() {
16 var html = "";
17
18 for (var property in categories) {
19 if (categories.hasOwnProperty(property)) {
20 html += `<div class='checkbox'>
21 <label><input id="check` + property + `" onclick="updateFilter('`+property+`')" type='checkbox' value='' checked='`+categories[property].checked+`' >
22 <img style='width:30px;height:30px;
23 border: 2px solid `+categories[property].icon_marker_color+`;'
24 class="marker"
25 src='statics/img/categories/` + categories[property].icon_name + `_black.svg' />
26 `+categories[property].name+`</label>
27 </div>`;
28 }
29 }
30
31 document.getElementById("filtersList").innerHTML = html;
32}
33function getItem(id) {
34 for(var i=0; i<items.length; i++) {
35 if(items[i].properties.slug==id) {
36 return(items[i]);
37 }
38 }
39 return("not found");
40}
41function showRightCard(item) {
42 document.getElementById("rightCard-title").innerHTML = item.properties.name;
43 if(item.properties.description!=null) {
44 document.getElementById("rightCard-text").innerHTML = "<i>"+item.properties.description+"</i>";
45 }else{
46 document.getElementById("rightCard-text").innerHTML = "";
47 }
48 // gallery images
49 if(item.properties.gallery_images.length>0) {
50 var html = "";
51 html += `<br>
52 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
53 <ol class="carousel-indicators">`;
54
55 for(var i=0; i<item.properties.gallery_images.length; i++) {
56 if(i===0) {
57 html += `<li data-target="#carouselExampleIndicators" data-slide-to="`+i+`" class="active"></li>`;
58 } else {
59 html += `<li data-target="#carouselExampleIndicators" data-slide-to="`+i+`"></li>`;
60 }
61 }
62 html += `
63 </ol>
64 <div class="carousel-inner">`;
65 for(var i=0; i<item.properties.gallery_images.length; i++) {
66 if(i===0) {
67 html += `<div class="carousel-item active">`;
68 } else {
69 html += `<div class="carousel-item">`;
70 }
71 html += `
72 <a href="` + item.properties.gallery_images[i].original_url + `" target="_blank">
73 <img class="d-block w-100" src="` + item.properties.gallery_images[i].thumb_url + `"
74 alt="` + item.properties.gallery_images[i].caption + `"
75 title="` + item.properties.gallery_images[i].caption + `">
76 </a>
77 </div>`;
78 }
79 html += `
80 </div>
81 <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
82 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
83 <span class="sr-only">Previous</span>
84 </a>
85 <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
86 <span class="carousel-control-next-icon" aria-hidden="true"></span>
87 <span class="sr-only">Next</span>
88 </a>
89 </div>`;
90 document.getElementById("rightCard-text").innerHTML += html;
91 }
92
93
94 html = "";
95 for (var property in item.properties.categories) {
96 if (item.properties.categories.hasOwnProperty(property)) {
97 html += `<img style='width:30px;height:30px;'
98 src='statics/img/categories/` + item.properties.categories[property].icon_name + `_black.svg'
99 title="` + item.properties.categories[property].icon_name + `"/>`;
100 }
101 }
102 document.getElementById("rightCard-categories").innerHTML = html;
103 if(item.properties.pictureUrl) {
104 document.getElementById("rightCard-img").src="https://map.komun.org/" + item.properties.pictureUrl;
105 document.getElementById("rightCard-img").className = "card-img-top";
106 } else {
107 document.getElementById("rightCard-img").src="";
108 document.getElementById("rightCard-img").className = "card-img-top hidden";
109 }
110
111 if(item.properties.web) {
112 document.getElementById("rightCard-web").href= item.properties.web;
113 document.getElementById("rightCard-web").innerHTML = "Web";
114 } else {
115 document.getElementById("rightCard-web").href="#";
116 document.getElementById("rightCard-web").innerHTML="";
117 }
118 if(item.properties.mastodon) {
119 document.getElementById("rightCard-mastodon").href= item.properties.mastodon;
120 document.getElementById("rightCard-mastodon").innerHTML = "<i class='fab fa-mastodon-f'></i>";
121 } else {
122 document.getElementById("rightCard-mastodon").href="#";
123 document.getElementById("rightCard-mastodon").innerHTML="";
124 }
125 if(item.properties.twitter) {
126 document.getElementById("rightCard-twitter").href= item.properties.twitter;
127 document.getElementById("rightCard-twitter").innerHTML = "<i class='fab fa-twitter'></i>";
128 } else {
129 document.getElementById("rightCard-twitter").href="#";
130 document.getElementById("rightCard-twitter").innerHTML="";
131 }
132 if(item.properties.facebook) {
133 document.getElementById("rightCard-facebook").href= item.properties.facebook;
134 document.getElementById("rightCard-facebook").innerHTML = "<i class='fab fa-facebook-f'></i>";
135 } else {
136 document.getElementById("rightCard-facebook").href="#";
137 document.getElementById("rightCard-facebook").innerHTML="";
138 }
139 if(item.properties.telegram) {
140 document.getElementById("rightCard-telegram").href= item.properties.telegram;
141 document.getElementById("rightCard-telegram").innerHTML = "<i class='fab fa-telegram-f'></i>";
142 } else {
143 document.getElementById("rightCard-telegram").href="#";
144 document.getElementById("rightCard-telegram").innerHTML="";
145 }
146 if(item.properties.email) {
147 document.getElementById("rightCard-email").href= "mailto:" + item.properties.email;
148 document.getElementById("rightCard-email").innerHTML = "<i class='fa fa-envelope'></i>";
149 } else {
150 document.getElementById("rightCard-email").href="#";
151 document.getElementById("rightCard-email").innerHTML="";
152 }
153 document.getElementById("rightCard-text").innerHTML += "<p>"+item.properties.body+"</p>";
154 document.getElementById("rightCard").className+=" rightCard-show";
155}
156function hideRightCard() {
157 document.getElementById("rightCard").className ="card";
158}
159function updateMarkers() {
160 markers.clearLayers();
161 for(var i=0; i<items.length; i++) {
162 var lat = items[i].geometry.coordinates[1];
163 var lon = items[i].geometry.coordinates[0];
164 var icon = L.divIcon({
165 className: 'markerInvisible',
166 popupAnchor: [10, 0], // point from which the popup should open relative to the iconAnchor
167 html: `<img style='width:30px;height:30px;border: 2px solid `+items[i].properties.icon_marker_color+`;
168 box-shadow: 0 0 5px 4px ` + hexToRGBA(items[i].properties.icon_marker_color, 0.2) + `
169 ;' class='marker' src='statics/img/categories/` + items[i].properties.icon_name + `_black.svg' />`
170 // html: "<img style='width:30px;height:30px;border: 2px solid " + hexToRGBA(items[i].properties.icon_marker_color, 0.2) + ";' class='marker marker-" + items[i].properties.icon_marker_color + "' src='statics/img/categories/" + items[i].properties.icon_name + "_black.svg' />"
171 });
172 var marker = L.marker([lat, lon], {icon: icon});
173 marker.id = items[i].properties.slug;
174 if(items[i].properties.description!=null) {
175 marker.bindPopup("<b>"+items[i].properties.name+"</b><br><i>"+items[i].properties.description+"</i>");
176 } else {
177 marker.bindPopup("<b>"+items[i].properties.name+"</b>");
178 }
179 marker.on('mouseover', function(e) {
180 this.openPopup();
181 });
182 marker.on('mouseout', function(e) {
183 this.closePopup();
184 });
185 marker.on('click', function(e) {
186 var item = getItem(this.id);
187 placeid = this.id;
188 console.log(item.properties.gallery_images);
189 showRightCard(item);
190 window.history.pushState({},"", "?lang="+lang+"&lat=" + lat + "&lon=" + lon + "&zoom=" + zoom + "&placeid=" + placeid);
191 });
192 markers.addLayer(marker);
193 }
194 map.addLayer(markers);
195 if (placeid!=="none") {
196 var item = getItem(placeid);
197 showRightCard(item);
198 window.history.pushState({},"", "?lang="+lang+"&lat=" + lat + "&lon=" + lon + "&zoom=" + zoom + "&placeid=" + placeid);
199 }
200}
201function updateFilter(selectedFilter) {
202 if(categories[selectedFilter].checked===true) {
203 categories[selectedFilter].checked = false;
204 document.getElementById('check' + selectedFilter).checked = false;
205 } else {
206 categories[selectedFilter].checked = true;
207 document.getElementById('check' + selectedFilter).checked = true;
208 }
209 applyFilters();
210}
211function selectAllFilters() {
212 if(allCheckbox.checked===true) {
213 items = [];
214 allCheckbox.checked = false;
215 for (var property in categories) {
216 if (categories.hasOwnProperty(property)) {
217 categories[property].checked=false;
218 document.getElementById('check' + property).checked = false;
219 }
220 }
221 } else {
222 items = JSON.parse(JSON.stringify(allitems));
223 allCheckbox.checked= true;
224
225 for (var property in categories) {
226 if (categories.hasOwnProperty(property)) {
227 categories[property].checked=true;
228 document.getElementById('check' + property).checked = true;
229 }
230 }
231 }
232 updateMarkers();
233}
234function itemInItems(array, el) {
235 for(var i=0;i<array.length; i++) {
236 if(array[i].properties.slug===el.properties.slug) {
237 return true;
238 }
239 }
240 return false;
241}
242function applyFilters() {
243 items = [];
244 for(var i=0; i<allitems.length; i++) {
245 for (var property in allitems[i].properties.categories) {
246 if (allitems[i].properties.categories.hasOwnProperty(property)) {
247 if(categories[property].checked===true) {
248 // check if item is not yet in items array
249 if(itemInItems(items, allitems[i])===false) {
250 items.push(JSON.parse(JSON.stringify(allitems[i])));
251 }
252 }
253 }
254 }
255 }
256 updateMarkers();
257}
258function changeLanguage() {
259 lang = document.getElementById("lang").value;
260 window.history.pushState({},"", "?lang="+lang+"&lat=" + lat + "&lon=" + lon + "&zoom=" + zoom + "&placeid=" + placeid);
261 location.reload();
262}
263function printSearchResults(items) {
264 var html = "";
265 html += "<div class='list-group'>";
266 for(var i=0; i<items.length; i++) {
267 html += `
268 <div onclick="goToItem('` + items[i].properties.slug + `')" class="list-group-item list-group-item-action flex-column align-items-start">
269 <div class="d-flex w-100 justify-content-between">
270 <h5 class="mb-1">` + items[i].properties.name + `</h5>
271 <small>3 days ago</small>
272 </div>`;
273 if(items[i].properties.description!=null) {
274 html += `<p class="mb-1">` + items[i].properties.description + `</p>`;
275 }
276 html += `
277 </div>
278 `;
279 }
280 html += "</div>";
281 document.getElementById("searchResults").innerHTML = html;
282}
283function search() {
284 var searchResults = [];
285 var key = document.getElementById("searchinput").value.toUpperCase();
286 if(key=="") {
287 document.getElementById("searchResults").innerHTML = "";
288 return;
289 }
290 for(var i=0; i<allitems.length; i++) {
291 if(allitems[i].properties.name.toUpperCase().includes(key)) {
292 searchResults.push(allitems[i]);
293 }
294 }
295 printSearchResults(searchResults);
296}
297function showInMap(item) {
298 lat = item.geometry.coordinates[1];
299 lon = item.geometry.coordinates[0];
300 window.history.pushState({},"", "?lang="+lang+"&lat=" + lat + "&lon=" + lon + "&zoom=" + zoom);
301 map.setView([lat, lon], 16);
302}
303function goToItem(id) {
304 var item = getItem(id);
305 showRightCard(item);
306 showInMap(item);
307}
308
309// -----
310// init
311// -----
312
313// get url parameters
314var url = new URL(window.location.href);
315var lang = url.searchParams.get("lang");
316var lat = url.searchParams.get("lat");
317var lon = url.searchParams.get("lon");
318var zoom = url.searchParams.get("zoom");
319var placeid = url.searchParams.get("placeid");
320if(lang==undefined) {
321 lang = "en";
322}
323if((lat==undefined)||(lon==undefined)) {
324 lat = 40.007;
325 lon = -2.488;
326}
327if(zoom==undefined) {
328 zoom=7;
329}
330if(placeid==undefined) {
331 placeid = "none";
332}
333
334
335// var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
336// var tiles = L.tileLayer('https://korona.geog.uni-heidelberg.de/tiles/roadsg/x={x}&y={y}&z={z}', {
337// var tiles = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png?lang='+lang, {
338var tiles = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
339 maxZoom: 18,
340 attribution: 'Map data © OpenStreetMap contributors'
341});
342
343var map = L.map('map', {layers: [tiles]});
344map.setView([lat, lon], zoom);
345map.addEventListener('dragend', function(ev) {
346 var coord = map.getCenter();
347 lat = Math.round(coord.lat * 10000) / 10000;
348 lon = Math.round(coord.lng * 10000) / 10000;
349 window.history.pushState({},"", "?lang="+lang+"&lat=" + lat + "&lon=" + lon + "&zoom=" + zoom + "&placeid=" + placeid);
350});
351map.on('zoomend', function(ev) {
352 zoom = ev.target._zoom;
353 window.history.pushState({},"", "?lang="+lang+"&lat=" + lat + "&lon=" + lon + "&zoom=" + zoom + "&placeid=" + placeid);
354});
355var markers = L.markerClusterGroup();
356
357$.get("https://map.komun.org/showCategories/lang/"+lang, function(data){
358 console.log(data);
359 categories = data;
360 printFiltersList();
361 // get items data
362 $.get("https://map.komun.org/searchMapPoints/lang/"+lang+"/", function(data){
363 console.log(data.response[0]);
364 allitems = data.response;
365 items = JSON.parse(JSON.stringify(allitems));
366 updateMarkers();
367 document.getElementById("loadingbar").innerHTML="";
368 });
369});
370
371var sidebar = L.control.sidebar('sidebar').addTo(map);