Tips and tricks #7: How to make calculator with SVG image map

Tips and tricks series

• Tips and tricks #1: How to set output value
• Tips and tricks #2: How to make calculator translatable into different languages
• Tips and tricks #3: How to make calculator with custom errors
• Tips and tricks #4: How to make calculator with table output
• Tips and tricks #5: How to show/hide input and output controls in a calculator
• Tips and tricks #6: How to make calculator with virtual keyboard
• Tips and tricks #7: How to make calculator with SVG image map
• Tips and tricks #8: How to reuse existing calculator
• Tips and tricks #9: Big numbers
• Tips and tricks #10: Files, long calculation mode
• Tips and tricks #11: Dynamic table columns
• Tips and tricks #12: Long (infinite) calculations
• Tips and tricks #13: Bitmaps and Pixel manipulation
• Tips and tricks #14: How to use a masked input

This article may rely on knowledge you should get from previous articles, so you may want to check them first.

Image maps

In this article, we will create our next calculator, which will use image map input control. In short, an image map is a graphic image defined so that a user can click on different areas of the image and get different results, like going to different pages of the site. It can be used to visualize geodata, for example, a map of the world may have each country hyperlinked to further information about that country. Also, image maps are used on many Web sites as a more fancy-looking form of menu or selection control, instead of standard drop-down, radio button, or tab.

On this site, you can use an image map inside the calculator for the same purposes, and I'll show you how. Planetcalc supports only SVG image maps. SVG was chosen because SVG images can be scaled automatically, thus the image map looks nice on different devices, including tablets and mobile phones.

SVG image map

First, of course, you need an SVG image for your map. For this calculator I've created SVG from this one. It is a map of the France regions. During the creation of the SVG file you need to follow a couple of rules for the map to work:

1. Each entity (group, path, rect, etc), which is supposed to be a selectable item on your map, should have the class attribute set to "mapitem"
2. Each entity (group, path, rect, etc), which is supposed to be a selectable item on your map, should have the id attribute set to something meaningful.

The class attribute is used to attach click handlers to elements, and the id attribute is used to identify the "item" selected. For France regions, I used region names in lowercase letters as ids. Below opening path tag for Lorraine is shown as an example

path id="lorraine" class="mapitem"
...

Note that when the item is selected, its class is changed to "mapitem_selected" and restored to "mapitem" when it loses selection.

SVG image map style

To make your map looks pretty, you may need to add some interactivity, like different style on hover and different style for the selected item. This can be done using CSS styles. Here is the sample CSS, which uses :hover pseudo-class to emulate hovering effects and mapitem_selected class for selected item style.

.mapitem:hover {
fill: #22aa22 !important;
}
.mapitem_selected {
fill: #22aa22 !important;
}

Concrete CSS, of course, depends on the contents of your SVG, so I would not comment much here.

Calculator

With SVG and CSS at hand, we are ready to create a calculator with an SVG image map.

To create a calculator, login to the site and click the profile picture link at the top right corner, then choose  Personal. This will bring you to the Personal section of the site with a new top-left  menu. In the top left menu, click the  My calculators item.

This will open the My calculators page. Here, press the  button in the table header. This will open the calculator editor page.

Add the following input controls:

For SGA map input, paste contents of SVG image into SVG map field and contents of CSS style to Map style field. Set id of the item selected by default if you want any. Here I used "lorraine" to make Lorraine region selected. For Names input, add "bretagne"-"Bretagne", "basse-normandie"-"Basse-Normandie", etc. mapping of France region names in lowercase used as ids in SVG to normal France region names which I will display on selection.

Now, add the output control:

We have described the inputs and outputs of our calculator, so we only need to write code to do the decoding.

Add this code into Calculate function:

if (map)
    selection.SetValue(names[map]);

map variable will be filled with the id of the selected item.

Now you need to remove artificial delay between the change of inputs and calculation of outputs - to make the map respond promptly to the user's selection. To do so, just set the Instant calculation checkbox at the bottom of the calculator editor.

After that, click on the Preview button. You may want to place Name output above the map, so it will be visible immediately. To do so, while in "Preview" mode, just move the "selection" output above all inputs by pressing the Move up link in the table "Parameter order" at the bottom of the form, then press "Save".

If everything is working as expected, Publish the calculator. I embed it in this article below.

France regions

Calculate

Name

 

Map

 Link  Save  Widget