Comment afficher un div en fonction des coordonnées de la zone

Vous pouvez modifier le code en fonction de votre solution.

CSS

#container {
    width: 500px;
    height: 500px;
    border: 1px solid gray;
  }

  .hide {
    display: none;
  }

  .dropdowntest-content {
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    border: 1px solid lightgray;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
  }

JAVASCRIPT

//get element that contain the map
    var target = document.getElementById("container");
    var dropdown = document.getElementById("dropdownmenu");

    //listen to user mouse click
    target.addEventListener("contextmenu", function(e){

      e.preventDefault();

      //click mouse position relative to container
      var clk_x_pos = e.pageX - e.currentTarget.offsetLeft;
      var clk_y_pos = e.pageY - e.currentTarget.offsetTop;

      //position the drop down menu
      dropdown.setAttribute(
        "style", "top: " + clk_y_pos + "px; left: " + clk_x_pos + "px;"
      );

      //display the menu
      dropdown.setAttribute("class", "dropdowntest-content section-1");

      //prevent the default from showing
      return false;

    }, false);

    //hide the drop down menu
    target.addEventListener("mousedown", function(e){
      //hide drop down menu
      dropdown.setAttribute("class", "dropdowntest-content hide section-1");

    }, false);

HTML

<div id="container">
  <!--Place your map here or remove the div element with id "container" and add that id to your map-->
  <div id="dropdownmenu" class="dropdowntest-content hide section-1">
    <p>Hello</p>
  </div>
</div>