Map Questions

Saturday, September 20th, 2008 | Custom

Sometimes you will need your respondents to click on images to select areas such as what state do you live in. In this example we are going to take an image of Australia and turn it into a click-able image that we can use in our survey. We will also show you how you can store the information selected in your survey. The image we are going to use is the following.

Australia

Next we have to stat to develop the HTML code to turn this image into a click-able one. To do this we need to use the following HTML code and create some areas.

 <area shape="poly" alt="WA" coords="x1,y1,x2,y2,..."
		href="wa.htm" title="Western Australia"
		target="_blank" />

In the above example the x1,y1,x2,y2 are x/y coordinates for the area we are creating. If you image we are drawing a line around Western Australia these coordinates represent that line. The easiest way to do this is to use a tool like Mapedit but you can achieve the same results if you use a paint package and just write down the x/y coordinates and put them into the html. In the above example we have a href being used. This href will be the html page that the user gets sent to when they click the are. When you have created all the areas you will end up with the following

Map and Question

Map and Question

<map id="Australia" name="Australia">
<area shape="poly" alt="Western Australia"
      coords="128,38,128,210,104,231,77,233, 44,253,31,236,7,165,8,122,115,31"
      href="wa.htm" title="Western Australia" target="_blank"/>

<area shape="poly" alt="Northern Territory"
      coords="129,39,129,126,214,126,214,55, 198,40,207,17,161,3"
      href="nt.htm" title="Northern Territory" target="_blank"/>

<area shape="poly" alt="South Australia"
      coords="129,210,129,127,234,126,234,269, 222,259,212,233,194,240,177,211,
      156,205"
      href="sa.htm" title="South Australia" target="_blank"/>

<area shape="poly" alt="Victoria"
      coords="273,284,283,273,303,270,304,258,311,250,296,234,283,229,273,232,
      265, 231,258,230,252,224,235,219,234,270,249, 280,260,275"
      href="v.htm" title="Victoria" target="_blank"/>

<area shape="poly" alt="ACT"
      coords="305,214,309,216,311,222,313,229,313,234,310,239,304,236,301,231,
      300,227,300,223,300,219,302,215"
      href="act.htm" title="ACT" target="_blank"/>

<area shape="poly" alt="New South Wales"
      coords="235,157,235,219,251,224,258,232,273,232,281,229,290,232,297,236,
      312,248,318,237,340,214,340,209,346,193,347,178, 346,159,341,
      156,335,157,330,158,325,163,321,158,314,153,308,156"
      href="nsw.htm" title="New South Wales" target="_blank"/>

<area shape="poly" alt="Queensland"
      coords="234,155,306,156,313,152,325,165,331,157,345,155,330,125,313,101,
      296,82,294,68,290,62,288,49,278,39,273,40, 272,23,264,4,256,14,
      251,32,252,46,240,68,215,55,216,124,234,126"
      href="Q.htm" title="Queensland" target="_blank"/>

<area shape="poly" alt="Tasmania"
      coords="261,293,271,300,276,300,281,298,287,304,288,308,285,319,284,325,
      267,328,257,312,258,307,254,297"
      href="t.htm" title="Tasmania" target="_blank"/>
</map>

As you can see from what we have done so far, every time you click on an state a new window pops up. What we will do next is to change this so that we enter some text into a text box. To achieve this we need to add some JavaScript to our page, firstly we need to setup the survey question so create a mdd document with the following syntax in it.

	' Metadata section
	State "Please select your State"
	categorical [1..1]
	{
		ACT,
		NSW "New South Wales",
		NT "Northern Territory",
		Queensland,
		SA "South Australia",
		Tasmania,
		Victoria,
	    	WA "Western Australia"
	};

	' Routing Section
	State.LayoutTemplate = "MapTemplate.htm"
	State.ask()

Next you need to create your template. Place the map code in the correct place as shown and test to make sure your html is xml compliant.

        <html>
	<head>
		<title><mrPageTitle/></title>
	</head>
	    <mrPage IncludeElementIDs = "true"></mrPage>
		<body>
			<mrBannerText/>
			<table>
				<tr>
					<td>
					 !! Map Code Goes Here !!
					</td>
					<td><mrData/>
					</td>
				</tr>
			</table>
			<mrNavBar>NavBars</mrNavBar>
		</body>
	</html>

Once you have put all this together you should end up with the map and the question in your survey, the next thing we need to do is to join the map to the question. To do this we need to remove the _target=”_blank’ and the href code from each area statement and add onclick functionality we should end up with a statement similar to this one.

      <area shape="poly" alt="WA" coords="x1,y1,x2,y2,..."
            title="Western Australia"
            onClick="document.mrForm._Q0_C7.checked=true;" />

Obviously you need to change the document.mrForm._Q0_C7. to meet your needs to find out what you need to put in your script do a view source and see the naming for your question. Once you have done all this you should end up with the following. One thing to note , to get dimensions to give everything an id you must make sure that you have the following in your html

<mrPage IncludeElementIDs = "true"></mrPage>

Once you have added this tag, you will be able to click on the area in the map and the radio buttons should refleft that click.

4 Comments to Map Questions

vishal sahu
17 July, 2009

Really good,but how will get the coordinates for the area we are creating.

admin
17 July, 2009

Hi Vishal,

Most paint packages will give you the x,y cords. For example in windows paint, load your image up , and move your cursor around the picture. Whilst doing this look at the botom right hand corner of paint and you will see the cords change as you move the mouse.

Craig D
14 January, 2010

Having a few issues with this. One, I can’t get my image to show in the live survey and also, how can I make it so only the image/map appears? We do not want to see the radio buttons at all, just the image that they can click and then the survey would advance to the next page.

An example is located:
http://survey2.livenation.com/mrIWeb/mrIWeb.dll?I.Project=TESTPOLYMAPPING&i.test=1

admin
15 January, 2010

Hi Craig,

To hide your question you can add the following div statement to your template.

<div style=”visibility:hidden”>MR DATA TAG GOES HERE</div>

and to display the image we used

<mrRef RefType=”img” src=”map.gif” border=”1″ usemap=”#Map” width=”320″ height=”370″></mrRef>

If you have any other problems then please feel free to send us your MDD file.

Leave a comment

Categories

Blog Counts

Search

Archives

PHP Notice: A feed could not be found at http://twitter.com/statuses/friends_timeline/16449757.rss in F:\hshome\anncoona\smarterdimensions.com\Blog\wp-content\plugins\external-rss-reader\inc\simplepie.inc on line 1780