Show map of nearby merchants to receivers

www/css/styles.css

@@ -164,4 +164,16 @@ html.md .navbar .link {
     border-top: 1px solid var(--f7-card-footer-border-color);
     padding-top: var(--f7-card-footer-padding-vertical);
     overflow-wrap: break-word;
+}
+
+.fa-map-icon {
+    padding: 2px;
+    color: white;
+    background-color: var(--f7-theme-color);
+    border: 2px solid var(--f7-theme-color-shade);
+    border-radius: 50%;
+}
+
+.fa-map-icon i {
+    margin-top: 0.4em;
 }

www/js/giver_map.js

@@ -0,0 +1,69 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+
+
+var leafletnearbylayer = L.geoJson(
+        {
+            name: "Nearby People",
+            type: "FeatureCollection",
+            features: [
+                {
+                    type: "Feature",
+                    geometry: {
+                        type: "Point",
+                        coordinates: [0, 0]
+                    },
+                    properties: {
+                        id: "",
+                        name: "",
+                        username: "",
+                        verified: false
+                    }
+                }
+            ]
+        },
+        {
+            onEachFeature: function (feature, layer) {
+                if (feature.properties && feature.properties.popupContent) {
+                    layer.bindPopup(feature.properties.popupContent);
+                }
+            },
+            pointToLayer: function (feature, latlng) {
+                var marker = L.marker(latlng, {
+                    icon: L.icon({
+                        iconUrl: "img/mapmarker.svg",
+                        iconSize: [25, 41],
+                        iconAnchor: [12.5, 40],
+                        popupAnchor: [0, -28]
+                    })
+                });
+                return marker;
+            }
+        }
+);
+
+function updateMap() {
+    var diagonalMeters = leafletmap.getBounds().getNorthWest().distanceTo(leafletmap.getBounds().getSouthEast());
+    var radius = (diagonalMeters / 2.0) / 1609.344;
+    callAPIRawResponse("getnearby", {
+        key: localStorage.getItem("key"),
+        latitude: leafletmap.getCenter().lat,
+        longitude: leafletmap.getCenter().lng,
+        radius: radius,
+        format: "geojson"
+    }, function (data) {
+        if (data.type == "FeatureCollection") {
+            leafletnearbylayer.clearLayers();
+            data.features.forEach(function (item) {
+                item.properties.popupContent = "<i class=\"fas fa-user\"></i> " + (item.properties.name.length > 50 ? item.properties.name.substring(0, 50) + "..." : item.properties.name) + "<br><br><a class=\"button button-small button-fill text-color-white card-prevent-open\" href=\"/sendmoney/" + item.properties.id + "\">Send Money</a>";
+                leafletnearbylayer.addData(item);
+            });
+            leafletmap.addLayer(leafletnearbylayer);
+            $(".leaflet-marker-icon").addClass("card-prevent-open");
+        }
+    });
+}

www/js/map.js

@@ -28,67 +28,6 @@ var leafletgllayer = L.mapboxGL({
 
 leafletgllayer.addTo(leafletmap);
 
-var leafletpeoplelayer = L.geoJson(
-        {
-            name: "Nearby People",
-            type: "FeatureCollection",
-            features: [
-                {
-                    type: "Feature",
-                    geometry: {
-                        type: "Point",
-                        coordinates: [0, 0]
-                    },
-                    properties: {
-                        id: "",
-                        name: "",
-                        username: "",
-                        verified: false
-                    }
-                }
-            ]
-        },
-        {
-            onEachFeature: function (feature, layer) {
-                if (feature.properties && feature.properties.popupContent) {
-                    layer.bindPopup(feature.properties.popupContent);
-                }
-            },
-            pointToLayer: function (feature, latlng) {
-                var marker = L.marker(latlng, {
-                    icon: L.icon({
-                        iconUrl: "img/mapmarker.svg",
-                        iconSize: [25, 41],
-                        iconAnchor: [12.5, 40],
-                        popupAnchor: [0, -28]
-                    })
-                });
-                return marker;
-            }
-        }
-);
-
-function updateMap() {
-    var diagonalMeters = leafletmap.getBounds().getNorthWest().distanceTo(leafletmap.getBounds().getSouthEast());
-    var radius = (diagonalMeters / 2.0) / 1609.344;
-    callAPIRawResponse("getnearby", {
-        key: localStorage.getItem("key"),
-        latitude: leafletmap.getCenter().lat,
-        longitude: leafletmap.getCenter().lng,
-        radius: radius,
-        format: "geojson"
-    }, function (data) {
-        if (data.type == "FeatureCollection") {
-            leafletpeoplelayer.clearLayers();
-            data.features.forEach(function (item) {
-                item.properties.popupContent = "<i class=\"fas fa-user\"></i> " + (item.properties.name.length > 50 ? item.properties.name.substring(0,50) + "..." : item.properties.name) + "<br><br><a class=\"button button-small button-fill text-color-white card-prevent-open\" href=\"/sendmoney/" + item.properties.id + "\">Send Money</a>";
-                leafletpeoplelayer.addData(item);
-            });
-            leafletmap.addLayer(leafletpeoplelayer);
-            $(".leaflet-marker-icon").addClass("card-prevent-open");
-        }
-    });
-}
 
 function recenterMapPosition() {
     var zoom = 13;
@@ -121,7 +60,7 @@ watchLocation(function (position) {
 
 // Set map to default position
 recenterMapPosition();
-// Load nearby people
+// Load nearby
 updateMap();
 // Watch for map moving
 leafletmap.on("moveend", function () {

www/js/receiver_map.js

@@ -0,0 +1,76 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+
+
+var leafletnearbylayer = L.geoJson(
+        {
+            name: "Nearby Merchants",
+            type: "FeatureCollection",
+            features: [
+                {
+                    type: "Feature",
+                    geometry: {
+                        type: "Point",
+                        coordinates: [0, 0]
+                    },
+                    properties: {
+                        id: "",
+                        name: "",
+                        address: "",
+                        types: {}
+                    }
+                }
+            ]
+        },
+        {
+            onEachFeature: function (feature, layer) {
+                if (feature.properties && feature.properties.popupContent) {
+                    layer.bindPopup(feature.properties.popupContent);
+                }
+            },
+            pointToLayer: function (feature, latlng) {
+                var icon = "fas fa-store";
+                if (feature.properties.types.length > 0) {
+                    icon = feature.properties.types[0].icon;
+                }
+                var marker = L.marker(latlng, {
+                    icon: (new L.divIcon({
+                        html: '<i class="' + icon + ' fa-fw"></i>',
+                        iconSize: [20, 20],
+                        className: 'fa-map-icon'
+                    }))
+                });
+                return marker;
+            }
+        }
+);
+
+function updateMap() {
+    var diagonalMeters = leafletmap.getBounds().getNorthWest().distanceTo(leafletmap.getBounds().getSouthEast());
+    var radius = (diagonalMeters / 2.0) / 1609.344;
+    callAPIRawResponse("getmerchants", {
+        key: localStorage.getItem("key"),
+        latitude: leafletmap.getCenter().lat,
+        longitude: leafletmap.getCenter().lng,
+        radius: radius,
+        format: "geojson"
+    }, function (data) {
+        if (data.type == "FeatureCollection") {
+            leafletnearbylayer.clearLayers();
+            data.features.forEach(function (item) {
+                var icons = "";
+                item.properties.types.forEach(function (type) {
+                    icons += "<i class=\"" + type.icon + "\"></i> " + type.name + "<br>";
+                });
+                item.properties.popupContent = (item.properties.name.length > 50 ? item.properties.name.substring(0, 50) + "..." : item.properties.name) + "<br><br>" + icons;
+                leafletnearbylayer.addData(item);
+            });
+            leafletmap.addLayer(leafletnearbylayer);
+            $(".leaflet-marker-icon").addClass("card-prevent-open");
+        }
+    });
+}

www/pages/home.html

@@ -118,13 +118,16 @@
                 </div>
             </div>
             {{/if}}
-            {{#if giver}}
             <div class="col-100 tablet-50 desktop-33">
                 <div class="card card-expandable elevation-2" id="map-card" style="margin-top: var(--f7-card-margin-vertical);">
 
                     <div class="card-header card-opened-fade-out" style="z-index: 9999999; background-color: rgba(255,255,255,0.5);">
                         <div>
-                            <i class="fas fa-search-location"></i> Nearby
+                            {{#if giver}}
+                            <i class="fas fa-search-location"></i> Nearby People
+                            {{else}}
+                            <i class="fas fa-store"></i> Nearby Merchants
+                            {{/if}}
                         </div>
                         <div>
                             <span class="link icon-only card-prevent-open" onclick="recenterMapToUserPosition()" style="margin-top: 0.1em; cursor: pointer;">
@@ -137,7 +140,7 @@
 
                         <div class="navbar card-opened-fade-in">
                             <div class="navbar-inner">
-                                <div class="title">Nearby</div>
+                                <div class="title">Nearby {{#if giver}}People{{else}}Merchants{{/if}}</div>
 
                                 <div class="right">
                                     <a href="" class="link icon-only" onclick="recenterMapToUserPosition()">
@@ -154,7 +157,6 @@
                     </div>
                 </div>
             </div>
-            {{/if}}
 
         </div>
 
@@ -172,8 +174,11 @@
     </div>
 
     {{#if giver}}
-    <script src="js/map.js"></script>
+    <script src="js/giver_map.js"></script>
+    {{else}}
+    <script src="js/receiver_map.js"></script>
     {{/if}}
+    <script src="js/map.js"></script>
     <script src="js/home.js"></script>
 
 </div>