Tutorial: Create a ‘Points of Interest’ Image for your App

Posted by in Locly Native Tutorials

The Locly Native platform offers a number of image based card types to add engaging interactivity to your iOS and Android app. One of the most popular is the ‘Points of Interest’ card.  Here’s a quick tutorial how you can create one using the Locly Native online CMS – all you need is a Locly account or demo app login, the Locly Native preview app (free download on Play and AppStore) on your device, and an image.

Create a points of interest image for your app

1. Create your Card

  • Click on ‘Add Card’ and select ‘Points of Interest’.  Give your card a name and set the card status to ‘Preview’ so that you can view it in the Locly Native preview app on your device.
  • The background may be seen behind your image, so give your card a relevant background colour that will match your image nicely.
  • Click on ‘Image’ and upload your file (download and image to use).
  • Set the Zoom Bounds (view in the preview app to test different values with your image).

Create a points of interest image for your app

2. Add Points of Interest

  • Go to your uploaded image in the editor, then click where you want the first point of interest to appear.  This places a pin on the image.
  • Click on the pin to bring up a new editing window and choose the colour of your pin.
  • If you want your marker to navigate to another part of your app, just pick ‘Linked Item’ and choose a collection or card from the dropdown.
  • If you don’t want your marker to link to anything, you can just add a description/label.
  • Click on ‘Show Pop-Out’ toggle: If you want to show a ‘Title’ and ‘Description’ when the pin is tapped on.  Then enter your details for these and tap on ‘Save’.
  • Repeat this for all your points of interest.

3. Preview on your device

  • Finally open the Locly Native preview app on your Android or iOS device and scan your project’s QR code.  The app will then appear on the device and you can navigate to your card and test the image. Simple!

And that’s all there is to it!  It’s a very simple way to introduce interactivity in your app, to liven up images with labels, and to add a new dimension to navigation.  The card could be used to emphasise buildings in a skyline photo, link to reference artefacts in a cabinet, or use on a map image to highlight places to visit – there are so many options!