Display map from SharePoint List

[Hamad Nasir]

How can we display the data in maps format from the SharePoint list?

I've the data in cascading format and we are looking to display the location pin and when user hover it on, it should display the metadata.

Cascading data example.

Display Country Name, once we click on country -> it should display the list of cities

Pin location should display the city details when hovering it on....

could be another level, when user select the city pin it should display the list of Districts in a city.

[#2]

@Hamad Nasir Which version of SharePoint are you using? Are you using classic experience or modern experience?

There are no SharePoint out of the box web parts available to achieve your requirements. If you are using modern experience, you have to develop your own web part using SPFx.

You can use libraries like chartjs-chart-geo as well in your SPFx web part which supports showing maps.

You can refer this existing SPFx sample to get started with development: Chart Control Samples.

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

[#3]

@Hamad Nasir I would normally look to do this sort of thing with Power Apps with SharePoint lists as the data source. It helps that Power Apps can make use of the Bing Maps connector.

Rob
Los Gallardos
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

[#4]

Great suggestion by @RobElliott to use Power apps for showing map. 

@Hamad Nasir But, it depends on what data you have in your SharePoint lists. Power apps supports interactive map control as well. However, this control works with longitude and latitude of location. Check more information at: Interactive map control 

So, you will need data accordingly in your SharePoint list.

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

[#5]

@Hamad Nasir 

A simple way would be to create a SharePoint content page with two connected webparts on it.

One is a list webpart with your datarows and the other is the embed-webpart.
Connect both webparts and configure the list Webparts to send data to the embed webpart.

Configure the embed webpart to use a bing static map with the parameters from your list.

If you now select an item in your list, the corresponding location will be displayed in the embed webpart

Click here for more information: https://support.microsoft.com/en-us/office/connect-web-parts-in-sharepoint-b457668c-d843-4b1b-8977-a... (Scroll down to the chapter "Show a selected location")

You could also try to use SharePoint json list formatting and change the rendering from one SharePoint column to a map "layout"
(See here for an example: https://devblogs.microsoft.com/microsoft365dev/mvp-article-sharepoint-column-formatting-show-map-in-...)

Both solutions are relatively simple. But you don't have much choice in customizing the map visually.

But at least you can insert PushPins and add labels (see https://learn.microsoft.com/en-us/bingmaps/rest-services/common-parameters-and-types/pushpin-syntax-..., so perhaps this is enough for your requirement