Being able to undo is useful, but being able to redo if you undo too far would also be useful.

While here, undo and redo should maybe get their own buttons?

Right now you can add emoji to a station name, but what if there was a bank of "stickers" or symbols that could be added?

These could be added to the canvas via .drawImage() (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage), and inclusion in SVGs would be trivial (assuming the stickers/symbols were SVGs as well).

These could be especially useful for insets, legends, the Metro "M", etc.

Currently my process to view newly-created maps is slower than I would like.

I would like to create a new admin page that lets me view canvas images of every map saved with the Save & Share Map feature.

From Youtube:

When two or more lines are drawn on top of each other, (Example: Using the fill tool to make water) it creates this weird lumpy effect on the lines. Not a huge big deal, but it can definitely make the map look a bit weird, or unintentionally displeasing to look at. If you change make it so that the lines didn’t look lumpy when over lapping each other in the update, that’d be great!

This is especially noticeable when using flood fill.

First, there's a purple line:

After flood fill, it's very difficult to see at all:

Reducing the line width to 12.5% makes it clearer what's happening here:

Here, you can see that the water is connecting across the purple line.

The tags "real", "speculative", and "unknown" are fine, but are a bit broad.

Is this the best way to layout these maps? Now there's /calendar/ which is great, but how else might be good to view maps?

Consider:

• By location (all Londons together, for example)

What else?

The admin gallery needs an update, it's only barely v6 compatible and has a lot of newly-unused code than can be deleted.

While here, should probably change how the public gallery is generated. Will open a separate issue.

Some color choices look visually very nice together; it might be helpful to offer a handful of different options to choose from or quickly add to your map.

There's already some precedent for this, since the WMATA colors are offered if you don't have any.

Right now maps have a transparent background which displays as white during editing.

You could flood fill to get a different color if you wanted, but being able to set a background color instead would make maps load a lot faster.

From Youtube:

Nice update! Can you make an option to change the background to any color? It would be more convenient than having to use the fill tool and select a color on the draw rail line thing.

Rather than showing a blank slate, it might be more intuitive if the default map were the Metro.

(But only for first-time visitors with no localstorage / not using a loaded MapURL)

Hi,
I would like to programmatically create a map and generate the image offline.
Do you think it's possible?
I know Python but not Django and I have difficulty to found where the map format is implemented.
Any guidance?
Thanks

The "eraser marks" you see when you draw a line and then erase it are because erasing works by drawing an equally-sized white line or circle above the existing color. This is especially noticeable when zoomed in by a lot.

I quite like the charming look of the eraser marks, and they'll go away on the next call to drawCanvas(), but I could probably either call drawCanvas() more often than I do now that it's so much faster than before, or find another way to handle erasing.

From Youtube:

When you start drawing lines, for some reason there this weird effect where there’s these thin little white semi circle outlines along the line. It’s hard to see and you might not notice it, but if you look closely it’s not hard to see. Also, when you use the eraser tool to erase a line, there’s this weird ghost effect where there’s a thin outline of where the line used to be. There also a weird effect when lines are drawn on top of lines. It’s this weird bumpy unsmooth effect when they’re place on top of each other. All of these things make it a bit difficult to see how the final map is going to be without having to export, or reload it every time.

This can wait until after users have rated (liked, disliked) maps for a while, but I'm really curious to see what the highest-rated maps are, and I think others would be interested too!

Probably will link to this in the top navbar and from /gallery/

Requested by users on reddit and youtube.

Probably most useful for lines that are under construction.

Should make it a separate setting from the line widths, not a different type of line width.

Options: Solid (default), dashed, dotted

For SVG implentation: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
For JS implementation: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash

For all the night owls making maps into the small hours, add a toggleable option.

Best if it applies site-wide, including on the calendar and gallery.

When maps can mix and match line widths (dependent on #30) and/or styles (dependent on #31), it may be useful to be able to have flood fill also change the line widths and/or styles.

(By default, flood fill would likely only set flood-filled portion to the active color.)

This might get confusing quickly, and it might be good to have multiple modes, though this would require a lot of options. Worth thinking through this carefully and identifying the simplest implementation.

Matching Options:

• Flood fill matches on color regardless of line width or style
• Flood fill matches ONLY on matching color, line width, and style
• Flood fill matches ONLY on matching color and line width, but doesn't match when style is different

Fill Options:

• Flood fill sets color only
• Flood fill sets color, line width, and style
• Flood fill sets color and line width, but not style

Only English supported?

Frequently-requested feature on both reddit and youtube has been to increase the maximum map size.

The main constraints:

• Maps should load very fast, even when very large or with a lot of detail (especially important on mobile or rate-limited connections)
• Safari may have hard limitations on the canvas size
• Maps should look crisp, not blurry, when editing

Currently, the station orientations Above 90º and Below 90º exist, but having labels appearing above or below a station without any rotation has also been requested.

Centering seems like the only snag, though in JS this seems fairly easy since I can .measureText(); I'll have to see if there's a similar option for SVG.

• integration with OpenStreetMap
• Ability to change opacity and pattern of lines
• arrow keys to scroll instead of moving map
• ability to select space between stations and enter real life distance and scale it

Some users have requested the ability to add free text onto a map, without a station involved.

Probably the easiest way to add this without major changes to the data model or rendering engine would bet o create a new station style that has no rendered appearance and only displays the text. The main challenge here would be in displauing/selecting the hidden stations, or having them clickable while not rendering them during editing.

A more complex implementation would add true free text as an option. Worth considering which option is better, because I probably won't add both!

If you're here and would like to vote:
🎉 : Use the existing stations to add free text, just add an option to make the station marker hidden
❤️ : Add a free text button that isn't part of the stations

With a single given map:
Calculate levenstein or other similarity score to all other maps
Show most similar maps on a single page

This could be useful as an enhancement to the existing Gallery View. Sometimes similar maps are distributed across several pages, which makes it difficult to know which one(s) to hide.

As requested on Youtube, it would be nice to have a bank of additional fonts besides the default Helvetica.

Note that any additional fonts should be widely-accessible and preferably have a useful fallback.

I'll also need to figure out whether this has any impact on my SVG maps, or the PNG maps generated from the SVGs.

A frequently-requested feature on both reddit and youtube is to be able to mix and match line widths similar to how you can mix and match station styles.

This would have the benefit of allowing all 28 possible station shapes to be used within the same map, and give a great deal of flexibility to map styles.

Expanding the available grid size would allow larger maps to be created and cities like NYC and Chicago to have maps of their metro systems.

While adding more squares to the grid is trivial, careful attention will need to be paid to the validator script and most importantly to the grid-to-canvas-image converter.

The current (original) size of the grid is 80x80 (6400 squares)

I think maybe creating a Resize Grid button / feature would be good to do.

The Resize Grid button should expand with options when clicked, and have an option to hide the Resize options. It should have a warning like "Careful: if you resize a larger map onto a smaller grid, you'll lose your work!" similar to how I warn on the "Move map" feature.

Sizes that I think might make sense include:

• 80x80 Small (6400 squares)
• 120x120 Medium (14,400 squares, 2.25 times larger than original)
• 160x160 Large (25,600 squares, 4 times larger than original)
• 200x200 Extra Large (40,000 squares, 6.25 times larger than original)

Maybe extra large is overkill, but I wonder what people might do with all that extra space?

Clicking and dragging fills (or erases) all cells except the first one. Reproduce: drag orange line from (1,1) to (1,4). Only (1,2), (1,3), (1,4) are filled. Expected behavior is inclusive filling, i.e. also fill the starting cell (1,1).

Being able to set an image of the city you want to design a map for would probably make it easier to get an approximate layout for the plan done. To avoid copyright stuff (and since it wouldn't fit with the idea of the metro plan anyway) it would just need to be there in the editing phase and not in the export.

The admin view "Similar Maps" is really useful, and it would be nice to add this as an option to the rating view to see whether there are other versions of the same map.

Important: before I release this more broadly, I'd need to significantly improve the performance of this view.

From email:

Can there be a feature where I can search up a map name? For example, if I want to search up “Minecraft”, all maps labeled Minecraft will pop up.

From email:

it might be possible to benefit from the option to broaden your 90° upward vertical and 90° downward vertical station name labeling options: namely, giving the text of both vertical options a "facing left" or "facing right" choice

If a singleton square station is replaced with a non-singleton square station (which is smaller), there's an overlap until the next drawCanvas() call:

One potential solution would be to check for a station in the neighboring 8 points of the just-drawn point; if so, call drawCanvas() for stations only.

Depending on how I address #46, that may address this too.

To reproduce:

• Make a singleton point, then add a square station and notice that the station is a square
• Connect lines to that point, then notice that the station marker shrinks, but the older square station marker from step 1 is still visible
• Change the direction that the rectangle station marker should be drawn by drawing more lines and notice that the overlap occurs again, in a diagonal direction

When reviewing maps in the gallery, it can be difficult to tell similar maps apart especially when the changes are small.

Was it just a new station added? Or a change in the orientation of a station label?

Or were the changes more sweeping?

Which version of a similar map should be kept? It's probably a safe assumption that the most recent version should be kept, but I should make sure.

A Map Diff feature in the gallery would help with this.

I've gotten by this far without it, but it would be really useful to have better admin tooling, like being able to search for maps by station name within a nice, easy-to-use form.

I'd be so curious to see how maps have evolved over time -- maybe I can put together a way to animate two or more SVGs to see the progression of a metro system?

I bet this would be really cool looking!

It seems to me like trying to make a metro map on mobile / tablet would be pretty time-consuming and potentially annoying compared to on desktop (especially since it would be hard to see the finished product in total), but maybe there's demand for it?

Explore whether it's easy to add better support for mobile. Sam in #13 correctly identified the problem is that the drawing features expect a single touch, so clicking and dragging doesn't translate well to mobile.

Currently, the public gallery loads a lot of <img> tags with base64-encoded maps.

This caches and compresses well, so it loads extremely quickly even though it's not the most obvious implementation.

With .png and .svg thumbnails being stored on disk, it may be worth exploring alternative loading strategies like lazy loading images.

Related to #55

Adding several validator tests for valid and invalid map json blobs will help me feel more confident that I'm not introducing new bugs when I expand available grid sizes

Kinda similar to the London style; distinguishable from the current "Rectangle" style by not always being centered / possibly adapting based on the line direction and/or the station orientation.

Would want to figure out the specifics here first; the main drawback of the London style is that the station markers are fairly small.

London-style also requested on reddit.

At WMATA HQ, one of the planners suggested adding a feature to select a portion of the map, which could then be moved or expanded independently from the rest of the map.

This would be especially useful when re-spacing certain sections of the map without having to delete and re-do the whole section.

Right now, maps at /calendar/2024/04/14/ are displayed from newest to oldest, but maps created early in the day won't be seen as readily due to pagination.

If performant, consider removing the pagination (or raising the limit to be higher).

Alternatively, consider sorting by maps with the most likes.

This may help highlight the most advanced version of a map when a day has multiple versions of a map in progress, but doesn't help much if a map is created over multiple days.

Kind of a weird feature but I'm kinda curious: what are the most popular user-chosen colors?

Maybe this would be a good offering for #41.

It is not a real issue, but it would be useful to have it (and it might be easy to implement)

To avoid accidental deletion of work! :)

When adding a new rail line, the newly-added tooltips are visibly cut off underneath the canvas container:

To reproduce:

• Start on Safari
• Add a new rail line
• Hover over the new line and notice that the tooltip is cut off

Having different font sizes for station text, including being able to mix and match sizes.

For instance, being able to display station names in the primary and secondary languages.

From Youtube:

I would love a feature that allowed us to be able to manually split into lines very long several-word names like "Vichuquen Huapí–Western Terminal" so it does not take so much space it end up clashing with other names no matter in which direction you put it if the station is in a very transit dense area. I also think public transit maps should reflect their users and part of that is multilingual station names, and so I would like a feature that allows for the display of secondary names (to write in romanizations or translations underneath, so I can, for example, put Hospital General under 病院一般 instead of it all being on a single line)

I'm in problems

From Youtube:

As someone who has been obsessed with making maps in your site the past three months, it's very exciting to see the new changes! Just a suggestion: Is it possible to add a measure line feature? The only downside for me is having to count the squares so everything is well distributed :p

Thematically feels related to #34, and maybe will be part of the select feature, telling you how many squares you get w/h.

When trying to calculate the diff for fZiw-kEA, clicking the diff button only adds "fZiw" to the input text field.

Since the full URL hash isn't in the text field, a map's diff can't be calculated. See attached screenshot.

From Youtube:

Hello! I have been using metro map maker for so long now and it's been really cool because it brings my head cannon into reality! The line width adjustability is SO COOL and I literally jumped in excitement (not even joking). I currently have 3 huge metro systems and they look kind of plain. This new update will bring SO MUCH MORE. I cannot express how excited I am. I know this is really hard to do, but for a suggestion in the future, you can make a google doc like system, where there is a home screen that contains all of the saved maps on your account (which is the hard part), and then it would be so convenient. I know this is difficult so if that's not possible, I don't care, this website is already INSANE as it is. KEEP UP THE GOOD WORK!!!!

Some of my thoughts about a potential login system are detailed at https://metromapmaker.com/help/#faqs-autosave, but the most important idea here should be that a login system should be 100% optional and you should be able to create maps without a login.

I think being able to save maps whether or not you made them yourself seems useful and in line with this request.

This would be a really good feature as me and other people share maps on apps like discord regularly and it would be very convenient if it could show an images of the map we are sharing with the link.