Creating an interactive image map

Hi guys,

I need to create an interactive image map that a user can scroll on and zoom in / out. Ideally I wanted to have this native in the app but after researching it doesn’t look like that’s possible (please correct me if I’m wrong!). Using the webview component gives a nice look but doesn’t allow the user to zoom.

I think my only other option is to link to an external URL and create an interactive map using another platform. Does anyone have any recommendations on how to create the image map and have it work within Adalo?

For example:

  • User clicks on ‘map’ within Adalo and is taken to an external URL
  • External URL hosts interactive map with clickable icons
  • When a user clicks on an interactive icon it will load more information in the bottom of the screen (always the same size no matter how zoomed in they are)
  • The image would also take up all of the screen space without any extra canvas area below it

Thanks,
Ash

Still haven’t found a good solution to this so if anyone has any suggestions that would be great
@Colin

bumping this post again

Still hopeful that someone can help :slight_smile:

The increasing size markers is not doable today. but you can add a click action to the marker that links to a screen with a transparent background, and your details about this Current Maker record in a card at the bottom of the screen. This will replicate as closely to what you are describing as you can do today in Adalo!

Thanks for the reply @ben1

As the zoom in / out feature isn’t available in Adalo at present I guess I’m asking for a recommendation for another programme I can use to create the map that I’m talking about which will allow this feature but still look good.

I’ve come across Genially which looks promising but when I click on an interactive icon the modal takes up a large space on the map which doesn’t seem to be repsonsive to a small phone screen.

Hi Ash,

The Map is interactive and has pinch to zoom in Adalo, it would just be the icons that do not resize.

Outside of that though. I am not privy to any other good ways to work around this, so someone else may need to hop in on this one.

@ben1

Sorry I’m confused - I didn’t think it was possible to pinch / zoom on an image within Adalo (including Webviewer?)

pinch zoom on a map is supported by the Google Map component. You are correct pinch zoom on images is not.

Thanks - it’s specifically an image map with a zoom / scroll function that I’m trying to create.

Looks like I’ll have to create this outside of Adalo and link to an external URL. If anyone has any suggestions of a programme they’ve used to create something similar that would be great.

I would also like to have a ‘next step’ and ‘previous step’ button that links to the next line on a map or piece of information (think PowerPoint animations).

Could I create a webapp within Adalo and link to that as an external URL and maintain the following features?

  • Zoom in / out
  • Scroll
  • Click on icons and launch a modal screen pinned to the bottom

I’ve linked an adalo webapp screen preview as an external URL for now but it doesn’t allow me to scroll / zoom. Not sure if that’s because it isn’t live or if I’ve misunderstood what the webapp actually is. I’m trying to make this look as native as possible whilst being functional

I am having the same issue, what I do is add the click action of the image to website,(put URL of that image in the web URL bar ), it allowed me to scroll/zoom, but it does not looks ative :(

Yeah that’s been the only solution I’ve found so far as well. I’m trying to see if I could create an Abalo website and then use that as the external URL. This might allow us to use the same modals, buttons, colours etc. and make it look like it’s still native.

I’ve tried linking the external link to an Adao website (not one that is published, just in my preview) but it doesn’t allow me to zoom on that.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.