SFTool Blog

Welcome to the SFTool Blog. The Sustainable Facilities Tool (sftool.gov) helps you do more than learn about high-performance buildings and purchasing. SFTool helps you put this knowledge into practice, and assemble the people you need to help you get stuff done.

We’ve decided to share some of our experiences while developing SFTool. We’ll talk about interactions with the building community, challenges we’ve overcome designing the site, and other stories about putting high-performance ideas into practice.

Note: The SFTool blog may contain links to websites of public and private organizations, as well as references to specific products used in development. A link or mention anywhere on SFTool is not an endorsement of the views, products, or services provided by the mentioned resource or product.

Wednesday, July 6, 2016

How to Make an Image Map

Web buttons are easy to use, but for some topics they’re a little too vague. To make it easier for our users to choose a climate zone in our Cost-Effective Upgrades Tool (coming soon!) we decided to implement an image map. An image map allows an image to become interactive by adding a hover action or hyperlink to a section of the image. We implemented both of those actions and made an interactive map of the United States that clearly describes the boundaries of the climate zones.

You can make your own image maps in no time using ImageMapster. It’s a very easy to use (free!) jQuery plugin that allows you to make your images come to life before your eyes. Here’s how we used ImageMapster and Gimp to make our own image map like the one above:

Making the image map:
  1. Navigate to http://www.outsharked.com/imagemapster/default.aspx?what.html and download the latest release of ImageMapster.
  2. Open the image that you wish to map in an image editor. We used Gimp, a free image editor, for the following steps.
  3. Navigate to FILTERS > WEB > IMAGE MAP. This should open a new window.
  4. Choose the tool along the left side of the screen that works best for mapping your area (rectangle, circle, or polygon). Left click to mark a coordinate, right click to erase the last coordinate, and double click to finish mapping the area.
  5. Even though the URL field says required, you can still save your area without it. You can add one if you want and make sure the link is correct later in the html code. You can also add alt text to help remember where the coordinates are mapped on the image, but that's optional. Click apply and then OK to save it. After you hit apply you should see the area added to the selection window on the right side of the screen.
  6. Make sure to save your image map constantly. Save as .map for now.
  7. You can edit an area by double clicking the area in the selection window (right side) or by highlighting an area in the selection window and clicking the paper and pencil icon to the left of the selection window. You can move a coordinate point by clicking and dragging one of the rectangles, or coordinate points. You can also delete an area by selecting the area and clicking the trash can icon underneath the paper and pencil icon.
  8. Once you're satisfied with your image map, make sure the most recent version has been saved and navigate to where you saved the image map. Make a copy of the image map (so that you can edit the areas later) and rename the copy with InsertYourImageMapName.html. You will probably get a warning telling you the file may become unusable if you change the file type. Don't worry, click OK.

Adding the Image Map to the View:
  1. Open the .html file with notepad or any other text editor, copy all text, and paste it into your code. The text should look something like this:
    <img src="[YourImageName] (imported)" width="224" height="225" border="0" usemap="#map"/>
    <map name="map">
    <!-- #$-:Image map file created by GIMP Image Map plug-in -->
    <!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
    <!-- #$-:Please do not edit lines starting with "#$" -->
    <!-- #$VERSION:2.3 -->
    <area shape="circle" coords="90,93,42" alt="Area1" href="#" />
    </map>
    

  2. You'll probably have to change the image source, so make sure that's correct. If you would like more than one area to be mapped together (for example, if you hover over Virginia on a United States map and California, Texas, and Iowa are all highlighted with it) add a data-key to each and make sure it's the same for all of those areas. It should look something like "<area shape="circle" href="#" data-key="Hot" coords="...">"
  3. Include the ImageMapster script inside your view. Next, write a new script that designates all the JavaScript features. The climate zone map in the Cost-Effective Upgrades tool uses this code:
    <script src="~/Scripts/Ceu/ImageMapster.js"></script>
    
    <script type="text/javascript">
        $('#climateZones').mapster(
            {
                fillOpacity: 0.4,
                fillColor: "ffffff",
                stroke: true,
                strokeColor: "000000",
                strokeOpacity: 0.8,
                strokeWidth: 2,
                singleSelect: true,
                mapKey: 'data-key',
                clickNavigate: false,
                isDeselectable: false,
            });
    </script>
    

    You should insert your image id instead of “climateZones” in the first line.
    fillOpacity is the opacity of the highlight when the mouse hovers over the area.
    stroke is the outline of the area. If it's set to true, the area will be outlined if moused over.
    strokeOpacity is the opacity of the outline.
    singleSelect means only one area can be selected at a time (if set to true).
    If isDeselectable is combined with singleSelect, only one area will be selected at a time, and once an area is clicked there will always be one highlighted.
There are many more features that can be implemented with image maps, and they can be found at http://www.outsharked.com/imagemapster/default.aspx?what.html.