# POI

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** <a href="#add" id="add"></a>

1. Click on **+ Block**.
2. Select the **POI** block and click **Add this block**.
3. Fill in the **name** of the block.\
   &#x20;

   <figure><img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2F7a5FbKtNsgHgF1ynHnYj%2FScreenshot%202022-11-17%20at%2015.48.48.png?alt=media&#x26;token=7790ff5a-c896-47d3-b93c-26ccb88ee2da" alt=""><figcaption></figcaption></figure>
4. Click on the **icon** if you want to change the image used in the menu.
5. When you’re done, click **Add this Block**.<br>

### **Editing the content of the POI block** <a href="#edit" id="edit"></a>

Edit the content in the List Settings of your POI block.

#### **Adding new content**

1. Select the **POI** block in your app.
2. Select the **Data** tab.
3. Click on the **+ Add new item** button to add new content.
4. Enter the **location** **details**.\
   &#x20;

   <figure><img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2Ftq9jIYgarHMvOja1Ooys%2FScreenshot%202022-11-17%20at%2015.51.17.png?alt=media&#x26;token=c825f850-b261-4c42-b4c6-2be2f1af225e" alt=""><figcaption></figcaption></figure>
5. **Save** your entry by clicking **Save**

### **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.
* **Rearrange**: grab the handle on the left 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.

**The POI block settings**

The POI building block editor is composed of three editing screens; **Data**, **Settings**, and **Design**.

The options in the **Settings** editing screen determine how your block will function, **Data** allows you maintain the content of the block, and the settings in the **Design** screen determine its aesthetics.&#x20;

### **Settings**

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 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.&#x20;

<figure><img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FWYBzpy45YkbKxqfpVsyf%2FScreenshot%202022-11-17%20at%2016.15.55.png?alt=media&#x26;token=7d0b3e20-3d22-4c2e-96dc-3720916eee83" alt=""><figcaption></figcaption></figure>

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 **ON/OFF** sliding selector.

Change 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, change the selector back to "ON" to publish this portion of your app.

### **Data**

Add each marker to the list with its name and location. You can add further details like an image, location type, description and website.&#x20;

### Design

The **Design** screen allows your to make highly detailed changes to your building block. **Design** gives the developer a remarkable amount of freedom to adjust everything exactly as he or she would like it.