How to Create an Interactive Map in Microsoft SharePoint Lists
Did you know that you can create interactive maps using Microsoft SharePoint lists? Check out Figure 1:
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:
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.
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.
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 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.