Add an event on move end

In this example, we will show how to add an event on move end in JMap NG.

Example

We add an event to display the current center of the map. The value is updated each time the move ends.

Show example in Codepen.io

Center of the displayed map:
Latitude:
Longitude:

The code:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <meta charset="UTF-8">
  <style>
    #my-custom-map {
      width: 600px;
      height: 600px;
      border: 1px solid grey;
      margin-top: 1rem;
    }
  </style>
</head>
<body>
  <label><b>Center of the displayed map:&nbsp;</b></label>
  <br/>
  <label>Latitude:&nbsp;</label>
  <span id="latitude"></span>
  <br/>
  <label>Longitude:&nbsp;</label>
  <span id="longitude"></span>
  <div id="my-custom-map" class="jmap_wrapper"></div>
  <script type="text/javascript">
    window.JMAP_OPTIONS = {
      projectId: 1,
      restBaseUrl: "https://jmapdoc.jmaponline.net/services/rest/v2.0",
      anonymous: true,
      map: {
        containerId: "my-custom-map",
        zoom: 13.797865986918877,
        center: {
          x: -73.48063889179525,
          y: 45.664231577062765
        },
        onStartupMapReadyFn: () => {
          const initialCenter = JMap.Map.getMap().getCenter()
          document.getElementById("latitude").textContent = initialCenter.lat
          document.getElementById("longitude").textContent = initialCenter.lng
          JMap.Event.Map.on.moveEnd("move-end", (params) => {
            const center = params.map.getCenter()
            document.getElementById("latitude").textContent = center.lat
            document.getElementById("longitude").textContent = center.lng
          })
        }
      },
    };
  </script>
  <script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/jmap-core-js@jmap-ng-doc"></script>
</body>
</html>