How to find a grid cell based on mouse click

617
3
Jump to solution
07-10-2019 11:17 AM
JustinBridwell2
Occasional Contributor II

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?

0 Kudos
1 Solution

Accepted Solutions
JackFairfield
Occasional Contributor II

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);

View solution in original post

3 Replies
JackFairfield
Occasional Contributor II

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);
JustinBridwell2
Occasional Contributor II

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

0 Kudos
JackFairfield
Occasional Contributor II

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.