Show map of nearby merchants to receivers
This commit is contained in:
parent
a57e0d0afa
commit
9fa968cd69
@ -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;
|
||||
}
|
||||
69
www/js/giver_map.js
Normal file
69
www/js/giver_map.js
Normal file
@ -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");
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -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 () {
|
||||
|
||||
76
www/js/receiver_map.js
Normal file
76
www/js/receiver_map.js
Normal file
@ -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");
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user