GeoLocation filtering and GPS tacking

It has come up a couple of times how to filter things like lists of events or users that are within a certain distance of your current location. So I built a GeoLocation component that gives you access to the users geolocation data, including latitude, longitude, altitude, speed, and direction.

With that data we can send the data to Xano, Integromat, or any other backend you like and get a filtered list of things that are close to you.

The component code can be found here

And a quick video explaining how you can use the component and Xano to filter your list.

7 Likes

Quick update to my last post. I created the GeoLocation component to fetch the users latitude and longitude, but I still needed to send that data to a backend service to filter the records. I have now added a new component to the same library that will handle filtering the records on the client (this is important to note that it is client side filtering). A quick video can be found here

1 Like

Thank you for this post. I was excited about using Adalo, been exploring for a couple of days, but was about to go elsewhere due to GeoLocate missing, and it being a big part of my planned app.

Does this component have a way to take the Lon & Lat and set a marker in Google maps? I’d like the user to be able to send out a message to family or friends of their current location with a map marker image attached.

Thanks again.

Hi Tammy.

Welcome to the community. There is no straight forward answer to your question except to say probably.

The simplest way to accomplish what you want would be to send an in-app chat message using a web linked google maps. So we would automatically send a text based chat message with the a link https://www.google.com/maps/search/{currentLat from component},+{currentLong from component} then the family members can open the link to get the map representation of where they are everytime they click on the GeoLocation button.

The current Adalo implementation of Google Maps does not support Latitude and Longitude markers, only addresses. If you wanted to have the Map in app, someone would need to modify the currentmap component to support Lat/Long, or you would need a service to convert lat/long into address format. Relatively trivial to accomplish if you are a react-native developer. If you were to do this, you would send a message to everyone to look in the app at the users current location on the map. It would not be an image, it would be the map component with the users location on it as a marker.

Now for the last part, and probably the biggest stumbling block that I don’t have an answer to, is uploading images can not be done automatically. To take an image of the map with the coordinate and upload it in Adalo would be a convoluted process. You would need to create a custom screenshot component, or when modifying the map component mentioned above include the built-in maps screenshot ability. Then save it to the phone and a user would then use the filepicker to upload the image. Sadly you cannot set an action to have an image callback and save it in an image field in the database. You could of course, have the image saved as text data and use another custom component that renders base64 like the html renderer component, but again, it is not a simple no-code solution.

We could also use a service like Twilio or simple SMS messages to send text messages out of app with the image attached to the SMS.

I hope this helps you on your journey. Any more questions, or clarifications feel free to reach out.

2 Likes

Wow, big thank you for such a detailed and thoughtful response. I’m not fixed on the screenshot, I like the idea of the map component sending an in-app message to the component, but I’m not a react developer, unfortunately.

Its a time sensitive project so I’m exploring Flutterflow because they have this component now, but I wasn’t crazy about the fact that they don’t have in-app purchases via the native mechanism. It still allows cc. paypal, google pay, and apple pay, through a component but my preference was native.

That being said, I fully recognize that both platforms are either newish or always developing. But I was a little discouraged when perusing the forum to see so many issues lately as well as complaints of unanswered tickets / poor response from customer service. But I imagine they are growing pains.

I’ll still follow Adalo, it looks like it has great features and potential. As I said before, big thank you for your help. I can see your contribution will help many.

Cheers!

Wow. This. Is. Big!

Now to install nodejs & yarn

3 Likes

@TKOTC

Thanks for your valuable support, but when this component will be available in the marketplace?

Hi @TKOTC
I just downloaded the component and tried to add it on my Adalo account. Yarn installed, Node installed, adalo dev mode enabled, and all commands was correctly. But I have a problem, it show me “User do not have authorization to publish a new versions to pf-adalo-geo-location”
Can you help me?

1 Like

@alexbarciog in package.json you need to change the name of the component.

Hi @James_App_Maker ! I changed the name of component, but still get an error.
When I enter “npx adalo publish” and publish the app on private mode I get the error in the image below and a folder named “-p” is created in my component files

Yeah, looks like you’re on windows.

Please look at this post:

Hi @TKOTC

I try to install but without success.
I’m not a developer and for sure I made some mistake.
I installed:
Node JS
Yarn
And the files of the tool
I changed the name inside the file package.json
And when I start to publish I answer for Privacy and start the procedure.
There are a lot of warnig about omponent missing to the procedure.
The first was a simple .png and without it the procedure failed.
I put inside this PNG and the procedure give me success, but in Adalo appear just the GeoFilterdeList (2 of them I don’t know why).
The component GeoLocation doesen’t appear.
Follow the results of the terminal:
Adalo Marketplace

Validating package.json configuration
? Is your library public or private? private
Building Library…

{
“logo”: “./logo.png”,
“displayName”: “GeoLocation”,
“components”: [
{
“name”: “GeoFilteredList”,
“manifest”: “./src/components/GeoFilteredList/manifest.json”
},
{
“name”: “GeoLocation”,
“manifest”: “./src/components/GeoLocation/manifest.json”
}
],
“iosInstallScript”: “./scripts/install_ios.sh”,
“androidInstallScript”: “./scripts/install_android.sh”,
“name”: “pf-adalo-geo-location-simone4”,
“version”: “1.0.3”
}

[
‘./node_modules/react-native/Libraries/Components/UnimplementedViews/UnimplementedView.js\n’ +
‘Module build failed (from ./node_modules/babel-loader/lib/index.js):\n’ +
‘SyntaxError: /Users/simone/Downloads/adalo-geolocation-master/node_modules/react-native/Libraries/Components/UnimplementedViews/UnimplementedView.js: Unexpected token, expected “{” (19:47)\n’ +
‘\n’ +
‘\x1B[0m \x1B[90m 17 |\x1B[39m \x1B[90m * View component and renders its children.\x1B[39m\x1B[0m\n’ +
‘\x1B[0m \x1B[90m 18 |\x1B[39m \x1B[90m */\x1B[39m\x1B[0m\n’ +
‘\x1B[0m\x1B[31m\x1B[1m>\x1B[22m\x1B[39m\x1B[90m 19 |\x1B[39m \x1B[36mclass\x1B[39m \x1B[33mUnimplementedView\x1B[39m \x1B[36mextends\x1B[39m \x1B[33mReact\x1B[39m\x1B[33m.\x1B[39m\x1B[33mComponent\x1B[39m\x1B[33m<\x1B[39m$FlowFixMeProps\x1B[33m>\x1B[39m {\x1B[0m\n’ +
‘\x1B[0m \x1B[90m |\x1B[39m \x1B[31m\x1B[1m^\x1B[22m\x1B[39m\x1B[0m\n’ +
‘\x1B[0m \x1B[90m 20 |\x1B[39m render()\x1B[33m:\x1B[39m \x1B[33mReact\x1B[39m\x1B[33m.\x1B[39m\x1B[33mNode\x1B[39m {\x1B[0m\n’ +
‘\x1B[0m \x1B[90m 21 |\x1B[39m \x1B[90m// Workaround require cycle from requireNativeComponent\x1B[39m\x1B[0m\n’ +
“\x1B[0m \x1B[90m 22 |\x1B[39m \x1B[36mconst\x1B[39m \x1B[33mView\x1B[39m \x1B[33m=\x1B[39m require(\x1B[32m’…/View/View’\x1B[39m)\x1B[33m;\x1B[39m\x1B[0m\n” +
’ at Object._raise (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:541:17)\n’ +
’ at Object.raiseWithData (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:534:17)\n’ +
’ at Object.raise (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:495:17)\n’ +
’ at Object.unexpected (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:3550:16)\n’ +
’ at Object.expect (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:3524:28)\n’ +
’ at Object.parseClassBody (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:13922:10)\n’ +
’ at Object.parseClass (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:13897:22)\n’ +
’ at Object.parseStatementContent (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:13183:21)\n’ +
’ at Object.parseStatement (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:13139:17)\n’ +
’ at Object.parseBlockOrModuleBlockBody (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:13728:25)\n’ +
’ at Object.parseBlockBody (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:13719:10)\n’ +
’ at Object.parseProgram (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:13061:10)\n’ +
’ at Object.parseTopLevel (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:13052:25)\n’ +
’ at Object.parse (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:14800:10)\n’ +
’ at parse (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:14852:38)\n’ +
’ at parser (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/core/lib/parser/index.js:52:34)\n’ +
’ @ ./node_modules/@react-native-community/toolbar-android/js/ToolbarAndroid.web.js 15:6-87\n’ +
’ @ ./node_modules/@protonapp/material-components/node_modules/react-native-vector-icons/dist/lib/toolbar-android.js\n’ +
’ @ ./node_modules/@protonapp/material-components/node_modules/react-native-vector-icons/dist/lib/create-icon-set.js\n’ +
’ @ ./node_modules/@protonapp/material-components/node_modules/react-native-vector-icons/dist/MaterialIcons.js\n’ +
’ @ ./node_modules/@protonapp/material-components/src/SimpleList/index.js\n’ +
’ @ ./node_modules/@protonapp/material-components/index.js\n’ +
’ @ ./build/components/GeoFilteredList/GeoFilteredListComponent.js\n’ +
’ @ ./build/components/GeoFilteredList/index.js\n’ +
’ @ ./index.js\n’ +
’ @ ./dist/input/editor.js’,
‘asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).\n’ +
‘This can impact web performance.\n’ +
‘Assets: \n’ +
’ editor.js (1.42 MiB)‘,
‘entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.\n’ +
‘Entrypoints:\n’ +
’ main (1.42 MiB)\n’ +
’ editor.js\n’,
‘webpack performance recommendations: \n’ +
‘You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.\n’ +
‘For more info visit Code Splitting | webpack
]
SUCCESSFULLY COMPILED EDITOR COMPONENTS.
[
‘./node_modules/react-native/Libraries/Components/UnimplementedViews/UnimplementedView.js\n’ +
‘Module build failed (from ./node_modules/babel-loader/lib/index.js):\n’ +
‘SyntaxError: /Users/simone/Downloads/adalo-geolocation-master/node_modules/react-native/Libraries/Components/UnimplementedViews/UnimplementedView.js: Unexpected token, expected “{” (19:47)\n’ +
‘\n’ +
‘\x1B[0m \x1B[90m 17 |\x1B[39m \x1B[90m * View component and renders its children.\x1B[39m\x1B[0m\n’ +
‘\x1B[0m \x1B[90m 18 |\x1B[39m \x1B[90m */\x1B[39m\x1B[0m\n’ +
‘\x1B[0m\x1B[31m\x1B[1m>\x1B[22m\x1B[39m\x1B[90m 19 |\x1B[39m \x1B[36mclass\x1B[39m \x1B[33mUnimplementedView\x1B[39m \x1B[36mextends\x1B[39m \x1B[33mReact\x1B[39m\x1B[33m.\x1B[39m\x1B[33mComponent\x1B[39m\x1B[33m<\x1B[39m$FlowFixMeProps\x1B[33m>\x1B[39m {\x1B[0m\n’ +
‘\x1B[0m \x1B[90m |\x1B[39m \x1B[31m\x1B[1m^\x1B[22m\x1B[39m\x1B[0m\n’ +
‘\x1B[0m \x1B[90m 20 |\x1B[39m render()\x1B[33m:\x1B[39m \x1B[33mReact\x1B[39m\x1B[33m.\x1B[39m\x1B[33mNode\x1B[39m {\x1B[0m\n’ +
‘\x1B[0m \x1B[90m 21 |\x1B[39m \x1B[90m// Workaround require cycle from requireNativeComponent\x1B[39m\x1B[0m\n’ +
“\x1B[0m \x1B[90m 22 |\x1B[39m \x1B[36mconst\x1B[39m \x1B[33mView\x1B[39m \x1B[33m=\x1B[39m require(\x1B[32m’…/View/View’\x1B[39m)\x1B[33m;\x1B[39m\x1B[0m\n” +
’ at Object._raise (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:541:17)\n’ +
’ at Object.raiseWithData (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:534:17)\n’ +
’ at Object.raise (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:495:17)\n’ +
’ at Object.unexpected (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:3550:16)\n’ +
’ at Object.expect (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:3524:28)\n’ +
’ at Object.parseClassBody (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:13922:10)\n’ +
’ at Object.parseClass (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:13897:22)\n’ +
’ at Object.parseStatementContent (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:13183:21)\n’ +
’ at Object.parseStatement (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:13139:17)\n’ +
’ at Object.parseBlockOrModuleBlockBody (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:13728:25)\n’ +
’ at Object.parseBlockBody (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:13719:10)\n’ +
’ at Object.parseProgram (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:13061:10)\n’ +
’ at Object.parseTopLevel (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:13052:25)\n’ +
’ at Object.parse (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:14800:10)\n’ +
’ at parse (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/parser/lib/index.js:14852:38)\n’ +
’ at parser (/Users/simone/Downloads/adalo-geolocation-master/node_modules/@babel/core/lib/parser/index.js:52:34)\n’ +
’ @ ./node_modules/@react-native-community/toolbar-android/js/ToolbarAndroid.web.js 15:6-87\n’ +
’ @ ./node_modules/@protonapp/material-components/node_modules/react-native-vector-icons/dist/lib/toolbar-android.js\n’ +
’ @ ./node_modules/@protonapp/material-components/node_modules/react-native-vector-icons/dist/lib/create-icon-set.js\n’ +
’ @ ./node_modules/@protonapp/material-components/node_modules/react-native-vector-icons/dist/MaterialIcons.js\n’ +
’ @ ./node_modules/@protonapp/material-components/src/CardList/index.js\n’ +
’ @ ./node_modules/@protonapp/material-components/index.js\n’ +
’ @ ./build/components/GeoFilteredList/GeoFilteredListComponent.js\n’ +
’ @ ./build/components/GeoFilteredList/index.js\n’ +
’ @ ./index.js\n’ +
’ @ ./dist/input/runtime.js’,
‘asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).\n’ +
‘This can impact web performance.\n’ +
‘Assets: \n’ +
’ runtime.js (1.41 MiB)‘,
‘entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.\n’ +
‘Entrypoints:\n’ +
’ main (1.41 MiB)\n’ +
’ runtime.js\n’,
‘webpack performance recommendations: \n’ +
‘You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.\n’ +
‘For more info visit Code Splitting | webpack
]
SUCCESSFULLY COMPILED RUNTIME.
SUCCESSFULLY COMPILED METADATA.
COPIED LOGO: dist/logo.png
COPIED ICON: dist/icons/GeoFilteredList.png
COPIED ICON: dist/icons/GeoLocation.png

Compressing pf-adalo-geo-location-simone4
Compressed Size 33.7 MB
Gathering pf-adalo-geo-location-simone4 components
Publishing pf-adalo-geo-location-simone4@1.0.3 to Adalo. This may take a few minutes…
Successfully published pf-adalo-geo-location-simone4@1.0.3 to Adalo. :rocket:

Please Help.

Hi Simone,

Your component has been published. All you need to do now is go to your Adalo account (profile icon, top left corner of the editor) then click on developers, then you’ll see the geolocation library that you just published. Click on the three dots (right) and add it to your team.

Then reload the editor and it’ll show in the private section for components. :slight_smile:

First of all thanks for the answer.
I made what you suggest before I posted my request, but ther are 2 equal tool:
GeoFilteredList

There ins’t any GeoLocation


As you can see I tryied many times.
I don’t kow How to remove those module from the repository. To remove from the team it’s simple.
Anyway, without “GeoLocation” I can’t do anything.

Thanks again :wink:

You need to change the order of the packages in the manifest and retry it, you’ll get the geolocation feature.
I’m still hitting errors pushing it to testflight, will revert when that’s all fixed.

2 Likes

YES!
It Works.

Thank you :wink:

1 Like

Hi! I added the component on my app, I did the settings but when I preview the app is not showing anything. Any suggestions to fix that?

Any suggestion? I need that list

Hi. We are working on making the list more robust imminently. Track the progress here if you need. GeoFilteredList showing error in execution · Issue #6 · pragmaflowinc/adalo-geolocation · GitHub

Also, feel free to install the app using the private marketplace, this way, when we fix it you eill not need to pull and recompile/deploy.

https://adalo.pragmaflowservers.com/install-component

I hope this helps you on your journey.


hi) i have same error) what should i do ?