HexMap Tool

A browser-based tool for generating hexagonal grid maps from real-world locations.

Features

• Location Search: Search for any place in the world (powered by OpenStreetMap/Nominatim).
• Hex Generation: Automatically overlays a hex grid on the satellite/map view.
• Customizable Grid:
  • Adjust Zoom level for details.
  • Change Hex Radius (size of tiles).
  • Toggle Flat-top or Pointy-top hex orientation.
  • Reduce Colors: Quantize the map into a limited palette (e.g., 8 colors) for a stylized look.
• Map Styles: Choose from Standard, Physical, Dark, or Satellite views.
• Export:
  • Download the Source Map or Hex Map as PNG images.
  • JSON Export: Get the raw grid data (coordinates and colors) for use in your own engines/projects.

Instructions

1. Search: Enter a location (e.g., "Paris", "New York") in the top search bar.
2. Adjust: Use the sliders to change the Zoom level and Hex Size.
   • Tip: Use the "Clip to Border" checkbox to restrict hexes to the official boundaries of the location.
3. Style: Select a map style (e.g., Satellite) to change the source visuals.
4. Download: Use the download buttons on the top-right of the panels to save images, or the JSON button in the toolbar for data.

Performance Warning ⚠️

This tool runs heavy image processing directly in your browser.

• High Zoom Levels (10+): Trying to load a large country at a high zoom level will require downloading thousands of tiles. This may take time depending on your internet connection.
• Small Hexes: Generating thousands of small hexes (Radius < 5px) requires significant CPU power.
• Quantization: Reducing colors (K-Means clustering) is computationally expensive for large maps and may freeze the interface for a few seconds.

I have implemented optimization features (concurrency limits, main-thread yielding), but it can still slow down your device.