Opens a new screen featuring a map with markers designated by you.
You can use this block to, say, show the different locations of your company's offices, or recreational facilities close to your hotel. Users can select these markers to read more information about these locations or to calculate the directions to the location.
Adding the POI building block
- Click on Add Block.
- Select the POI block and click Next.
- Fill in the name of the block.
- Click on the icon if you want to change the image used in the menu.
- When you’re done, click Finish.
Editing the content of the POI block
Edit the content in the List Settings of your POI block.
Adding new content
- Select the POI block in your app.
- Select the List tab.
- Click on the + icon to add new content.
- Enter the location details.
- Save your entry by clicking Save or cancel by clicking on the home icon.
Editing your content
Hover the cursor over an existing entry to edit, rearrange or delete it.
- Edit: select the pen icon and edit the content. When you're done click on Save to save or on the home icon to return without saving.
- Rearrange: grab the handle on the right side of your entry to rearrange the order it will be displayed in the app.
- Delete: click on the garbage can to delete the entry from your block.
Adding Location Types and different pins in the map
It is possible to give different location types a different pin on the map and to let your users filter on these types. This way you can show restaurants on the map with, say, a fork and hotels, for example, with the usual house and bed symbol. To add location types:
- Select the POI block that is in your app;
- Select the List tab;
- Select an item in the list by clicking the pencil button on the right;
- Click the ... button on the right of the Location type field;
- Click the + button;
- Add a location type. You do not need to fill in the long description. Just fill in short name and upload a small image (40 x 60px) of the pin on the map you want to show for this location type. Make it a small transparent image with a pointy end at the bottom to show exactly where the location is on the map;
- Save your entry by clicking Save;
- Click the small home button just above the + button to get back to your POI list. Now you have the location type available to select at POI's.
The POI block settings
The POI building block editor is composed of three editing screens; "Settings", "List" and "Designer."
The options in the "Settings" editing screen determine how your block will function, "List" allows you maintain the content of the block, and the settings in the "Designer" screen determine its aesthetics.
There are several aspects of your "POI" block that can be changed in this screen; the name of the block, the icon (or image) that will be used in the app menu, and the top image for the "POI" screen. You can also choose whether you'd like the users to be able to share the events via twitter, Facebook, or email. You can also set the zoom level of map that is displayed in the block. The zoom level can be set to include all markers or be based on the geolocation of the app user.
Should the need arise to keep the users of your published app from using this portion of the app, then you can always make use of the "Activated" sliding selector.
Slide the selector to "OFF" to keep users from seeing the "POI" block. Now you can continue developing your app without worrying about users coming upon areas that you haven't finished developing as of yet. Once you are satisfied with your progress, slide the selector back to "ON" to publish this portion of your app.
Add each marker to the list with its name and location. You can add further details like an image, location type, description and website. Click here to read more about working with "List" settings.
The "Designer" screen allows your to make highly detailed changes to your building block. "Designer" gives the developer a remarkable amount of freedom to adjust everything exactly as he or she would like it. "Designer" is not available to all users. If you'd like to know more about how "Designer" works, click here.