topic How to find a grid cell based on mouse click in ArcGIS JavaScript Maps SDK Questions

How to find a grid cell based on mouse click

JustinBridwell2 — Wed, 10 Jul 2019 18:17:30 GMT

Suppose I have an application that will utilize a grid with 1 x 1 mile cells (approx. 4 sq miles). This application already uses the ArcGIS API for JS. The grid's geoJson data essentially looks like this:

[

{

"Grid Cell Number": 21,

"Grid Cell State": "NJ",

"Grid Cell Name": "Grid26_2",

"Grid Cell Area SqMi": 2.39808504259641,

"Grid Cell Centroid Longitude": -74.5457211209226,

"Grid Cell Centroid Latitude": 41.2799557125122,

"Grid Cell Start Point Longitude": -74.523164,

"Grid Cell Start Point Latitude": 41.278898,

"Grid Cell End Point Longitude": -74.525255,

"Grid Cell End Point Latitude": 41.279889,

"Event Name": "Superstorm Sandy NY",

"NOAA Tidal Gage Station ID": "8518750",

"Max_NOAA_Tidal_Gage_Water_Level_ft_MSL": "11.49",

"Oldest Tidal Gage Data": "2010-01-01",

"Return Period": "6315.03"

{

"Grid Cell Number": 22,

"Grid Cell State": "NJ",

"Grid Cell Name": "Grid27_2",

"Grid Cell Area SqMi": 0.26600197470632,

"Grid Cell Centroid Longitude": -74.5172506948515,

"Grid Cell Centroid Latitude": 41.2733184226687,

"Grid Cell Start Point Longitude": -74.505495,

"Grid Cell Start Point Latitude": 41.270536,

"Grid Cell End Point Longitude": -74.505793,

"Grid Cell End Point Latitude": 41.270684,

"Event Name": "Superstorm Sandy NY",

"NOAA Tidal Gage Station ID": "8518750",

"Max_NOAA_Tidal_Gage_Water_Level_ft_MSL": "11.49",

"Oldest Tidal Gage Data": "2010-01-01",

"Return Period": "6315.03"

},...

My question then is, using the Grid Cell Start/End Point Lat/Long and the x, y coordinates I am capturing in my mouse click, what method would allow me to find the Grid Cell Number 22 if my mouse click lat = 41.27061 and long = -74.5055?

Re: How to find a grid cell based on mouse click

JackFairfield — Thu, 11 Jul 2019 16:31:52 GMT

You can filter your geoJson data down to the grid cell you need using logic like this:

It isn't working however, because the sample mouse position you included isn't in either of these cells. The lon that you provided (-74.5055) is smaller than the minimum in cell 22 (-74.505793)

var geojsonArray = [{

"Grid Cell Number": 21,

"Grid Cell State": "NJ",

"Grid Cell Name": "Grid26_2",

"Grid Cell Area SqMi": 2.39808504259641,

"Grid Cell Centroid Longitude": -74.5457211209226,

"Grid Cell Centroid Latitude": 41.2799557125122,

"Grid Cell Start Point Longitude": -74.523164,

"Grid Cell Start Point Latitude": 41.278898,

"Grid Cell End Point Longitude": -74.525255,

"Grid Cell End Point Latitude": 41.279889,

"Event Name": "Superstorm Sandy NY",

"NOAA Tidal Gage Station ID": "8518750",

"Max_NOAA_Tidal_Gage_Water_Level_ft_MSL": "11.49",

"Oldest Tidal Gage Data": "2010-01-01",

"Return Period": "6315.03"

{

"Grid Cell Number": 22,

"Grid Cell State": "NJ",

"Grid Cell Name": "Grid27_2",

"Grid Cell Area SqMi": 0.26600197470632,

"Grid Cell Centroid Longitude": -74.5172506948515,

"Grid Cell Centroid Latitude": 41.2733184226687,

"Grid Cell Start Point Longitude": -74.505495,

"Grid Cell Start Point Latitude": 41.270536,

"Grid Cell End Point Longitude": -74.505793,

"Grid Cell End Point Latitude": 41.270684,

"Event Name": "Superstorm Sandy NY",

"NOAA Tidal Gage Station ID": "8518750",

"Max_NOAA_Tidal_Gage_Water_Level_ft_MSL": "11.49",

"Oldest Tidal Gage Data": "2010-01-01",

"Return Period": "6315.03"

}

];

var mouse = {

lat: 41.27061,

lon: -74.5055

}

function FindGridCellByMouse(mouse, cells) {

var resultsCells = cells.filter(function (cell) {

var minLat = cell["Grid Cell Start Point Latitude"];

var maxLat = cell["Grid Cell End Point Latitude"];

var minLon = cell["Grid Cell Start Point Longitude"];

var maxLon = cell["Grid Cell End Point Longitude"];

return mouse.lat >= minLat && mouse.lat <= maxLat && mouse.lon >= minLon && mouse.lon <= maxLon;

});

if (resultsCells.length === 1) {

console.log("We found the cell");

return resultsCells[0];

} else if (resultsCells.length > 1) {

console.log("More than 1 cell found.");

return resultsCells;

} else {

console.log("No cell found.");

return null;

}

var cell = FindGridCellByMouse(mouse, geojsonArray);

console.log(cell);

Re: How to find a grid cell based on mouse click

JustinBridwell2 — Thu, 11 Jul 2019 16:40:52 GMT

That looks great Jack; thanks! BTW,for Grid Cell 22, -74.5055 should be between the start lon: -74.505495and end lon: -74.505793.

Re: How to find a grid cell based on mouse click

JackFairfield — Thu, 11 Jul 2019 16:42:23 GMT

Oh yeah. duh. Hmm, I wonder why it wasn't working for me. Oh well, you can touch up the logic a little bit as needed.