|
|
@ -4,12 +4,20 @@ |
|
|
|
* 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.setView([46.595, -112.019], 13); |
|
|
|
|
|
|
|
leafletmap.attributionControl.setPrefix(""); |
|
|
|
var leafletgllayer = L.mapboxGL({ |
|
|
|
attribution: "© OpenMapTiles © OpenStreetMap contributors", |
|
|
@ -18,4 +26,108 @@ var leafletgllayer = L.mapboxGL({ |
|
|
|
pitch: 0 |
|
|
|
}); |
|
|
|
|
|
|
|
leafletgllayer.addTo(leafletmap); |
|
|
|
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) { |
|
|
|
return L.marker(latlng); |
|
|
|
// return L.circleMarker(latlng, {
|
|
|
|
// radius: 14,
|
|
|
|
// fillColor: "#f00",
|
|
|
|
// color: "#000",
|
|
|
|
// weight: 1,
|
|
|
|
// opacity: 1,
|
|
|
|
// fillOpacity: 0.6
|
|
|
|
// });
|
|
|
|
} |
|
|
|
} |
|
|
|
); |
|
|
|
|
|
|
|
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 + "<br><br><a class=\"button button-small button-fill text-color-white\" href=\"/sendmoney/" + item.properties.id + "\">Send Money</a>"; |
|
|
|
leafletpeoplelayer.addData(item); |
|
|
|
}); |
|
|
|
leafletmap.addLayer(leafletpeoplelayer); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
function recenterMapPosition() { |
|
|
|
var zoom = 13; |
|
|
|
if (userposition.coords.accuracy < 100) { |
|
|
|
zoom = 15; |
|
|
|
} |
|
|
|
if (userposition.coords.accuracy < 50) { |
|
|
|
zoom = 16; |
|
|
|
} |
|
|
|
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(); |
|
|
|
}); |