How to make round buttons appear instead of the clickable text box?

Help
1

I’m quite advanced in my project and now I have doubts about how to do some things, I don’t understand the level of complexity and much less where to start.

I wanted to be able to position a locator on the map instead of a box (like the one I used in the image below, for example) that would have the same effect as someone clicking on the box.

Captura de tela 2025-02-09 220450
Captura de tela 2025-02-09 220450901×506 473 KB

Does anyone know how I could do this?

2

You can customize how the button looks by playing with it’s css class. If I remember correctly the class is .viewport-button. So in the main.css, just add the css class

.viewport-button {
// Create the effect you want, like rounded corners.
border-radius: 50% 50% 50% 50%;
}

1 Like
3

Hello, thank you very much for trying to help me! :smiley:

I couldn’t get this to work. Could you explain the logic step by step, with a template so I can modify the information to fit my project and test it?

Also, another question: is there a way to make the box round and, in addition to being round, have no text? And if I want the box to be replaced by an icon image, is that possible? Is it possible through CSS as well?

Sorry for the inconvenience, this is something that is way beyond my scope, I’m trying to keep up with the pace with narrat and I appreciate any help. :slight_smile:

4

After a lot of noob effort (just a few months later…), I figured out how to do it today, making my new project. So I want to share, in case anyone has the same doubt as me.

If you want to put an icon instead a box, you can use it;

#viewport-button-ButtonID {
  /* This selector applies to the css ID named "interact-button" */
  opacity: 0.9;                /* controls transparency, 1 max / 0 min, I left it at 0.9 because I often forgot it was on that scale and tried in vain to enter values ​​from 1 to 100, as if it were a percentage. */
  display: inline-block;            
  width: 64px;                          /* Desired final size */
  height: 64px;
  background-image: url('Path to Icon');  /* Your image, for me the best is 512×512 */
  background-repeat: no-repeat;                  
  background-position: center center;  
  background-size: contain;             /* proportional scale */
  
  /* text removal */
  text-indent: -9999px;                 
  overflow: hidden;                    
  line-height: 0;                       
  border: none;                         
  padding: 0;                           
  cursor: pointer;    
}

Sorry for reviving the text and answering myself, but as the Forum is an important research tool for solutions, I wanted to contribute, in case anyone has a question like the one I had.

1 Like