Commons:Image map resources

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search
Translate this page; This page contains changes which are not marked for translation.
Other languages:
All categories and pages that start with "Commons" in the name are for internal Commons work. They contain resources, help, tools, instructions, links, FAQs, examples, labs, software, etc.. They are not for categorization of images and media files used outside of internal Commons work. Please do not categorize regular image or media files here. Instead, see the main categories and subcategories at the Main Page and here. See also: Category help and category search. Search the Commons namespace at Special:Search.

Image maps. Due to the PNG scaling problem it is sometimes better to use a GIF image for an image map. For more info see Commons:File types#Images.

Categories[edit]

Help, resources, and FAQs[edit]

  • mw:Extension:ImageMap - describes the extension that's installed on commons
  • Image maps - W3C spec for imagemaps in HTML 4.0. The wikitext markup for the ImageMap extension uses similar concepts but different syntax.

ImageMapEdit on commons[edit]

A gadget on commons named "ImageMapEdit" helps creating an ImageMap from any Image file. Once enabled, any image page will display ImageMap > link below it. See documentation here: m:ImageMapEdit Howto.

Other image map editors[edit]

  • Mcc HTML Mapper - Free and multi-platform software to create image maps for the web.
  • Online image map editor, supports all shapes, Extension:ImageMap compatible: http://www.maschek.hu/imagemap/imgmap.
  • Basic on-line image mapper from mgwalk.com: http://www.image-maps.com.
  • Clickable Image Map Maker - This web page allows the user to select an image file on his own local hard drive, then creates a second page using that image, and allows the user to very quickly generate the HTML code for an imagemap to be used in his own files. It also offers some handy pop-up menus to speed the process of coding the actual href. Complicated maps can be created in less than a minute (no kidding). Requires a Javascript and frames capable browser, designed and tested on a Mac using Netscape Navigator.
  • GIMP - The GNU Image Manipulation Program.
  • Wikia Help:ImageMap - Help from a MediaWiki-based site.
  • Wikia Help:Image maps (Star Trek Wiki) - Simpler help from a MediaWiki-based site.
  • iMapBuilder = a Windows software to convert any image into clickable flash image map with clickable points, icons and mouse rollover effects.

Convert an HTML image map to a wiki image map[edit]

These are some short instructions for manually converting.

See this Wikia image map help link: [1]. Note the image map and the wikicode for it listed on the page. Here below are the essential parts of that wikicode. "Foo" can be the name of any image you intend to make into a clickable image map. Any image format can be used (GIF, PNG, JPG, etc.). 

<imagemap>
Image:Foo.jpg
poly
poly 
rect 
circle 
</imagemap>

Find an image map on a web page, or create one. If the image is a free one, then upload it to the Commons to use in the wiki image map. Look at the HTML source code for the image map on the web page (View_menu/Page_source in Firefox). It will have poly, rect, and circle coordinates. Just copy those coordinates into a simple text editor such as Notepad that comes with the Windows operating system. Use the replace command to replace all the commas with spaces. There should be a single space between each number. Paste the coordinates after the poly, rect, and circle names in the above wikicode example. The poly lines must be first. Multiple poly, rect, and circle names may be needed. Make sure they start the line for each list of numbers for each clickable section of the image map. The numbers can wordwrap. Add a wikilink after each list of numbers. Either a wikilink to another page, or to a section in the page where the map will be used. To link to sections in the current page add a pound # symbol to the front of subheading titles, and then enclose the subheading title in double brackets as with any wikilink: [[#Subheading title]]. Preview or save the page, and then test the image map by clicking sections of it. Feel free to use sandboxes to test the image map too.

More functionality, tooltips, and so on[edit]

These free tools provide more ways to click maps for more info, tooltips, and so on.

  • JQVMap - jQuery Vector Maps. - "JQVMap is a jQuery plugin that renders Vector Maps." The jQuery page says "jQuery has also been used in MediaWiki since version 1.16."
  • ImageMapster.
  • jVectorMap. "Many maps of the world, world regions, countries and cities are available for download from this site. All of them are made from the data in public domain or data licensed under the free licenses, so you can use them for any purpose without of charge."


Advanced possibilities[edit]

See this clickable, scrollable world map:

  • World map of Crime Index for 2015 Mid Year. Note how the color spectrum fits the topic. "Go" and "no go" areas. Green for "go". Red for "no go". Scroll over the map, and note the popups. Note also the smooth continuous spectrum of the legend and how it covers a broad range. This type of map would be a useful model for some Wikipedia page maps.

Generate an image map using GIMP[edit]

This process involves 3 steps:

  1. Downloading the image and opening it in GIMP
  2. Generating the coordinate data
  3. Extracting the coordinate data and putting it in a wiki-style image map

The steps are described in further detail below. Note that there are two variations to step 2 (step 2a and step 2b) as well as corresponding variations to step 3 (step 3a and step 3b)

Note that GIMP instructions are based on GIMP 2.8.10 which is the latest GIMP as of time of writing

Step 1: Download the original image to your computer[edit]

  • Click on the image in the article. This should take you to the "File" page
  • Click on the image in the "File" page. This should take you to the original which should have a url starting with https://upload.wikimedia.org/wikipedia/commons
  • Save the file to your computer
  • Open the file in GIMP

Step 2a: Generating through the ImageMap tool[edit]

The ImageMap tool is easier to use. Note that it does require manually drawing each shape, which can be error-prone and cumbersome -- especially if there are a lot of irregular shapes.

  • Using the menu bar, select Filters -> Web -> ImageMap
  • Pick a shape from the left-hand bar: rect, circle, poly
  • Draw the appropriate shapes on your image
  • When finished, select View -> Source

Step 3a: Extracting coordinates from the ImageMap tool[edit]

  • Copy the source to a text editor
  • For each shape, find the "shape" and "coords" attribute and place it on a separate line

Step 2b: Generating through the Fuzzy-select approach[edit]

The Fuzzy-select approach is more difficult to use. However it has the advantage of quickly drawing extremely accurate shapes. It is particularly useful for images with clearly defined borders, such as geographic boundaries. For an example, see https://en.wikipedia.org/w/index.php?title=Benin&oldid=618376512

  • Using the menu bar, select Tools -> Selection Tools -> Fuzzy Select. Multiple shapes will be outlined on the image
  • Open up the Path Toolbox using Windows -> Dockable Dialogs -> Paths
  • Select Select -> To Path. Note that a selection will now show up in the Path Toolbox
  • Right click on the selection and select Export Path
  • Save the file. Note that it is an SVG file

Step 3b: Extracting coordinates from the Fuzzy-select approach[edit]

  • Open the file in a text editor
  • Look for the attribute starting with "d="
  • Extract everything between the quotes to a new document
  • Replace all commas with spaces
  • Remove all initial whitespace from the lines by highlighting the entire selection and repeatedly pressing shift-tab
  • Remove all new lines (you'll need a text editor that does regular expression replacements)
  • Remove all "M"s. Note that this is the start of the path. (M means Move to)
  • Remove all "C"s. Note that this is the second point in the path (C means Curve to)
  • Replace all "Z"s with a new line. Note that Z is the termination marker. (Z means Close path)
  • You will now have each path on a single line
  • Add "poly" to the start of every line.
  • Add a temporary anchor to the end of every line. For example, [[a]] to line 1; [[b]] to line 2; etc.
  • Add the necessary <imagemap> tags as well as the first line for the file name (EX: File:A.png)
  • Copy the source to the Wikipedia Sandbox and Preview
  • Hover over each shape, and use the temporary anchors to identify each shape
  • Replace the temporary anchors with the actual anchor
Retrieved from "https://commons.wikimedia.org/w/index.php?title=Commons:Image_map_resources&oldid=867329970"