ArcGIS API for JS 4.5 with setMapCursor()

1878
2
Jump to solution
11-27-2017 11:38 PM
shaosongma1
New Contributor

When move cursor to a feature(point)  in a buffer() distance,I want to change my cursor style.

So my question is:

1.how to judge the cursor is near a feature?

2.how to change my cursor style in ArcGIS API for JS 4.5 with setMapCursor() which is applied in 3.X?

 Looking forward to any help,Thanks a lot!

0 Kudos
1 Solution

Accepted Solutions
RodrigoFelga
New Contributor III

You can use QueryTask to verify if your mouse cursor is near a feature and chnage the mouse cursor of the mapdiv, here is some example to begin with (not tested). I'm using jQuery to change the cursor but you can use anything you want. #mapDiv is the div of your map

        var eventHandler = function (event) {
               require(["esri/tasks/QueryTask", "esri/tasks/support/Query"], function(QueryTask, Query){
                 var queryTask = new QueryTask({
                    url: "..." // URL of the layer you want to change the mouse cursor
                 });
                 var query = new Query();
                 query.returnGeometry = false;
                 query.distance = 1; // Yout buffer
                 query.units = "meters"
                 query.outFields = ["*"];

                 // When resolved, returns a count of the features that satisfy the query.
                 queryTask.executeForCount(query).then(function(results){
                   //change the cursor here
                    if(results>=1){
                         $('#mapDiv').css('cursor', 'pointer');
                    }
                    else{
                         $('#mapDiv').css('cursor', 'default');
                    }
                 });

               });
        }
        view.on("pointer-move", eventHandler);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

2 Replies
RodrigoFelga
New Contributor III

You can use QueryTask to verify if your mouse cursor is near a feature and chnage the mouse cursor of the mapdiv, here is some example to begin with (not tested). I'm using jQuery to change the cursor but you can use anything you want. #mapDiv is the div of your map

        var eventHandler = function (event) {
               require(["esri/tasks/QueryTask", "esri/tasks/support/Query"], function(QueryTask, Query){
                 var queryTask = new QueryTask({
                    url: "..." // URL of the layer you want to change the mouse cursor
                 });
                 var query = new Query();
                 query.returnGeometry = false;
                 query.distance = 1; // Yout buffer
                 query.units = "meters"
                 query.outFields = ["*"];

                 // When resolved, returns a count of the features that satisfy the query.
                 queryTask.executeForCount(query).then(function(results){
                   //change the cursor here
                    if(results>=1){
                         $('#mapDiv').css('cursor', 'pointer');
                    }
                    else{
                         $('#mapDiv').css('cursor', 'default');
                    }
                 });

               });
        }
        view.on("pointer-move", eventHandler);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
shaosongma1
New Contributor

Thanks,it helps a lot.

0 Kudos