Add an event on move end

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


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

Try it out in

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <meta charset="UTF-8">
    #my-custom-map {
      width: 600px;
      height: 600px;
      border: 1px solid grey;
      margin-top: 1rem;
  <label><b>Center of the displayed map:&nbsp;</b></label>
  <span id="latitude"></span>
  <span id="longitude"></span>
  <div id="my-custom-map" class="jmap_wrapper"></div>
  <script type="text/javascript">
    window.JMAP_OPTIONS = {
      projectId: 1,
      restBaseUrl: "",
      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 =
          document.getElementById("longitude").textContent = initialCenter.lng
          JMap.Event.Map.on.moveEnd("move-end", (params) => {
            const center =
            document.getElementById("latitude").textContent =
            document.getElementById("longitude").textContent = center.lng
  <script defer type="text/javascript" src=""></script>

Dernière mise à jour

K2 Geospatial 2023