How to hide a marker when the marker is clicked once

  • Resolved donsign

    (@donsign)


    1 year, 5 months ago

    Hello. I am trying to create a page similar to an escape room game by applying this plug-in.

    plugin.$container.on('click', '.ipnrm-marker', (e) => {
  const markerId = $(e.currentTarget).attr('data-marker-id');
  const emptySlot = slotSpace.querySelector('.slot:empty');

  if (markerId === '1639565F44' && emptySlot) {
        const item3 = document.createElement("div");
        item3.className = "item";
        item3.id = "note";
        item3.innerHTML = '<img src="1.png">';
        item3.addEventListener('mousedown', startMove);
        item3.addEventListener('touchstart', startMove, { passive: false });
    
    emptySlot.appendChild(item3);
    }
});

    By using the above code, clicking the marker creates an item in an empty slot.

    After creating the item like this, I need to hide this marker, but I can’t proceed any further in the process of making the marker invisible.

    I didn’t understand the algorithm by which the markers are generated.
    Can you tell me how to make the marker invisible, or how to use the marker for a one-time use? Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Avirtum

    (@avirtum)

    Your code is correct, but change it a little bit, like this

    
plugin.$container.on('click', '.ipnrm-marker', (e) => {
const $marker = $(e.currentTarget);
const markerId = $marker.attr('data-marker-id');
const emptySlot =slotSpace.querySelector('.slot:empty');

 if (markerId === '1639565F44' && emptySlot) {
  const item3 = document.createElement("div");
  item3.className = "item";
  item3.id = "note";
  item3.innerHTML = '<img src="1.png">';
  item3.addEventListener('mousedown', startMove);
  item3.addEventListener('touchstart', startMove, { passive: false });
    
  emptySlot.appendChild(item3);

  $marker.css({'display':'none'});
 }
});
    Thread Starter donsign

    (@donsign)

    thank you It works fine.
    In addition, can I ask you one more question?
    The code below was written to hide a specific marker if there is no #keycard,
    Data-marker-id doesn’t seem to recognize the marker id.
    Is there some code to specify the marker id?

    const slotSpaceCheck = $('.inventory-modal .slotSpace');
const slotWithKeycard = slotSpaceCheck.find('.slot > #keycard');

if (slotWithKeycard.length === 0) {
  const markerToHide = $(.ipnrm-marker[data-marker-id="0141C99051"]);
  markerToHide.css('display', 'none');
}
    Plugin Author Avirtum

    (@avirtum)

    We can’t set the marker ID manually, but we can add a class to this element. See marker options -> additinal -> extra css classes (you can use several classes)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to hide a marker when the marker is clicked once’ is closed to new replies.