Inspired by End User SharePoint's Clickable Image Map of the United States, I made a world map version for my clients with offices around the globe. I generally work with my clients to create a site or page for each of their office locations that includes local news, weather, and information, and the map can be a graphical way to provide navigation to those site-specific pages. With SharePoint Designer it's easy and quick to create the world map with clickable coordinates. Here are the steps I took to make it:
INSTRUCTIONS FOR MOSS 2007 WITH SHAREPOINT DESIGNER 2007 (for 2010 versions, see below):
1. Find a world map image you like and which can be used for free. I found mine at WorldAtlas.com - I chose the "Political - Drop Shadow" version at size 390 x 240.
Note: As far as I know, it's not possible to put a border around a coordinate area, so you'll want to use a photo editing tool to put circles or dots on your map to show the desired locations.
2. Upload the image to an image library in SharePoint, and once it is uploaded, click on the image until it is alone in the browser window (no image properties showing), and copy the URL.
3. Open SharePoint Designer and choose File / New / HTML. This will give you a blank HTML page.
4. View the page in Split mode.
5. Click into the code window at top and delete all the default code.
6. Choose Insert / Picture / From File, and in the File Name field at the bottom of the window, paste in the URL of the picture you uploaded to SharePoint.
7. If you click into Design view (the lower section of the Split view) your map will appear.
8. Open the Pictures toolbar (View / Toolbars / Pictures). Toward the end of the toolbar there are three shapes - "rectangular hotspot," "circular hotspot," "polygonal hotspot." These tools can be used to create your image coordinates.
9. Choose the hotspot shape you like (I used the circular one), and draw a section on the image map around the city of your choice.
10. An "insert hyperlink" window will appear, where you can type or paste in the URL of the page or site to which you'd like this location to point. Click the "screentip" button to add a label that your users will see on mouseover.
11. When you've added all the desired coordinates, copy all the code in the code window, and then go to your desired SharePoint page.
12. Add a Content Editor Web Part to the page, open the Modify Web Part pane, and click the Source button.
13. Paste all the copied code into the window and click Save, then click OK at the bottom of the Modify Web Part pane.
14. That's all! If your image doesn't appear, make sure that the link in the code of the content editor web part matches the link of the actual image. You may also want to add a friendly title to the web part.
INSTRUCTIONS FOR SHAREPOINT 2010 USING SHAREPOINT DESIGNER 2010:
1. Find a world map image you like and which can be used for free. I found mine at WorldAtlas.com - I chose the "Political - Drop Shadow" version at size 390 x 240.
Note: As far as I know, it's not possible to put a border around a coordinate area, so you'll want to use a photo editing tool to put circles or dots on your map to show the desired locations.
2. Upload the image to an image library in SharePoint.
3. Open SharePoint Designer 2010. Click Open Site and open the site where you have the image stored.
4. Click the File tab, Add Item, More Pages.
5. Select the HTML option and click Create. Give the page a name.
6. View the page in Split mode.
7. Click into the code window at top and delete all the default code.
8. Choose Insert / Picture / From File, and in the File Name field at the bottom of the window, paste in the URL of the picture you uploaded to SharePoint.
9. If you click into Design view (the lower section of the Split view) your map will appear, and so will the Picture Tools section of the ribbon.
10. Click the Hotspots button on the ribbon. There are three shapes - "rectangular hotspot," "circular hotspot," "polygonal hotspot." These tools can be used to create your image coordinates.
9. Choose the hotspot shape you like (I used the circular one), and draw a section on the image map around the city of your choice.
10. An "insert hyperlink" window will appear, where you can type or paste in the URL of the page or site to which you'd like this location to point. While in this window, click the "screentip" button to add a label that your users will see on mouseover.
11. When you've added all the desired coordinates, copy all the code in the code window, and then go to your desired SharePoint page.
12. There are two web parts you could use at this point - the Content Editor web part or the HTML Form web part.
A. If you choose the Content Editor Web Part, add it to the page, click on "Click here to add new content," and in the ribbon, in the Format Text section, click HTML / Edit HTML Source. A new "HTML Source" window will open where you can paste your HTML. Click OK when you have pasted it.
B. If you choose the HTML Form Web Part, add it to the page, choose Edit Web Part, and click the Source Editor button. Delete the code that's there and paste in your own code. Click Save.
13. That's all! If your image doesn't appear, make sure that the link in the code of the content editor web part matches the link of the actual image. You may also want to add a friendly title to the web part.
For the more adventurous, you could try adding an interactive map to your SharePoint site using Virtual Earth.
Thanks again to Mark Miller and the End User SharePoint team for helping me to see the possibilities!
