Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Question: Click on a label? #404

Open
alienatorZ opened this issue Sep 6, 2023 · 2 comments
Open

Question: Click on a label? #404

alienatorZ opened this issue Sep 6, 2023 · 2 comments
Labels
❓ question Further information is requested

Comments

@alienatorZ
Copy link

Question

Is there a way to click on or select a label? I am using labels as markers for my project and I would like to pop a menu when clicking on it.

Thanks!

@alienatorZ alienatorZ added the ❓ question Further information is requested label Sep 6, 2023
@HydraPhyzer
Copy link

Let Me Answer This Question.

In most graphical user interface (GUI) frameworks and web development, labels are typically used for displaying text or information and are not interactive elements that can be clicked or selected by default. However, you can achieve the functionality you described by using other interactive elements such as buttons, links, or custom UI components to represent your markers.

Here's a general approach to create clickable markers with labels that open a menu when clicked:

Choose an Interactive Element: Instead of using labels, consider using buttons, icons, or custom markers to represent your points of interest on the screen. These elements can be made clickable and interactive.

Attach Click Event Handlers: Once you've chosen your interactive element (e.g., a button or icon), you can attach click event handlers to them using the programming language or framework you are using for your project. For example, if you are developing a web application, you can use JavaScript to handle click events.

Show the Menu: In the click event handler, you can display the menu or perform the desired action when the user clicks on the marker. This could involve showing a context menu, opening a popup, or navigating to another page or section of your application.

Here's a simplified example using HTML and JavaScript to demonstrate the concept:

<!DOCTYPE html>
<html>
<head>
    <title>Clickable Markers</title>
</head>
<body>
    <div id="marker1" class="marker">Marker 1</div>
    <div id="marker2" class="marker">Marker 2</div>

    <div id="menu" style="display: none;">
        <!-- Your menu content here -->
        <p>This is a menu.</p>
    </div>

    <script>
        // Add click event handlers to your markers
        document.getElementById("marker1").addEventListener("click", function () {
            showMenu();
        });

        document.getElementById("marker2").addEventListener("click", function () {
            showMenu();
        });

        // Function to display the menu
        function showMenu() {
            var menu = document.getElementById("menu");
            menu.style.display = "block";
        }
    </script>
</body>
</html>

In this example, we use div elements as markers and attach click event handlers to them. When a marker is clicked, the showMenu function is called, which displays the menu element. You can customize this code to suit your project's requirements and styling.

Remember that the specific implementation details may vary depending on the programming language, framework, or GUI library you are using for your project. The key idea is to use interactive elements that can respond to user interactions like clicks and then trigger the desired action, such as showing a menu.

I Hope You Understand, What I am Trying to Say. Good Regards

@alienatorZ
Copy link
Author

Thank you for that explanation. I tried something such as that within threebox-plugin using this code:

var sphere = tb.sphere({color: 'red', material: material, radius:10}) .setCoords([lon, lat, 0]) sphere.addEventListener('SelectedChange', onSelectedChange, false); sphere.addLabel(iconSym.asSVG(), true); sphere.label.addEventListener('click', onSelectedChange, false);

But I cannot ever get it to use an event.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
❓ question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants