Creating an interactive map through Modx

The client has requested that I created a map of England that highlights their main offices through the country and what events are being held in each area. I have drawn a map in photoshop (using my graphics tablet). The events need to be assigned to each area so you can click on the area and it will take you to the events page.

There have been a few dilemmas that I have had to solve through this request:

• What if there is an event that is held more than one of the regions?
• What if the event is in an area that isn't highlighted as a main area that events are held? (see below for how I have dealt with these issues).

1) I created a template variable. A template variable allows you to bring in a template where ever you like throughout the website so you don't have to keep individually code the elements.

2) I had to tick the option to publish this page as I duplicated the page from the template that I previously created. I gave it a different name (within the code in modx). Modx works like a database system in the respect that it allows you to set options of the template variables to change the appearance. it then adds javascript code in to dreamweaver to set the design.

3) So far I have got the content to layout simple text that is calling the information that is needed to format the events. However I have run into my first problem-the time isn't set put properly and it still includes events that have already passed. My client needs it to only have present and up coming events.

4) This is a ditto call. A ditto calls purpose to command the template. It can also list data from other documents and create outputs in many formats. You can also specify what data goes in and how it is laid out. Within this ditto call I had to change what are it is referring to (that I have already labelled in dreamweaver).

5) In dreamweaver I drew in links to define areas of the country that will act as a button to connect it to its event page. I went to properties-hot spots-choose the 'angled' tool-drew round the are that needed to be defined and gave it a region name.

The client asked if I could specifically created links on the map for Scotland, North East. North West and the Midlands as they all have offices that need to be able to send their content to the main office where it will be up dated (in Modx) by my client. I also created links on other areas of teh country in case there are events that are organised by a certain office but are out of their area. I thought that this would give them flexibility in the future in case events are hosted in different areas that they don't have to account for now.
6) I had to set more templates variables for the fields needed in events, such as cost, place, time, venue, email and phone number of the organiser. I also had to set what order that they would be in so with each field it goes up. They are labelled individually from 55-60 so they will be set in a different place in the code and can be reference through their number.

7) I set a title and a 'long title' as the field that they will type into to describe the events. The long title field has a shorter word limit so I thought it would be a good, quick way to limit their word count and keep it in a format that the audience can follow. It will make it neat and tidy.
8) I set what template it will be linked to. In this case the Main template. I have created a Homeage template and a main template as the home pages design differs from the rest of the website due to the news ticker and donate button. I also set the place the it will be in the navigation (1-it is the first child page that goes off the main events page with the map).

A parent page is the main pages labelled in the navigation and a child page is any page that goes off that navigation.

9) In this bit of code I had to direct it to the right image file and the right are. I also had to change the bit of code [~193~] to direct it to the right area (see child pages on the left hand side).

Through these steps (with the guidance of Chris at ibrow media and his helpful work experience) I have created the map below that link to the events page once the area is clicked on.

Events page (still needs to be styled) Here is the address (but only for a short period) http://s109231681.websitehome.co.uk/events1.html

On the left hand side I have create a box that people can click on to see the rest of the events in different areas so that they don't have to keep navigating back to the map. It will save the audience time and keep them interested as the events will always be updated.