Browse Source

Get user position and display nearby people on map (close #2)

master
Skylar Ittner 6 months ago
parent
commit
83bef5b3d5
6 changed files with 225 additions and 15 deletions
  1. 3
    1
      package.json
  2. 58
    2
      www/js/api.js
  3. 2
    2
      www/js/home.js
  4. 114
    2
      www/js/map.js
  5. 32
    0
      www/js/platform.js
  6. 16
    8
      www/pages/home.html

+ 3
- 1
package.json View File

@@ -12,6 +12,7 @@
"dependencies": {
"cordova-android": "^8.0.0",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-geolocation": "^4.0.1",
"cordova-plugin-headercolor": "^1.0.0",
"cordova-plugin-inappbrowser": "^3.0.0",
"cordova-plugin-statusbar": "^2.4.2",
@@ -27,7 +28,8 @@
"cordova-plugin-inappbrowser": {},
"phonegap-plugin-barcodescanner": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
}
},
"cordova-plugin-geolocation": {}
},
"platforms": [
"android"

+ 58
- 2
www/js/api.js View File

@@ -4,6 +4,15 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/

/**
* Get the API endpoint URL for an action
* @param {String} action
* @return {String}
*/
function getActionUrl(action) {
return SETTINGS["server"] + "/" + action;
}

/**
* Call an API function on the server.
* @param {string} action
@@ -16,19 +25,66 @@ function callAPI(action, data, success, failure) {
return $.ajax({
type: 'POST',
dataType: 'json',
url: SETTINGS["server"] + "/" + action,
url: getActionUrl(action),
data: data,
timeout: 5000,
success: function (data, textStatus) {
if (data.status === "OK") {
success(data);
} else if (data.status === "ERROR") {
return;
}
if (typeof failure != 'function') {
return;
}
if (data.status === "ERROR") {
failure(data.msg);
} else {
failure("The server sent an invalid response.");
}
},
error: function (xhr, textStatus, errorThrown) {
if (typeof failure != 'function') {
return;
}
switch (textStatus) {
case "timeout":
failure("Couldn't connect to the server (timeout).");
break;
case "error":
failure("Couldn't connect to the server (error).");
break;
case "parseerror":
failure("The server sent a malformed response.");
break;
default:
failure("Couldn't connect to the server.");
}
}
});
}

/**
* Call an API function on the server. Makes fewer assumptions about what
* constitutes a success response.
* @param {string} action
* @param {array} data key: value array of arguments for the server.
* @param {function} success Called with the JSON response object.
* @param {function} failure Called with an error message string.
* @return {undefined}
*/
function callAPIRawResponse(action, data, success, failure) {
return $.ajax({
type: 'POST',
url: getActionUrl(action),
data: data,
timeout: 5000,
success: function (data, textStatus) {
success(data);
},
error: function (xhr, textStatus, errorThrown) {
if (typeof failure != 'function') {
return;
}
switch (textStatus) {
case "timeout":
failure("Couldn't connect to the server (timeout).");

+ 2
- 2
www/js/home.js View File

@@ -18,7 +18,7 @@ $(".view-main").on("card:open", ".card-expandable", function () {
});

$(".view-main").on("card:closed", "#map-card", function () {
leafletgllayer._glMap.setPitch(0);
//leafletgllayer._glMap.setPitch(0);
leafletmap.invalidateSize();
});

@@ -46,7 +46,7 @@ function loadBalance(callback) {
}

function openMapCard() {
leafletgllayer._glMap.setPitch(40);
//leafletgllayer._glMap.setPitch(40);
leafletmap.invalidateSize();
}


+ 114
- 2
www/js/map.js View File

@@ -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();
});

+ 32
- 0
www/js/platform.js View File

@@ -14,6 +14,38 @@ var openBrowser = function (url) {

}

var getLocation = function (success, error) {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(function (position) {
success(position);
}, function (err) {
error(err.message);
}, {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
});
} else {
error("Location is unavailable.");
}
}

var watchLocation = function (success, error) {
if ("geolocation" in navigator) {
navigator.geolocation.watchPosition(function (position) {
success(position);
}, function (err) {
error(err.message);
}, {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
});
} else {
error("Location is unavailable.");
}
}

function initCordova() {
platform_type = "cordova";


+ 16
- 8
www/pages/home.html View File

@@ -84,17 +84,25 @@
<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);" onclick="openMapCard()">

<div class="card-content text-align-center" style="min-height: 16.58em;">

<div class="card-header card-opened-fade-out" style="z-index: 9999999; background-color: rgba(255,255,255,0.5);">
Nearby
<div class="card-header card-opened-fade-out" style="z-index: 9999999; background-color: rgba(255,255,255,0.5);">
<div>Nearby</div>
<div>
<span class="link icon-only card-prevent-open" onclick="recenterMapToUserPosition()" style="margin-top: 0.1em; cursor: pointer;">
<i class="material-icons" style="font-size: 16pt;">my_location</i>
</span>
</div>
</div>

<div class="card-content text-align-center" style="min-height: 16.58em;">

<div class="navbar card-opened-fade-in">
<div class="navbar-inner">
<div class="title">Nearby</div>

<div class="right">
<a href="" class="link icon-only" onclick="recenterMapToUserPosition()">
<i class="material-icons">my_location</i>
</a>
<a href="#" class="link icon-only card-close">
<i class="material-icons">close</i>
</a>
@@ -124,11 +132,11 @@
<script src="js/home.js"></script>

<script>
setTimeout(function () {
loadHomePage(function () {
setTimeout(function () {
loadHomePage(function () {

});
}, 500);
});
}, 500);
</script>

</div>

Loading…
Cancel
Save