Netsyms
/
HelpingHelenaApp
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Show map of nearby merchants to receivers

master
Skylar Ittner 4 years ago
parent
a57e0d0afa
commit
9fa968cd69
5 changed files with 168 additions and 67 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      www/css/styles.css
  2. 69
      www/js/giver_map.js
  3. 63
      www/js/map.js
  4. 76
      www/js/receiver_map.js
  5. 15
      www/pages/home.html

12
www/css/styles.css
View File

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

69
www/js/giver_map.js
View File

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

63
www/js/map.js
View File

@ -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 () {

76
www/js/receiver_map.js
View File

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

15
www/pages/home.html
View File

@ -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>
Write Preview
Loading…
Cancel
Save