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-size="5"
  hover-dot-size="5"
  drag-dot-size="5"
  line-thickness="4"
  corner-rgba="rgba(0,0,0,1)"
  side-rgba="rgba(0,0,0,1)"
  hover-rgba="rgba(0,150,0,1)"
  drag-rgba="rgba(0,200,0,1)"
  show-origin="false">
</cpg-map-maker>
      

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