Get reference code
Appearance
Sample
Tips and tricks #7: How to make calculator with SVG image map

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

This article describes how to create calculator with image map using SVG image
Timur2017-05-25 10:54:16

Tips and tricks series

This article relies 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, 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. In can be used to visualize geo data, 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 image map inside 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 image map looks nice on different devices, including tablets and mobile phones.

SVG image map

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

  1. Each entity (group, path, rect, etc), which is supposed to be a selectable item on your map, should have 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 id attribute set to something meaningful.

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

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

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

SVG image map style

In order to make your map looks pretty, you may need to add some interactivity, like different style on hover and different style for selected item. This can be done using CSS styles. Here is the sample CSS, which uses :hover pseudo classe 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 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 SVG image map.

To create a calculator, login to the site and click on My calculators link at the top right corner. This will bring you to the Personal section of the site with new top menu. In the top menu, hover Create New button and click on Calculator menu item. This will take you to the calculator editor.

Add the following input controls:

Name Variable Type Default value Note
Map map SVG map lorraine
Names names Resources

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 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:

Name Variable Type Note
Name selection String

We have described 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 id of selected item.

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

After that, click on 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 "selection" output above all inputs by pressing 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 regionsCreative Commons Attribution/Share-Alike License 3.0 (Unported)
 
image/svg+xml

Comments