Format:MapCoords

   <img src="{{{calea_imaginii}}}" alt="Harta Metin2" id="mapImage">
   

<form id="coordForm">

   <label for="xCoord">Coordonata X:</label>
   <input type="number" id="xCoord" name="xCoord" min="0" max="800" required>
   <label for="yCoord">Coordonata Y:</label>
   <input type="number" id="yCoord" name="yCoord" min="0" max="600" required>
   <label for="numeHarta">Numele Hărții:</label>
   <input type="text" id="numeHarta" name="numeHarta" required>
   <button type="button" onclick="addPoint()">Adaugă Punctul</button>

</form>

<style> .mapContainer {

   position: relative;
   width: 100%;
   max-width: 800px; /* Lățime maximă pentru imagine */
   margin: 20px auto;

}

.dot {

   width: 10px;
   height: 10px;
   background-color: red;
   border-radius: 50%;
   position: absolute;
   transform: translate(-50%, -50%);

} </style>

<script> function addPoint() {

   var x = document.getElementById('xCoord').value;
   var y = document.getElementById('yCoord').value;
   var numeHarta = document.getElementById('numeHarta').value;

   var mapImage = document.getElementById('mapImage');
   var point = document.getElementById('point');

   // Setează calea imaginii în funcție de numele hărții
   mapImage.src = 'calea/imaginilor/' + numeHarta + '.jpg';

   // Calculează poziția punctului relativ la imagine
   var imageWidth = mapImage.width;
   var imageHeight = mapImage.height;

   var posX = (x / 800) * imageWidth; // 800 este lățimea imaginii, ajustați conform necesităților
   var posY = (y / 600) * imageHeight; // 600 este înălțimea imaginii, ajustați conform necesităților

   // Actualizează poziția punctului
   point.style.left = posX + 'px';
   point.style.top = posY + 'px';
   point.style.display = 'block'; // Afișează punctul

} </script>