|
var allitems = []; // array with all the items before filtering
|
|
var items = []; // the items showed in the map, after the categories
|
|
var categories = [];
|
|
var allCheckbox = {checked: true};
|
|
|
|
function hexToRGBA(hex,opacity){
|
|
hex = hex.replace('#','');
|
|
r = parseInt(hex.substring(0,2), 16);
|
|
g = parseInt(hex.substring(2,4), 16);
|
|
b = parseInt(hex.substring(4,6), 16);
|
|
|
|
result = 'rgba('+r+','+g+','+b+','+opacity+')';
|
|
return result;
|
|
}
|
|
function printFiltersList() {
|
|
var html = "";
|
|
|
|
for (var property in categories) {
|
|
if (categories.hasOwnProperty(property)) {
|
|
html += `<div class='checkbox'>
|
|
<label><input id="check` + property + `" onclick="updateFilter('`+property+`')" type='checkbox' value='' checked='`+categories[property].checked+`' >
|
|
<img style='width:30px;height:30px;
|
|
border: 2px solid `+categories[property].icon_marker_color+`;'
|
|
class="marker"
|
|
src='statics/img/categories/` + categories[property].icon_name + `_black.svg' />
|
|
`+categories[property].name+`</label>
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
document.getElementById("filtersList").innerHTML = html;
|
|
}
|
|
function getItem(id) {
|
|
for(var i=0; i<items.length; i++) {
|
|
if(items[i].properties.slug==id) {
|
|
return(items[i]);
|
|
}
|
|
}
|
|
return("not found");
|
|
}
|
|
function showRightCard(item) {
|
|
document.getElementById("rightCard-title").innerHTML = item.properties.name;
|
|
if(item.properties.description!=null) {
|
|
document.getElementById("rightCard-text").innerHTML = "<i>"+item.properties.description+"</i>";
|
|
}else{
|
|
document.getElementById("rightCard-text").innerHTML = "";
|
|
}
|
|
// gallery images
|
|
if(item.properties.gallery_images.length>0) {
|
|
var html = "";
|
|
html += `<br>
|
|
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
|
|
<ol class="carousel-indicators">`;
|
|
|
|
for(var i=0; i<item.properties.gallery_images.length; i++) {
|
|
if(i===0) {
|
|
html += `<li data-target="#carouselExampleIndicators" data-slide-to="`+i+`" class="active"></li>`;
|
|
} else {
|
|
html += `<li data-target="#carouselExampleIndicators" data-slide-to="`+i+`"></li>`;
|
|
}
|
|
}
|
|
html += `
|
|
</ol>
|
|
<div class="carousel-inner">`;
|
|
for(var i=0; i<item.properties.gallery_images.length; i++) {
|
|
if(i===0) {
|
|
html += `<div class="carousel-item active">`;
|
|
} else {
|
|
html += `<div class="carousel-item">`;
|
|
}
|
|
html += `
|
|
<a href="` + item.properties.gallery_images[i].original_url + `" target="_blank">
|
|
<img class="d-block w-100" src="` + item.properties.gallery_images[i].thumb_url + `"
|
|
alt="` + item.properties.gallery_images[i].caption + `"
|
|
title="` + item.properties.gallery_images[i].caption + `">
|
|
</a>
|
|
</div>`;
|
|
}
|
|
html += `
|
|
</div>
|
|
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</div>`;
|
|
document.getElementById("rightCard-text").innerHTML += html;
|
|
}
|
|
|
|
|
|
html = "";
|
|
for (var property in item.properties.categories) {
|
|
if (item.properties.categories.hasOwnProperty(property)) {
|
|
html += `<img style='width:30px;height:30px;'
|
|
src='statics/img/categories/` + item.properties.categories[property].icon_name + `_black.svg'
|
|
title="` + item.properties.categories[property].icon_name + `"/>`;
|
|
}
|
|
}
|
|
document.getElementById("rightCard-categories").innerHTML = html;
|
|
if(item.properties.pictureUrl) {
|
|
document.getElementById("rightCard-img").src="https://map.komun.org/" + item.properties.pictureUrl;
|
|
document.getElementById("rightCard-img").className = "card-img-top";
|
|
} else {
|
|
document.getElementById("rightCard-img").src="";
|
|
document.getElementById("rightCard-img").className = "card-img-top hidden";
|
|
}
|
|
|
|
if(item.properties.web) {
|
|
document.getElementById("rightCard-web").href= item.properties.web;
|
|
document.getElementById("rightCard-web").innerHTML = "Web";
|
|
} else {
|
|
document.getElementById("rightCard-web").href="#";
|
|
document.getElementById("rightCard-web").innerHTML="";
|
|
}
|
|
if(item.properties.mastodon) {
|
|
document.getElementById("rightCard-mastodon").href= item.properties.mastodon;
|
|
document.getElementById("rightCard-mastodon").innerHTML = "<i class='fab fa-mastodon-f'></i>";
|
|
} else {
|
|
document.getElementById("rightCard-mastodon").href="#";
|
|
document.getElementById("rightCard-mastodon").innerHTML="";
|
|
}
|
|
if(item.properties.twitter) {
|
|
document.getElementById("rightCard-twitter").href= item.properties.twitter;
|
|
document.getElementById("rightCard-twitter").innerHTML = "<i class='fab fa-twitter'></i>";
|
|
} else {
|
|
document.getElementById("rightCard-twitter").href="#";
|
|
document.getElementById("rightCard-twitter").innerHTML="";
|
|
}
|
|
if(item.properties.facebook) {
|
|
document.getElementById("rightCard-facebook").href= item.properties.facebook;
|
|
document.getElementById("rightCard-facebook").innerHTML = "<i class='fab fa-facebook-f'></i>";
|
|
} else {
|
|
document.getElementById("rightCard-facebook").href="#";
|
|
document.getElementById("rightCard-facebook").innerHTML="";
|
|
}
|
|
if(item.properties.telegram) {
|
|
document.getElementById("rightCard-telegram").href= item.properties.telegram;
|
|
document.getElementById("rightCard-telegram").innerHTML = "<i class='fab fa-telegram-f'></i>";
|
|
} else {
|
|
document.getElementById("rightCard-telegram").href="#";
|
|
document.getElementById("rightCard-telegram").innerHTML="";
|
|
}
|
|
if(item.properties.email) {
|
|
document.getElementById("rightCard-email").href= "mailto:" + item.properties.email;
|
|
document.getElementById("rightCard-email").innerHTML = "<i class='fa fa-envelope'></i>";
|
|
} else {
|
|
document.getElementById("rightCard-email").href="#";
|
|
document.getElementById("rightCard-email").innerHTML="";
|
|
}
|
|
document.getElementById("rightCard-text").innerHTML += "<p>"+item.properties.body+"</p>";
|
|
document.getElementById("rightCard").className+=" rightCard-show";
|
|
}
|
|
function hideRightCard() {
|
|
document.getElementById("rightCard").className ="card";
|
|
}
|
|
function updateMarkers() {
|
|
markers.clearLayers();
|
|
for(var i=0; i<items.length; i++) {
|
|
var lat = items[i].geometry.coordinates[1];
|
|
var lon = items[i].geometry.coordinates[0];
|
|
var icon = L.divIcon({
|
|
className: 'markerInvisible',
|
|
popupAnchor: [10, 0], // point from which the popup should open relative to the iconAnchor
|
|
html: `<img style='width:30px;height:30px;border: 2px solid `+items[i].properties.icon_marker_color+`;
|
|
box-shadow: 0 0 5px 4px ` + hexToRGBA(items[i].properties.icon_marker_color, 0.2) + `
|
|
;' class='marker' src='statics/img/categories/` + items[i].properties.icon_name + `_black.svg' />`
|
|
// 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' />"
|
|
});
|
|
var marker = L.marker([lat, lon], {icon: icon});
|
|
marker.id = items[i].properties.slug;
|
|
if(items[i].properties.description!=null) {
|
|
marker.bindPopup("<b>"+items[i].properties.name+"</b><br><i>"+items[i].properties.description+"</i>");
|
|
} else {
|
|
marker.bindPopup("<b>"+items[i].properties.name+"</b>");
|
|
}
|
|
marker.on('mouseover', function(e) {
|
|
this.openPopup();
|
|
});
|
|
marker.on('mouseout', function(e) {
|
|
this.closePopup();
|
|
});
|
|
marker.on('click', function(e) {
|
|
var item = getItem(this.id);
|
|
placeid = this.id;
|
|
console.log(item.properties.gallery_images);
|
|
showRightCard(item);
|
|
window.history.pushState({},"", "?lang="+lang+"&lat=" + lat + "&lon=" + lon + "&zoom=" + zoom + "&placeid=" + placeid);
|
|
});
|
|
markers.addLayer(marker);
|
|
}
|
|
map.addLayer(markers);
|
|
if (placeid!=="none") {
|
|
var item = getItem(placeid);
|
|
showRightCard(item);
|
|
window.history.pushState({},"", "?lang="+lang+"&lat=" + lat + "&lon=" + lon + "&zoom=" + zoom + "&placeid=" + placeid);
|
|
}
|
|
}
|
|
function updateFilter(selectedFilter) {
|
|
if(categories[selectedFilter].checked===true) {
|
|
categories[selectedFilter].checked = false;
|
|
document.getElementById('check' + selectedFilter).checked = false;
|
|
} else {
|
|
categories[selectedFilter].checked = true;
|
|
document.getElementById('check' + selectedFilter).checked = true;
|
|
}
|
|
applyFilters();
|
|
}
|
|
function selectAllFilters() {
|
|
if(allCheckbox.checked===true) {
|
|
items = [];
|
|
allCheckbox.checked = false;
|
|
for (var property in categories) {
|
|
if (categories.hasOwnProperty(property)) {
|
|
categories[property].checked=false;
|
|
document.getElementById('check' + property).checked = false;
|
|
}
|
|
}
|
|
} else {
|
|
items = JSON.parse(JSON.stringify(allitems));
|
|
allCheckbox.checked= true;
|
|
|
|
for (var property in categories) {
|
|
if (categories.hasOwnProperty(property)) {
|
|
categories[property].checked=true;
|
|
document.getElementById('check' + property).checked = true;
|
|
}
|
|
}
|
|
}
|
|
updateMarkers();
|
|
}
|
|
function itemInItems(array, el) {
|
|
for(var i=0;i<array.length; i++) {
|
|
if(array[i].properties.slug===el.properties.slug) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
function applyFilters() {
|
|
items = [];
|
|
for(var i=0; i<allitems.length; i++) {
|
|
for (var property in allitems[i].properties.categories) {
|
|
if (allitems[i].properties.categories.hasOwnProperty(property)) {
|
|
if(categories[property].checked===true) {
|
|
// check if item is not yet in items array
|
|
if(itemInItems(items, allitems[i])===false) {
|
|
items.push(JSON.parse(JSON.stringify(allitems[i])));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
updateMarkers();
|
|
}
|
|
function changeLanguage() {
|
|
lang = document.getElementById("lang").value;
|
|
window.history.pushState({},"", "?lang="+lang+"&lat=" + lat + "&lon=" + lon + "&zoom=" + zoom + "&placeid=" + placeid);
|
|
location.reload();
|
|
}
|
|
function printSearchResults(items) {
|
|
var html = "";
|
|
html += "<div class='list-group'>";
|
|
for(var i=0; i<items.length; i++) {
|
|
html += `
|
|
<div onclick="goToItem('` + items[i].properties.slug + `')" class="list-group-item list-group-item-action flex-column align-items-start">
|
|
<div class="d-flex w-100 justify-content-between">
|
|
<h5 class="mb-1">` + items[i].properties.name + `</h5>
|
|
<small>3 days ago</small>
|
|
</div>`;
|
|
if(items[i].properties.description!=null) {
|
|
html += `<p class="mb-1">` + items[i].properties.description + `</p>`;
|
|
}
|
|
html += `
|
|
</div>
|
|
`;
|
|
}
|
|
html += "</div>";
|
|
document.getElementById("searchResults").innerHTML = html;
|
|
}
|
|
function search() {
|
|
var searchResults = [];
|
|
var key = document.getElementById("searchinput").value.toUpperCase();
|
|
if(key=="") {
|
|
document.getElementById("searchResults").innerHTML = "";
|
|
return;
|
|
}
|
|
for(var i=0; i<allitems.length; i++) {
|
|
if(allitems[i].properties.name.toUpperCase().includes(key)) {
|
|
searchResults.push(allitems[i]);
|
|
}
|
|
}
|
|
printSearchResults(searchResults);
|
|
}
|
|
function showInMap(item) {
|
|
lat = item.geometry.coordinates[1];
|
|
lon = item.geometry.coordinates[0];
|
|
window.history.pushState({},"", "?lang="+lang+"&lat=" + lat + "&lon=" + lon + "&zoom=" + zoom);
|
|
map.setView([lat, lon], 16);
|
|
}
|
|
function goToItem(id) {
|
|
var item = getItem(id);
|
|
showRightCard(item);
|
|
showInMap(item);
|
|
}
|
|
|
|
// -----
|
|
// init
|
|
// -----
|
|
|
|
// get url parameters
|
|
var url = new URL(window.location.href);
|
|
var lang = url.searchParams.get("lang");
|
|
var lat = url.searchParams.get("lat");
|
|
var lon = url.searchParams.get("lon");
|
|
var zoom = url.searchParams.get("zoom");
|
|
var placeid = url.searchParams.get("placeid");
|
|
if(lang==undefined) {
|
|
lang = "en";
|
|
}
|
|
if((lat==undefined)||(lon==undefined)) {
|
|
lat = 40.007;
|
|
lon = -2.488;
|
|
}
|
|
if(zoom==undefined) {
|
|
zoom=7;
|
|
}
|
|
if(placeid==undefined) {
|
|
placeid = "none";
|
|
}
|
|
|
|
|
|
// var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
// var tiles = L.tileLayer('https://korona.geog.uni-heidelberg.de/tiles/roadsg/x={x}&y={y}&z={z}', {
|
|
// var tiles = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png?lang='+lang, {
|
|
var tiles = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
|
|
maxZoom: 18,
|
|
attribution: 'Map data © OpenStreetMap contributors'
|
|
});
|
|
|
|
var map = L.map('map', {layers: [tiles]});
|
|
map.setView([lat, lon], zoom);
|
|
map.addEventListener('dragend', function(ev) {
|
|
var coord = map.getCenter();
|
|
lat = Math.round(coord.lat * 10000) / 10000;
|
|
lon = Math.round(coord.lng * 10000) / 10000;
|
|
window.history.pushState({},"", "?lang="+lang+"&lat=" + lat + "&lon=" + lon + "&zoom=" + zoom + "&placeid=" + placeid);
|
|
});
|
|
map.on('zoomend', function(ev) {
|
|
zoom = ev.target._zoom;
|
|
window.history.pushState({},"", "?lang="+lang+"&lat=" + lat + "&lon=" + lon + "&zoom=" + zoom + "&placeid=" + placeid);
|
|
});
|
|
var markers = L.markerClusterGroup();
|
|
|
|
$.get("https://map.komun.org/showCategories/lang/"+lang, function(data){
|
|
console.log(data);
|
|
categories = data;
|
|
printFiltersList();
|
|
// get items data
|
|
$.get("https://map.komun.org/searchMapPoints/lang/"+lang+"/", function(data){
|
|
console.log(data.response[0]);
|
|
allitems = data.response;
|
|
items = JSON.parse(JSON.stringify(allitems));
|
|
updateMarkers();
|
|
document.getElementById("loadingbar").innerHTML="";
|
|
});
|
|
});
|
|
|
|
var sidebar = L.control.sidebar('sidebar').addTo(map);
|