Show map of nearby merchants to receivers
ebeveyn
a57e0d0afa
işleme
9fa968cd69
@ -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");
|
||||
}
|
||||
});
|
||||
}
|
@ -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");
|
||||
}
|
||||
});
|
||||
}
|
Yükleniyor…
Yeni konuda referans