Learn Power Apps Maps in Just 10 Minutes

Learn Power Apps Maps in Just 10 Minutes 

Learn Power Apps Maps 🗺 in Just 10 Minutes!

Overview:

This blog post provides a detailed guide on effectively using the Power Apps Maps control. From activating geospatial features to customizing pins and integrating information cards, readers will gain a comprehensive understanding of implementing and personalizing interactive maps within apps.
In this piece, I’ll guide you through mastering Power Apps Maps in under 10 minutes. 

Activate Geospatial Features

For Maps to function, the Geospatial Services must be enabled in your environment. To verify this, navigate to the ‘Insert’ tab, access the ‘Media’ menu, and choose ‘Map’. If a map displays on your screen, the service is operational, and no additional steps are needed. 

Adding map from media menu in PowerApps

If an error pops up upon adding the Map control, request an administrator to turn on the Geospatial services feature via the Power Apps Admin Center. 

When we insert the map, it will appear as shown in the following image. 

Display Present Location

We can indicate the user’s current location on the map using a pulsating blue dot. 

				
					CurrentLocation: true 

CurrentLocationLongitude: Location.Longitude 
				
			
Current Location Longitude of our map in PowerApps
				
					CurrentLocationLatitude: Location.Latitude 
				
			

Now, when the map opens, it will automatically center on the user’s current location. 

Place Pins to Identify Locations

Placing the Pins to Identify Locations or to Display our Present Location in our Map in PowerApps step2

Establish a fresh SharePoint list named ‘PowerApps Maps’ and configure it with the following columns. Then, establish a connection between this SharePoint list and the map. Specify the label column as ‘Single-Line Text’ and the latitude/longitude columns as ‘Number’. 

New Sharepoint list creation for Maps in PowerApps by using column names longitude and latitude

Afterward, apply the provided code with these additional properties, and the map will display pins for each location. 

				
					ItemsLabels: “Title” (where 'Title' is a previously created column in the SharePoint list named 'PowerApps Map'). 

ItemsLatitudes: "Latitude" (where ‘Latitude’ is a previously created column in the SharePoint list named 'PowerApps Map'). 

ItemsLongitudes: "Longitude" (where ' Longitude 'is a previously created column in the SharePoint list named 'PowerApps Map'). 
				
			

One important point to observe: the map now centers on the pins rather than the user’s current location. 

Personalize Pin Icons and Color Schemes

We can modify the appearance of the location pins to deviate from the standard color and icon. In fact, we can even customize the pin styles individually. 

Personalizing the Pin Icons and Color Schemes or customization of the maps in powerapps

Incorporate fresh single-line text columns in the Restaurant Locations SharePoint list, naming them ‘Color’ and ‘Icon’. 

Customization in Sharepoint list by naming them 'Color' and 'Icon' for the maps in PowerApps

To display the recently added custom icons on the map, utilize the following code within the ItemsIcons property. 

				
					ItemsIcons: "Icon" 
				
			

Here are some of my preferred custom icons. For a comprehensive list of icons, please refer to the Microsoft Azure Maps documentation.

List of custom icons from Microsoft Azure Maps documentation for the maps in PowerApps

Next, to display the custom pin colors, incorporate the following code into the ItemsColors property. 

				
					ItemsColors: "Color" 
				
			

Cluster Pin Markers

When pins are in close proximity, it can be challenging to determine the exact number of pins displayed. This issue can be resolved by grouping adjacent pins into clusters. 

Grouping adjacent pins into clusters to learn about maps in powerapps

To activate this functionality, set the Clustering property to ‘true’. 

				
					Clustering: true 
				
			

Show Information Cards for Marked Locations

Comprehensive location information can appear in a card when a user hovers over the pin. 

Showing Informational Cards at Marked Locations for maps in PowerApps

Change the Show Info Cards property of On hover. 

Customizing the Cards property On hover for maps in PowerApps

Include the columns you want to appear on the card by accessing the Edit Fields menu. In this instance, I introduced several new columns to the SharePoint list containing relevant information. It’s advisable to include columns such as Address, Phone Number, and a Brief Description of the location. 

Including the custom columns you want to appear on the card for maps in PowerApps

Setting the Map's Default Center Location

To specify the center location for the Map control manually, you can provide a default location. In the example below, I have set the map’s center to a well-known landmark (Portage & Main intersection) and zoomed out to display more streets. 

Setting the Map's Default Center Location for the maps in PowerApps

Enable the default location and complete the following properties to achieve the intended outcome. 

				
					DefaultLatitude: 51.5267026 

DefaultLongitude: -0.0930971 

DefaultZoomLevel: 16 

DefaultLocation: true 
				
			

Personalized Satellite Mode Button

The maps feature lacks a satellite mode button, but fortunately, it’s quite straightforward to create one. Simply add a toggle element in the app and name it ‘tog_Satellite‘. 

				
					SatelliteView: tog_Satellite.Value 
				
			
Adding a toggle element in the app and name it 'tog_Satellite' for trhe maps in PowerApps

Now, insert this code into the Satellite property of the Map. 

				
					SatelliteView: tog_Satellite.Value 
				
			

Personalized Full Screen Mode Button

Another feature that’s absent is a full-screen mode. Imagine having other user interface elements in our app that may necessitate displaying a smaller version of the map. In such cases, a button should be available to expand it when required. 

Adding a full-screen mode toggle element in the app and name it 'full-view' for the maps in PowerApps

Add a toggle element named ‘tog_FullView‘ to the app. 

				
					Y: If(tog_FullView,0,51) 

Height: If(tog_FullView,Parent.Height,717) 

Width: If(tog_FullView,App.Width,1200) 
				
			

Ensure that the Map is positioned above all other controls, and then apply this logic to the Height and Width properties. 

Now, when you toggle ‘tog_FullScreen,’ the map will resize accordingly. 

Our app is now finished !

Conclusion:

By following the steps outlined in this guide, anyone can swiftly master the Power Apps Maps control. The incorporation of maps into apps becomes more intuitive, allowing users to create a more engaging and informative user experience.

If you want to learn more about the Power Apps, feel free to explore our other informative articles and tutorials.

Have additional inquiries? Our team is here to assist. Please don’t hesitate to reach out!

Enhanced Support Widget