Have you ever wished you had a module in SharePoint/Microsoft Teams to set map markers? You will probably say, that's already in SharePoint, the "Bing Maps" web part. That's right, but with this web part, you can set exactly one marker, without many configuration options. You can't configure whether to allow "zooming" or change the map type (satellite, street map, bird's eye view, etc.) and certainly can't add multiple markers or customize the appearance of the Markers. That is what the Bing Maps web part looks like:
The only possibility is to define a label and whether it should be displayed or not. And, of course, the "position" (address) itself.
In my off time, after general working hours and on weekends, I took the time to provide a SPFx solution that has/can do everything I think you need. It took me about 24h of development time spread over many days.
With my web part, you can place as many markers as you want. You can set if a tooltip is shown when hovering the mouse over the marker and also what kind of text should be shown in this tooltip. You can adjust the pin color and the icon displayed in it or omit it completely. You can also define what should happen when you click on the marker. Should a panel with further information open or maybe a dialog with freely definable text? Maybe nothing should happen or you should be redirected to a page (URL). There would also be the possibility to display the entered URL embedded in a dialog (iFrame). If there are many markers, you can decide if they should be clustered. Then you can see circles with the number of markers when you zoom out further. You don't like the tile layer (map "look and feel")? No problem, then change that too. Do you want to define categories, so that you don't have to "design" every marker anew and to show a legend for it? This is also no problem. It is also easier to edit categories afterwards. This is because all markers that have been assigned to a category are also updated after editing. It goes so far that you can even make the map static. This means that the user can neither zoom nor switch to another (map) point (dragging disabled). The web part can also be integrated into Microsoft Teams as a tab. Here you can see an example of my web part:
There are many use cases for my solution:
- Display all locations of the company
- Marking all customers on a map
- Plan the next team event and show the meeting points, including the information about it
- A static page header as a "banner" for the location page
- etc.
Curious? Then visit the product website and learn how to download, install and use it.
I would appreciate your feedback. You can leave a comment here in the post or use my GitHub repository for it.
