mirror of
https://github.com/arnaucube/faircoinmap-webapp.git
synced 2026-02-06 19:06:41 +01:00
map
This commit is contained in:
arnaucode
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
statics/img
|
||||||
6
README.md
Normal file
6
README.md
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
# faircoinmap-webapp
|
||||||
|
Webapp map showing places accepting FairCoin.
|
||||||
|
|
||||||
|
Live demo: https://map.komun.org
|
||||||
|
|
||||||
|
- Sidebar menu from: https://github.com/Turbo87/sidebar-v2/
|
||||||
205
index.html
Normal file
205
index.html
Normal file
@@ -0,0 +1,205 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Map Komun.org</title>
|
||||||
|
<link rel="shortcut icon" href="statics/img/mapfaircoin.png" />
|
||||||
|
<link rel="icon" href="statics/img/mapfaircoin.png" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:url" content="https://map.komun.org" />
|
||||||
|
<meta property="og:site_name" content="Map Komun.org"/>
|
||||||
|
<meta property="og:title" content="Map Komun.org" />
|
||||||
|
<meta property="og:description" content="Map Komun.org | Find all FairCoin and social currency accepting places worldwide" />
|
||||||
|
<meta name="description" content="Map Komun.org | Find all FairCoin and social currency accepting places worldwide" />
|
||||||
|
<meta property="og:image" content="https://map.komun.org/statics/img/opengraph300x200.png"/>
|
||||||
|
|
||||||
|
<!-- <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> -->
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
|
||||||
|
<!--[if lte IE 8]><link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" /><![endif]-->
|
||||||
|
|
||||||
|
<!-- leafletjs marker cluster -->
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="statics/style.css" />
|
||||||
|
<link rel="stylesheet" href="statics/css/sidebar-loader.css" />
|
||||||
|
|
||||||
|
<!-- Bootstrap -->
|
||||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="sidebar" class="sidebar collapsed">
|
||||||
|
<!-- Nav tabs -->
|
||||||
|
<div class="sidebar-tabs">
|
||||||
|
<ul role="tablist">
|
||||||
|
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
|
||||||
|
<li><a href="#filter" title="Select Filters" role="tab"><i class="fa fa-filter"></i></a></li>
|
||||||
|
<li><a onclick="showLocalNodes()" title="Show LocalNodes" role="tab"><i class="fas fa-home"></i></a></li>
|
||||||
|
<li><a onclick="showCommonRoutes()" title="Show CommonRoutes" role="tab"><i class="fa fa-route"></i></a></li>
|
||||||
|
<li><a href="#search" title="Search" role="tab"><i class="fa fa-search"></i></a></li>
|
||||||
|
<li><a href="#about" role="tab"><i class="fa fa-question-circle"></i></a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ul role="tablist">
|
||||||
|
<li><a href="#settings" role="tab"><i class="fas fa-cog"></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tab panes -->
|
||||||
|
<div class="sidebar-content">
|
||||||
|
<div class="sidebar-pane" id="home">
|
||||||
|
<h1 class="sidebar-header">
|
||||||
|
Map Komun
|
||||||
|
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
|
||||||
|
</h1>
|
||||||
|
<br>
|
||||||
|
<p>
|
||||||
|
WHAT IS THE KOMUN MAP?
|
||||||
|
The <b>Komun Map</b> is a collaborative map which gives a global overview of various initiatives which strive
|
||||||
|
towards a commons economy*: places which accept FairCoin, POEs, FairCoop local nodes, community
|
||||||
|
currencies, eco-networks, food groups, routes and shared vehicles... <a href="https://komun.org" target="_blank">Visit the page!</a> Search, find, share
|
||||||
|
and contribute to generate alternatives which transform our surroundings through the Integral Revolution.
|
||||||
|
</p>
|
||||||
|
<!-- <img style="width:100px;height:100px; margin:30px;" src="img/map.svg" /> -->
|
||||||
|
<a href="statics/img/komun-ecosystem.jpg" target="_blank"><img style="width:100%;" src="statics/img/komun-ecosystem.jpg" /></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidebar-pane" id="filter">
|
||||||
|
<h1 class="sidebar-header">Filters<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
||||||
|
<br>
|
||||||
|
<div class='checkbox'>
|
||||||
|
<label><input onclick="selectAllFilters()" type='checkbox' value='' checked >
|
||||||
|
All</label>
|
||||||
|
</div>
|
||||||
|
<div id="filtersList"></div>
|
||||||
|
<hr>
|
||||||
|
<!-- <button onclick="applyFilters()" type="button" class="btn btn-outline-dark float-right">Update</button> -->
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-pane" id="search">
|
||||||
|
<h1 class="sidebar-header">Search<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
||||||
|
<br>
|
||||||
|
<p>
|
||||||
|
<input onkeydown="search()" id="searchinput" type="text" class="form-control" placeholder="Search...">
|
||||||
|
<br>
|
||||||
|
<!-- <button onclick="search()" type="button" class="btn btn-outline-dark float-right">Search</button> -->
|
||||||
|
<div id="searchResults">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-pane" id="about">
|
||||||
|
<h1 class="sidebar-header">About<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
||||||
|
<br>
|
||||||
|
<img style="width:100%;padding:10px;" src="statics/img/komun-logo-largo.png" />
|
||||||
|
<p><strong>Komun.org es un equipo cooperativo</strong> de gente experta en diferentes areas técnicas: seguridad, redes, blockchain, diseño gráfico y edición de vídeo, diseño web, Prestashop, WordPress, programación... <strong>al servicio del bien común</strong>.
|
||||||
|
</p>
|
||||||
|
<p>Siempre usamos software libre, eso es un tema irrenunciable porque nuestras herramientas, también son políticas.</p>
|
||||||
|
<p>Si formas parte de un proyecto cooperativo o tienes ideas que puedan contribuir a hacer un mundo mejor, podemos ayudarte. Simplemente cuéntanos qué necesitas y buscaremos la mejor forma de hacerlo a cambio de una retribución razonable o ¿quién sabe? si
|
||||||
|
nos enamora un proyecto, no respondemos de nuestros actos.</p>
|
||||||
|
<p><strong>Afinidades:</strong></p>
|
||||||
|
<p>Komun.org es una cooperativa autónoma al servicio del común. Colaboramos con el proyecto <a target="_blank" href="https://fair.coop">FairCoop</a>, <em>el ecosistema cooperativo de la Tierra para una economía justa</em>. Por eso aceptamos <a target="_blank" href="https://fair-coin.org">FairCoin</a>,
|
||||||
|
<em>la moneda ecológica para una economía justa</em>. Igualmente estamos abiertas a la colaboración con cualquier organización o colectivo con valores éticos, ecológicos, solidarios y orientado al bien común. Si deseas colaborar, aceptamos donaciones
|
||||||
|
en FairCoin:</p>
|
||||||
|
<p><strong>fHe67HH8WWR5vA6oPNTyefKbbuABh8sxz9</strong></p>
|
||||||
|
<p>Para cualquier donación en otra moneda o para establecer sinergias, por favor, ponte en <a target="_blank" href="https://komun.org/kontakto">contacto</a> con nosotras.</p>
|
||||||
|
<p><strong>Características:</strong></p>
|
||||||
|
<p>Somos un equipo colaborativo <strong>multidisciplinar, autogestionado y abierto</strong>. Nos gusta trabajar juntas, elaborar herramientas útiles para el común, usar y crear software libre tanto como facilitar el camino hacia un mundo mejor desde la tecnología
|
||||||
|
y los proyectos prácticos. No nos gusta la burocracia, la falta de transparencia, la verticalidad organizativa, los roles de poder ni perder el tiempo en caminos tortuosos. Somos autónomas, libres, alegres y anárquicas. Hacemos cosas, sin tonterías.
|
||||||
|
</p>
|
||||||
|
<p><strong>¿Por qué hay muchas K y nombres raros?</strong></p>
|
||||||
|
<p>Creemos que los seres humanos podemos entendernos si hay voluntad y respetamos profundamente todas las lenguas. Por ello, sentimos un amor especial por el <strong>Esperanto</strong>, una lengua auxiliar cuya única finalidad es que todos los seres humanos
|
||||||
|
puedan entenderse de una manera sencilla y eficiente, respetando a todas las lenguas nativas del mundo. Por eso, al igual que en los decorados del gueto de la película "<a target="_blank" href="http://www.delbarrio.eu/cine.htm">El Gran Dictador</a>", hay muchas palabras
|
||||||
|
en Esperanto en nuestro sitio web. La cuestión es que podamos entendernos.</p>
|
||||||
|
<hr>
|
||||||
|
<p>
|
||||||
|
Full code in <a href="https://github.com/arnaucode/faircoinmap-webapp" target="_blank">Git repo</a> 🍙
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="sidebar-pane" id="settings">
|
||||||
|
<h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
||||||
|
<br>
|
||||||
|
<p>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="exampleFormControlSelect1">Language</label>
|
||||||
|
<select onchange="changeLanguage()" class="form-control" id="lang">
|
||||||
|
<option value="ca" >Catalan</option>
|
||||||
|
<option value="de" >German</option>
|
||||||
|
<option value="el" >Greek</option>
|
||||||
|
<option value="en">English</option>
|
||||||
|
<option value="eo" >Esperanto</option>
|
||||||
|
<option value="es" >Spanish</option>
|
||||||
|
<option value="fr" >French</option>
|
||||||
|
<option value="gl" >Galician</option>
|
||||||
|
<option value="it" >Italian</option>
|
||||||
|
<option value="nl" >Dutch</option>
|
||||||
|
<option value="pt" >Portuguese</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="loadingbar">
|
||||||
|
<div class="cssload-loader-inner">
|
||||||
|
<div class="cssload-cssload-loader-line-wrap-wrap">
|
||||||
|
<div class="cssload-loader-line-wrap"></div>
|
||||||
|
</div>
|
||||||
|
<div class="cssload-cssload-loader-line-wrap-wrap">
|
||||||
|
<div class="cssload-loader-line-wrap"></div>
|
||||||
|
</div>
|
||||||
|
<div class="cssload-cssload-loader-line-wrap-wrap">
|
||||||
|
<div class="cssload-loader-line-wrap"></div>
|
||||||
|
</div>
|
||||||
|
<div class="cssload-cssload-loader-line-wrap-wrap">
|
||||||
|
<div class="cssload-loader-line-wrap"></div>
|
||||||
|
</div>
|
||||||
|
<div class="cssload-cssload-loader-line-wrap-wrap">
|
||||||
|
<div class="cssload-loader-line-wrap"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="map" class="sidebar-map"></div>
|
||||||
|
<div class="registerButtonBox">
|
||||||
|
<a href="https://map.komun.org/accounts/register/" class="btn btn-outline-dark">Register</a>
|
||||||
|
<a href="https://map.komun.org/accounts/login/" class="btn btn-outline-dark">Login</a>
|
||||||
|
</div>
|
||||||
|
<div id="rightCard" class"card">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="btn btn-light float-right" onclick="hideRightCard()">X</div>
|
||||||
|
<h5 id="rightCard-title" class="card-title"></h5>
|
||||||
|
<div id="rightCard-categories"></div>
|
||||||
|
<img id="rightCard-img" class="card-img-top hidden" src="" alt="img">
|
||||||
|
<p id="rightCard-text" class="card-text"></p>
|
||||||
|
<a id="rightCard-web" href="#" class="card-link" target="_blank"></a>
|
||||||
|
<a id="rightCard-mastodon" href="#" class="card-link" target="_blank"></a>
|
||||||
|
<a id="rightCard-twitter" href="#" class="card-link" target="_blank"></a>
|
||||||
|
<a id="rightCard-facebook" href="#" class="card-link" target="_blank"></a>
|
||||||
|
<a id="rightCard-telegram" href="#" class="card-link" target="_blank"></a>
|
||||||
|
<a id="rightCard-email" href="#" class="card-link"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
|
||||||
|
<!-- leafletjs marker cluster -->
|
||||||
|
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
|
||||||
|
<script src="statics/js/leaflet-sidebar.js"></script>
|
||||||
|
|
||||||
|
<!-- Bootstrap -->
|
||||||
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
<script src="statics/index.js"></script>
|
||||||
|
<script src="statics/localnodes.js"></script>
|
||||||
|
<script src="statics/commonroutes.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
131
statics/commonroutes.js
Normal file
131
statics/commonroutes.js
Normal file
@@ -0,0 +1,131 @@
|
|||||||
|
var urlroutes = "https://api.routes.fair.coop/api/";
|
||||||
|
|
||||||
|
var routes = [];
|
||||||
|
var routesMarkers = L.markerClusterGroup();
|
||||||
|
|
||||||
|
function getRoute(id) {
|
||||||
|
for(var i=0; i<routes.length; i++) {
|
||||||
|
console.log(routes[i]._id);
|
||||||
|
console.log(id);
|
||||||
|
if(routes[i]._id==id) {
|
||||||
|
return(routes[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return("not found");
|
||||||
|
}
|
||||||
|
function showRouteRightCard(route) {
|
||||||
|
console.log(route);
|
||||||
|
document.getElementById("rightCard-title").innerHTML = route.title;
|
||||||
|
|
||||||
|
if(route.description!=null) {
|
||||||
|
document.getElementById("rightCard-text").innerHTML = "<i>"+route.description+"</i>";
|
||||||
|
}else{
|
||||||
|
document.getElementById("rightCard-text").innerHTML = "";
|
||||||
|
}
|
||||||
|
var html = `<img style='width:30px;height:30px;'
|
||||||
|
src='statics/img/categories/transport_black.svg'
|
||||||
|
title="CommonRoute"/>`;
|
||||||
|
document.getElementById("rightCard-categories").innerHTML = html;
|
||||||
|
|
||||||
|
document.getElementById("rightCard-img").src="";
|
||||||
|
document.getElementById("rightCard-img").className = "card-img-top hidden";
|
||||||
|
document.getElementById("rightCard-web").href= "https://routes.fair.coop";
|
||||||
|
document.getElementById("rightCard-web").innerHTML = "CommonRoutes website";
|
||||||
|
document.getElementById("rightCard-mastodon").href="#";
|
||||||
|
document.getElementById("rightCard-mastodon").innerHTML="";
|
||||||
|
document.getElementById("rightCard-twitter").href="#";
|
||||||
|
document.getElementById("rightCard-twitter").innerHTML="";
|
||||||
|
document.getElementById("rightCard-facebook").href="#";
|
||||||
|
document.getElementById("rightCard-facebook").innerHTML="";
|
||||||
|
document.getElementById("rightCard-telegram").href="#";
|
||||||
|
document.getElementById("rightCard-telegram").innerHTML="";
|
||||||
|
document.getElementById("rightCard-email").href="#";
|
||||||
|
document.getElementById("rightCard-email").innerHTML="";
|
||||||
|
html = `
|
||||||
|
<p>
|
||||||
|
From: <b>` + route.from.name + `</b>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
To: <b>` + route.to.name + `</b>
|
||||||
|
</p>
|
||||||
|
<div class='float-right'>` + route.date + `</div>
|
||||||
|
`;
|
||||||
|
document.getElementById("rightCard-text").innerHTML += html;
|
||||||
|
document.getElementById("rightCard").className+=" rightCard-show";
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateRoutesMarkers() {
|
||||||
|
routesMarkers.clearLayers();
|
||||||
|
for(var i=0; i<routes.length; i++) {
|
||||||
|
console.log(routes[i]);
|
||||||
|
var lat = routes[i].from.lat;
|
||||||
|
var lon = routes[i].from.long;
|
||||||
|
var icon = L.divIcon({
|
||||||
|
className: 'markerInvisible',
|
||||||
|
iconAnchor: [20, 10],
|
||||||
|
popupAnchor: [-4, 0], // point from which the popup should open relative to the iconAnchor
|
||||||
|
html: "<img src='statics/img/gps.svg' style='width:30px;height:30px;' class='routeMarker' />"
|
||||||
|
});
|
||||||
|
var marker = L.marker([lat, lon], {icon: icon});
|
||||||
|
marker.id = routes[i]._id;
|
||||||
|
marker.bindPopup("From: <b>"+routes[i].from.name+"</b><br>" + routes[i].date);
|
||||||
|
marker.on('mouseover', function(e) {
|
||||||
|
this.openPopup();
|
||||||
|
});
|
||||||
|
marker.on('mouseout', function(e) {
|
||||||
|
this.closePopup();
|
||||||
|
});
|
||||||
|
marker.on('click', function(e) {
|
||||||
|
var route = getRoute(this.id);
|
||||||
|
showRouteRightCard(JSON.parse(JSON.stringify(route)));
|
||||||
|
});
|
||||||
|
routesMarkers.addLayer(marker);
|
||||||
|
|
||||||
|
|
||||||
|
var lat = routes[i].to.lat;
|
||||||
|
var lon = routes[i].to.long;
|
||||||
|
var icon = L.divIcon({
|
||||||
|
className: 'markerInvisible',
|
||||||
|
iconAnchor: [20, 10],
|
||||||
|
popupAnchor: [-4, 0], // point from which the popup should open relative to the iconAnchor
|
||||||
|
html: "<img src='statics/img/gps.svg' style='width:30px;height:30px;' class='routeMarker' />"
|
||||||
|
});
|
||||||
|
var marker = L.marker([lat, lon], {icon: icon});
|
||||||
|
marker.id = routes[i]._id;
|
||||||
|
marker.bindPopup("To: <b>"+routes[i].to.name+"</b><br>" + routes[i].date);
|
||||||
|
marker.on('mouseover', function(e) {
|
||||||
|
this.openPopup();
|
||||||
|
});
|
||||||
|
marker.on('mouseout', function(e) {
|
||||||
|
this.closePopup();
|
||||||
|
});
|
||||||
|
marker.on('click', function(e) {
|
||||||
|
var route = getRoute(this.id);
|
||||||
|
showRouteRightCard(JSON.parse(JSON.stringify(route)));
|
||||||
|
});
|
||||||
|
routesMarkers.addLayer(marker);
|
||||||
|
|
||||||
|
var polyline = L.polyline([
|
||||||
|
[routes[i].from.lat, routes[i].from.long],
|
||||||
|
[routes[i].to.lat, routes[i].to.long]
|
||||||
|
],
|
||||||
|
{
|
||||||
|
color: '#9575CD',
|
||||||
|
weight: 5,
|
||||||
|
opacity: .7,
|
||||||
|
dashArray: '20,15',
|
||||||
|
lineJoin: 'round'
|
||||||
|
}
|
||||||
|
).addTo(routesMarkers);
|
||||||
|
}
|
||||||
|
map.addLayer(routesMarkers);
|
||||||
|
}
|
||||||
|
function showCommonRoutes() {
|
||||||
|
$.get(urlroutes+"travels?page=", function(data){
|
||||||
|
console.log(data);
|
||||||
|
routes = data;
|
||||||
|
console.log(routes);
|
||||||
|
updateRoutesMarkers();
|
||||||
|
// document.getElementById("loadingbar").innerHTML="";
|
||||||
|
});
|
||||||
|
}
|
||||||
385
statics/css/sidebar-loader.css
Normal file
385
statics/css/sidebar-loader.css
Normal file
@@ -0,0 +1,385 @@
|
|||||||
|
|
||||||
|
|
||||||
|
.lorem {
|
||||||
|
font-style: italic;
|
||||||
|
color: #AAA;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 2000; }
|
||||||
|
.sidebar.collapsed {
|
||||||
|
width: 40px; }
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.sidebar {
|
||||||
|
top: 10px;
|
||||||
|
bottom: 10px;
|
||||||
|
transition: width 500ms; } }
|
||||||
|
@media (min-width: 768px) and (max-width: 991px) {
|
||||||
|
.sidebar {
|
||||||
|
width: 305px; } }
|
||||||
|
@media (min-width: 992px) and (max-width: 1199px) {
|
||||||
|
.sidebar {
|
||||||
|
width: 390px; } }
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.sidebar {
|
||||||
|
width: 460px; } }
|
||||||
|
|
||||||
|
.sidebar-left {
|
||||||
|
left: 0; }
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.sidebar-left {
|
||||||
|
left: 10px; } }
|
||||||
|
|
||||||
|
.sidebar-right {
|
||||||
|
right: 0; }
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.sidebar-right {
|
||||||
|
right: 10px; } }
|
||||||
|
|
||||||
|
.sidebar-tabs {
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fff; }
|
||||||
|
.sidebar-left .sidebar-tabs {
|
||||||
|
left: 0; }
|
||||||
|
.sidebar-right .sidebar-tabs {
|
||||||
|
right: 0; }
|
||||||
|
.sidebar-tabs, .sidebar-tabs > ul {
|
||||||
|
position: absolute;
|
||||||
|
width: 40px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none; }
|
||||||
|
.sidebar-tabs > li, .sidebar-tabs > ul > li {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 12pt;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 80ms; }
|
||||||
|
.sidebar-tabs > li:hover, .sidebar-tabs > ul > li:hover {
|
||||||
|
color: #000;
|
||||||
|
background-color: #eee; }
|
||||||
|
.sidebar-tabs > li.active, .sidebar-tabs > ul > li.active {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #343a40; }
|
||||||
|
.sidebar-tabs > li.disabled, .sidebar-tabs > ul > li.disabled {
|
||||||
|
color: rgba(51, 51, 51, 0.4); }
|
||||||
|
.sidebar-tabs > li.disabled:hover, .sidebar-tabs > ul > li.disabled:hover {
|
||||||
|
background: transparent; }
|
||||||
|
.sidebar-tabs > li.disabled > a, .sidebar-tabs > ul > li.disabled > a {
|
||||||
|
cursor: default; }
|
||||||
|
.sidebar-tabs > li > a, .sidebar-tabs > ul > li > a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 40px;
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: center; }
|
||||||
|
.sidebar-tabs > ul + ul {
|
||||||
|
bottom: 0; }
|
||||||
|
|
||||||
|
.sidebar-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(255, 255, 255, 0.95);
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto; }
|
||||||
|
.sidebar-left .sidebar-content {
|
||||||
|
left: 40px;
|
||||||
|
right: 0; }
|
||||||
|
.sidebar-right .sidebar-content {
|
||||||
|
left: 0;
|
||||||
|
right: 40px; }
|
||||||
|
.sidebar.collapsed > .sidebar-content {
|
||||||
|
overflow-y: hidden; }
|
||||||
|
|
||||||
|
.sidebar-pane {
|
||||||
|
display: none;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px 20px; }
|
||||||
|
.sidebar-pane.active {
|
||||||
|
display: block; }
|
||||||
|
@media (min-width: 768px) and (max-width: 991px) {
|
||||||
|
.sidebar-pane {
|
||||||
|
min-width: 265px; } }
|
||||||
|
@media (min-width: 992px) and (max-width: 1199px) {
|
||||||
|
.sidebar-pane {
|
||||||
|
min-width: 350px; } }
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.sidebar-pane {
|
||||||
|
min-width: 420px; } }
|
||||||
|
|
||||||
|
.sidebar-header {
|
||||||
|
margin: -10px -20px 0;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 20px;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 14.4pt;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #343a40; }
|
||||||
|
.sidebar-right .sidebar-header {
|
||||||
|
padding-left: 40px; }
|
||||||
|
|
||||||
|
.sidebar-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer; }
|
||||||
|
.sidebar-left .sidebar-close {
|
||||||
|
right: 0; }
|
||||||
|
.sidebar-right .sidebar-close {
|
||||||
|
left: 0; }
|
||||||
|
|
||||||
|
.sidebar-left ~ .sidebar-map {
|
||||||
|
margin-left: 40px; }
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.sidebar-left ~ .sidebar-map {
|
||||||
|
margin-left: 0; } }
|
||||||
|
|
||||||
|
.sidebar-right ~ .sidebar-map {
|
||||||
|
margin-right: 40px; }
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.sidebar-right ~ .sidebar-map {
|
||||||
|
margin-right: 0; } }
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); }
|
||||||
|
.sidebar.leaflet-touch {
|
||||||
|
box-shadow: none;
|
||||||
|
border-right: 2px solid rgba(0, 0, 0, 0.2); }
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.sidebar {
|
||||||
|
border-radius: 4px; }
|
||||||
|
.sidebar.leaflet-touch {
|
||||||
|
border: 2px solid rgba(0, 0, 0, 0.2); } }
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.sidebar-left ~ .sidebar-map .leaflet-left {
|
||||||
|
transition: left 500ms; } }
|
||||||
|
|
||||||
|
@media (min-width: 768px) and (max-width: 991px) {
|
||||||
|
.sidebar-left ~ .sidebar-map .leaflet-left {
|
||||||
|
left: 315px; } }
|
||||||
|
|
||||||
|
@media (min-width: 992px) and (max-width: 1199px) {
|
||||||
|
.sidebar-left ~ .sidebar-map .leaflet-left {
|
||||||
|
left: 400px; } }
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.sidebar-left ~ .sidebar-map .leaflet-left {
|
||||||
|
left: 470px; } }
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.sidebar-left.collapsed ~ .sidebar-map .leaflet-left {
|
||||||
|
left: 50px; } }
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.sidebar-right ~ .sidebar-map .leaflet-right {
|
||||||
|
transition: right 500ms; } }
|
||||||
|
|
||||||
|
@media (min-width: 768px) and (max-width: 991px) {
|
||||||
|
.sidebar-right ~ .sidebar-map .leaflet-right {
|
||||||
|
right: 315px; } }
|
||||||
|
|
||||||
|
@media (min-width: 992px) and (max-width: 1199px) {
|
||||||
|
.sidebar-right ~ .sidebar-map .leaflet-right {
|
||||||
|
right: 400px; } }
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.sidebar-right ~ .sidebar-map .leaflet-right {
|
||||||
|
right: 470px; } }
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.sidebar-right.collapsed ~ .sidebar-map .leaflet-right {
|
||||||
|
right: 50px; } }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#loadingbar {
|
||||||
|
position:absolute;
|
||||||
|
top:40%;
|
||||||
|
left:45%;
|
||||||
|
z-index:2000;
|
||||||
|
}
|
||||||
|
.cssload-loader-inner {
|
||||||
|
bottom: 0;
|
||||||
|
height: 58px;
|
||||||
|
left: 0;
|
||||||
|
margin: auto;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 97px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cssload-cssload-loader-line-wrap-wrap {
|
||||||
|
animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
|
||||||
|
-o-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
|
||||||
|
-ms-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
|
||||||
|
-webkit-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
|
||||||
|
-moz-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-o-box-sizing: border-box;
|
||||||
|
-ms-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
height: 49px;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
transform-origin: 50% 100%;
|
||||||
|
-o-transform-origin: 50% 100%;
|
||||||
|
-ms-transform-origin: 50% 100%;
|
||||||
|
-webkit-transform-origin: 50% 100%;
|
||||||
|
-moz-transform-origin: 50% 100%;
|
||||||
|
width: 97px;
|
||||||
|
}
|
||||||
|
.cssload-loader-line-wrap {
|
||||||
|
border: 4px solid transparent;
|
||||||
|
border-radius: 100%;
|
||||||
|
-o-border-radius: 100%;
|
||||||
|
-ms-border-radius: 100%;
|
||||||
|
-webkit-border-radius: 100%;
|
||||||
|
-moz-border-radius: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-o-box-sizing: border-box;
|
||||||
|
-ms-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
height: 97px;
|
||||||
|
left: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 97px;
|
||||||
|
}
|
||||||
|
.cssload-cssload-loader-line-wrap-wrap:nth-child(1) { animation-delay: -57.5ms;
|
||||||
|
-o-animation-delay: -57.5ms;
|
||||||
|
-ms-animation-delay: -57.5ms;
|
||||||
|
-webkit-animation-delay: -57.5ms;
|
||||||
|
-moz-animation-delay: -57.5ms; }
|
||||||
|
.cssload-cssload-loader-line-wrap-wrap:nth-child(2) { animation-delay: -115ms;
|
||||||
|
-o-animation-delay: -115ms;
|
||||||
|
-ms-animation-delay: -115ms;
|
||||||
|
-webkit-animation-delay: -115ms;
|
||||||
|
-moz-animation-delay: -115ms; }
|
||||||
|
.cssload-cssload-loader-line-wrap-wrap:nth-child(3) { animation-delay: -172.5ms;
|
||||||
|
-o-animation-delay: -172.5ms;
|
||||||
|
-ms-animation-delay: -172.5ms;
|
||||||
|
-webkit-animation-delay: -172.5ms;
|
||||||
|
-moz-animation-delay: -172.5ms; }
|
||||||
|
.cssload-cssload-loader-line-wrap-wrap:nth-child(4) { animation-delay: -230ms;
|
||||||
|
-o-animation-delay: -230ms;
|
||||||
|
-ms-animation-delay: -230ms;
|
||||||
|
-webkit-animation-delay: -230ms;
|
||||||
|
-moz-animation-delay: -230ms; }
|
||||||
|
.cssload-cssload-loader-line-wrap-wrap:nth-child(5) { animation-delay: -287.5ms;
|
||||||
|
-o-animation-delay: -287.5ms;
|
||||||
|
-ms-animation-delay: -287.5ms;
|
||||||
|
-webkit-animation-delay: -287.5ms;
|
||||||
|
-moz-animation-delay: -287.5ms; }
|
||||||
|
|
||||||
|
.cssload-cssload-loader-line-wrap-wrap:nth-child(1) .cssload-loader-line-wrap {
|
||||||
|
border-color: rgb(234,71,71);
|
||||||
|
height: 88px;
|
||||||
|
width: 88px;
|
||||||
|
top: 7px;
|
||||||
|
}
|
||||||
|
.cssload-cssload-loader-line-wrap-wrap:nth-child(2) .cssload-loader-line-wrap {
|
||||||
|
border-color: rgb(234,234,71);
|
||||||
|
height: 74px;
|
||||||
|
width: 74px;
|
||||||
|
top: 14px;
|
||||||
|
}
|
||||||
|
.cssload-cssload-loader-line-wrap-wrap:nth-child(3) .cssload-loader-line-wrap {
|
||||||
|
border-color: rgb(71,234,71);
|
||||||
|
height: 60px;
|
||||||
|
width: 60px;
|
||||||
|
top: 20px;
|
||||||
|
}
|
||||||
|
.cssload-cssload-loader-line-wrap-wrap:nth-child(4) .cssload-loader-line-wrap {
|
||||||
|
border-color: rgb(71,234,234);
|
||||||
|
height: 47px;
|
||||||
|
width: 47px;
|
||||||
|
top: 27px;
|
||||||
|
}
|
||||||
|
.cssload-cssload-loader-line-wrap-wrap:nth-child(5) .cssload-loader-line-wrap {
|
||||||
|
border-color: rgb(71,71,234);
|
||||||
|
height: 33px;
|
||||||
|
width: 33px;
|
||||||
|
top: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes cssload-spin {
|
||||||
|
0%, 15% {
|
||||||
|
transform: rotate(0);
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-o-keyframes cssload-spin {
|
||||||
|
0%, 15% {
|
||||||
|
-o-transform: rotate(0);
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-o-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-ms-keyframes cssload-spin {
|
||||||
|
0%, 15% {
|
||||||
|
-ms-transform: rotate(0);
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-ms-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes cssload-spin {
|
||||||
|
0%, 15% {
|
||||||
|
-webkit-transform: rotate(0);
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes cssload-spin {
|
||||||
|
0%, 15% {
|
||||||
|
-moz-transform: rotate(0);
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-moz-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
371
statics/index.js
Normal file
371
statics/index.js
Normal file
@@ -0,0 +1,371 @@
|
|||||||
|
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);
|
||||||
214
statics/js/leaflet-sidebar.js
Normal file
214
statics/js/leaflet-sidebar.js
Normal file
@@ -0,0 +1,214 @@
|
|||||||
|
/**
|
||||||
|
* @name Sidebar
|
||||||
|
* @class L.Control.Sidebar
|
||||||
|
* @extends L.Control
|
||||||
|
* @param {string} id - The id of the sidebar element (without the # character)
|
||||||
|
* @param {Object} [options] - Optional options object
|
||||||
|
* @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
|
||||||
|
* @see L.control.sidebar
|
||||||
|
*/
|
||||||
|
L.Control.Sidebar = L.Control.extend(/** @lends L.Control.Sidebar.prototype */ {
|
||||||
|
includes: (L.Evented.prototype || L.Mixin.Events),
|
||||||
|
|
||||||
|
options: {
|
||||||
|
position: 'left'
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function (id, options) {
|
||||||
|
var i, child;
|
||||||
|
|
||||||
|
L.setOptions(this, options);
|
||||||
|
|
||||||
|
// Find sidebar HTMLElement
|
||||||
|
this._sidebar = L.DomUtil.get(id);
|
||||||
|
|
||||||
|
// Attach .sidebar-left/right class
|
||||||
|
L.DomUtil.addClass(this._sidebar, 'sidebar-' + this.options.position);
|
||||||
|
|
||||||
|
// Attach touch styling if necessary
|
||||||
|
if (L.Browser.touch)
|
||||||
|
L.DomUtil.addClass(this._sidebar, 'leaflet-touch');
|
||||||
|
|
||||||
|
// Find sidebar > div.sidebar-content
|
||||||
|
for (i = this._sidebar.children.length - 1; i >= 0; i--) {
|
||||||
|
child = this._sidebar.children[i];
|
||||||
|
if (child.tagName == 'DIV' &&
|
||||||
|
L.DomUtil.hasClass(child, 'sidebar-content'))
|
||||||
|
this._container = child;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Find sidebar ul.sidebar-tabs > li, sidebar .sidebar-tabs > ul > li
|
||||||
|
this._tabitems = this._sidebar.querySelectorAll('ul.sidebar-tabs > li, .sidebar-tabs > ul > li');
|
||||||
|
for (i = this._tabitems.length - 1; i >= 0; i--) {
|
||||||
|
this._tabitems[i]._sidebar = this;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Find sidebar > div.sidebar-content > div.sidebar-pane
|
||||||
|
this._panes = [];
|
||||||
|
this._closeButtons = [];
|
||||||
|
for (i = this._container.children.length - 1; i >= 0; i--) {
|
||||||
|
child = this._container.children[i];
|
||||||
|
if (child.tagName == 'DIV' &&
|
||||||
|
L.DomUtil.hasClass(child, 'sidebar-pane')) {
|
||||||
|
this._panes.push(child);
|
||||||
|
|
||||||
|
var closeButtons = child.querySelectorAll('.sidebar-close');
|
||||||
|
for (var j = 0, len = closeButtons.length; j < len; j++)
|
||||||
|
this._closeButtons.push(closeButtons[j]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add this sidebar to the specified map.
|
||||||
|
*
|
||||||
|
* @param {L.Map} map
|
||||||
|
* @returns {Sidebar}
|
||||||
|
*/
|
||||||
|
addTo: function (map) {
|
||||||
|
var i, child;
|
||||||
|
|
||||||
|
this._map = map;
|
||||||
|
|
||||||
|
for (i = this._tabitems.length - 1; i >= 0; i--) {
|
||||||
|
child = this._tabitems[i];
|
||||||
|
var sub = child.querySelector('a');
|
||||||
|
if (sub.hasAttribute('href') && sub.getAttribute('href').slice(0,1) == '#') {
|
||||||
|
L.DomEvent
|
||||||
|
.on(sub, 'click', L.DomEvent.preventDefault )
|
||||||
|
.on(sub, 'click', this._onClick, child);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (i = this._closeButtons.length - 1; i >= 0; i--) {
|
||||||
|
child = this._closeButtons[i];
|
||||||
|
L.DomEvent.on(child, 'click', this._onCloseClick, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @deprecated - Please use remove() instead of removeFrom(), as of Leaflet 0.8-dev, the removeFrom() has been replaced with remove()
|
||||||
|
* Removes this sidebar from the map.
|
||||||
|
* @param {L.Map} map
|
||||||
|
* @returns {Sidebar}
|
||||||
|
*/
|
||||||
|
removeFrom: function(map) {
|
||||||
|
console.log('removeFrom() has been deprecated, please use remove() instead as support for this function will be ending soon.');
|
||||||
|
this.remove(map);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove this sidebar from the map.
|
||||||
|
*
|
||||||
|
* @param {L.Map} map
|
||||||
|
* @returns {Sidebar}
|
||||||
|
*/
|
||||||
|
remove: function (map) {
|
||||||
|
var i, child;
|
||||||
|
|
||||||
|
this._map = null;
|
||||||
|
|
||||||
|
for (i = this._tabitems.length - 1; i >= 0; i--) {
|
||||||
|
child = this._tabitems[i];
|
||||||
|
L.DomEvent.off(child.querySelector('a'), 'click', this._onClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (i = this._closeButtons.length - 1; i >= 0; i--) {
|
||||||
|
child = this._closeButtons[i];
|
||||||
|
L.DomEvent.off(child, 'click', this._onCloseClick, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Open sidebar (if necessary) and show the specified tab.
|
||||||
|
*
|
||||||
|
* @param {string} id - The id of the tab to show (without the # character)
|
||||||
|
*/
|
||||||
|
open: function(id) {
|
||||||
|
var i, child;
|
||||||
|
|
||||||
|
// hide old active contents and show new content
|
||||||
|
for (i = this._panes.length - 1; i >= 0; i--) {
|
||||||
|
child = this._panes[i];
|
||||||
|
if (child.id == id)
|
||||||
|
L.DomUtil.addClass(child, 'active');
|
||||||
|
else if (L.DomUtil.hasClass(child, 'active'))
|
||||||
|
L.DomUtil.removeClass(child, 'active');
|
||||||
|
}
|
||||||
|
|
||||||
|
// remove old active highlights and set new highlight
|
||||||
|
for (i = this._tabitems.length - 1; i >= 0; i--) {
|
||||||
|
child = this._tabitems[i];
|
||||||
|
if (child.querySelector('a').hash == '#' + id)
|
||||||
|
L.DomUtil.addClass(child, 'active');
|
||||||
|
else if (L.DomUtil.hasClass(child, 'active'))
|
||||||
|
L.DomUtil.removeClass(child, 'active');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.fire('content', { id: id });
|
||||||
|
|
||||||
|
// open sidebar (if necessary)
|
||||||
|
if (L.DomUtil.hasClass(this._sidebar, 'collapsed')) {
|
||||||
|
this.fire('opening');
|
||||||
|
L.DomUtil.removeClass(this._sidebar, 'collapsed');
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Close the sidebar (if necessary).
|
||||||
|
*/
|
||||||
|
close: function() {
|
||||||
|
// remove old active highlights
|
||||||
|
for (var i = this._tabitems.length - 1; i >= 0; i--) {
|
||||||
|
var child = this._tabitems[i];
|
||||||
|
if (L.DomUtil.hasClass(child, 'active'))
|
||||||
|
L.DomUtil.removeClass(child, 'active');
|
||||||
|
}
|
||||||
|
|
||||||
|
// close sidebar
|
||||||
|
if (!L.DomUtil.hasClass(this._sidebar, 'collapsed')) {
|
||||||
|
this.fire('closing');
|
||||||
|
L.DomUtil.addClass(this._sidebar, 'collapsed');
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
_onClick: function() {
|
||||||
|
if (L.DomUtil.hasClass(this, 'active'))
|
||||||
|
this._sidebar.close();
|
||||||
|
else if (!L.DomUtil.hasClass(this, 'disabled'))
|
||||||
|
this._sidebar.open(this.querySelector('a').hash.slice(1));
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
_onCloseClick: function () {
|
||||||
|
this.close();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a new sidebar.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* var sidebar = L.control.sidebar('sidebar').addTo(map);
|
||||||
|
*
|
||||||
|
* @param {string} id - The id of the sidebar element (without the # character)
|
||||||
|
* @param {Object} [options] - Optional options object
|
||||||
|
* @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
|
||||||
|
* @returns {Sidebar} A new sidebar instance
|
||||||
|
*/
|
||||||
|
L.control.sidebar = function (id, options) {
|
||||||
|
return new L.Control.Sidebar(id, options);
|
||||||
|
};
|
||||||
87
statics/localnodes.js
Normal file
87
statics/localnodes.js
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
var urlln = "https://fairplayground.info/datasources/FCLN/FCLN.json";
|
||||||
|
|
||||||
|
var lns = [];
|
||||||
|
var lnMarkers = L.markerClusterGroup();
|
||||||
|
|
||||||
|
|
||||||
|
function getLocalNode(id) {
|
||||||
|
for(var i=0; i<lns.length; i++) {
|
||||||
|
if(lns[i].id==id) {
|
||||||
|
return(lns[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return("not found");
|
||||||
|
}
|
||||||
|
|
||||||
|
function showLocalNodeRightCard(ln) {
|
||||||
|
console.log(ln);
|
||||||
|
document.getElementById("rightCard-title").innerHTML = ln.name;
|
||||||
|
if(ln.description!=null) {
|
||||||
|
document.getElementById("rightCard-text").innerHTML = ln.description;
|
||||||
|
}else{
|
||||||
|
document.getElementById("rightCard-text").innerHTML = "";
|
||||||
|
}
|
||||||
|
var html = `<img style='width:30px;height:30px;'
|
||||||
|
src='`+ ln.icon + `'
|
||||||
|
title="LocalNode"/>`;
|
||||||
|
document.getElementById("rightCard-categories").innerHTML = html;
|
||||||
|
// if(ln.img!=null) {
|
||||||
|
document.getElementById("rightCard-img").src="";
|
||||||
|
document.getElementById("rightCard-img").className = "card-img-top hidden";
|
||||||
|
// } else {
|
||||||
|
// document.getElementById("rightCard-img").src=ln.icon;
|
||||||
|
// document.getElementById("rightCard-img").className = "card-img-top";
|
||||||
|
// }
|
||||||
|
document.getElementById("rightCard-web").href= "#";
|
||||||
|
document.getElementById("rightCard-web").innerHTML = "";
|
||||||
|
document.getElementById("rightCard-mastodon").href="#";
|
||||||
|
document.getElementById("rightCard-mastodon").innerHTML="";
|
||||||
|
document.getElementById("rightCard-twitter").href="#";
|
||||||
|
document.getElementById("rightCard-twitter").innerHTML="";
|
||||||
|
document.getElementById("rightCard-facebook").href="#";
|
||||||
|
document.getElementById("rightCard-facebook").innerHTML="";
|
||||||
|
document.getElementById("rightCard-telegram").href="#";
|
||||||
|
document.getElementById("rightCard-telegram").innerHTML="";
|
||||||
|
document.getElementById("rightCard-email").href="#";
|
||||||
|
document.getElementById("rightCard-email").innerHTML="";
|
||||||
|
document.getElementById("rightCard").className+=" rightCard-show";
|
||||||
|
}
|
||||||
|
function updateLocalNodesMarkers() {
|
||||||
|
lnMarkers.clearLayers();
|
||||||
|
for(var i=0; i<lns.length; i++) {
|
||||||
|
var lat = lns[i].latitude;
|
||||||
|
var lon = lns[i].longitude;
|
||||||
|
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;' class='marker lnMarker' src='statics/img/categories/faircoop_black.svg' />"
|
||||||
|
});
|
||||||
|
var marker = L.marker([lat, lon], {icon: icon});
|
||||||
|
marker.id = lns[i].id;
|
||||||
|
if(lns[i].description!=null) {
|
||||||
|
marker.bindPopup("<b>"+lns[i].name+"</b><br><i>"+lns[i].description+"</i>");
|
||||||
|
} else {
|
||||||
|
marker.bindPopup("<b>"+lns[i].name+"</b>");
|
||||||
|
}
|
||||||
|
marker.on('mouseover', function(e) {
|
||||||
|
this.openPopup();
|
||||||
|
});
|
||||||
|
marker.on('mouseout', function(e) {
|
||||||
|
this.closePopup();
|
||||||
|
});
|
||||||
|
marker.on('click', function(e) {
|
||||||
|
var ln = getLocalNode(this.id);
|
||||||
|
showLocalNodeRightCard(ln);
|
||||||
|
});
|
||||||
|
lnMarkers.addLayer(marker);
|
||||||
|
}
|
||||||
|
map.addLayer(lnMarkers);
|
||||||
|
}
|
||||||
|
function showLocalNodes() {
|
||||||
|
$.get(urlln, function(data){
|
||||||
|
console.log(data);
|
||||||
|
lns = data;
|
||||||
|
console.log(routes);
|
||||||
|
updateLocalNodesMarkers();
|
||||||
|
});
|
||||||
|
}
|
||||||
77
statics/style.css
Normal file
77
statics/style.css
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body, #map {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
.registerButtonBox {
|
||||||
|
position: absolute;
|
||||||
|
right: 15px;
|
||||||
|
top: 15px;
|
||||||
|
z-index: 2000;
|
||||||
|
}
|
||||||
|
.lvl2 {
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
#rightCard {
|
||||||
|
position: absolute;
|
||||||
|
right: -300px;
|
||||||
|
top: 0;
|
||||||
|
max-width: 300px;
|
||||||
|
max-height: 100%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
z-index: 2000;
|
||||||
|
background: #ffffff;
|
||||||
|
-webkit-transition: all 0.5s; /* Safari */
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
.rightCard-show {
|
||||||
|
right: 0px!important;
|
||||||
|
}
|
||||||
|
.hidden {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.marker {
|
||||||
|
background: #ffffff;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
/* box-shadow: 0 0 5px 5px rgba(66, 134, 244, 0.2); */
|
||||||
|
-webkit-transition: all 0.2s; /* Safari */
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
/* .marker:hover {
|
||||||
|
border: 2px solid #000000;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.routeMarker {
|
||||||
|
background: #ffffff;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid rgb(65, 202, 244);
|
||||||
|
box-shadow: 0 0 5px 5px rgba(65, 202, 244, 0.2);
|
||||||
|
-webkit-transition: all 0.2s; /* Safari */
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.lnMarker {
|
||||||
|
background: #ffffff;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid rgb(43, 216, 129);
|
||||||
|
box-shadow: 0 0 5px 5px rgba(43, 216, 129, 0.2);
|
||||||
|
-webkit-transition: all 0.2s; /* Safari */
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.marker-red {
|
||||||
|
box-shadow: 0 0 5px 5px rgba(244, 78, 66, 0.2)!important;
|
||||||
|
}
|
||||||
|
.marker-blue {
|
||||||
|
box-shadow: 0 0 5px 5px rgba(63, 154, 244, 0.2)!important;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user