Image map with links to other pages

I want to create an image on the home tab of my glide app that shows a map. When a person clicks on a certain part of the map, it brings them to the associated page.

For example, if someone were to click the Coastal Range section of the image above (red), it would bring them to a list of locations within that section of the map (A separate screen).
How could I do this in a Glide app?

You can’t “color” a whole region like that, but I assume you can give each region their own coordinates and use the map layout.

@Xann it would be a very nice feature. I need it myself.

A feature request was made in the past but it doesn’t seem to have gotten any traction

1 Like

I wonder if I could use HTML in a Rich Text component to include some code to do this… :thinking: I’ve recently seen a lot of cool CSS styling using that component recently, so maybe I could use some real code to achieve this look.
I just did some more research and it looks like that might be possible: HTML Image Maps.
How could I make parts of an image link to different screens in my Glide app?

You can’t call glide actions through html. You can link to external sites or glide deep links with html links, but it will still open up a link outside of the app, so I would not rely on a true HTML Map as a solution since you won’t have access to glide actions that navigate you within the app.

The only think I can think of that might work would be to use an inline list with a tiles layout that is 4 columns wide, has square corners, and has tight padding. Then cut your image into equal pieces that would would fit into your tiles. I’m estimating that you would need either 12 or 16 separate rows of data to build the inline list and to hold each image section.

Then you can set up a custom action on your inline list to navigate to different parts of the app based on a value in the row of the tile you clicked on.

Ultimately, you won’t end up with a perfect “image map”. The tiles won’t exactly line up with the the borders you want in your image. At most, they will be approximate. The tiles may have small but noticeable gaps, so it may not appear as a cohesive image. Each individual tile image may be trimmed a little bit, depending on how well your image ratio matches the ratio of the tile.

Otherwise, you could use @ThinhDinh’s idea, and create a table with 5 rows. Each row would contain geo coordinates for the approximate centroid location of each region. Then you could just show an inline list with a map style layout and allow a user to select a region by clicking a pin on a map.

Those are a couple of options if you choose to try them out. Other than that, I really think your not going to be able to get a true image map like you want that will allow you to navigate within the app.