Getting started with ArcGIS JavaScript - Show cursor location

Egge-Jan_Pollé

<\/HEAD>

<\/A>pointer-move event<\/H2>

<\/P>

In a

previous exercise <\/A>we created a web application with a Dutch base map<\/A>. projected in the Dutch coordinate system, the RD system.<\/P>

<\/P>

The goal<\/STRONG> of the exercise here is to track the mouse movement and display the coordinates of the cursor location on the screen.<\/P><\/P>We do this by setting up a

pointer-move event <\/A>handler on the MapView<\/A> and read out the X and Y coordinates we get back.<\/P>

<\/P>

dojo\/dom<\/H2><\/P>In this application we use the dojo\/dom<\/A> module from the , function(Map, Point, MapView, dom) {

var map = new Map({
basemap:{
portalItem:{
id: "7aea6fa913a94176a1074edb40690318" // Base map of Esri Netherlands: Topo RD
}
}
});

var rdOrigin = new Point({
x: 155000,
y: 463000,
spatialReference: 28992
});

var view = new MapView({
spatialReference: 28992,
container: "viewDiv",
map: map,
center: rdOrigin,
zoom: 3
});

// Add the div with the coordinates to the map screen
view.ui.add("coordinates", "bottom-left");

// Initially fill in the coordinates of the center of the map, rounded to millimeters
// and formatted with separators for decimals and thousands
dom.byId("rdxcoord").innerHTML = "X = " + view.center.x.toLocaleString(undefined, {minimumFractionDigits: 3, maximumFractionDigits: 3}) + " m";
dom.byId("rdycoord").innerHTML = "Y = " + view.center.y.toLocaleString(undefined, {minimumFractionDigits: 3, maximumFractionDigits: 3}) + " m";

function showCoordinates(evt) {
var point = view.toMap({x: evt.x, y: evt.y});
// Show the RD coordinates if relevant
// The Dutch RD system is only valid for the Dutch territory, so if the cursor goes too far outside the Netherlands,
// then RD coordinates are "Not applicable". The following boundary values apply for the X and Y coordinates:
if (point.x < 10000 || point.x > 290000 || point.y < 300000 || point.y > 620000) {
dom.byId("rdxcoord").innerHTML = "X = Not applicable";
dom.byId("rdycoord").innerHTML = "Y = Not applicable";
} else {
dom.byId("rdxcoord").innerHTML = "X = " + point.x.toLocaleString(undefined, {minimumFractionDigits: 3, maximumFractionDigits: 3}) + " m";
dom.byId("rdycoord").innerHTML = class="punctuation token">(<\/SPAN>"rdycoord"<\/SPAN>)<\/SPAN>.<\/SPAN>innerHTML =<\/SPAN> "Y = "<\/SPAN> +<\/SPAN> point.<\/SPAN>y.<\/SPAN>toLocaleString<\/SPAN>(<\/SPAN>undefined,<\/SPAN> {<\/SPAN>minimumFractionDigits:<\/SPAN> 3<\/SPAN>,<\/SPAN> maximumFractionDigits:<\/SPAN> 3<\/SPAN>}<\/SPAN>)<\/SPAN> +<\/SPAN> " m"<\/SPAN>;<\/SPAN>
}<\/SPAN>
}<\/SPAN>

view.<\/SPAN>when<\/SPAN>(<\/SPAN>function<\/SPAN>(<\/SPAN>)<\/SPAN>{<\/SPAN>
// Listen - after the map has loaded - to mouse movements to capture the coordinates<\/SPAN>
view.<\/SPAN>on<\/SPAN>(<\/SPAN>"pointer-move"<\/SPAN>,<\/SPAN> showCoordinates)<\/SPAN>;<\/SPAN>
}<\/SPAN>)<\/SPAN>;<\/SPAN>

}<\/SPAN>)<\/SPA N> ; <\ / SP AN >
& lt ; \/ <\ / SP AN >script & gt ; <\ / SP AN ><\ / SP AN ><\ / SP AN >
& lt ; \/ <\ / SP AN >head & gt ; <\ / SP AN ><\ / SP AN >
& lt ; body & gt ; <\ / SP AN ><\ / SP AN >
& lt ; div & gt ; <\ / SP AN ><\ / SP AN ><\ / SP AN >
& lt ; \/ div & gt ; <\ / SP AN ><\ / SP AN >
& lt ; div & gt ; <\ / SP AN ><\ / SP AN >
& lt ; span & gt ; Cursor location (in RD)::
Cursor location (in RD):