Browse Source

Show map of nearby merchants to receivers

master
Skylar Ittner 1 month ago
parent
commit
9fa968cd69
5 changed files with 168 additions and 67 deletions
  1. 12
    0
      www/css/styles.css
  2. 69
    0
      www/js/giver_map.js
  3. 1
    62
      www/js/map.js
  4. 76
    0
      www/js/receiver_map.js
  5. 10
    5
      www/pages/home.html

+ 12
- 0
www/css/styles.css View File

@@ -164,4 +164,16 @@ html.md .navbar .link {
164 164
     border-top: 1px solid var(--f7-card-footer-border-color);
165 165
     padding-top: var(--f7-card-footer-padding-vertical);
166 166
     overflow-wrap: break-word;
167
+}
168
+
169
+.fa-map-icon {
170
+    padding: 2px;
171
+    color: white;
172
+    background-color: var(--f7-theme-color);
173
+    border: 2px solid var(--f7-theme-color-shade);
174
+    border-radius: 50%;
175
+}
176
+
177
+.fa-map-icon i {
178
+    margin-top: 0.4em;
167 179
 }

+ 69
- 0
www/js/giver_map.js View File

@@ -0,0 +1,69 @@
1
+/*
2
+ * This Source Code Form is subject to the terms of the Mozilla Public
3
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
4
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
5
+ */
6
+
7
+
8
+
9
+var leafletnearbylayer = L.geoJson(
10
+        {
11
+            name: "Nearby People",
12
+            type: "FeatureCollection",
13
+            features: [
14
+                {
15
+                    type: "Feature",
16
+                    geometry: {
17
+                        type: "Point",
18
+                        coordinates: [0, 0]
19
+                    },
20
+                    properties: {
21
+                        id: "",
22
+                        name: "",
23
+                        username: "",
24
+                        verified: false
25
+                    }
26
+                }
27
+            ]
28
+        },
29
+        {
30
+            onEachFeature: function (feature, layer) {
31
+                if (feature.properties && feature.properties.popupContent) {
32
+                    layer.bindPopup(feature.properties.popupContent);
33
+                }
34
+            },
35
+            pointToLayer: function (feature, latlng) {
36
+                var marker = L.marker(latlng, {
37
+                    icon: L.icon({
38
+                        iconUrl: "img/mapmarker.svg",
39
+                        iconSize: [25, 41],
40
+                        iconAnchor: [12.5, 40],
41
+                        popupAnchor: [0, -28]
42
+                    })
43
+                });
44
+                return marker;
45
+            }
46
+        }
47
+);
48
+
49
+function updateMap() {
50
+    var diagonalMeters = leafletmap.getBounds().getNorthWest().distanceTo(leafletmap.getBounds().getSouthEast());
51
+    var radius = (diagonalMeters / 2.0) / 1609.344;
52
+    callAPIRawResponse("getnearby", {
53
+        key: localStorage.getItem("key"),
54
+        latitude: leafletmap.getCenter().lat,
55
+        longitude: leafletmap.getCenter().lng,
56
+        radius: radius,
57
+        format: "geojson"
58
+    }, function (data) {
59
+        if (data.type == "FeatureCollection") {
60
+            leafletnearbylayer.clearLayers();
61
+            data.features.forEach(function (item) {
62
+                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>";
63
+                leafletnearbylayer.addData(item);
64
+            });
65
+            leafletmap.addLayer(leafletnearbylayer);
66
+            $(".leaflet-marker-icon").addClass("card-prevent-open");
67
+        }
68
+    });
69
+}

+ 1
- 62
www/js/map.js View File

@@ -28,67 +28,6 @@ var leafletgllayer = L.mapboxGL({
28 28
 
29 29
 leafletgllayer.addTo(leafletmap);
30 30
 
31
-var leafletpeoplelayer = L.geoJson(
32
-        {
33
-            name: "Nearby People",
34
-            type: "FeatureCollection",
35
-            features: [
36
-                {
37
-                    type: "Feature",
38
-                    geometry: {
39
-                        type: "Point",
40
-                        coordinates: [0, 0]
41
-                    },
42
-                    properties: {
43
-                        id: "",
44
-                        name: "",
45
-                        username: "",
46
-                        verified: false
47
-                    }
48
-                }
49
-            ]
50
-        },
51
-        {
52
-            onEachFeature: function (feature, layer) {
53
-                if (feature.properties && feature.properties.popupContent) {
54
-                    layer.bindPopup(feature.properties.popupContent);
55
-                }
56
-            },
57
-            pointToLayer: function (feature, latlng) {
58
-                var marker = L.marker(latlng, {
59
-                    icon: L.icon({
60
-                        iconUrl: "img/mapmarker.svg",
61
-                        iconSize: [25, 41],
62
-                        iconAnchor: [12.5, 40],
63
-                        popupAnchor: [0, -28]
64
-                    })
65
-                });
66
-                return marker;
67
-            }
68
-        }
69
-);
70
-
71
-function updateMap() {
72
-    var diagonalMeters = leafletmap.getBounds().getNorthWest().distanceTo(leafletmap.getBounds().getSouthEast());
73
-    var radius = (diagonalMeters / 2.0) / 1609.344;
74
-    callAPIRawResponse("getnearby", {
75
-        key: localStorage.getItem("key"),
76
-        latitude: leafletmap.getCenter().lat,
77
-        longitude: leafletmap.getCenter().lng,
78
-        radius: radius,
79
-        format: "geojson"
80
-    }, function (data) {
81
-        if (data.type == "FeatureCollection") {
82
-            leafletpeoplelayer.clearLayers();
83
-            data.features.forEach(function (item) {
84
-                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>";
85
-                leafletpeoplelayer.addData(item);
86
-            });
87
-            leafletmap.addLayer(leafletpeoplelayer);
88
-            $(".leaflet-marker-icon").addClass("card-prevent-open");
89
-        }
90
-    });
91
-}
92 31
 
93 32
 function recenterMapPosition() {
94 33
     var zoom = 13;
@@ -121,7 +60,7 @@ watchLocation(function (position) {
121 60
 
122 61
 // Set map to default position
123 62
 recenterMapPosition();
124
-// Load nearby people
63
+// Load nearby
125 64
 updateMap();
126 65
 // Watch for map moving
127 66
 leafletmap.on("moveend", function () {

+ 76
- 0
www/js/receiver_map.js View File

@@ -0,0 +1,76 @@
1
+/*
2
+ * This Source Code Form is subject to the terms of the Mozilla Public
3
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
4
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
5
+ */
6
+
7
+
8
+
9
+var leafletnearbylayer = L.geoJson(
10
+        {
11
+            name: "Nearby Merchants",
12
+            type: "FeatureCollection",
13
+            features: [
14
+                {
15
+                    type: "Feature",
16
+                    geometry: {
17
+                        type: "Point",
18
+                        coordinates: [0, 0]
19
+                    },
20
+                    properties: {
21
+                        id: "",
22
+                        name: "",
23
+                        address: "",
24
+                        types: {}
25
+                    }
26
+                }
27
+            ]
28
+        },
29
+        {
30
+            onEachFeature: function (feature, layer) {
31
+                if (feature.properties && feature.properties.popupContent) {
32
+                    layer.bindPopup(feature.properties.popupContent);
33
+                }
34
+            },
35
+            pointToLayer: function (feature, latlng) {
36
+                var icon = "fas fa-store";
37
+                if (feature.properties.types.length > 0) {
38
+                    icon = feature.properties.types[0].icon;
39
+                }
40
+                var marker = L.marker(latlng, {
41
+                    icon: (new L.divIcon({
42
+                        html: '<i class="' + icon + ' fa-fw"></i>',
43
+                        iconSize: [20, 20],
44
+                        className: 'fa-map-icon'
45
+                    }))
46
+                });
47
+                return marker;
48
+            }
49
+        }
50
+);
51
+
52
+function updateMap() {
53
+    var diagonalMeters = leafletmap.getBounds().getNorthWest().distanceTo(leafletmap.getBounds().getSouthEast());
54
+    var radius = (diagonalMeters / 2.0) / 1609.344;
55
+    callAPIRawResponse("getmerchants", {
56
+        key: localStorage.getItem("key"),
57
+        latitude: leafletmap.getCenter().lat,
58
+        longitude: leafletmap.getCenter().lng,
59
+        radius: radius,
60
+        format: "geojson"
61
+    }, function (data) {
62
+        if (data.type == "FeatureCollection") {
63
+            leafletnearbylayer.clearLayers();
64
+            data.features.forEach(function (item) {
65
+                var icons = "";
66
+                item.properties.types.forEach(function (type) {
67
+                    icons += "<i class=\"" + type.icon + "\"></i> " + type.name + "<br>";
68
+                });
69
+                item.properties.popupContent = (item.properties.name.length > 50 ? item.properties.name.substring(0, 50) + "..." : item.properties.name) + "<br><br>" + icons;
70
+                leafletnearbylayer.addData(item);
71
+            });
72
+            leafletmap.addLayer(leafletnearbylayer);
73
+            $(".leaflet-marker-icon").addClass("card-prevent-open");
74
+        }
75
+    });
76
+}

+ 10
- 5
www/pages/home.html View File

@@ -118,13 +118,16 @@
118 118
                 </div>
119 119
             </div>
120 120
             {{/if}}
121
-            {{#if giver}}
122 121
             <div class="col-100 tablet-50 desktop-33">
123 122
                 <div class="card card-expandable elevation-2" id="map-card" style="margin-top: var(--f7-card-margin-vertical);">
124 123
 
125 124
                     <div class="card-header card-opened-fade-out" style="z-index: 9999999; background-color: rgba(255,255,255,0.5);">
126 125
                         <div>
127
-                            <i class="fas fa-search-location"></i> Nearby
126
+                            {{#if giver}}
127
+                            <i class="fas fa-search-location"></i> Nearby People
128
+                            {{else}}
129
+                            <i class="fas fa-store"></i> Nearby Merchants
130
+                            {{/if}}
128 131
                         </div>
129 132
                         <div>
130 133
                             <span class="link icon-only card-prevent-open" onclick="recenterMapToUserPosition()" style="margin-top: 0.1em; cursor: pointer;">
@@ -137,7 +140,7 @@
137 140
 
138 141
                         <div class="navbar card-opened-fade-in">
139 142
                             <div class="navbar-inner">
140
-                                <div class="title">Nearby</div>
143
+                                <div class="title">Nearby {{#if giver}}People{{else}}Merchants{{/if}}</div>
141 144
 
142 145
                                 <div class="right">
143 146
                                     <a href="" class="link icon-only" onclick="recenterMapToUserPosition()">
@@ -154,7 +157,6 @@
154 157
                     </div>
155 158
                 </div>
156 159
             </div>
157
-            {{/if}}
158 160
 
159 161
         </div>
160 162
 
@@ -172,8 +174,11 @@
172 174
     </div>
173 175
 
174 176
     {{#if giver}}
175
-    <script src="js/map.js"></script>
177
+    <script src="js/giver_map.js"></script>
178
+    {{else}}
179
+    <script src="js/receiver_map.js"></script>
176 180
     {{/if}}
181
+    <script src="js/map.js"></script>
177 182
     <script src="js/home.js"></script>
178 183
 
179 184
 </div>

Loading…
Cancel
Save