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.


And you will need to import the web component:

import { CpgMapMaker } from 'canvas-play';

You can always check out the rest of Canvas Play for more canvas based web components. These components can be installed as shown below

npm install canvas-play

Popular Posts