Embedded map view troubleshooting

Starting up a thread about the new map component.

When searching for it in the marketplace in only shows when inputting the token (PO5OHxTVZXURlDsQ2SFeGQ). It doesn’t come up searching more generally for map components. I’m also not seeing the map example come up at all, with or without its token.

The search result for the map component is a broken image icon, but I am still able to install it. Once dropping the component in my app, it’s got a broken image icon there as well. When previewing, I am not seeing a map on my test page.

I am unclear how to make sure I am totally up to date, for beta features like this. Does Composer update itself, or is there a setting somewhere? Is the previewer updated separately? How to I ensure that I am on version 1.8?

There was an issue that prevented some users from accessing the example and the map; both should now be possible to find via marketplace search. Also, the broken image should now be fixed (although it still seems to persist in the preview image of the example, will look into fixing that).

I tested a fresh install of the example page onto an app and it worked fine. 1.8.0 refers to the AppGyver Preview app version; you can see it by tapping your email address at the top of the app list view.

Note that the beta version only works on iOS and Android, not web yet.

Got an error, on Android.

I also pulled down the example (RpwyoNUHlL0xs1dEORpwcQ). Seems to create a new page. If I delete the default empty page, and run the app, it gets me an error as well, about specifying a route when configuring a navigator.

So looks like a bug at play here – one is that the default value for the markers array is not initialized correctly, so the misconfigured object that gets set by default causes the crash.

The example page shows the correct configuration, but after adding the page, you need to add it to your navigation via the Navigation section in the global toolbar.

(Another bug enables you to remove a page that the current navigation config points to, which then causes your app to try and open a page that doesn’t exist anymore.)

Ah OK. Got it working, thanks. Navigation is a bit confusing. Not sure if it’s covered in the learning footer tutorials? Seems like it could maybe be unified with the Pages dropdown.

Example is just a full page map, with one marker. Is this something I can build out in a way where a user could navigate in and out of a map page, and see and interact with a lot of markers placed by other users?

Fair feedback about the navigation; we’ll consider how to improve it or at least make it part of the onboarding flow.

The rendered markers come simply from the contents of the Markers array, so you can definitely create the functionality you describe – however, at the moment the map reacts to just marker presses, not presses on the map itself, so adding a marker where the user tapped is not possible at the moment; we’ll fix this in the next version.

1 Like

Playing around with this component in my first few days of testing AppGyver…

I am trying to get the map to open to my current location.

I set two page variables for latitude and longitude, and set the map properties for initial location to the page variable.

Then I fire a latest GPS to update the page variable.

It isn’t moving to my location, but I am not sure if the initial location is only used when the map loads which may well be before I fire up the GPS latest location and change the page variable.

Is the component able to change its location externally yet? i.e. could it be set up to follow me around as I drive?

Currently the map view’s visible area can’t unfortunately be controlled programmatically, but we’ll make that possible in the next release.

A hack would to set Visible to false, update the initial location and then set the Visible to true, which re-mounts the component and should update the location, but that of course causes an undesirable flashing when the component hides and shows itself again.

1 Like

I’m hoping to replicate a setup I have in an existing web app, where a user can search Google Places, select one (with auto complete), associate it with a date range, and display it on a map that is filtered/view-adjusted by user type (friends) and date. Sort of a simplified AirBnB map page.

Is that something you think could be pursued / hacked together now, or better to wait for a couple more updates?

I’m almost done with the training, and Composer is very promising so far! Hope to build out something cool with it soon.

As long as you get the Google Places search to return latitude/longitude, then that specific functionality can be done with Composer with the current map component.

There’s essentially two sides to this: filtering the markers based on the selected criteria, either by binding the Markers property directly to an appropriate formula (combination of SELECT and MAP), or then maintaining the filtered markers array in a separate pageVars.filteredMarkers variable.

The other side is then the UI to query Google Places and generate an appropriate record in your database, so that the DB has the source data to apply the filters on.

Entered latitude and longitude however it asks for latitudedelta and longitudedelta…

Anyone know what to do here & find the ‘delta’ part of a location?

The map shows near to the location (the local river actually) but not the specific location.

Any ideas?

Not sure if I can help you with specifics but


(https://stackoverflow.com/questions/36685372/how-to-zoom-in-out-in-react-native-map/36688156#36688156)

Shows what these delta values are if you need to play around or calculate something with them.

Hi - I’m having trouble with understanding this. I have added the example page to my app but if I change the page parameters nothing changes on the map itself. According to the example data the icon should be a map-marker labeled ‘My location’ and it should be black. I see a blue heart labeled my-marker. If I change any of the page variable example data like lat or long nothing changes on the map.

I’ve managed to add a map to another page in my app and have set the map region correctly but i can’t see any markers rendered.

Ignore first paragraph - learning slowly. Found where initial values for page param are set (not to be confused with example values, my bad).

Still having difficulty with setting multiple markers from a variable lat/long. I can set a single marker but only by passing both lat long variables to page parameter (along with id) and calling them from there.

I can not set multiple markers from a variable. Want to try it without using page param as is should work. Trying to use a formula

MAP(data.myDatabase, {label: “Label”, payload: {data: ““Hello there!””}, iconName: “map-marker”, iconSize: 20, latitude: item.lat, iconColor: “#000000”, labelFont: “Open Sans”, longitude: item.long, labelColor: “#000000”})

but keeps returning ‘List items are incompatible.’

OK Kiddies, I hope we’re all enjoying my journey here. I think you are all my rubber duck at the moment.

So. I’ve given up on the formula method. Went back to my database (a REST API direct integration with Google Firebase Realtime Database which I have synced to a google sheet - ask me about that sometime) and added another table with just the map data in the exact format required by the ‘Markers to render’ property. My test data set has 100 records.

I created a new data resource and made sure the scheme matched the ‘Markers to render’ property. (Not before nearly smashing a coffee cup when I was given the “list of objects with 9 properties must match list of objects with 9 properties” error message)

And SUCCESS! I was able to bind the variable to the property!

BUUUUUUUT. Still no markers showing. So I’m going to the pub. If anyone can point me in the right direction or give me a hint as to what I’ve done wrong I’ll buy you a pint.

The current map view iteration is notoriously picky about when the data is loaded, and doesn’t seem to play nice if the data is changed after the map is rendered – you could try putting the markers data into an app variable before the page with the map is opened and binding the markers property to that… Sorry for the flakiness!

We hope to get this runtime upgrade done soon so we can focus on improving the components, map among them!

3 Likes

I can’t tell you how much I appreciate your work on this. I know it’s ‘no code’ but I have gone on a real journey teaching myself this platform. The way it is structured gets you thinking with a programmers mindset (more so than other ‘simpler’ platforms with far less functionality) without getting lost in a great tangle of code. I think you are teaching us how to code secretly. I’m just playing with this and never anticipate breaking your paid ceiling but I really hope your pricing plan works as a business model because you will have nurtured a huge community of users that surely must drive commercial uptake.

Thanks for the tip. I will try to hack it together and look forward to the new component!

2 Likes

I cant get this to show a map. It just displays a blank blue background.

Nevermind. The longitude and latitude values were undefined when the map drew itself. Resulting in 0, 0 in the ocean off the coast of Africa

Hi Harri,
Can you please post some example of JSON, which scheme will return data possible to create several markers, I can draw one marker dynamicaly by page variables but can not load them from GET JSON file like:
[ {“iconColor”:"#000000", “iconName”:“map-marker”, “iconSize”:“12”, “labelColor”:"#000008", “labelFont”:“Open Sans”, “payload”:"", “label”:“MyCarPlate”, “latitude”:“49.155”, “longitude”:“20.429” },…,…]… Noticed me that requested object with 9 properties not match with object with 9 properties.

1 Like