Making a Quest Map

Project Showcase
1

I am excited to share a game app I am building.
Here’s one of the component.
Quest Map
Build on Glideapp Free Plan

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

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

<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
image1274×230 16 KB

12 Likes
2

Ah love it!

1 Like
3

I replicated this, woohoo!

1 Like
4

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
image
The below CSS is in the Map Rich Text

<!-- 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>
3 Likes
5

This is amazing!