Redefining image maps

Once upon a time images appeared on websites with interactive areas inside. They were called image maps.

During the summer of 2017, together with my friend and mentor Csaba we've created Pictogon ― a modern image map editor.

"In HTML and XHTML, an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination)." ― Wikipedia

I think image maps actualized a desire many of us have: to make something eternally static (object, image) interactive and alive. Sadly, they didn't spread out on the web and searching for clickable areas on an image isn't a habbit. The reason behind these might be the timing and the tools of the age. If you check the "Creation and use section" of the Wikipedia article, you'll see that the recommended programs for image map creation are Dreamweaver, KDE and GIMP (with a plugin). Tools that aren't used anymore or took a turn in an other direction.

So my good friend Csaba wanted to make a proper, modern, web-based image-map editor and asked me to help with building the stack.

It was fun not only because we built a finished product from scratch in a relatively short period of time, but also because it was the first larger-scale project I've worked on (as for most 18 years olds). As it was just a secondary project for Csaba, I designed the whole infrastructure, built the backend and a part of the front-end, while he designed and coordinated everything with precision. I even built a working recurring billing system!

We tried to keep everything as simple as possible. An image map editor shouldn't be complicated anyways. You have an image → draw some polygons on it → set their content → save → get the embed code or download → put it onto your website.

We've also experimented with alternative solutions for the upcoming problems (some of them worked out, some of the didn't). For example we didn't want to spend energy, money and computing power on hosting images. They're large and there are enough hosting services on the web (most users have a website with its own storage, why would they also pay for storing images somewhere else?). So you can only input the URL of an image as a starting point. Pictogon will never store the file, it's just a middle layer, between an image and the frontend, that turns the former into an interactive object.

We decided to let users download the result and handle the embedding part by themselves. It's a tool, not a platform.

We've released Pictogon (into the wild) on 5. October via Product Hunt (which is the only marketing we've done) and luckily people liked it. So much that it became "Product of the Day" and "#3 Product of the Week".

Technical details

The image maps are <svg> elements with the image, a bunch of polygons and a script inside.

The frontend was built with jQuery (I know, it wasn't my decision), the editor was built by us from the ground up. The backend is vanilla PHP.

Update

As of today ― November 02, 2018 ― Pictogon is a settling puddle in our hearts. After its successful launch we were motivated for a few months, but we've started to neglect and don't care. Maybe, it wasn't fully finished at the release and we were tired of it to finish afterwards. I also started digging into building for the peer-to-peer web around that time (and haven't stopped since then). I love this product and hope that someday I can, maybe, rebuild it and relaunch it. Pictogon 2.0, sometime, maybe.