In the case of random coordinate points, construct a polygon of certain edge points
I have a set of disorganized points on the Flyer map, which in my implementation represent the nodes of the territory on the map from my Minecraft server (can be viewed at: http://loka.minecraftarium.com/map ). Currently my implementation only takes points and uses a booklet to draw a circle around the point to roughly indicate the control area.
This is, however, somewhat ugly and does not represent the desired end result, which is to draw a polygon area from the edge points given the dataset. Due to the disorganized nature of the points, however, there is no easy way for me to declare "endpoints" at these points, as they will come from the original source (city center) and the players are expanding their territory.
My question is, is there a way that given a set of these points to iterate over them to automatically detect the boundary points and some sort of order, so that then feed the polygon positions of the sheets and draw the polygon area representing the control, not just a bunch of point with intersecting circles drawn around them.
I've seen a thing or two about the shoelace formula, but I'm not sure what / how it works in regards to having dots inside what will be in this area.
Below is the current result:
Desired result (no circles within the course)
Thank you very much in advance!
source to share
I got this from user3413723. It works great with lat / lng objects. https://npm.runkit.com/hull.js This is how I use it with Google Maps:
// in main.js
Hull = require("hull.js");
// ... results is my object array with lat/lng properties
var hull = Hull(results, 50, ['.lng', '.lat']),
hullMap = new google.maps.Polygon({
paths: hull,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
hullMap.setMap(map);
source to share