Microsoft 365 Community SharePoint, 20 Apr 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building advance interactive world map for business information with SPFx

Description

In this 12-minute developer-focused demo, Sergej Schwabauer’s Interactive Map web part delivers the ability to add custom markers, map layers and has a host of configuration options. “Bing Maps” has few configuration options comparatively speaking. Review creator’s idea and highlights, technology/packages used, demo, and resources. See property pane customization options (add marker, category, update legend) and general settings (define layers, plug-ins, categories). All markers are stored in web part. Sample available today. Uses many PnP Controls, looks like out of box SharePoint web part.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 23, 2023.

Demo Presenter
• Sergej Schwabauer (Aurum) | @spfxappdev

Supporting materials
• Sample - SharePoint Interactive Map Webpart | https://github.com/SPFxAppDev/sp-map-webpart
• Article - My interactive maps app for Microsoft Teams/SharePoint | https://spfx-app.dev/my-interactive-maps-app-for-microsoft-teamssharepoint

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

A

B

In Nuremberg, Germany I have more than 13 years of experience in SharePoint development and recently I started a Blog where I regularly write and publish my Solutions spfx app Dev I would be happy if you visit my website and today, I will present my specifics. Web part interactive world map. I will go to the ID in the Highlight, highlights what packages I use and then show a demo before giving a summary. Okay, let's talk about the web part.

B

As the name says, this is a web part that displays a world map. Now you might think wow Sega, that's nothing new. It's already exists by default in SharePoint. Yes, of course it is, but the default Bing Maps are part has very few configuration options. The only possibility is to define a label and whether it should be displayed or not, and, of course, the position or address itself. Here you can see the standard webpart looks like so everyone understands what I mean.

B

My web part has the following features place as many markers as you want share marker tooltip on Hover configure, pin, color, icon, color and icon handle the click event. Cloud study, markers change, the look and feel of the map, style layer, Define marker categories and show the The Legend for the categories make the map, aesthetic, Define, the start, location, page load, configure map, Zoom settings and so on. This is how it looks like before I show the web part I would like to briefly describe the techniques I use.

B

The web part was developed with spfx 1.14 I use, fluent UI components for the map itself, open street map and the well-known leaflet.js Library, and there is a react package and also use the leaflet plug-in marker cluster and the reactly flat marker cluster package and then PMP controls and property controls.

B

All markers are stored directly on the web part and not in a list or something similar for the whole web part I invented about um 24 hours and the code itself. There is nothing really interesting or cool or special to to show because, in my opinion, it's a normal web part. Therefore, and we come directly to the demo on this page, you can see my pre-configured wrapper. I have simply mapped a few Microsoft locations, one for each continent. Here you can already see how the cluster looks like this one or that one.

B

For example, if you click on this cluster, you will be taken directly to the this location. Now you see two markers one shows the headquarter and the other one another Microsoft location. Here you can see that the icon differ while the headquarters I can ask custom configure the other one uses a category. That advantage of categories is that they only need to be configured once and then they can be reused. If the category is customized, all markers that use this category are automatically updated.

B

In addition, the category can be used to display the legend like that. um The marker, in this case, is set up to to open a dialogue this that this place um SharePoint page.

B

This is an embedded iframe, the dialog or the page behind. It also uses this web port. Here you could write, for example, more information about the location. The map should be used more as a header in this case. That's why I configured is that the map is static. That means I can either zoom in nor move. So it's nothing happens if I zoom or a track and drop, although all buttons like search, Zoom or Legend, are hidden. The header has become very large here, I know. So, let's look at the marker for Microsoft Germany.

B

Here as if the page was opened in a dialog and as you can see, the map of the or the header is a bit smaller here. I have additional configured the marker as a panel. If I click on the marker, a panel is thrown, the content of the panel is configurable, of course, there's only one of many possibilities that can be met with the web part. Others could be, for example, marking all customers on a map plan the next team event and show the meeting points, including the information about it and so on.

B

Now, let's see what configuration options are available for this I place, a new web part on a new page.

B

um The web part is called interactive map and the web part can also be placed in a pool with them by default. If I create a new web part, London is visible because London has latitude zero. Let's leave that specific. If you want to set the location somewhere else when loading the page, you can easily Define this to do this. We go to the location we want and right click on the map. For example, let's say we want this: this View, then you click right click and say make this view as start position.

B

The position that means latitude and longitude and the zoom level will be saved. As you may have seen. You can also create a new marker by clicking clicking right click. Let's try.

B

The configuration of the marker is simple. You can either choose a category or Define each marker individually. You can Define what should happen when the marker is clicked. If a panel, a dialog or a URL should should be opened or if nothing should be happen at all that one, you can choose the pin color.

B

B

And the icon, color.

B

Here's the preview Additionally, you can define a tooltip text.

B

This will be displayed when hovering over the marker and depending on which type you have selected. You can also Define the dialog and a panel content panel header panel content is this: is a PMP Rich, Text control and same for dialog, because for the URL you can also Define how the link should be opened in the same window. New window are embedded as an iframe.

B

If you have selected a category, then fewer options are available because the category specifies the pin, color, icon, icon, color and tooltip. It looks like that so for now, I don't have any categories, but we will create one get one and leave it as it is now. I use this as category and as you can see, I have no other options to to define the color or an icon, and so on. So, as already mentioned, all markers that use the category are then automatically adjusted when you change something in the category.

B

I would like to show this briefly as simply create more markers and select. The same category doesn't matter where, let's say here: okay and here, okay and now um all markers are black I want to change that. Let's say we use red for now. We save that and, as you can see here, all the markers have changed the color at the background color of the of the PIN okay. Now how can I delete or move a marker?

B

Just click on existing marker, for example, this one and now two new buttons are available, delete and change position.

B

The delete button deletes the marker and change position always another way of moving it. um I will show you that quickly change position. You can now move Patrick and drop wherever you want. When you have the right position, you can save it or, for example, you can. If you plan to to cancel the same, will be moved back to the to the initial position.

B

Okay, now, let's take a look at the report. Settings.

B

First, you can Define how far you can zoom in or out you can also Define the height of the map and enable dragging um in map allows the user to move the map to another position, or in other words, if the option is disabled. The map is static, like in my headquarter example and the header, a page header example. Finally, you can determine if the tooltip should be displayed or not.

B

Now, let's move on the next category High layers. This is actually a very cool feature because it allows you to customize the map layer. There are many three layers, but also paid ones. So if you have a map box map, Tyler or whatever provider already you, you could use them here, as we put a link here with some layers here. I have just an example of layers: let's choose one, for example, open to Home episode, and then we need to copy this URL foreign insert it here and, as you can see here, it's changed.

B

You need to do the same. For that attribution.

B

Okay and that's it, it's cool, isn't it the next setting category I have called plugins and controls here. You can, for example, activate or deactivate the marker cluster.

B

Or hide the zoom control.

B

Us here and not visible, there's some control and additional the search box. The search box is use, I think the openstream API to search for addresses, let's say.

B

And here it will be attacked you there immediately. The last setting option is about the categories you can manage the categories here as well. The dialogue is the same as foreign markers expect. You can additionally show and hide the legend.

B

Okay, um that's it with the settings and basically else with the web part. A quick summary I think you can see that the web part has a lot of configuration options. It is available in PMP samples and also my own GitHub repositor. It's very Dynamic and flexible I hope you like it and have fun with it. It's also available for teams. Tabs here are the links for repositors and my blog I talked about the web part.

B

A

Thank you so much. This was a fantastic sample. Sergey I wanted to say you know, I I, really like how you've actually used a lot of the PMP controls to make the web part look and feel like it's just an out of the box. Sharepoint webpack, it looks fantastic. Thank you again, foreign.