How to Create an Interactive Map in Microsoft SharePoint Lists

November 28, 2023
9 min read

Did you know that you can create interactive maps using Microsoft SharePoint lists? Check out Figure 1:

List view column formatting includes a web part with an interactive map.
Figure 1: List view column formatting includes a web part with an interactive map. Here a mouse hovers over Germany and you see a popup to identify the country. | Image created by Giuliano de Luca | View Full Size

Cool, right?  
Let me walk you through every step to set up this UI using a normal SharePoint list and using list view and column formatting. It may help you to watch the video I created which walks through the steps. The link to the video is at the end of this article.  
In Figure 2 you can see a normal SharePoint list web part in a page that displays an interactive map of Europe:

Interactive Europe map in a SharePoint list
Figure 2: Interactive Europe map in a SharePoint list. | Image created by Giuliano de Luca | View Full Size

In this scenario on the map, it's possible to click on every specific country, to display a panel with a link, giving the end user the chance to get to a specific SharePoint communication site which is related to the specific country.  
SharePoint list view and column formatting is so powerful, providing the ability to create incredible nice look-and-feel experiences. Even if you are not a developer or an IT Pro, all you need to have is just a bit of familiarity with JSON.   

Creating an Interactive Map With a Blank SharePoint List

Let's start from scratch to reproduce this UI. You need to create a blank SharePoint list.  
You can keep the list as is; you do not need to create additional columns unless you want to extend this scenario. To reproduce the solution in Figure 1, a normal list with title is enough.     
The concept works by using pieces of SVG images assembled like a puzzle.     
In this example, I used this website to collect all SVG images needed to complete my puzzle: https://simplemaps.com/

The trick is to use the JSON syntax of list view and column formatting to write the SVG images inline, something like this:

							{
                                "elmType": "path",
                                "attributes": {
                                    "title": "Italy",
                                    "d": "M602.6,595.6L601.4,598.1L598.6,602.4L597.1,607.5L597.4,609.5L599,610.9L598.3,611.4L599.9,613.1999999999999L600,614.4999999999999L598.2,616.3999999999999L597.8000000000001,618.0999999999999L597.9000000000001,619.5999999999999L595.0000000000001,618.9999999999999L593.6000000000001,619.2999999999998L589.9000000000001,617.8999999999999L588.0000000000001,615.0999999999999L585.0000000000001,613.0999999999999L582.0000000000001,613.0999999999999L580.6000000000001,612.5999999999999L577.7000000000002,610.6999999999999L574.7000000000002,609.3L572.1000000000001,607.1999999999999L570.4000000000001,606.8L568.9000000000001,605.8L566.0000000000001,605.8L563.7000000000002,604.1999999999999L562.4000000000002,601.9L563.7000000000002,598.1999999999999L565.1000000000001,597.4L566.0000000000001,596.1999999999999L568.3000000000001,598.4999999999999L570.1,597.6999999999999L571.5,596.0999999999999L573.9,596.1999999999999L574.4,597.0999999999999L575.8,597.3999999999999L578.3,598.9999999999999L579.6999999999999,599.3999999999999L583.0999999999999,598.3999999999999L586.0999999999999,598.7999999999998L588.8999999999999,598.2999999999998L590.5999999999999,597.6999999999998L591.8,596.6999999999998L593.1999999999999,596.3999999999999L596.6999999999999,596.6999999999998L598.6999999999999,595.4999999999998L599.4999999999999,595.6999999999998L601.4999999999999,594.4999999999998L602.5999999999999,595.5999999999998ZM524.3000000000001,554.1L525.0000000000001,555L526.8000000000001,560L526.2,561.6L524.9000000000001,563.6L525.7,566.4L525.1,577.9L524.5,580.8L523.6,581.1999999999999L520.7,579.9999999999999L519.2,580.2999999999998L518,579.6999999999998L517.7,582.6999999999998L515.9000000000001,584.7999999999998L512.9000000000001,584.5999999999998L512.2,583.9999999999998L509.80000000000007,580.1999999999998L509.4000000000001,575.8999999999999L510.0000000000001,574.5999999999999L510.0000000000001,572.0999999999999L511.10000000000014,571.9999999999999L511.10000000000014,570.2999999999998L509.3000000000001,569.0999999999998L509.3000000000001,567.1999999999998L510.0000000000001,565.7999999999998L509.9000000000001,563.1999999999998L509.1000000000001,562.2999999999998L508.30000000000007,559.9999999999999L506.1000000000001,557.5999999999999L506.2000000000001,554.1999999999999L509.6000000000001,554.8L510.9000000000001,554.5L514.0000000000001,553L516.1000000000001,550.5L517.5000000000001,550L519.0000000000001,548.2L519.7000000000002,549.1L521.9000000000002,549.9L523.1000000000003,551.4L524.0000000000002,551.9L523.3000000000002,553.3L524.3000000000002,554.0999999999999ZM532.6,523.3000000000001L532.9,524.7L530.4,525.2L529.3,524.1L532.1999999999999,523.9L532.5999999999999,523.3ZM570.5,466.70000000000005L570.3,467.6L567,469.90000000000003L567.7,471.3L570,472L568.4,474.1L568.6999999999999,475.1L569.9999999999999,475.3L569.5999999999999,477.3L571.4999999999999,478.40000000000003L572.9999999999999,479.70000000000005L573.1999999999999,481.00000000000006L571.6999999999999,481.1000000000001L572.4,480.50000000000006L570.4,478.30000000000007L568.4,479.20000000000005L565.1999999999999,478.30000000000007L563.0999999999999,480.30000000000007L561.5999999999999,480.70000000000005L559.8999999999999,481.80000000000007L556.6999999999998,483.00000000000006L554.8999999999999,482.6000000000001L553.8999999999999,483.30000000000007L553.4999999999999,486.4000000000001L554.2999999999998,487.0000000000001L555.7999999999998,489.60000000000014L557.4999999999999,490.70000000000016L556.7999999999998,492.60000000000014L555.8999999999999,493.3000000000001L554.5999999999999,492.8000000000001L554.3,494.5000000000001L555.1999999999999,499.0000000000001L556.5999999999999,502.2000000000001L557.8,503.5000000000001L560.5,505.7000000000001L563.2,506.8000000000001L568.3000000000001,510.5000000000001L571.1,511.60000000000014L571.8000000000001,512.3000000000002L573.6,515.1000000000001L575.2,518.3000000000002L577,523.4000000000002L578.3,525.9000000000002L580.5999999999999,528.8000000000002L585.3999999999999,532.9000000000002L589.6999999999998,535.8000000000002L593.6999999999998,537.7000000000002L596.6999999999998,538.0000000000001L603.6999999999998,537.6000000000001L606.2999999999998,538.3000000000002L606.6999999999998,539.5000000000002L606.2999999999998,540.4000000000002L603.3999999999999,542.5000000000002L603.3999999999999,544.2000000000003L604.8999999999999,545.4000000000003L611.9999999999999,548.6000000000004L619.1999999999999,551.2000000000004L621.4,552.6000000000004L624.1,554.7000000000004L630.5,557.6000000000004L631.6,559.0000000000003L635.6,562.0000000000003L637.4,564.4000000000003L637.9,566.2000000000003L636.4,570.6000000000003L634.8,570.1000000000003L632.9,568.8000000000003L629.8,563.4000000000003L624.8,562.9000000000003L621.9,561.6000000000004L621.1999999999999,560.2000000000004L618.9,559.8000000000004L617.6,560.7000000000004L616.2,562.7000000000004L614.7,565.7000000000004L613.2,570.0000000000003L613.2,571.7000000000004L614.3000000000001,573.4000000000004L617.2,574.4000000000004L619.6,575.9000000000004L621.2,577.5000000000005L621.5,581.3000000000004L622.4,583.4000000000004L621.5,584.7000000000004L619.6,584.4000000000004L617.1,585.1000000000005L615.4,586.5000000000005L614.6999999999999,587.9000000000004L615.1999999999999,591.3000000000004L614.9,592.7000000000004L611.6,595.2000000000004L610,597.7000000000004L609,600.0000000000003L604.7,600.0000000000003L603.6,598.5000000000003L603.5,596.3000000000003L604.1,595.0000000000003L605.7,594.3000000000003L606.6,591.5000000000003L606.1,589.5000000000003L607.2,587.9000000000003L610,587.2000000000003L610,584.3000000000003L608.6,583.0000000000003L607.2,577.9000000000003L604.8000000000001,573.6000000000004L603.4000000000001,569.8000000000004L602.3000000000001,568.0000000000005L600.9000000000001,567.0000000000005L597.2,566.7000000000005L592.6,564.1000000000005L592.3000000000001,563.0000000000005L592.9000000000001,561.9000000000004L591.8000000000001,559.1000000000005L589.8000000000001,557.4000000000004L587.2,558.0000000000005L586,557.9000000000004L585.9,556.4000000000004L583.9,555.1000000000005L581.1999999999999,554.9000000000004L580.4999999999999,554.2000000000004L577.8999999999999,550.2000000000004L576.1999999999998,548.5000000000003L573.8999999999999,548.6000000000004L569.9999999999999,547.7000000000004L567.9999999999999,548.4000000000004L564.7999999999998,545.8000000000004L561.9999999999999,544.9000000000004L556.2999999999998,539.6000000000005L554.4999999999999,537.6000000000005L550.9999999999999,535.4000000000004L548.6999999999999,532.2000000000004L546.9,531.0000000000003L542.9,529.6000000000004L542.6,528.3000000000004L539.5,525.2000000000004L537.8,524.2000000000004L536.5,522.1000000000004L534,521.6000000000004L534.1,518.9000000000003L532.9,515.4000000000003L531.1999999999999,513.2000000000003L529.9999999999999,507.90000000000026L529.1999999999999,506.40000000000026L527.4,505.30000000000024L523.4,504.10000000000025L517.6999999999999,500.7000000000003L516.5999999999999,500.60000000000025L513.1999999999999,499.30000000000024L511.0999999999999,499.10000000000025L508.4999999999999,500.30000000000024L505.39999999999986,503.5000000000002L502.89999999999986,506.9000000000002L501.9999999999999,507.5000000000002L498.5999999999999,508.7000000000002L495.5999999999999,509.2000000000002L495.3999999999999,507.7000000000002L497.49999999999994,505.1000000000002L497.19999999999993,503.1000000000002L493.8999999999999,503.7000000000002L488.7999999999999,501.30000000000024L487.8999999999999,500.40000000000026L487.7999999999999,499.0000000000003L487.0999999999999,497.7000000000003L488.4999999999999,495.2000000000003L489.2999999999999,494.5000000000003L488.7999999999999,492.8000000000003L485.5999999999999,491.4000000000003L484.0999999999999,488.3000000000003L484.8999999999999,487.9000000000003L486.7999999999999,488.1000000000003L488.4999999999999,486.8000000000003L489.6999999999999,486.5000000000003L490.4999999999999,484.0000000000003L488.6999999999999,482.40000000000026L486.9999999999999,479.80000000000024L486.0999999999999,479.2000000000002L485.9999999999999,477.6000000000002L488.5999999999999,475.9000000000002L489.9999999999999,476.6000000000002L492.39999999999986,476.1000000000002L494.9999999999999,475.1000000000002L498.0999999999999,475.9000000000002L500.4999999999999,474.5000000000002L502.0999999999999,472.30000000000024L501.4999999999999,470.80000000000024L504.89999999999986,467.90000000000026L505.89999999999986,468.5000000000003L506.09999999999985,471.0000000000003L508.49999999999983,473.0000000000003L510.6999999999998,473.6000000000003L510.29999999999984,474.8000000000003L511.59999999999985,476.0000000000003L512.4999999999999,477.40000000000026L513.6999999999999,476.7000000000003L512.9999999999999,475.0000000000003L513.1999999999999,474.0000000000003L515.4,471.40000000000026L515.9,470.30000000000024L515.9,467.40000000000026L517.9,467.30000000000024L518.6999999999999,469.40000000000026L520.6999999999999,470.2000000000003L523.5999999999999,469.10000000000025L524.3,469.2000000000003L525.6999999999999,471.10000000000025L526.9,470.80000000000024L525.4,467.30000000000024L526,465.5000000000002L527.3,465.2000000000002L528.3,466.1000000000002L530.1999999999999,466.3000000000002L529.6999999999999,464.50000000000017L530.1999999999999,461.40000000000015L533.1999999999999,461.70000000000016L534.0999999999999,462.50000000000017L536.1999999999999,462.90000000000015L537.3,462.50000000000017L538.5,460.3000000000002L539.9,459.70000000000016L543.3,459.40000000000015L546.4,459.60000000000014L551.1,458.10000000000014L551.1,460.40000000000015L554.2,463.90000000000015L555.3000000000001,464.40000000000015L563.9000000000001,465.90000000000015L567.9000000000001,466.20000000000016L570.5000000000001,466.70000000000016Z"
                                },
                                "style": {
                                    "fill": "currentcolor"
                                },
                                "customCardProps": {
                                    "openOnEvent": "click",
                                    "formatter": {
                                        "elmType": "a",
                                        "attributes": {
                                            "href": "https://giuleon.sharepoint.com",
                                            "target": "_blank"
                                        },
                                        "txtContent": "Italy",
                                        "style": {
                                            "padding": "6px"
                                        }
                                    },
                                    "isBeakVisible": true
                                }
                            },

The SVG image, in this case a map of Italy, is contained inline in the property named d of attributes.    
The customCardProps property allows the user to open a panel when they move their mouse pointer over the country or when the user clicks on a country. The formatter helps to write the elements inside the panel like a link in my case (see Figure 3).    
Following this kind of approach, you can reproduce interactive images in SharePoint.    
 

Reproducing the Europe Map Example

If you are interested in reproducing this example, you can find this solution on my GitHub: https://github.com/giuleon/SharePointListInteractiveMaps

In the GitHub repository, you can find the file Europe.json that you can copy and paste in your SharePoint list going in Format current view.    
Once you paste the JSON content in your list, you should see the map of Europe showing up.    
Let me briefly explain the content of the JSON file.    
There is a main DIV element that contains all SVG images. In every SVG element it is possible to change the style to the proper attribute.    
Using the element type Path and the property d, it is possible to assign an SVG image inline in the UI.    
Moreover, the customCardProps property offers the option to add HTML content in the panel that shows up once the user clicks or moves over the image. In this example, I have just a hyperlink, but of course it is possible to add more text or images inside the panel. 

This image shows a clickable panel opens when the user hovers over a country or clicks a country; the U.K. in this case.
Figure 3: A clickable panel opens when the user hovers over a country or clicks a country. | Image created by Giuliano de Luca |  View Full Size

How to Get the SVG Image

Following my use case, you can open the website https://simplemaps.com/, press F12 on your keyboard, and highlight the country that you want to get. Figure 4 demonstrates where the SVG image will appear for the country you highlight.

Image shows a screenshot from simplemaps.com with a map selected in the main window and the SVG details below the image.
Figure 4: Get the map SVG image from simplemaps.com | Image created by Giuliano de Luca | View Full Size

In this way you can take the right SVG code to reproduce it in a SharePoint list or in any web application.    
Now that you have the JSON content, you can reuse the structure to apply this approach in every scenario.    
All you need to do is change the content of the property d that will display your SVG image on the web page.

Please follow along in the video if the written steps seem confusing. 

Giuliano De Luca

Giuliano De Luca

Giuliano is an Office Development MVP and specialist in Microsoft technologies for software design and development. He loves to collaborate with the community, Giuliano has passed several Microsoft certification exams and achieved the following certifications: MCSD SharePoint Applications, MCSD Web Applications, MCP, Microsoft Specialist Programming in HTML5 with JavaScript and CSS3 Specialist.
In his free time, Giuliano loves to play and explore new technologies.

Your Privacy

Like most sites, TekkiGurus uses cookies and similar technologies to improve your experience.

We may use cookies and other technologies that:

  • Are essential for the site to work
  • Remember your preferences
  • Collect information about how you use our site
  • Provide more relevant content and advertising
Cookie Policy