Add a visual dimension to your Power Apps by using GeoJSON Objects? The Map control lets you embed interactive maps, displaying locations and even custom shapes using GeoJSON data. Let's explore how to bring this powerful feature to life.

Why Maps Matter

Imagine showcasing property locations in a real estate app, highlighting tourist spots, or even tracking field technicians in real-time. Maps make your apps more engaging and informative.

Setting the Stage

Create a blank screen in your Power App.
Add the Map control from the "Insert" tab.

(Optional) Include additional controls to display location details later.

Pinpointing a Single Location

In the Map control's properties, locate "Items" and paste the following code. This code snippet defines a single location using latitude and longitude coordinates.

Table({
        Label: "Tower Bridge",
        Latitude: 51.505587,
        Longitude: -0.0755066
    })

Refining the Display

Set the ItemsLabels property to "Label" (or your column name for location names).

"Label"

Set ItemsLatitudes to your "Latitude" data source column.
Set ItemsLongitudes to your "Longitude" column.

Mapping Multiple Locations

To display several points, modify the Items property with code like this:

Table(
    {
        Label: "Tower of London",
        Latitude: 51.5081,
        Longitude: -0.0759
    },
    {
        Label: "Tower Bridge",
        Latitude: 51.505587,
        Longitude: -0.0755066
    },
    {
        Label: "The Shard",
        Latitude: 51.5045,
        Longitude: -0.0865
    }
)

Data Source Flexibility: You can use Dataverse tables, SharePoint lists, or other data sources to store your location data.

Styling Your Map

Power Apps offers customization options for the Map control:

Map Style: Choose from different map themes (road, satellite, etc.).
Pin Color: Customize the appearance of location markers.
Default Zoom: Control the initial zoom level of the map.

Drawing Polygons with GeoJSON

Time to get fancy! We'll use GeoJSON, a standard format for representing geographic shapes.

Understanding GeoJSON: Check out https://en.wikipedia.org/wiki/GeoJSON for a primer on the format.
Example GeoJSON:

{
 "type": "Feature",
 "geometry": {
 "type": "Polygon",
 "coordinates": [
 [
    [
                    -0.07708891368025661,
                    51.50899321758368
                ],
                [
                    -0.077232070938976,
                    51.50898331759353
                ],
                [
                    -0.07729569638738099,
                    51.50888431757241
                ],
                [
                    -0.07787627860361113,
                    51.507889355419735
                ],
                [
                    -0.07797171677583492,
                    51.50789430553368
                ]
       
 ]
 ]
 }
}

Data Storage: Create a Dataverse table with columns for "Label" and "GeoJSON" to store your polygon data.

Map Control Configuration

Set Shape_Items to your Dataverse table.

Set ShapeLabels to the "Label" column’s logical name.

"cr52c_label"

Set ShapeGeoJSONObjects to your "GeoJSON" column’s logical name.

"cr52c_geojson"

Your app now displays the defined areas on the map!

Adding a Splash of Color

Enhance visual clarity by assigning colors to your polygons:

Add a "ShapeColor" column to your Dataverse table.

Set the Map control's ShapeColors property to this new column.

"cr52c_shapecolor"

Here’s the final look

The Result: A dynamic map displaying locations and polygons, enhancing your app's functionality and user experience!

Stay Tuned: This is just the beginning! Future blog posts will explore more advanced Map control features. Happy Power App-ing!

Power Apps Maps: Unlocking Location-Based Points and Polygons