Grid Map Annotator

This is a small tool that allows you to overlay a grid over an image and store notes for each cell. I created it for note-taking as a game master for mutant year zero

Key Features

1. Load Any Grid Map:

•  URL: Easily load your grid maps by entering the image URL.
• Dynamic Resizing: Adjust the width and height of the loaded image relative to its original dimensions as needed

2. Customizable Grid:

• Rows and Columns: Set the number of rows and columns to suit your map layout.
• Cell Dimensions: Specify the width and height of each cell with sub-pixel precision.
• Grid Color and Border Width: Customize the grid color and border width to match your map's aesthetic. Choose width 0 to hide the grid.

3. Annotate with Notes:

• Editable Cells: Click on any cell to open the notes for that cell.

• Hover Tooltips: See cell coordinates on hover, displayed as row letters (starting from A) and column numbers (starting from 1).

4. Save and Load State:

• Export and Import: Save your annotated grid as a JSON file and load it back anytime to continue your work.

5. 100% offline support.

Download the HTML file and use the tool without internet. Simply place your image in the same folder as the html file an use the image file name as URL.

Modern browsers allow websites to store content locally, so this tool stores your notes locally on your device.

• Local Storage: The grid state is automatically saved to your browser's local storage, ensuring your progress is never lost. Easily load the saved state when you return.
• Clear Local Storage: A convenient button allows you to clear the saved grid state from your browser's local storage, I am not interested in tracking you.

Why Use Grid Map Annotator for Mutant Year Zero?

Mutant Year Zero is a complex and immersive game that requires careful planning and detailed notes. With the Grid Map Annotator, you can:

• Organize Your Maps: Keep track of important locations, enemy placements, and strategic points with ease.
• Enhance Your Gameplay: Provide clear and detailed information to your players, enhancing their gaming experience.
• Save Time: Quickly annotate and update your maps, saving valuable time during your gaming sessions.

How to Use

1. Load Your Map: Upload an image or enter the URL of your grid map.
2. Configure the Grid: Set the number of rows and columns, cell dimensions, and customize the grid color and border width.
3. Annotate: Click on any cell to add or edit notes. Hover over cells to see their coordinates.
4. Save and Load: Export your annotated grid as a JSON file or rely on automatic local storage to save your progress.