arnaucube
arnaucube/faircoinmap-webappPublic Self-hosted repository
map
arnaucode arnaucode@gmail.com
Tue, 14 Aug 2018 07:23:31 +0200
commit

91715bfb378fa24f3f97ffbeae4818d156142f69

parent

d8221ccc4cd772beda42aac141db86a656feea35

A .gitignore

@@ -0,0 +1,1 @@

+statics/img
A README.md

@@ -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/
A index.html

@@ -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>
A statics/commonroutes.js

@@ -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=""; + }); +}
A statics/css/sidebar-loader.css

@@ -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); + } +}
A statics/index.js

@@ -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 &copy; 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);
A statics/js/leaflet-sidebar.js

@@ -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); +};
A statics/localnodes.js

@@ -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(); + }); +}
A statics/style.css

@@ -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; +}