Map Maker: A Canvas Based Web Component
I created a new tool called Map Maker . This uses Canvas API to create a hexagonal grid of a given size. The math involved in labeling and then position each intersection is quite interesting, and I am considering doing a blog post on the math involved at some point. The equation for the distance between two points is used to create a hover effect. When the user clicks while hovering over a point, that point is updated to match the mouse position until they let up on the mouse, creating a drag and drop effect. I plan on using this to build a map for a board game by importing the data created with this Map Maker tool into a Photoshop script. This uses the Canvas API wrapped in a Web Component . This makes this tool capable of being dropped into any website with a few lines of html. Additionally, all the properties of the hexagonal grid can be controlled through the web components attributes. < cpg-map-maker side-length = "50" grid- size = "3" dot-
