How to dynamically filter map reports based on user's current location?

  • 1
  • 1
  • Question
  • Updated 5 years ago
  • Answered

Can map reports (viewed on mobile devices) dynamically filter locations for the user's current location? (Or at least the portion of the map visible in the frame?)

In other words, if there are 1,000 locations, a regular map report will only show the first 100 in the table, and not dynamically adjust what it shows based on the user's location (or update if one zooms in to a section of the map). But If I'm on the go, and view the map report with a mobile device, I may only care about the locations nearby my current location.

Is there a way to enable this type of location-based dynamic filtering for mobile use?

Photo of Michael

Michael

  • 160 Points 100 badge 2x thumb

Posted 5 years ago

  • 1
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
You need to arrange for a button to call the code in the pastie below to get the user's latitude and longitude and then form a query using delta latitude and longitudes find those records which lie within a "bounding box" (on a sphere):

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=309

Perhaps I will create a working demo but I have to purchase a truckload of fireworks right now.
Photo of Michael

Michael

  • 160 Points 100 badge 2x thumb
I would like to see a working example - please don't blow yourself up tomorrow...
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
It's a 4th of July tradition around here that after we set off our truckload of snakes we roadtrip to all the White Castle restaurants in the area. So to progress this map demo I am sharing a copy of my private application that has all the White Castle restaurants with geocoded addresses:

White Castle ~ Cravers & Sliders
https://haversineconsulting.quickbase.com/db/bi5963543

Later today after we set of our snakes we will be making the rounds to all the White Castle restaurants in the Detroit Metro area. Now the center of Detroit has latitude and longitude of approximately:

Detroit:
42.3314° N, 83.0458° W

So I want to search for restaurants where the latitude and longitude meet say both of these criteria:

42.1 < [Latitude] <= 42.6
-82.7 > [Longitude] >= -83.3

White Castle Restaurants Near Dan
https://haversineconsulting.quickbase.com/db/bi596357f?a=q&qid=6

Here is what QuickBase calls the "Expanded URL" of this query:

?a=q&qt=tab&dvqid=6&query=( {'10'.GT.'42.1'} AND {'10'.LTE.'42.6'} AND {'11'.LT.'-82.7'} AND {'11'.GTE.'-83.3'})

This query returns 29 restaurants out of the total of 408 total restaurants. Tonight we are going to visit all of them in turn.

If look at the attachment you can see that this query represents those restaurants that lie in what is called a quadrangele defined by the intersection of a lune (the area between two meridian lines of constant longitude: lon1 & lon2) and a zone (the area between two parallel lines of constant latitude: lat1 & lat2 ).
So this is just the setup to have an application to work with that is fully geocoded. Note that this does not yet make use of any QuickBase address fields or Map reports. We will add those features later in the demo. In a subsequent answer I will follow this up with a working example that displays only those pins on a map that are near your location using the geolocation API built into your browser for which I previously listed a fragment of code.
Well that's it for now - we are about to light off our truckload of snakes and then make the rounds to all 29 White Castle restaurants. Happy 4th of July!
What does it take to get a mobile device to Query its current location in order to construct filters for the Query?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
That answer is in my first reply. This is an application that I intend to user for several purposes so I will integrate the Location API code that finds your current location in a follow up answer. But you can paste the essential code:

navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
console.log(lat, lon);
});

into your JavaScript console and your latitude and longitude will be logged to your console if you grant permission (a dialog will popup asking you to share your location). See screenshot attached.
Photo of mikebrady

mikebrady

  • 20 Points
Dan, I understand what you are saying here, the part I am struggling with is how you implement the code. I'm wondering if you can point me to a post that might explain how to implement javascript in a button like you describe.
Photo of mikebrady

mikebrady

  • 20 Points
Sorry, answered my own question.  I was looking to get JUST the long and lat, which I am able to do. Now I just need to figure out how to write those to fields.
Photo of mikebrady

mikebrady

  • 20 Points
For anyone else who stumbles across this thread, here's how I used the Javascript that Dan gave:
I added a URL formula field, and then in the formula put the following:
"javascript:
paste all of Dan's code here
"

Be sure to include the open and closing quotes. I don't have this doing exactly what I want yet, but that's how I got the Javascript working. Probably incredibly basic to everyone here, but just in case I thought I would post these details of how I got it working.