Event to discard currently selected pushpin in Bing Maps v8

There are two event styles available for a pushpin in Bing.

  • enableHoverStyle : Boolean
  • enableClickedStyle : Boolean

To see these events/styles in action, visit the link below:

My goal is to deselect an already selected pin when another pin is selected. Is there a way to achieve this?

Edited:

I have come up with a solution, although I'm not sure if it's the best one.

I set the event trigger on pushpin click.

Microsoft.Maps.Events.addHandler(pushpin, 'click', togglePinState);

Here is the togglePinState function:

function togglePinState(pinData){

        if(pinData.target == null)
            return;

        if(selectedPin == null){
            selectedPin = pinData.target;
            selectedPin.setOptions({enableClickedStyle: true});
            return;
        }
        if(pinData.target != selectedPin){
            selectedPin.setOptions({enableClickedStyle: false});
            selectedPin = pinData.target;
            selectedPin.setOptions({enableClickedStyle: true});
        }
    }

Answer №1

In my exploration, I have not come across any specific code addressing this particular scenario when utilizing bing-v8's built-in eventStyles. My hope is that this solution proves beneficial to someone encountering similar challenges.

The code presented here represents an updated version from my initial post. It currently functions well for me, with the exception of not permitting the deselection of pins. The following update allows for pin deselection as well.

function togglePinState(pinData){

        if(pinData.target == null)
            return;

        if(selectedPin == null){
            selectedPin = pinData.target;
            PopulateSidePanel(selectedPin)
            return;
        }
        // Verifies whether the triggering pin is different from the selected pin; if so, both pins' states are altered.
        if(pinData.target != selectedPin){
            selectedPin.setOptions({enableClickedStyle: false});
            selectedPin.setOptions({enableClickedStyle: true});
            selectedPin = pinData.target;
            PopulateSidePanel(selectedPin)
        }       
    }

Update 1

An enhancement has been made to enable toggling a selected pin into a deselected state.

function togglePinState(pinData){

        // As a precaution
        if(pinData.target == null)
            return;

        // In cases where no pin is selected, the first pin becomes the selectedPin
        if(selectedPin == null){
            selectedPin = pinData.target;
            PopulateSidePanel(selectedPin)
            return;
        }
        // Checks if the triggering pin differs from the selected pin; updates both pins' states correspondingly.
        else if(pinData.target != selectedPin){
            selectedPin.setOptions({enableClickedStyle: false});
            selectedPin.setOptions({enableClickedStyle: true});
            selectedPin = pinData.target;
            PopulateSidePanel(selectedPin)
        } 
        // If the triggering pin matches the selected pin, all selections are cleared.
        else {
            selectedPin = null;
            PopulateSidePanel(null);
        }       
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The property 1 cannot be added because the object is not extendable in React

Does anyone know what is causing the following issue? I am unable to insert a new object into a key object within my arrays of objects. For example, when I try to insert a new email at index 1 in the 'emails' array, it throws an error stating "ca ...

Establishing foreignObject coordinates in Angular

Struggling with setting the position (x, y) for foreignObject in Angular. I have attempted the following: <foreignObject width="65" height="50" x="{{position?.x}}" y="{{position?.y}}"> <div class="c ...

An issue arose during the installation of nodemon and jest, about errors with versions and a pes

Currently, I am facing an issue while trying to set up jest and nodemon for my nodejs project. My development environment includes vscode, npm version 6.13.7, and node version 13.8.0. Whenever I try to install nodemon via the command line, the console disp ...

The selected value from a dropdown list may occasionally come back as text

I am facing an issue with a dropdown list on my form that has Integer Values set to display text. The problem arises when I run the code to show the value and associated text, as the text is being displayed as the value itself. Is there any workaround avai ...

JavaScript: Developing an interactive Word Guessing Game

Here's some sample code: let ccdisplay = document.querySelector('.crrDisplay'); let incdisplay = document.querySelector('.incDisplay'); let guess = document.querySelector('#character'); let textForm = document.q ...

Obtain the element created by a directive within the controller

I'm currently utilizing the wrapper located at: https://github.com/Yankovsky/nouislider-angular/blob/master/nouislider.js for the nouislider plugin. Within my controller, I aim to access the element that I've created in the template: <div ya ...

How can I make tooltipster display tooltips properly?

I have been struggling to customize tooltips using a library called tooltipster. Here is what I currently have: Head of index.html: <head> <!--TOOLTIP CSS--> <link rel="stylesheet" type="type/css" href="node_modules/tooltipster-master ...

Is it possible to implement a while loop in React?

Issue: I am facing a challenge while attempting to generate an array of 4 elements from a list using a while loop, but it seems to result in an infinite loop. const [options, setOptions] = useState([]); const fetchElements = () => { while(options. ...

Is it possible to redirect any web traffic using an authentication script?

Scenario: I'm currently working on a social networking project and I'm looking for a way to validate every redirect or refresh by directing the user through another script before reaching their final destination. I've considered using a &apo ...

Create a new JSON file to preserve the value of a JSON object

I am working with a JSON file that looks like this: { "soils": [{ "mukey": "658854", "mukeyName": "Meggett-Kenansville-Garcon-Eunola-Blanton-Bigbee (s1517)", "sl_source": "Fl soil map", "cokey": "3035468", "soilName": "Eunola", " ...

Node.JS, R, and Python are used for intensive computing tasks such as identifying when a callback function has finished executing and

My Node.js REST API exposes endpoints that trigger R and Python scripts for complex computations. Prior to executing these scripts, I must first identify the callback, assign a unique ID to it, and quickly send back the ID to the consumer. The consumer wil ...

Click a button to load a different view in CodeIgniter

How can I show another view of Controller using Ajax/Javascript when clicking a button? I attempted something, but it's not working as expected. Javascript: <script> $(document).ready(function(){ $("#details").click(function(){ $( ...

What is the recommended approach for utilizing props versus global state within your components when working with JS Frameworks such as Vue?

Currently, I am delving into a larger project using Vue and I find myself contemplating the best practices when it comes to utilizing props versus global Vuex states for accessing data within a component. To elaborate, let's say I have a component re ...

Angular 2 signal sender

I have a specific class definition for my Project: export class Project { $key: string; file: File; name: string; title: string; cat: string; url: string; progress: number; createdAt: Date = new Date(); constructor(file: File) { th ...

Vue3 is struggling to apply dynamic styling exclusively to certain buttons

Currently, I am diving into the world of vue and facing a challenge in styling buttons dynamically when clicked individually. These buttons serve as filters for a list of products, and my goal is to apply one style when the filter is 'on' and ano ...

Having trouble showing my Google map using canvas

Can anyone help me with this issue that I'm facing? I am working on a JavaScript web page and trying to show a Google map (Google API) along with a canvas tag in the html body. Currently, the map and canvas are only displaying separately. https://i ...

The @output decorator in Angular5 enables communication between child and

Hello fellow learners, I am currently diving into the world of Angular and recently stumbled upon the @output decorators in angular. Despite my best efforts to research the topic, I find myself struggling to fully grasp this concept. Here's a snippet ...

Ways to implement a setTimeout function to return to the initial div element?

I have a unique setup on my webpage with three divs. The first div features an html5 video, the second div contains buttons for interaction, and the third div acts as a thank you page that loops back to the beginning like a photo slide. I have shared my co ...

Issue: Unable to set headers after they have been sent while using express-fileupload in the application

app.post('/profile', function(req, res) { // save file if (req.files) { let sampleFile = req.files.sampleFile; sampleFile.mv('/somewhere/on/your/server/filename.jpg', function(err) { if (err) ...

Transmitting JSON data object

Sending a JSON Object to JSP Page After following the provided link, I discovered that one of the answers suggests creating a JSON object using the following constructor: JSONObject jsonObj=new JSONObject(String_to_Be_Parsed); Upon downloading the JSON ...