@@ -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> |