From 9fa968cd69bcd8731d2e0c0fd9095764a0bc2bb3 Mon Sep 17 00:00:00 2001 From: Skylar Ittner Date: Sun, 7 Apr 2019 13:49:49 -0600 Subject: [PATCH] Show map of nearby merchants to receivers --- www/css/styles.css | 12 +++++++ www/js/giver_map.js | 69 ++++++++++++++++++++++++++++++++++++++ www/js/map.js | 63 +--------------------------------- www/js/receiver_map.js | 76 ++++++++++++++++++++++++++++++++++++++++++ www/pages/home.html | 15 ++++++--- 5 files changed, 168 insertions(+), 67 deletions(-) create mode 100644 www/js/giver_map.js create mode 100644 www/js/receiver_map.js diff --git a/www/css/styles.css b/www/css/styles.css index e62486d..2dbe520 100644 --- a/www/css/styles.css +++ b/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; } \ No newline at end of file diff --git a/www/js/giver_map.js b/www/js/giver_map.js new file mode 100644 index 0000000..1b57410 --- /dev/null +++ b/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 = " " + (item.properties.name.length > 50 ? item.properties.name.substring(0, 50) + "..." : item.properties.name) + "

Send Money"; + leafletnearbylayer.addData(item); + }); + leafletmap.addLayer(leafletnearbylayer); + $(".leaflet-marker-icon").addClass("card-prevent-open"); + } + }); +} \ No newline at end of file diff --git a/www/js/map.js b/www/js/map.js index 45d67b2..eee75d8 100644 --- a/www/js/map.js +++ b/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 = " " + (item.properties.name.length > 50 ? item.properties.name.substring(0,50) + "..." : item.properties.name) + "

Send Money"; - 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 () { diff --git a/www/js/receiver_map.js b/www/js/receiver_map.js new file mode 100644 index 0000000..d5578e8 --- /dev/null +++ b/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: '', + 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 += " " + type.name + "
"; + }); + item.properties.popupContent = (item.properties.name.length > 50 ? item.properties.name.substring(0, 50) + "..." : item.properties.name) + "

" + icons; + leafletnearbylayer.addData(item); + }); + leafletmap.addLayer(leafletnearbylayer); + $(".leaflet-marker-icon").addClass("card-prevent-open"); + } + }); +} \ No newline at end of file diff --git a/www/pages/home.html b/www/pages/home.html index 53b118b..8aa7ad7 100644 --- a/www/pages/home.html +++ b/www/pages/home.html @@ -118,13 +118,16 @@ {{/if}} - {{#if giver}}
- Nearby + {{#if giver}} + Nearby People + {{else}} + Nearby Merchants + {{/if}}
@@ -137,7 +140,7 @@
-
Nearby
+
Nearby {{#if giver}}People{{else}}Merchants{{/if}}
@@ -154,7 +157,6 @@
- {{/if}}
@@ -172,8 +174,11 @@
{{#if giver}} - + + {{else}} + {{/if}} +
\ No newline at end of file