What's this?
Map Kit is a small and simple utility app which can generate random coordinates inside a user specified area.
The reason I built this utility app is very simple - a friend needed this functionality for his startup...so I built it.
Tech
NextJS was probably not necessary for this project, as both load time and the fact that it initially renders on the server are not relevant in this case. However, going from 0 to a running prototype is so fast and so easy, that I didn't really feel the need to use something else. I'm sure it doesn't take long nowadays to set up a webpack config. I might still suffer from PTSD, when trying to prototype something really quick, only to find yourself knee-deep in the webpack config to try and find out which loaders to include in your project.
In hindsight, I should have gone with Vite. Since the app has only one page and the performance gains from SSR are irrelevant in this case.
The app is hosted on Vercel, which is free (and free is always great). Also, I love the fact that I get a CI pipeline out of the box, with no infrastructure to take care of.
The Math
An interesting problem to solve in this app is generating a random point inside a simple polygon. As with most problems, the first step is to simplify it. In this case, we can break down the polygon into multiple triangles. Generating a random point inside a triangle is trivial, I just copied this piece of code from Stack Overflow. All I had to do is adjust the variables and add my types for Triangle and Point. Et voilà, problem solved.
This simplification creates two more issues, the first one is creating triangles from any n-point polygon. The other one is the distribution of random points inside the generated triangles.
Initially, I chose a very simple solution for creating the triangles. I simply drew a line between the first point and every subsequent point after the second. This is also called fan triangulation.
As you can see, the issue with concave polygons is that
triangles can end up covering an area outside the original
polygon. Luckily, I didn't have to solve this myself, using a
library called earcut. Earcut claims to be
"The fastest and smallest JavaScript polygon triangulation library". While speed
wasn't the most important factor for me when I was looking for triangulation
libraries, the library seemed well maintained and easy enough to integrate into
my existing pipeline. All I had to do was massage the data a bit to make it the
same shape as it was coming out of my old function, and the rest would work the
same.
As there is no way to guaranty equal size between the triangles, I needed a smart solution to distribute the points to all of the triangles. In this case, a weighted distribution based on the area of each triangle was needed. To do this, I first calculated the area of all triangles, added them all up for a total area and then created a random number between 0 and the total. I then subtracted the size of each triangle until the number was equal or below 0.
Future
To be honest, this project will probably not see any future development as it does exactly what it was developed to do. I am quite content to have finished a project for once and not be thinking about all the features one could want in the future.
Nevertheless, there are some future possible improvements. For example - tools to create more complex polygons, polygons with holes in them, or just multiple polygons at the same time covering two different areas.