how to sum up values in a polygon in mapbox

Question

I tried being very detailed with my problem but instead I got called out for asking for help so Im gonna be very general here.

I need to sum up the values of each location in a polygon drawn on Mapbox. I actually have the code for it that inserts the draw polygon tool and can also draw the polygon on the map and it does sum up the values of each location within that polygon that is displayed on a box on the left side of the map. However, the value is wrong and im not sure why. I am at my wits end with this. Does anyone have any clue with regards to this?

I've been reading other posts on stackoverlow and the general idea I get is that if you have a problem, you can always reach out for help. If you dont want to help me because the manner of which im asking for help or for whatever reason is wrong, that is ok. If you need to see my code, please let me know and no I dont want to be spoonfed, I genuinely want to understand what is wrong with my code and how someone can help me.

score 0 · Answer 1 · answered Apr 19 '23 at 02:43

It's difficult to provide specific guidance without seeing your code, but in general, here are some steps you can take to sum up the values of each location in a polygon in Mapbox:

Use the Mapbox Draw tool to draw a polygon on the map.
Get the coordinates of the polygon using the Mapbox GL JS library.
Loop through each point in the polygon and check if it falls within the bounds of a location.
If a point falls within a location, add its value to a running total.
Display the total value for the polygon in a box on the left side of the map. Here's some sample code to get you started:

// Get the coordinates of the polygon
const polygon = map.getSource('draw')._data.features[0].geometry.coordinates[0];

// Loop through each point in the polygon
let total = 0;
for (let i = 0; i < polygon.length; i++) {
  const point = polygon[i];

  // Check if the point falls within the bounds of a location
  const locations = getLocations();
  for (let j = 0; j < locations.length; j++) {
    const location = locations[j];

    if (point[0] >= location.minLon && point[0] <= location.maxLon &&
        point[1] >= location.minLat && point[1] <= location.maxLat) {
      total += location.value;
    }
  }
}

// Display the total value for the polygon
document.getElementById('total').textContent = total;

In this example, getLocations() is a function that returns an array of objects representing each location on the map. Each object should have properties minLon, maxLon, minLat, maxLat, and value, which represent the minimum and maximum longitude and latitude values for the location, as well as its value.

Hi @Karma Blackshaw, thank you so much for your quick response. I really appreciate it. Let me see if i can modify my code with your answer and if I have any questions I will let you know. Will update you if I am successful. Once again, thank you so much. — LemonBlobs, Apr 19 '23 at 02:51

how to sum up values in a polygon in mapbox

1 Answers1