# 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:** 1\
**Showing post:** 4

<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>

```

---

_[View the full topic](https://community.glideapps.com/t/making-a-quest-map/73266)._