10 Minutes To Learn Power Apps Maps

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/10-minutes-to-learn-power-apps-maps/. Author: Matthew Devaney.

10 Minutes To Learn Power Apps Maps Posted by - Matthew Devaney on - January 31, 2021 22 Comments

The Power Apps Maps control is an exciting new feature. Now we have the ability to include interactive maps in our apps and mark locations with pins. While the control looks very simple to use I found it took way more time to understand than I expected. I want others to have an easier time than me.

In this article I will help you learn how to use Power Apps Maps in 10 minutes or less. Table of Contents Enable Geospatial Services Show Current Location Mark Locations With A Pin Customize Pin Icons And Colors Group Pins In A Cluster Display Info Cards For Pinned Locations Centering The Map On A Default Location Custom Satellite Mode Button Custom Full Screen Mode Button Enable Geospatial Services

Maps require the Geospatial Services setting to be turned on in your environment. To test whether this has been done, go to the Insert tab on the ribbon, open the Media menu and select Map. If a map appears on the screen then the service is already active and you don’t need to take any further action.

If you receive an error message when adding the Map control ask an administrator to enable the Geospatial services feature in the Power Apps Admin Center. Show Current Location

We can show the user’s current location on the map with a pulsing blue dot.

To turn-on the blue go to the CurrentLocation property and set it to true. true Code language: JavaScript ( javascript )

The current location will not automatically detect the user’s position. We must manually define this using the Location function in the following properties. CurrentLocationLongitude : Location .Longitude CurrentLocationLatitude : Location .Latitude Code language: CSS ( css )

Now when the map opens it will be centered on the users current location. Mark Locations With A Pin

One or more important locations can be marked on the map with pins.

Create a new SharePoint list called Restaurant Locations with the following columns. Define the label column as single-line text and latitude/longitude as a number column. Label Latitiude Longitude 1 49.89600 -97.14011 2 49.89051 -97.14301 3 49.89399 -97.14399 4 49.89308 -97.14375 5 49.89265 -97.13923 6 49.89383 -97.13328 7 49.89126 -97.14926

In the Items property of the Map control use Restaurant Locations as the datasource. 'Restaurant Locations' Code language: JavaScript ( javascript )

Then supply these additional properties with the code shown below and the map will show pins for each location. ItemsLabels: "Label" ItemsLatitudes : "Latitiude" ItemsLongitudes : "Longitude" Code language: JavaScript ( javascript )

One additional note: notice how the map is now centered on the pins instead of the user’s current location. Customize Pin Icons And Colors

We can edit the location pins to have a different style than the standard color and icon. In fact, we even have the ability to edit the pin styles individually.

Add new single-line text columns for Color and Icon in the Restaurant Locations SharePoint list. Label Latitiude Longitude Color Icon 1 49.89600 -97.14011 #EA4335 Marker 2 49.89051 -97.14301 #EA4335 Marker 3 49.89399 -97.14399 #EA4335 Marker 4 49.89308 -97.14375 #01B8AA Marker-Ball-Pin 5 49.89265 -97.13923 #01B8AA Marker-Ball-Pin 6 49.89383 -97.13328 Marker-Square 7 49.89126 -97.14926 Marker-Square

To show the newly added custom icons on the map use this code in the ItemsIcons property. 'Restaurant Locations' .Icon Code language: JavaScript ( javascript )

Here’s a few of my favorite custom icons. For the full list of icons check out the Microsoft Azure Maps documentation . Icon Name Marker Marker-Square Marker-Ball-Pin Flag-Triangle Market-Flat

Next, to show the custom pin colors add this code to the ItemsColors property. 'Restaurant Locations' .Color Code language: JavaScript ( javascript )

Pin colors must be stored as Hex Value (e.g #01B8AA). If you want to convert RGBA values to Hex try this simple tool . Group Pins In A Cluster

When pins are close together it can be hard to tell just how many pins are being shown. This problem can be solved by grouping nearby pins into a cluster.

To enable this feature change the Clustering property to true. true Code language: JavaScript ( javascript ) Display Info Cards For Pinned Locations

Detailed location info can be displayed in a card when a user hovers over the pin.

Change the Show Info Cards property of On hover .

Add any columns you would like to show on the card inside the Edit Fields menu. For this example I added a few new columns to the SharePoint list with information. Address, Phone Number, and a Short Description of the location would be an excellent idea here. Centering The Map On A Default Location

To manually define the Map control’s center location we can supply a default location. In the example below I have centered the map on a popular landmark (Portage & Main intersection) and zoomed out to show more streets.

Turn on the default location and fill-in the following properties to achieve the desired effect. DefaultLocation : true DefaultLatitude : 49.89524 DefaultLongitude : -97.137942 DefaultZoomLevel : 14 Code language: HTTP ( http ) Custom Satellite Mode Button

The maps feature is missing a button for satellite mode. Fortunately, its very easy to create. Place a toggle in the app called tog_SatelliteView .

Then put this code in the Satellite property of the Map. tog_SatelliteView .Value Code language: CSS ( css ) Custom Full Screen Mode Button

Another missing feature is full-screen mode. What if our app had other UI elements forcing us to display a small version of the map. There should be a button to expand it when needed!

Insert a toggle called tog_FullScreen into the app.

Make sure the Map is on top of all the others controls. Then use this logic in the Height and Width properties. Height : If ( tog_FullScreen .Value , App .Height , 698) Width : If ( tog_FullScreen .Value , App .Width ,915) Code language: CSS ( css )

Now the map will re-size when tog_FullScreen is toggled. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions or feedback about 10 Minutes To Learn Power Apps Maps please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion. Location Map Control Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps