Enhanced map with text and icons - now: including template

url: https://mapandlist.glideapp.io/

Been doing some testing on an enhanced map. This is just a workaround until we get native enhanced map with text and icons.
@mark could be cool to have a bit more functionality on the maps where we could get something like an inline list in the same view as the map - along with text and icons for the different places.

The app uses the mapbox api - just like map component in Glide - but with more places on the same map.

Let me know if it makes sense.

12 Likes

Interesting @Krivo well done :fire:

Love this! Can’t wait to play around with this feature!

@krivo which type of api from mapbox did you use? are you willing to discuss this further?

Boomer

@Boomer_Rose Take a look inside the app

Template of app to study

I have made a template of the app:

Cloudinary account needed
If you haven’t got a Cloudinary account yet the please consider signing up by an invitation link. This will give some extra credits for me and allow for more free transformations, file storage etc. Mine is: https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/ufjxv2xds2yignimyvnu

But you could also ask some of the other Cloudinary gurus of the community for their invitation link

What to change in the app to make it work

I do have links to three images in my cloudinary account (krivo) - please use images from you own cloudinary account

Please change the colomn: The map in glide table selector

https://api.mapbox.com/styles/v1/XXXXXX/YYYYYY/static/MA1,MA2,MA3,MA4,MA5,MA6,MA7,MA8,MALAST/CENTERTOMAP,ZOOM,0,0/375x300@2x?access_token=your_mapbox_token

The link is like this
XXXXX ~ mapbox account
YYYYY ~ more mapbox account info
your_cloudinary_account ~ well, your cloudinary account
your_mapbox_token ~ your mapbox token

The full link is:

https://api.mapbox.com/styles/v1/XXXXXX/YYYYYYYY/static/url-https%3A%2F%2Fres.cloudinary.com%2Fyour_cloudinary_account%2Fimage%2Fupload%2Fl_text:arial_30:Joes wood,co_rgb:FF0000,%2Ffl_layer_apply,g_west,so_2.0,x_70%2Fv1627762793%2FMapandlist%2FNordic_70x70.png(12.51714,55.72994),url-https%3A%2F%2Fres.cloudinary.com%2Fyour_cloudinary_account%2Fimage%2Fupload%2Fl_text:arial_30:Mama Rosa,co_rgb:FF0000,%2Ffl_layer_apply,g_west,so_2.0,x_70%2Fco_blue,e_outline%2Fv1627762379%2FMapandlist%2Fflag-italy_70x70.png(12.5144455,55.734298),url-https%3A%2F%2Fres.cloudinary.com%2Fyour_cloudinary_account%2Fimage%2Fupload%2Fl_text:arial_30:Hello food,co_rgb:FF0000,%2Ffl_layer_apply,g_west,so_2.0,x_70%2Fv1627762379%2FMapandlist%2Ffire_70x70.png(12.5120823,55.735767),url-https%3A%2F%2Fres.cloudinary.com%2Fyour_cloudinary_account%2Fimage%2Fupload%2Fl_text:arial_30:Robertos,co_rgb:FF0000,%2Ffl_layer_apply,g_west,so_2.0,x_70%2Fv1627762379%2FMapandlist%2Fflag-italy_70x70.png(12.5086473,55.7374478),url-https%3A%2F%2Fres.cloudinary.com%2Fyour_cloudinary_account%2Fimage%2Fupload%2Fl_text:arial_30:The real,co_rgb:FF0000,%2Ffl_layer_apply,g_west,so_2.0,x_70%2Fv1627762379%2FMapandlist%2Ffire_70x70.png(12.5065061,55.7386424),url-https%3A%2F%2Fres.cloudinary.com%2Fyour_cloudinary_account%2Fimage%2Fupload%2Fl_text:arial_30:Copenhagen,co_rgb:FF0000,%2Ffl_layer_apply,g_west,so_2.0,x_70%2Fv1627762793%2FMapandlist%2FNordic_70x70.png(12.5237298,55.728993),url-https%3A%2F%2Fres.cloudinary.com%2Fyour_cloudinary_account%2Fimage%2Fupload%2Fl_text:arial_30:The hidden gem,co_rgb:FF0000,%2Ffl_layer_apply,g_west,so_2.0,x_70%2Fv1627762379%2FMapandlist%2Ffire_70x70.png(12.51736,55.7324872),url-https%3A%2F%2Fres.cloudinary.com%2Fyour_cloudinary_account%2Fimage%2Fupload%2Fl_text:arial_30:Wet dog,co_rgb:FF0000,%2Ffl_layer_apply,g_west,so_2.0,x_70%2Fv1627762793%2FMapandlist%2FNordic_70x70.png(12.5129946,55.7350791),url-https%3A%2F%2Fres.cloudinary.com%2Fyour_cloudinary_account%2Fimage%2Fupload%2Fl_text:arial_30:Mama Rosa,co_rgb:FF0000,%2Ffl_layer_apply,g_west,so_2.0,x_70%2Fco_blue,e_outline%2Fv1627762379%2FMapandlist%2Fflag-italy_70x70.png(12.5144455,55.734298)/12.5144455,55.734298,13,0,0/375x300@2x?access_token=your_mapbox_token

3 Likes

Sorry - includes an experimental could so cannot be copied at the moment. Let me rethink…

1 Like

@Boomer_Rose the template is now copyable as I have taken out the experimental columns. Try to have a look under the hood.

2 Likes

Hi @Krivo, well done and thank you, it’s fantastic.
Do you know if it is feasible in Glide to
1- identify the position of some members of an app?
2- in a scope of let’s say “30 meters”?

Many thanks

@AyS_0908 ha ent thought about that but I think it would work

Do you mean you should see all people who are at a specific moment 30 meters from you? I think Glide’s distance calculator only works with a device to fixed address setup, not a device to device setup.

Yes, this is what I was thinking about (see members 30 m around me at a given moment).
But, while it’s first time I look into the “geographic” features of Glide, my very firsts understanding is as yours (fixed address setup)

1 Like

Thank you! I have been traveling and look forward to checking this out next week!

Boomer