Metro Map Maker should be faster on Firefox now

Metro Map Maker should be faster on Firefox now
Side-by-side comparison of high and low graphics quality modes. Map credit: https://metromapmaker.com/map/J4PO6zmJ

First off, thanks again for everyone's patience – I know many of you signed up long ago for Metro Map Maker updates, and while I've been a bit quiet lately, I'm restarting development and am excited to deliver some new features for you soon.

Thank you to the many people who reported that Metro Map Maker was slow on Firefox, especially on very large maps.

To fix this, I added a "Lower Graphics Quality" checkbox, available when you expand the new Settings button. Checking this box will make Metro Map Maker look a little bit less nice, but I've done my best to make sure it still looks very good. Most importantly, it will run much faster, regardless of which browser you're using.

How to enable lower graphics quality mode

If you check the "Lower Graphics Quality" checkbox, Metro Map Maker will remember that on that browser/device until you uncheck it, so you don't need to check the box each time you open up Metro Map Maker, or open a new map.

This doesn't just work on Firefox; it works on all browsers, and mobile, so if Metro Map Maker is slower than you'd like, you can switch to "Lower Graphics Quality" mode and enjoy the speed boost.

In case you're curious about why the slowness happened in the first place, read on. There's some technical discussion about how Metro Map Maker works behind the scenes, but hopefully it'll be interesting even to non-techies.

In version 7.0, I changed the way maps were drawn. If you've been using Metro Map Maker a long time, you might remember that older versions had "eraser marks" that would appear after using the eraser, or redrawing, similar to if you had erased the lines on actual paper and redrawn them.

In fact, that's pretty close to how maps were drawn in older versions. If you drew or erased a line, the lines and points around it would be erased and redrawn. That had the advantage of being extremely fast, but the drawback of showing those "eraser marks", because the full area wasn't being redrawn, and so a few stray pixels would remain.

Video showing the "eraser marks" that would appear on maps in versions earlier than 7.0
In versions before 7.0, these "eraser marks" were visible for a brief time after erasing, but they wouldn't be part of your final map

In 7.1, I changed it so every color in your map gets drawn separately onto its own "canvas", and then all of the canvases get overlaid on top of one another. This was also extremely fast because if you made a change to one line, only that color would be redrawn. This is also a nice change because it lays the foundation to add layers, a feature many of you have requested.

The drawback to drawing every color separately is that different browsers handle this differently behind the scenes. Most browsers handle this fine, but Firefox uses a lot more memory and processing power than other browsers to draw each of these "canvases", which is what causes the slowness.

This fix works in a few ways, primarily by not having a separate canvas for each color. Now, canvases are limited to 8 on high graphics quality mode and 4 on low graphics quality mode. That doesn't mean you're limited to 4-8 colors, only that a canvas can be shared by multiple colors.

Another key to making things faster is making the canvases smaller on low graphics quality mode. While larger canvases look nice and tiny canvases can look a little pixelated, the canvases really didn't need to be as large as they had been.

I'd considered (and tried!) merely undoing the changes that put colors on their own canvases in the first place and going back to "eraser marks", but that way of drawing/erasing doesn't play well with all of the new line styles added in 7.0 and 7.1, and it just didn't look very good.

All in all, I've tested this pretty extensively (including with many of the maps you've written in about) and am happy with the results. I didn't love having to suggest using a different browser to use the site, and am happy that everyone will now have an easier time using Metro Map Maker.

As always, thanks again to everyone who wrote in to tell me about the problems, and especially those who took screenshots, videos, and sent me links of their maps so I could test it for myself. This really does help me fix the problems, and I really appreciate it!

Happy map making, and I look forward to seeing what you make, and creating new features for you. More updates soon!