MapGenie - A Risk Map Creator

[lament ivy]

📢 Announcing MapGenie [BETA] – A Web‑Based Risk Map Design Tool (v1.1.3 “UI Overhaul”) – Created by CQG/Barry

Hey everyone!
I'm excited to announce V1.1.3 “UI Overhaul” for MapGenie – the modern, interactive web‑based tool (built with React, TypeScript, and Vite) for designing and exporting custom Risk‑style game maps. Whether you’re a game designer, a hobbyist, or just love tweaking your own Risk board, MapGenie is here to help.

──────────────────────────────
🔍 Key Features:

• Interactive Map Editor:
 – Draw territories using a variety of shapes (polygon, rectangle, ellipse, freehand, and “connected” (snap‑to‑edge) mode).
 – Create and manage continents (with bonus values) and connect territories to define valid moves.
 – Import/export your maps as JSON (for sharing or further tweaking) and export as a high‑quality PNG image.

• Modern, Responsive UI & UX:
 – Complete UI Overhaul: Clean, minimal, and modern layout.
 – Top Toolbar: All global actions, file ops, undo/redo, theme, palette, canvas resizing, and view toggles are now in a single, accessible bar.
 – Left Sidebar: Context-sensitive tool selection (MainTools or ZombieTools).
 – Right Sidebar: Tabs for Continent Editor and Connection Manager.
 – Mobile Friendly: Sidebars become drawers, toolbar wraps, and all controls are accessible on any device.
 – Dark/Light theme support and custom color palettes for continents.
 – Pan and zoom (using the mouse wheel or space‑drag) for easy navigation.

• Text & Styling:
 – Customize territory labels with a choice of 9 web‑safe fonts.
 – Adjust font size and fine‑tune text position (via offset controls) so your territory names look just right.
 – Robust local storage support so your work is saved automatically.

──────────────────────────────
🧟 What’s New in v1.1.3 “UI Overhaul”:

• Complete UI Redesign: Modern, clean, and minimal look.
• Top Toolbar: All global actions, file ops, undo/redo, theme, palette, canvas resizing, and view toggles in one place.
• Responsive & Mobile Friendly: Sidebars become drawers, toolbar wraps, and all controls are accessible on any device.
• Improved Accessibility & Usability: All tools and features are easier to find and use.
• Zombie Mode & Pathing Tools: (from v1.1) Design zombie pathing overlays, use the Zombie Toolbar (Select, Number, Arrow, Key), and manage pathing overlays with ease.

──────────────────────────────
🚀 Getting Started:

1. Visit MapGenie Homepage (or clone the repo if you’d like to run it locally).
2. Open the editor, pick your drawing tool (polygon, rectangle, ellipse, freehand, or “connected” mode), and start sketching your territories.
3. (Optional) Assign territories to continents (with bonus values) and connect them (using the “connect” tool) to define valid moves.
4. Use the top toolbar to toggle territory names, continent colours, and resize your canvas as needed.
5. Try out the new Zombie Mode for advanced pathing overlays!
6. Once you’re happy, export your map (as JSON or PNG) and share it with your friends or use it in your Risk‑style game!

──────────────────────────────
💬 Feedback & Support:

I’d love to hear your thoughts, ideas, or any bugs you run into. Feel free to reply here or open an issue on our GitHub repo: MapGenie Repo. Happy mapping – and enjoy designing your custom Risk map!

──────────────────────────────
Happy mapping,
– CQG/Barry

[lament ivy]

An example of a map I made in this editor by tracing over an image of a prison blueprint.

• Image 1 shows my source image for reference
• Image 2 is my original stencil of this blueprint
• Image 3 is my finished product within the app
• Image 4 is the map on it's own
• Image 5 is the map with territory names
• Image 6 is the map with territory names and bonuses

The JSON file you can use within the app to check it out yourself. Just click "Import JSON"

[quaint wyvern]

This is sick great job @lament ivy

[lament ivy]

I would love to see everyone's map designs!

[stark glade]

Shit this looks good

I'll give it a try in a bit. No matter what, good job Barry

[sour mesa]

Great Work, Barry!

What I'm seeing:

Territory nodes/areas for connections don't move with the shapes when they are moved

• Big issue for building maps from scratch with no reference image

UI doesn't seem to be optimized for 1920x1080 Resolution

• Some of the UI is blocking access to areas of the canvas
  -# I can remedy this a bit by zooming out in the browser to 80% or more.

Switching to Dark Mode makes the canvas zoom level unreadable

• Consider maybe changing the zoom box background color when switching between light/dark modes?
  _

[lament ivy]

Thank you so much for having a play and for the feedback! I've added the above to the upcoming features section in the top post. I'll work on it 👍🏻

[lament ivy]

Hey Everyone, A new update is out

Based on feedback here are the following changes

V1.0.81 (Freehand Fix)

• Freehand connections no longer create an unwanted straight connection line.
  V1.0.8 (Connection Overhaul)
• Precise Connection Points: Straight connections now use the exact point clicked on each territory, not just the center.
• Connection Management Overhaul: All straight connections are managed globally, making them easier to list and remove.
• Freehand Connection Fixes: Freehand connections now visually follow territories when moved.
• UI Improvements: Default Text Settings are now in a dialog, and the UI is more responsive.

See this change below:

[lament ivy]

🚨 MapGenie V1.1 – Zombie Pathing Update is LIVE! 🧟‍♂️🗺️

I'm excited to announce the release of V1.1 (Zombie Pathing Update) for MapGenie, the Risk map design tool!

What’s New:

• 🧟 Zombie Mode: Design zombie pathing overlays directly on your Risk maps!
• 🛠️ Zombie Toolbar: New tools for Select, Number, Arrow, and Key.
• 🔢 Number Tool: Place, edit, and format auto-incrementing numbers with a pop-up editor.
• ➡️ Arrow Tool: Draw, edit, and delete colored arrows with selectable thickness and color.
• 🖱️ Select Tool: Only this tool allows editing or dragging numbers/arrows, so you can create in close proximity without accidental moves.
• 🗝️ Key Tool: Draggable legend shows only the arrow colors in use, with pathing labels (Primary, Secondary, etc.).
• 🧩 Improved Usability: Easily create numbers/arrows close together without pop-ups or dragging unless Select is active.

Check it out now:
🌐 https://pukkavxr.github.io/MapGenie/

Full changelog in the README and CHANGELOG files.

Let me know what you think and share your zombie pathing maps! 🧟‍♀️🧟

[grand cedar]

Starting with the positive.

• I like that you use the arrow colors that Bart and I use by default
• It's easy to remove arrows
• You have a number tool for the index, which is important for complete maps
  Things that I would like to see
• Black borders around the arrows (1pt thick) to make them more visible
• A snapping tool to orient arrows symmetrical
• A way to "pick up" the arrows and maybe even rotate them (to have the run parallel for example)

[lament ivy]

Ill make sure all of this is in the next update.

[hushed locust]

I have yet to try this out but it looks amazing! Great job!

The way I usually make pathing maps is one territory a time. I was thinking maybe you can add a hotkey for ''next color'' and ''back to red'' so you can easily switch between colors

And - since we have all the pathing data in json files nowadays, how feasible is it to automatically draw arrows based on json input? Manually add the index numbers and then automatically draw the lines based on a json file?

[lament ivy]

It could be an option. Send me some JSON's and I'll see what I can do!

[hushed locust]

@lament ivy

[lament ivy]

@hushed locust @grand cedar This was created from a JSON, i'm definitely getting somewhere. Now i just need to refine, add strokes and fine tune. But its looking promising.

[hushed locust]

Yeah, that looks amazing

Wow - this is going to make it so much easier to make pathing maps

Is it possible you can tune the arrow sizes? Make them shrink in size so the first few priorities pop out more?

[lament ivy]

I can add it to my todo list.

It's late so will be after work tomorrow but for sure ill keep working on it. Currently you have to create your own territory numbers because there is no JSON for location unfortunately.

Ill make a quick GIF to show you it in action. Bare with.

@hushed locust @grand cedar

[dusk cove]

Do you have a reference to specific section where you're generating the image (or is it just set as a background?) - curious if it'd be worth looking at being able to modify territory line thickness / continent thickness etc

[lament ivy]

This is just a background image with manual number indexes applied and then the paths auto generated from the JSON.

I'm pretty sure all pathing maps are a screenshot from a manual placement bot game. If there was a way to get actual map images and coordinates of territories, that would be the dream, but I think this is the current best workaround.

To answer your question about the reference, there isn't one, it is simply a background image. The tool takes the middle of the two territories (number indexes) that are told they connect via the JSON and renders an arrow.

[dusk cove]

I think the maps themselves are put together with shapes (territories) - and then rendered to client - so it's probably a little tricky to actually do externally to an extent - and then decorations stuff (sea, ornaments etc) are either part of the map base or overlayed on top

[lament ivy]

AHH that makes sense, so each map is realistically a jigsaw puzzle that is formed each time it's loaded.

[smoky wraith]

The name / delete window keeps going off screen is there anyway this can be fixed?

[smoky wraith]

-shapes teleports when attempting to select it
-saving and importing does not correctly save each shapes position and size
-when dragging to select, frequently not all shapes will be selected that should be selected

These bugs appeared when I had ~50 shapes in the map editor, I don't mean to criticize this program just pointing out some bugs, because due to them I was unable to complete my map.

[lament ivy]

Thank you so much for this, a lot of this is already fixed in the upcoming updates but ill take a closer look at the rest.

It is a work in progress, sorry you lost your map.

[smoky wraith]

Its fine I was mostly just testing and the tool is great, I always wanted somthing like this for the game.

[lament ivy]

Well stick with me and ill try and make it the best I can, i've been working hard on a zombie update right now, which is time consuming, but once that's done, i hope to address all feedback i have from this community, including yours.

[smoky wraith]

Take as long as you need!

[lament ivy]

Updated the app with the latest changes, @hushed locust could you take a look and let me know what you think?
It's been super hard to figure out curves and bends so im working on it, but as of now, it is definitely possible to create a decent pathing map with this tool.

[hushed locust]

yup, ill take a look

it does sometimes make arrows overlap with the index, but even that is very easy to adjust

[lament ivy]

Yeah manual adjustment will always be required due to the fact that we don't have actual map data/

Best you can do with a screenshot of a map unfortunately.

[lament ivy]

We now have curved arrows!!!!!!!!

[lament ivy]

Some pathing maps made with the Zombie pathing tool.

[pale yarrow]

After I clicked on the 'connected' button, I can't use the other options and I can't delete previous connections I drew on the map. I would send an image but I haven't got perms I think.

As far as I can see there isn't a way to resolve this

[lament ivy]

I don't have this issue, I just tested this myself. Feel free to DM me.

But connected is different to connect. "Connect" makes sealanes/connections. "Connected" draws polygons that will connect to other territories.

[pale yarrow]

I'll click the connected button, click somewhere on the map then click elsewhere and it creates a dashed line, click somewhere else and it creates another line to that point from where I last clicked.
Problem is that when I select the other options on the left sidebar, I'm still placing dashed lines, and there also seems to be no way to delete them ; I'm also really smart and didn't export the json until I placed a few already so if they can't be deleted I'm kinda screwed XD

[lament ivy]

This does raise the point, I really should add an eraser tool. Have you tried exporting to json and reloading the json?

[pale yarrow]

Ah I clicked a few more times in random places and it created a territory and I can click undo to get rid it

[lament ivy]

Ah brilliant!

[pale yarrow]

The issue was that I couldn't deselect the connected tool, though now I understand how it works I don't think it's that bad of an issue.

[pale yarrow]

And yeah that would be great thanks XD

[lament ivy]

Ill look in to it, thanks for pointing it out.

Could I ask for your feedback on the entire app?

[pale yarrow]

I haven't messed with zombie mode yet but:
-The width and height settings don't seem to do anything, but maybe I'm using too small a space for it to have any effect.
-Some of the pastel territory colours are hard to see on a white background, but on coloured backgrounds it's easy to see so maybe I'm just being picky lol.
-Maybe add some more territory colours? Some colours look very similar which makes it hard to differentiate some continents if they are close
-Obviously the connected tool is abit funny to use but it does it's job.
-I'd add an option to click and drag to move around the canvas, it's kinda annoying having to zoom in and out to move it about. I remember seeing a slider at some point but I don't think it affected the canvas movement.
-It'd be nice to be able to rotate text incase it can't fit in a territory horizontally.
-An option to hide bonuses next to territory names and continent colours would be nice, so you can see names and colours without the bonuses

[pale yarrow]

Everything else I can think of I remember seeing in this

[lament ivy]

"click and drag to move around the canvas" - Hold space, click and drag.

[pale yarrow]

Ah thanks!

[lament ivy]

Ill add a few of those to my todo list, thanks 🙂

[pale yarrow]

Ah one more thing, being able to move the background image would be really nice

[lament ivy]

Completely agree, it's been annoying me too.

Space and drag kind of does.

[pale yarrow]

I imported an image but it's misaligned with the countries I've drew which is... annoying

[lament ivy]

But i agree, making it movable and scalable is needed.

I made the background image feature to upload first and trace over.

Like this....

[pale yarrow]

Yea that's what I did, then I deleted the image and deleted it from my device so I'll have to find the correct one again

Smart move from me I can't lie

[lament ivy]

Incredibly 🤣

[quaint wyvern]

Reminder to self to still test this out

[empty field]

Reminder*

[lament ivy]

Working on some big updates, it's taking a while, I hope you're all enjoying the app.

[velvet lily]

This is really great! 👏 I've been searching for something like this because I love maps. Poked around a little bit, have not yet tried the zombie tool but this is what I come up with, including my lack of skills of drawing🥹 https://prnt.sc/3EKpVksYsz9A (Idk if links are allowed or not its just an image of my map)

[lament ivy]

Dude, this is incredible, that map is amazing. I'm so glad you're enjoying the tool my friend. If you have any suggestions or feedback I'd love to hear it. Thank you so much for using it.

[velvet lily]

Thank you for developing this man! So far, territory naming and x,y axis movement could be implemented but its already in your todo list so I see no problem! Very easy and so fun to use for map lovers like me . I wish they would add some of the projects from this app to the game as purchasable map packs🥹 . Suggestion wise your schedule is deep enough, However, there is a web based game called ''at-war'', unfortunately its a dead game barely anyone plays anymore but inside, there is a map designer tool that I used it for hours maybe if you haven't heard about it you may want to check it out and catch some new ideas. Not necessarily though since your todo list and everything is going smoothly and deep enough 👏 and the genre is not quite fitting to the risk-based game. I Just thought would be good to share since we'll never know where to catch some new ideas.

[lament ivy]

I appreciate all ideas and feedback man! Thank you so much! I'm glad you enjoy it. More updates to come.

[thin ginkgo]

https://cdn.discordapp.com/attachments/860905708177063956/1383096058221039646/Untitled_video.gif

[rain mulch]

Suggestion: drop a link to the mapgenie home page in the thread evey once in a while.

[lament ivy]

https://pukkavxr.github.io/MapGenie/

Like this 😎

[rain mulch]

💪

[thin ginkgo]

https://cdn.discordapp.com/attachments/860905708177063956/1383096058221039646/Untitled_video.gif

[lament ivy]

Still working on this stupid update 🤣 It's kicking me in the ass, but it's coming.