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.
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
CurrentLocationLatitude: Location.Latitude
Now, when the map opens, it will automatically center on the user’s current location.
Place Pins to Identify Locations
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’.
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.
Incorporate fresh single-line text columns in the Restaurant Locations SharePoint list, naming them ‘Color’ and ‘Icon’.
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.
Reference: How to use image templates
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.
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.
Change the Show Info Cards property of On hover.
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.
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.
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
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.
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.
Reference: Interactive map controls
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.
