An app that I need to build will take the user’s location (lat/long) and tell them the gas stations nearest to them. Any thoughts on how I can get the user location from the browser? I’m attempting to not have to code an Android app in order to do this.
3 Likes
We don’t have native support for this in Anvil yet, but you can request access to the user’s location from Javascript:
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation
You could then use anvil.call() to call from Javascript into Anvil (quick-and-dirty guide here) to share the user’s location.
(Ideally, I would create a custom component that sets up a callback in Javascript via watchPosition(), and then raises an event with the latitude and longitude.)
1 Like
Thanks! I will give it a go!
Hey,
Here’s what I cooked up over a lazy weekend:
Where Am I? (https://where-am-i.anvilapp.net)
First, I built a “Geolocator” custom component. It requests geolocation information (using Javascript in a Custom HTML form), then raises the custom event update_position every time the browser gives it a new position:
https://anvil.works/ide#clone:EFABX52BM4GXXA4Y=2OZE3DVMWSWCXH6NGNLKPKQW
Then, I built the “Where Am I?” app using the Geolocator component. The “Where Am I?” app is pure Python - once you’ve written the custom component to access to low-level browser APIs, you can do the rest with standard Anvil features:
https://anvil.works/ide#clone:XNMSCSRWUFFMUH2X=V5JK6U6BJYYNYQ5SNVFA23NA
(NB once you’ve cloned “Where Am I?”, you’ll have to open its Dependencies menu and select your version of the Geolocator component - otherwise it will complain about a missing/deleted dependency. You will then need to delete and recreate the geolocator_1 component so you’re using your version rather than mine, and re-bind its update_position event.)
6 Likes
I really appreciate this! Building a site where when the user visits, it pulls their location and calculates the closest gas station they can utilize (there are specific ones). From there a link will be generated that when clicked on Google Maps is opened up on the device to provide turn by turn directions.
Beat me to it 
1 Like
https://findmefuel.anvilapp.net/ <—happy to report I have most of what I wanted complete!
To Do:
Build a table
Order by closet station
Make the coordinates clickable
I am able to generate a Google Maps link that will allow the user to ultimately open the Maps App on their phone to get turn by turn directions, but there seems to be an issue with one device on getting it to open the app.
1 Like
Yup that is what you should see!
When you click “Let’s Fuel Up”, it gets your latitude and longitude. From there the server calculates how far you are from each of the 67 stations available to get fuel at. It then displays the station name, distance from your location and the latitude/longitude of the station. I had programmed it to generate a hyperlink that should open up the Google Maps App on your phone. The issue is on the one particular model it doesn’t open up the Maps App.
I guess the clue was in the words “Mobile Device” - I did that on my desktop.
oops.
Is there a way to return a value back to the javascript from a sever module? Basically, I want to build a table and convert the link to a clickable link. My thought was I could have the server module output json and if I can return that json to javascript CSS could take over to format it into a table.
Hi Merdydd,
I am really struggling to get this to work on my side. I’ve managed to get the location request working by creating a new dependency, but the position on the map is not updating. Perhaps could you indicate more clearly what you mean by " delete and recreate the geolocator_1 component so you’re using your version rather than mine, and re-bind its update_position event"
Try this link, which lets you clone both apps at the same time:
https://anvil.works/ide#clone:EFABX52BM4GXXA4Y=2OZE3DVMWSWCXH6NGNLKPKQW