From 817cc94a3fb178d03097f953d1319b36df1a8a1f Mon Sep 17 00:00:00 2001
From: Jorge Sierra <3d.jorgesierra@gmail.com>
Date: Sun, 24 Mar 2019 08:18:51 -0400
Subject: [PATCH 1/8] initial commit
---
assets/javascript/Geofire.js | 0
assets/javascript/main.js | 83 +++++++++++++++++++++++++++++++---
assets/javascript/main_edua.js | 81 ---------------------------------
index.html | 65 +++-----------------------
4 files changed, 83 insertions(+), 146 deletions(-)
create mode 100644 assets/javascript/Geofire.js
delete mode 100644 assets/javascript/main_edua.js
diff --git a/assets/javascript/Geofire.js b/assets/javascript/Geofire.js
new file mode 100644
index 0000000..e69de29
diff --git a/assets/javascript/main.js b/assets/javascript/main.js
index ef83203..eb99ed8 100644
--- a/assets/javascript/main.js
+++ b/assets/javascript/main.js
@@ -23,15 +23,16 @@ function getGeoLocation() {
var pLocation = $("");
pLocation.text("The Lattitude-array: " + userLocation[0] + " and the longitude-array: " + userLocation[1]);
+ //update maps
+ googleMapsLoad(userLocation[0], userLocation[1]);
+
+ //update body
$("body").append(pLocation);
- });
+ });
} else {
console.log("no access to geto")
}
- console.log("console lat - " + userLocation[0] + " console long - " + userLocation[1]);
-
-
// this is the call for YELP QUERY - WORKING
var yelpQuery = "https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=delis&latitude=39.951061&longitude=-75.165619&radius=8000";
@@ -48,12 +49,82 @@ function getGeoLocation() {
},
method: "GET"
}).then((yelpResponse) => {
- console.log(yelpResponse);
- }
+ console.log(yelpResponse);
+ }
);
}
+//google map function of generating user and icon
+function googleMapsLoad(userLat, userLng) {
+
+ // initialize maps
+
+ var map = new google.maps.Map(document.getElementById("map"), {
+ zoom: 20,
+ center: {
+ lat: userLat,
+ lng: userLng
+ }
+ });
+
+ var allUsers = [
+
+ firstUser = {
+ coords: {
+ lat: userLat,
+ lng: userLng,
+ radius: 10
+ },
+ iconImage: "./assets/images/map-icon.png",
+ content: "
Hello Friends!
"
+ }
+
+ ]
+
+ console.log(allUsers);
+ //loop through markers
+ for (var i = 0; i < allUsers.length; i++) {
+ addUserMarker(allUsers[i]);
+ }
+
+
+ //function Marker
+ function addUserMarker(user) {
+ //Add marker
+ var marker = new google.maps.Marker({
+ position: user.coords,
+ map: map,
+
+ });
+
+ console.log(user.coords);
+
+ //if user has an Icon
+ if (user.iconImage) {
+ //set Icon image
+ marker.setIcon(user.iconImage);
+ }
+
+ // if it contains infoWindow text then create one
+ if (user.content) {
+
+ //infoWindow is a pop up for the onClick
+ var infoWindow = new google.maps.InfoWindow({
+ content: user.content
+ });
+
+ }
+
+ marker.addListener("click", () => {
+
+ infoWindow.open(map, marker);
+ });
+
+ }
+}
+
+
$(document).on("click", "#getGeoLocation", getGeoLocation);
//firebase Google Maps API
diff --git a/assets/javascript/main_edua.js b/assets/javascript/main_edua.js
deleted file mode 100644
index 9a8e99c..0000000
--- a/assets/javascript/main_edua.js
+++ /dev/null
@@ -1,81 +0,0 @@
-//https://api.yelp.com/v3/businesses/search
-// GET https://api.yelp.com/v3/autocomplete?text=del&latitude=37.786882&longitude=-122.399972
-//https://cors-anywhere.herokuapp.com/
-
-//Global variables
-var userLocation = new Array(0,0);
-var gMap;
-
-// var googleMapQuery = "https://maps.googleapis.com/maps/api/js?key=AIzaSyA4Xg_9AqzPbXG547Ie66bFn-kqaYduOe0" >
-
-// Just using HTML API for geo location and test it with other APIs
-function getGeoLocation() {
-
- /*var userLocation = {
- lat: 0,
- lng: 0
- }*/
- console.log("navigator.geolocation: " + navigator.geolocation);
- if(navigator.geolocation) {
- navigator.geolocation.getCurrentPosition((position) => { //This function appears to run asynchronos...see notes
-
- //Push Latitude and Longitude
- //userLocation.push(position.coords.latitude);
- //userLocation.push(position.coords.longitude);
-
- userLocation[0] = position.coords.latitude;
- userLocation[1] = position.coords.longitude;
-
- //display lattitude and longitude in dom
- var pLocation = $("");
-
- //Note 1: This output doesn't show until I accept "Allow Location"
- pLocation.text("The Lattitude-array: " + userLocation[0] + " and the longitude-array: " + userLocation[1]);
-
- $("body").append(pLocation);
-
- } );
- } else {
- console.log("no access to geto")
- }
-
- //Note 2: This output shows up right after I press the button
- console.log("console lat - " + userLocation[0] + " console long - " + userLocation[1]);
-
- //Note 3: Conclusion: The function declares the variables ONLY when the "Allow location" is accpected. Otherwise, the variable is undefined
- // You were leaning this way but it's important to know (I believe) that the part where the location data is gathered is asynchronos to the line at 43.
- // Which is to say that you will get the output of the console log before the location value actually set.
-
-// this is the call for YELP QUERY
-// var yelpQuery = "https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=delis&latitude=39.951061&longitude=-75.165619&radius=8046.72";
-//testing to see if I can get variables included
-
- var yelpQuery = "https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=delis&latitude=" + userLocation[0] + "&longitude=" + userLocation[1] + "&radius=8000";
- var yelpAPI = "1QpSc4B1zI5GuI56PDAAvAfpfcsLg9LWuHRfVCeG4TIDDxRe3hGT-sxlU5h5DD0AdLgu-HHoa2cM4m1WaAefYoboIPdVHv0mCjivrwQrdU11FCFl2hd8-iaaTKOTXHYx";
-
-
- console.log(yelpQuery);
- $.ajax({
- url: yelpQuery,
- headers: {
- 'Authorization': "Bearer " + yelpAPI,
- },
- method: "GET"
- }).then((yelpResponse) => {
- console.log(yelpResponse);
- }
-
- );
-}
-
-$(document).on("click", "#getGeoLocation", getGeoLocation);
-
-// getGeoLocation();
-
-
-
-//firebase Google Maps API
-//https://www.google.com/maps/embed/v1/MODE?key=AIzaSyCHREkl-BVxFLXW5Hp_reWCSnIDK-Oq2Wk¶meters
-
-
-// Execute functions
\ No newline at end of file
diff --git a/index.html b/index.html
index 9fcfb00..eef3e96 100644
--- a/index.html
+++ b/index.html
@@ -26,74 +26,20 @@
Google Map
function initMap() {
//fixed place for now
var place = {
- zoom: 18,
+ zoom: 10,
center: {
- lat: 42,
- lng: -71
+ lat: 39.94,
+ lng: -75.1993
}
}
//new map
var map = new google.maps.Map(document.getElementById("map"), place);
+ console.log(map);
//Array of Users
- var allUsers = [
-
- firstUser = {
- coords: {
- lat: 42,
- lng: -71
- },
- iconImage: "./assets/images/map-icon.png",
- content: "Hello Friends!
"
- }
-
- ]
-
- console.log(allUsers);
- //loop through markers
- for (var i = 0; i < allUsers.length; i++) {
- addUserMarker(allUsers[i]);
- }
-
-
- //function Marker
- function addUserMarker(user) {
- //Add marker
- var marker = new google.maps.Marker({
- position: user.coords,
- map: map,
-
- });
-
- console.log(user.coords);
-
- //if user has an Icon
- if (user.iconImage) {
- //set Icon image
- marker.setIcon(user.iconImage);
- }
-
- // if it contains infoWindow text then create one
- if (user.content) {
-
- //infoWindow is a pop up for the onClick
- var infoWindow = new google.maps.InfoWindow({
- content: user.content
- });
-
- }
-
- marker.addListener("click", () => {
-
- infoWindow.open(map, marker);
- });
-
- }
-
-
-
}
+
+
From 2ca198b5c09d5c4ab07622434533688a4fd35784 Mon Sep 17 00:00:00 2001
From: Jorge <3d.jorgesierra@gmail.com>
Date: Sun, 24 Mar 2019 15:34:08 -0400
Subject: [PATCH 2/8] Still need to work on geoQuery
---
assets/javascript/Geofire.1.js | 47 ++++++++
assets/javascript/Geofire.js | 0
assets/javascript/geoTest.js | 50 +++++++++
assets/javascript/geofire.min.js | 1 +
assets/javascript/main.js | 179 +++++++++++++++++++++++++------
index.html | 30 ++++--
6 files changed, 264 insertions(+), 43 deletions(-)
create mode 100644 assets/javascript/Geofire.1.js
delete mode 100644 assets/javascript/Geofire.js
create mode 100644 assets/javascript/geoTest.js
create mode 100644 assets/javascript/geofire.min.js
diff --git a/assets/javascript/Geofire.1.js b/assets/javascript/Geofire.1.js
new file mode 100644
index 0000000..2e39d9e
--- /dev/null
+++ b/assets/javascript/Geofire.1.js
@@ -0,0 +1,47 @@
+ // Initialize Firebase
+ var config = {
+ apiKey: "AIzaSyBWlRO86vNl6sL5psQX5f7H9Lw_wsULP9g",
+ authDomain: "geofiretest-9d07e.firebaseapp.com",
+ databaseURL: "https://geofiretest-9d07e.firebaseio.com",
+ projectId: "geofiretest-9d07e",
+ storageBucket: "geofiretest-9d07e.appspot.com",
+ messagingSenderId: "680094207901"
+ };
+ firebase.initializeApp(config);
+
+ //variables for firebase database
+ var firebaseData = firebase.database();
+// geofire ref
+var firebaseRef = firebase.database().ref().push();
+ var geoFire = new GeoFire(firebaseRef);
+
+ //setting initial location
+ geoFire.set("user_key", [37.785326, -122.405696]).then(function (){
+ console.log("provided key has been added to Geofire");
+ }, function (error){
+ console.log("error: " + error);
+ });
+
+ //getting initial location
+ geoFire.get("user_key").then(function(location) {
+ if (location === null) {
+ console.log("Provided key is not in GeoFire");
+ }
+ else {
+ console.log("Provided key has a location of " + location);
+ }
+ }, function(error) {
+ console.log("Error: " + error);
+ });
+
+ //setup a query that looks at the user's location.
+ var geoQuery = geoFire.geoQuery({
+ center: [37.4, -122.6],
+ radius: 1.609 //kilometers
+ });
+
+ //check to see if anything has entered this location
+ geoQuery.on("key_entered", function(key, location, distance) {
+ console.log("Bicycle shop " + key + " found at " + location + " (" + distance + " km away)");
+ });
+
diff --git a/assets/javascript/Geofire.js b/assets/javascript/Geofire.js
deleted file mode 100644
index e69de29..0000000
diff --git a/assets/javascript/geoTest.js b/assets/javascript/geoTest.js
new file mode 100644
index 0000000..9a33f6a
--- /dev/null
+++ b/assets/javascript/geoTest.js
@@ -0,0 +1,50 @@
+ // Initialize Firebase
+ var config = {
+ apiKey: "AIzaSyBWlRO86vNl6sL5psQX5f7H9Lw_wsULP9g",
+ authDomain: "geofiretest-9d07e.firebaseapp.com",
+ databaseURL: "https://geofiretest-9d07e.firebaseio.com",
+ projectId: "geofiretest-9d07e",
+ storageBucket: "geofiretest-9d07e.appspot.com",
+ messagingSenderId: "680094207901"
+};
+firebase.initializeApp(config);
+
+//variables for firebase database
+var firebaseData = firebase.database();
+// geofire ref
+var firebaseRefPush = firebase.database().ref().push();
+
+var geoFire = new GeoFire(firebaseRefPush);
+console.log("firebase "+ geoFire);
+
+//setting initial location
+geoFire.set("user_key", [37.785326, -122.405696]).then(function (){
+ console.log("provided key has been added to Geofire");
+}, function (error){
+ console.log("error: " + error);
+});
+
+
+//getting initial location
+geoFire.get("user_key").then(function(location) {
+ if (location === null) {
+ console.log("Provided key is not in GeoFire");
+ }
+ else {
+ console.log("Provided key has a location of " + location);
+ }
+}, function(error) {
+ console.log("Error: " + error);
+});
+
+//setup a query that looks at the user's location.
+var geoQuery = geoFire.query({
+ center: [37.4, -122.6],
+ radius: 1.609 //kilometers
+});
+
+//check to see if anything has entered this location
+geoQuery.on("key_entered", function(key, location, distance) {
+ console.log("Bicycle shop " + key + " found at " + location + " (" + distance + " km away)");
+});
+
diff --git a/assets/javascript/geofire.min.js b/assets/javascript/geofire.min.js
new file mode 100644
index 0000000..c08b8e2
--- /dev/null
+++ b/assets/javascript/geofire.min.js
@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).geofire={})}(this,function(e){"use strict";var t=function(){function e(e){if(this._cancelCallback=e,"[object Function]"!==Object.prototype.toString.call(this._cancelCallback))throw new Error("callback must be a function")}return e.prototype.cancel=function(){void 0!==this._cancelCallback&&(this._cancelCallback(),this._cancelCallback=void 0)},e}(),l=10,f="0123456789bcdefghjkmnpqrstuvwxyz",h=40007860,_=110574,y=5,u=22*y,i=6378137,a=.00669447819799,o=1e-12;function d(e){return Math.log(e)/Math.log(2)}function s(e){var t;if("string"!=typeof e?t="key must be a string":0===e.length?t="key cannot be the empty string":755<1+l+e.length?t="key is too long to be stored in Firebase":/[\[\].#$\/\u0000-\u001F\u007F]/.test(e)&&(t="key cannot contain any of the following characters: . # $ ] [ /"),void 0!==t)throw new Error("Invalid GeoFire key '"+e+"': "+t)}function v(e){var t;if(Array.isArray(e))if(2!==e.length)t="expected array of length 2, got length "+e.length;else{var r=e[0],n=e[1];"number"!=typeof r||isNaN(r)?t="latitude must be a number":r<-90||90