Show map of nearby merchants to receivers

master
Skylar Ittner hace 5 años
padre 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;
}

@ -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 () {

@ -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>
Cargando…
Cancelar
Guardar