Update map to support planb.sv

assets/crypto-map.js

@@ -39,25 +39,37 @@ function BfxCryptoMap(configuration) {
   const {
     isMobile,
     assetUrl,
+    themeAssetUrl,
     mapboxKey,
     mapboxUsername,
     merchantDataUrl,
     containerId = 'bfx-crypto-map',
     translations,
+    region,
+    theme,
+    defaultLat,
+    defaultLng,
+    defaultZoomLevel,
   } = configuration;
 
   this.mapboxUsername = mapboxUsername
   this.isMobile = isMobile;
   this.assetUrl = assetUrl;
+  this.themeAssetUrl = themeAssetUrl;
   this.mapboxKey = mapboxKey;
   this.merchantDataUrl = merchantDataUrl;
   this.containerId = containerId;
   this.translations = translations;
+  this.region = region;
+  this.theme = theme;
+  this.defaultLat = defaultLat ? parseFloat(defaultLat) : 46.005314;
+  this.defaultLng = defaultLng ? parseFloat(defaultLng) : 8.953802;
+  this.defaultZoomLevel = defaultZoomLevel ? parseInt(defaultZoomLevel) : 17;
 
   this.currentPin = null;
   this.needRelocate = false;
   this.MERCHANT_DATA = [];
-  this.logoPlaceholder = assetUrl + '/placeholder.png';
+  this.logoPlaceholder = themeAssetUrl + '/placeholder.png';
   this.tokenMap = {
     BTC: {
       name: 'BTC Lightning',
@@ -81,7 +93,7 @@ function BfxCryptoMap(configuration) {
       name: 'NAKA Card',
       width: 22,
       height: 22,
-      icon: assetUrl + '/NAKA.svg',
+      icon: assetUrl + '/NAKA_CARD.svg',
     },
   };
 
@@ -100,7 +112,7 @@ BfxCryptoMap.prototype.setup = function() {
       maxZoom: 19,
       minZoom: 5,
     })
-    .setView([46.005314, 8.953802], 17);
+    .setView([self.defaultLat, self.defaultLng], self.defaultZoomLevel);
 
   map.attributionControl.setPrefix('© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="https://leafletjs.com" title="A JavaScript library for interactive maps">Leaflet</a>');
 
@@ -128,7 +140,7 @@ BfxCryptoMap.prototype.setup = function() {
   });
 
   const currentPinIcon = L.icon({
-    iconUrl: this.assetUrl + '/current-pin.png',
+    iconUrl: this.themeAssetUrl + '/current-pin.png',
     iconSize: [32, 32],
     iconAnchor: [16, 16],
   });
@@ -157,7 +169,7 @@ BfxCryptoMap.prototype.setup = function() {
         },
       );
 
-      img.src = self.assetUrl + '/location.png';
+      img.src = self.themeAssetUrl + '/location.png';
       img.style.width = '18px';
       img.style.height = '18px';
 
@@ -308,7 +320,11 @@ BfxCryptoMap.prototype.renderMarkers = function(data) {
 BfxCryptoMap.prototype.fetchData = function() {
   const self = this;
   jQuery
-    .ajax({ method: 'POST', url: this.merchantDataUrl })
+    .ajax({
+      method: 'POST',
+      url: this.merchantDataUrl,
+      data: { region: self.region }
+    })
     .done(function(data) {
       const items = data.items;
 
@@ -350,15 +366,15 @@ BfxCryptoMap.prototype.onMarkerClick = function(e) {
     const cityDesc = '<p>' + merchant.city + ', ' + BfxCryptoMap.utils.displayCountry(merchant.country) + '</p>';
     const description = phoneDesc + addressDesc + cityDesc;
     const website = merchant.website
-      ? '<a href="' + merchant.website + '" target="_blank"><img src="' + self.assetUrl + '/globe.svg" height="24" /></a>'
+      ? '<a href="' + merchant.website + '" target="_blank"><img src="' + self.themeAssetUrl + '/globe.svg" height="24" /></a>'
       : '';
 
     const phone = self.isMobile && merchant.phone
-      ? '<a href="tel:' + merchant.phone  + '"><img src="' + self.assetUrl + '/phone.svg" height="24" /></a>'
+      ? '<a href="tel:' + merchant.phone  + '"><img src="' + self.themeAssetUrl + '/phone.svg" height="24" /></a>'
       : ''
 
     const latLng = merchant.lat + ',' + merchant.lng;
-    const direction = '<a href="https://maps.google.com/?q=' + latLng +'" target="_blank"><img src="' + self.assetUrl + '/direction.svg" height="24" /></a>';
+    const direction = '<a href="https://maps.google.com/?q=' + latLng +'" target="_blank"><img src="' + self.themeAssetUrl + '/direction.svg" height="24" /></a>';
     const websiteInner = phone + website + direction;
 
     const popupTemplate = document.getElementById('bfx-crypto-popup-template');

assets/styles.css

@@ -1,5 +1,10 @@
 .bfx-crypto-container {
   position: relative;
+  --bfx-crypto-main-color: 200, 82, 99;
+}
+
+.bfx-crypto-container.bfx-crypto-theme-blue {
+  --bfx-crypto-main-color: 46, 77, 161;
 }
 
 .bfx-marker-popup .header {
@@ -65,7 +70,7 @@
 }
 
 .bfx-marker-popup .tag {
-  color: #C85263;
+  color: rgb(var(--bfx-crypto-main-color));
   background: rgba(205, 188, 190, 0.16);
   border-radius: 6px;
   padding: 3px 9px;
@@ -80,7 +85,7 @@
 }
 
 .bfx-marker-popup .token {
-  color: #C85263;
+  color: rgb(var(--bfx-crypto-main-color));
   background: rgba(205, 188, 190, 0.16);
   border-radius: 10px;
   padding: 3px 6px;
@@ -146,7 +151,7 @@
 #bfx-crypto-clear-filter-btn {
   font-weight: 700;
   font-size: 13px;
-  color: #C85263;
+  color: rgb(var(--bfx-crypto-main-color));
   gap: 8px;
   padding-left: 12px;
   padding-right: 12px;
@@ -306,7 +311,7 @@
   width: 14px;
   height: 14px;
   border-radius: 8px;
-  background: #C85263;
+  background: rgb(var(--bfx-crypto-main-color));
   color: #fff;
   font-size: 9px;
   line-height: 14px;
@@ -324,7 +329,7 @@
   padding: 12px;
   box-sizing: border-box;
   gap: 5px;
-  background: rgba(200, 82, 99, 0.06);
+  background: rgba(var(--bfx-crypto-main-color), 0.06);
   border-radius: 6px;
   height: 40px;
 }
@@ -350,8 +355,8 @@
 }
 
 .bfx-crypto-filter .filter-btn {
-  background: rgba(200, 82, 99, 0.06);
-  color: rgba(200, 82, 99, 1);
+  background: rgba(var(--bfx-crypto-main-color), 0.06);
+  color: rgba(var(--bfx-crypto-main-color), 1);
   border: 0;
   border-radius: 6px;
   height: 40px;
@@ -498,27 +503,27 @@
 
 /* start customize leaflet marker cluster */
 .marker-cluster-small {
-	background-color: rgba(200, 82, 99, 0.3);
+	background-color: rgba(var(--bfx-crypto-main-color), 0.3);
 }
 
 .marker-cluster-small div {
-	background-color: rgba(200, 82, 99, 0.4);
+	background-color: rgba(var(--bfx-crypto-main-color), 0.4);
 }
 
 .marker-cluster-medium {
-	background-color: rgba(200, 82, 99, 0.3);
+	background-color: rgba(var(--bfx-crypto-main-color), 0.3);
 }
 
 .marker-cluster-medium div {
-	background-color: rgba(200, 82, 99, 0.6);
+	background-color: rgba(var(--bfx-crypto-main-color), 0.6);
 }
 
 .marker-cluster-large {
-	background-color: rgba(200, 82, 99, 0.3);
+	background-color: rgba(var(--bfx-crypto-main-color), 0.3);
 }
 
 .marker-cluster-large div {
-	background-color: rgba(200, 82, 99, 1);
+	background-color: rgba(var(--bfx-crypto-main-color), 1);
 }
 
 .marker-cluster div {
@@ -533,7 +538,7 @@
 }
 
 #bfx-crypto-map .leaflet-control-zoom span {
-  color: rgba(200, 82, 99, 1);
+  color: rgba(var(--bfx-crypto-main-color), 1);
 }
 
 #bfx-crypto-map .leaflet-control-zoom .leaflet-control-zoom-in {