# Making a Quest Map

**URL:** <https://community.glideapps.com/t/making-a-quest-map/73266>\
**Category:** Project Showcase\
**Created:** [May 11, 2024, 3:07am UTC](https://community.glideapps.com/t/making-a-quest-map/73266 "2024-05-11T03:07:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trustin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/trustin/32/88217_2.png) [@Trustin](https://community.glideapps.com/u/Trustin)\
**Post date:** [May 11, 2024, 3:07am UTC](https://community.glideapps.com/t/making-a-quest-map/73266/1 "2024-05-11T03:07:38Z")

</div>

I am excited to share a game app I am building.  
Here’s one of the component.  
 ![Quest Map](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/f/bfdea8cd300177b7d2bfeb8b9688f4acc0b5af2a.gif)  
Build on Glideapp Free Plan

Here’s the code for the Base Map on Rich Text Components

```auto
<div style="position: relative; left: -20px; margin-top: -20px; margin-bottom: -30px; width: 110%; overflow: hidden; height: 550px; background: url('IMAGE') no-repeat center center fixed; background-size: ZOOM%; background-position: X% Y%;">
</div>

```

Code for 1 of the buttons:

```auto
<div style="position: absolute; right: 10px; bottom: 230px; cursor: pointer; transform: translateY(-50%); background-color: rgba(255, 255, 255, 1); border-radius: 30px; padding: 15px;">
    <p style="width: 20px; text-decoration: none; font-size: 15px; color: black;"> ▶</p>
</div>

```

Rich Text Component Actions to increase X or Y but certain %

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/d/9de5ccec5ae370a697cc2a335ecf7a4c3702db14.png)

---

<div class="post-metadata">

**Author:** ![Daniel\_van\_Veldhoven](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/daniel_van_veldhoven/32/66945_2.png) [@Daniel\_van\_Veldhoven](https://community.glideapps.com/u/Daniel_van_Veldhoven)\
**Post date:** [May 23, 2024, 5:34am UTC](https://community.glideapps.com/t/making-a-quest-map/73266/2 "2024-05-23T05:34:01Z")

</div>

Ah love it!

---

<div class="post-metadata">

**Author:** ![kingzy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kingzy/32/15690_2.png) [@kingzy](https://community.glideapps.com/u/kingzy)\
**Post date:** [July 2, 2024, 2:46am UTC](https://community.glideapps.com/t/making-a-quest-map/73266/3 "2024-07-02T02:46:46Z")

</div>

I replicated this, woohoo!

---

<div class="post-metadata">

**Author:** ![Trustin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/trustin/32/88217_2.png) [@Trustin](https://community.glideapps.com/u/Trustin)\
**Post date:** [July 4, 2024, 2:31am UTC](https://community.glideapps.com/t/making-a-quest-map/73266/4 "2024-07-04T02:31:56Z")

</div>

Hi, I have moved on to work with an alternative method.  
I realized when using the Open new screen with overlay, it will allow the screen or image to drag.  
 ![Mapscrolling-ezgif.com-resize](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/9/69459d173975f8bcab7ef13c67bb4aaf7c2038de.gif)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/7/473f5573c3fac0cc30c44b7a21ca5b5c26fcda9e.png)  
The below CSS is in the Map Rich Text

```auto
<!-- BASE MAP-->
<div style="position: absolute;
left:0px;
margin-top:-20px;
width:650px;
height:600px;
background: url('MAPIMAGE');
background-position: -250px -50px;
background-size: 800px;
">
<!-- Circle DIV on MAP-->
<div style="position: absolute;
left:220px;
top: 370px; 
width:30px;
height:30px;
border-radius: 50px;
background: url('LOCATION ICON') no-repeat;
background-size: contain;
background-color:#26A568;
border:3px black solid">

<span style="font-family: Georgia, serif; text-shadow: 2px 2px white; color: black; position: absolute; top:30px; font-size:15px; left:-20px; font-weight:900; width:500%;
">LOCATON NAME</span>
</div>
</div>

```

---

<div class="post-metadata">

**Author:** ![kingzy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kingzy/32/15690_2.png) [@kingzy](https://community.glideapps.com/u/kingzy)\
**Post date:** [July 4, 2024, 8:44am UTC](https://community.glideapps.com/t/making-a-quest-map/73266/5 "2024-07-04T08:44:42Z")

</div>

This is amazing!