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.
<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: </b></label>
<br/>
<label>Latitude: </label>
<span id="latitude"></span>
<br/>
<label>Longitude: </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>
