Given random coordinate points, construct a polygon of determined edge points

Question

I have a set of unorganized points on a Leaflet map that, in my implementation, represent nodes of territory on a map from my Minecraft server (viewable at: http://loka.minecraftarium.com/map). Currently, my implementation only takes the points and uses leaflet to draw a circle around the point to roughly indicate area of control.

This is, however, somewhat ugly and not representational of the desired end result which is to draw a polygon region from edge points given a set of data. Because of the unorganized nature of the points, however, I have no easy way to declare 'edge points' on these points as they will stem from an original source (town center) and out as players expand their territory.

My question: is there a way given a set of these points to iterate them to automatically determine edge points and some sort of order in order to then feed Leaflet polygon positions and draw a polygon region representing control rather than just a bunch of points with intersecting circles drawn around them.

I've seen some stuff about shoelace formula, but i'm unsure if/how that works in regards to having points 'inside' what would be the area.

Below is the current result:

Desired Result (without the circles inside of course)

Many thanks in advance!

Answer 1

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