diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..2a7a987
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+statics/img
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..cf351db
--- /dev/null
+++ b/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/
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..522b801
--- /dev/null
+++ b/index.html
@@ -0,0 +1,205 @@
+
+
+
+ Map Komun.org
+
+
+
X
+
+
+
+
+
+
+
+
+
+
+
+
";
+ }else{
+ document.getElementById("rightCard-text").innerHTML = "";
+ }
+ var html = `
+ From: ` + route.from.name + `
+
+
+ To: ` + route.to.name + `
+
+ ` + route.date + `
+ `;
+ document.getElementById("rightCard-text").innerHTML += html;
+ document.getElementById("rightCard").className+=" rightCard-show";
+}
+
+function updateRoutesMarkers() {
+ routesMarkers.clearLayers();
+ for(var i=0; i"+routes[i].from.name+" "+routes[i].to.name+" ";
+ }else{
+ document.getElementById("rightCard-text").innerHTML = "";
+ }
+ // gallery images
+ if(item.properties.gallery_images.length>0) {
+ var html = "";
+ html += `
+
`;
+
+ for(var i=0; i`;
+ } else {
+ html += `
+
`;
+ for(var i=0; i
`;
+ } else {
+ html += ``;
+ }
+ html += `
+
+
+
+
+ Previous
+
+
+ Next
+
+
"+item.properties.body+"
";
+ document.getElementById("rightCard").className+=" rightCard-show";
+}
+function hideRightCard() {
+ document.getElementById("rightCard").className ="card";
+}
+function updateMarkers() {
+ markers.clearLayers();
+ for(var i=0; i"+items[i].properties.name+" "+items[i].properties.description+" ");
+ } else {
+ marker.bindPopup(""+items[i].properties.name+" ");
+ }
+ 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
+
+
` + items[i].properties.name + `
+ 3 days ago
+ `;
+ if(items[i].properties.description!=null) {
+ html += `` + items[i].properties.description + `
`;
+ }
+ html += `
+
+ `;
+ }
+ html += "";
+ 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 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);
+};
diff --git a/statics/localnodes.js b/statics/localnodes.js
new file mode 100644
index 0000000..29b9225
--- /dev/null
+++ b/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[i].name+" "+lns[i].description+" ");
+ } else {
+ marker.bindPopup(""+lns[i].name+" ");
+ }
+ 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();
+ });
+}
diff --git a/statics/style.css b/statics/style.css
new file mode 100644
index 0000000..8e3d194
--- /dev/null
+++ b/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;
+}
+ 
+ 
`;
+ 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 = `
+ 
"
+ });
+ var marker = L.marker([lat, lon], {icon: icon});
+ marker.id = routes[i]._id;
+ marker.bindPopup("To: "+routes[i].to.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 = "";
+ } 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 = "";
+ } 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 = "";
+ } 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 = "";
+ } 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 = "";
+ } else {
+ document.getElementById("rightCard-email").href="#";
+ document.getElementById("rightCard-email").innerHTML="";
+ }
+ document.getElementById("rightCard-text").innerHTML += "![](statics/img/categories/" + items[i].properties.icon_name + "_black.svg){kind=icon}
"
+ });
+ var marker = L.marker([lat, lon], {icon: icon});
+ marker.id = items[i].properties.slug;
+ if(items[i].properties.description!=null) {
+ marker.bindPopup(""+items[i].properties.name+"