Clickable world map for SharePoint to navigate global office locations

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!

Comments

[eman]

Thank you very very much for this very useful and practical post.

Exactly what I needed. :)

[kpp]

Exactly what I was looking for without having to use Flash. Thank you!

[Speli]

So incredibly glad I found your post this morning - I was struggling with .mht files that weren't displaying in Google Chrome. Now I am a very happy camper! Thank you for posting!

[sadalit]

@kpp and @speli, thank you very much for your comments! Glad this was helpful!

[Martin Smith]

What is the HTML code to add in order to have the destination information (the target of the hotspots) displayed below the image, in the same web part? Thanks.

[sadalit]

Hi Martin, thanks for your question! Use the "title" tag. In the example below, I am tagging the San Jose coordinates with the label "San Jose." The HTML code appears as follows:

[opening carat]area title="San Jose" href="http://www.sanjose.com" shape="circle" coords="54, 116, 11"[closing carat]

[Martin]

Hi Sadie. Thanks for the information about the 'title' qualifier. I have one question though: How does the Content Editor Web Part/SharePoint know that the destination object of the hotspot has to be displayed (directly) below the parent map and in the same web part?

[sadalit]

Martin, this can be done with jquery. I am not experienced enough with this functionality to give you detailed instructions on how to do it, but let me point you to Marc Anderson, who is a SharePoint MVP and develops a great deal using jquery - his blog might be a good resource to you (http://sympmarc.com/). I'm sure there are many other sharepoint/jquery resources on the web as well, he's just one that I know for sure.

[Christophe]

Hi Sadalit,

How did you confirm that the maps at WorldAtlas can be used for free? I visited their site, but didn't see any explicit license terms.

[sadalit]

Hi Christophe,

On the WorldAtlas page to which I link from this article(http://www.worldatlas.com/webimage/world/flatb.htm) - there is some small text near the top which says "Use the images of choice at no charge,
or have them customized to your needs."

[Reddy]

Hi,

Thanks for posting such a great post!! I was looking for this exact thing. One question, I followed all the steps but, the image is surrounded by a border. How do I get rid of the border. I did not set any borders at all. Please help!!

[sadalit]

Hi Reddy, you just need to add border="0" into the code for your image tag - you can see examples of where to put it here: http://www.w3schools.com/tags/att_img_border.asp. Let me know if you have any questions!

[Tenille]

Thanks this is a brilliant post. I have a similar requirement but the difference is that the image hopspots need to generate a pop up window when a user hovers over or clicks on the image. The information that should show up in the pop up is stored in a list on the site. Any ideas how to accomplish this? the information needs to be in a list as it is updated daily.

[sadalit]

Tenille, thanks for your comment! This sounds like a job for jquery. Let me point you to Marc Anderson, who is a SharePoint MVP and develops a great deal using jquery - his blog might be a good resource to you (http://sympmarc.com/). There are many other sharepoint/jquery resources on the web as well, but Marc's site is a great place to start.

[Tenille]

Hi thanks so much Sadalit, i will contact him now.

[Hanna]

Excellent! Finally a detailed instructions,
this saved my day, thank you very much for posting this!

[Jones]

MAGNIFICENT!!1

[Barry]

http://www.sharepointbreak.com/2013/04/22/sharepoint-2010-map-image-with-hotspots-and-jquery-screen-tips-from-list-items/ seems to be what you are looking for.

[Erin Melville]

I love this tutorial. It helped me out quite a bit for my team webpage. One question though... how would you get the hotspot to open in a new tab?

Thank you,
Erin

[Sadie]

Hi Erin, glad this was helpful! You need to add or edit the "target" attribute in the HTML code - there are examples (and some strong opinions on usability) here: http://stackoverflow.com/questions/15551779/open-link-in-new-tab