Bravo, thank you, and a Map question

First off - Bravo on an amazing job with Appgyver! I’m very impressed. Thanks for all the hard work you’ve put into it. I’m excited to continue to learn and create with it.
I’ve watched all the tutorials and made several test/prototype projects. Your in-app learning system definitely helps. I am still a noob though, so perhaps my questions is a little basic:
-I’m experimenting with the embedded map view example. I works great with the initial values in the page variable mapMarkers including for manually creating additional markers (via the properties in the Page Variable settings). But what I would like to do is bring in a Data Variable collection of records and create a new marker for every record containing longitude and latitude fields. What would be the best way to approach that?
Thanks in advance for any suggestions!

1 Like

The map view will render whatever is set to the Markers property, as long as they are in the correct format.

So, if you have a set of records in your backend that are loaded into the data.myCollection data variable, let’s say with the schema that you have lat and lon and labelText fields.

You can then use the MAP formula function to then transform the data into the correct format, e.g.

MAP(data.myCollection, {latitude: item.lat, longitude: item.lon, iconName: "heart", label: item.labelText})

The {key: value} syntax allows you to construct an object within a formula, and in the context of the MAP function specifically, item contains the current object under iteration.

Hope that makes sense!

OK, great. That’s very cool. I’ll see what I can do. Thank you!

Hi Harri and Dennis,

I spent ~12 hours on this and I cannot get this to work. The map renders static coordinates ok but, I cannot get the map to render dynamic data. I have tested with numerous combinations of page and data variables, and syntax.

I have created the page variable and loaded the record data variable into the page variable. I have created a Toast to show the markers to render and it looks good. However, nothing is showing up on the map.

I’ve also tried using the MAP function against the Data variable and Page variable to set the initial zone. Again, no joy.

or

97841 - Page 10

Any help appreciated.

Sorry for taking a while to get back!

For the initial region, you need the binding to be an object, specifically one with the keys:

  • latitude
  • longitude
  • latitudeDelta
  • longitudeDelta

MAP takes an array and returns an array with all the items transformed according to the transform formula. So, if you have an array of marker objects in pageVars.mapMarkers and you want to initialize the initial region latitude according to e.g. the first item in the array, you’d use LOOKUP(PICK_ITEM(pageVars.mapMarkers, 0), "latitude") and the same for longitude. To find a specific marker, you could use FIND.

If you wanted to calculate a map initial region that fits all the markers in pageVars.mapMarkers, you’d probably want to do that via the JavaScript node currently, as the math to figure the center point and radius of an array of coordinates is a bit tricky (you can find JavaScript examples by Googling). Would of course be a good feature to have “Fit initial region to markers” boolean to do the trick straight away!

Markers
Your code does look valid – could not test since I was not sure how to open the map page with a correct ID parameter to fetch a valid asset record.

One thing that comes to mind is that if there’s some issue with refreshing the map after marker data changes. Can you see what happens if you add a dataLoaded page variable that’s initially false and set to true after the mapMarkers array is set, and bind the map component’s visibility to pageVars.dataLoaded.

Hey Harri,

I tried the Lookup formula but the app keeps shutting down on Android. I get:

I also tried creating a page variable for the object but no initial location gets passed through to the map.

I created the delay but Google maps loads immediately regardless. It looks like it does not respect the visibility condition, nor the change in page variable:

(I also put the map in a container and tried the visibility rule on the container, but same result)

To test in my app, click a location on the list view such as Japan, then click the Map icon on the right-hand side of the record to open the Map Test page and pass the ID through.

You’ll see the lat and long data variables at the top which should be rendered on the map.

Thanks,
Jeff

You’re right, the map component doesn’t respect visibility property. Also you cannot programatically move the map around after its mounted. Unfortunately couldn’t figure out any reasonable hack around this in composer so needs some development to get this fixed :frowning: .

In the meantime I’d suggest you to figure out the initial coordinates and markers before opening the map page and passing them as page parameters (remember that you need to turn them into numbers when put on map component as params are always strings).

1 Like

Hi Sasu,

I tried the parameter suggestion. I converted the latitude & longitude to strings, passed them through, bound the 2 parameters directly to the initial map markers, it works ok. Thanks. The map now goes to the correct location when loaded.

However, it works OK on iPad but not on Android. On Android, it still shuts down Appgyver completely.

Also, it seems like the initial map markers do not like page variables no matter what you do. If you assign the parameters to page variables, then bind those variables to the initial map markers, it doesn’t work. I tried converting the parameter to a string as it was assigned to the variable, or assigning the string param to a string var, and then converting it using a formula when binding it to initial map, but it didn’t work.

Any ideas why?

Thanks
Jeff

Hey,
I had no issues passing them like this image
(even on my android)
(also note that if you use this example I messed up the long and latitude on that screenshot)

Make sure you’re passing an array with object of the correct form to the map markers.

Following on from that:

If you pass the parameters straight through to the map, it works ok too.

So my map now goes to the correct initial position, and also marks the correct item location:

Thanks
Jeff

Yes, the map works ok when I send static text through. It is not ok when the markers are dynamic.

I left the 2 variables in my app. If you want to take a look and make sure they are the correct form, that may help explain why they didn’t work.

Any dynamic value bound to the map component that is not defined on the initial render will make the app explode.

We’ll be working on the component to make it better.

1 Like

Great post. Covered a ton of ground for me. Question: Is there a way to get the street address, city, zip into the dialog when user clicks on the pin?

Hi there :slight_smile:

Any update on the upgrade of the map component? Seems like we can’t, for instance, have users dynamically filter the list of markers…

Alrighty, works fine if I seed a page variable on page mount, and only show the map component afterwards.

Is it possible to recenter the map back to its initial region at a later stage when the user taps a button (without navigating away from the page)?

1 Like

I’ll be soon working on improvements to the map component – it has taken us much longer than we would have liked to get to this point unfortunately :sweat_smile:

I’m not sure about recentering the map – have you tried just using a page variable for the initial area value? Those may not work but that’s probably the best bet at the moment. Other than that there’s no way that I know of at the moment, but I’ll consider this while evaluating what plugin we’re using for our map component.

Yes I tried using variables for the initial region, but the map does not recenter automatically on change (and I couldn’t find a way to force it).

The only workaround I’ve found so far is navigating to the page again, with the new values for the initial region. Works fine!

The only downside to this is the push transition that it doesn’t look like we can disable (or can we?).

Hmm have you tried using the flow function replace page instead of open page? Perhaps that would help? :thinking:

Yes, there’s also a push transition with the replace page flow function…