|
|
|
/*
|
|
|
|
* 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 userPositionIsReal = false;
|
|
|
|
var userposition = {
|
|
|
|
coords: {
|
|
|
|
latitude: 46.595,
|
|
|
|
longitude: -112.019,
|
|
|
|
accuracy: 10000
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
var leafletmap = L.map('map', {
|
|
|
|
minZoom: 12,
|
|
|
|
maxZoom: 20
|
|
|
|
});
|
|
|
|
|
|
|
|
leafletmap.attributionControl.setPrefix("");
|
|
|
|
var leafletgllayer = L.mapboxGL({
|
|
|
|
attribution: "© OpenMapTiles © OpenStreetMap contributors",
|
|
|
|
accessToken: 'none',
|
|
|
|
style: 'https://maps.netsyms.net/styles/klokantech-3d-gl/style.json',
|
|
|
|
pitch: 0
|
|
|
|
});
|
|
|
|
|
|
|
|
leafletgllayer.addTo(leafletmap);
|
|
|
|
|
|
|
|
L.control.scale().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;
|
|
|
|
if (userposition.coords.accuracy < 1000) {
|
|
|
|
zoom = 15;
|
|
|
|
}
|
|
|
|
leafletmap.setView([userposition.coords.latitude, userposition.coords.longitude], zoom);
|
|
|
|
}
|
|
|
|
|
|
|
|
function recenterMapToUserPosition() {
|
|
|
|
if (userPositionIsReal == false) {
|
|
|
|
getLocation(function (position) {
|
|
|
|
userposition = position;
|
|
|
|
userPositionIsReal = true;
|
|
|
|
recenterMapPosition();
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
recenterMapPosition();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Attempt to get user location
|
|
|
|
watchLocation(function (position) {
|
|
|
|
userposition = position;
|
|
|
|
if (userPositionIsReal == false) {
|
|
|
|
recenterMapPosition();
|
|
|
|
userPositionIsReal = true;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// Set map to default position
|
|
|
|
recenterMapPosition();
|
|
|
|
// Load nearby people
|
|
|
|
updateMap();
|
|
|
|
// Watch for map moving
|
|
|
|
leafletmap.on("moveend", function () {
|
|
|
|
updateMap();
|
|
|
|
});
|