Please see the **UgMapControl** project for the source code created in this chapter. See [Installing examples](🔗) for information on how to download the examples.

# Introduction

Many mobile apps need a map control. We wrapped the **native map control** from iOS and Android respectively and access its functionality using one common interface and API. Functionality includes

  • positioning map control freely

  • zooming in and out by setting the size of the area that the control displays

  • moving to certain location

  • using annotations to position image, i.e. drop your location pin

# Overview of map classes and structures

## SCDPlatformLocationCoordinate

latitude:NSNumberSets the lattitude
longitude:NSNumberSets the longitude

## SCDWidgetsMapWidget

mapTypeSet the map typeSCDWidgetsMapType.**standard**,satellite,hybrid
setRegion( SCDPlatformLocationCoordinate, latitudinalMeters:Int, longitudinalMeters:Int)Sets the region you want to displayUses SCDWidgetsMapRegion
userLocationCurrent user locationType is SCDPlatformLocationCoordinate
isShowUserLocation : BoolChecks if user location can be shown

## SCDWidgetsMapRegion

Property/ methodDescriptionComment / Example
centerCenters the region around this coordinatespecify location using SCDPlatformLocationCoordinate
latitudinalMetersWidth of the region in meters1000 (map control will cover 1000 meters horizontally)
longitudinalMetersHeight of the region in meters1000 (map control will cover 1000 meters vertically)

# Minimal map application

  • Drag and drop the map control on the main page

  • Drag three buttons below the map control and name them **Torronto**, **Current Location** and **Sushi**

  • Drag three buttons below the map control and name them **Standard**, **Satellite** and **Hybrid**

Add this minimal code to initialize the map control to the (easiest is to replace existing code)

# Setting the map type

The type of the map can easily be set using SCDWidgetsMapType.

# Setting the zoom level

Setting the zoom level is easy. Just set new values for latitudinalMeters and longitudinalMeters, the zoom respectively around the center coordinate.

# Getting and going to current location

The current location is stored in the map widget's **userLocation** variable. However, you should first check the permission using **isShowUserLocation() ** before going to the current location using **moveToUserLocation**()

# Map annotations

Annotations position images and are zoom agnostic

Annotations are a common concept on both iOS and Android. The most common use case is for instance setting a pin to indicate a location [Info](🔗)

Follow these steps:

  1. Use a SVG graphic to represent the annotation, i.e. the pin

  2. Always set the **width** and **height**, these parameters are mandatory

  3. Use the **xhref** field to set the relative location of the SVG file

  4. Create an annotation at a specific location using the **location** field

  5. and assign the image in the **drawing** field

  6. Finally, add the annotation to the widget's list of annotations: <mapwidget>.**annotations**

(Script tags will be stripped)

# Map overlays

Overlays are images on a map that adjust to the zoom level

Depending on weather you zoom in or out, the image adjusts to the current zoom and increases or decreases in size.

Follow these steps:

  1. Convert your usual coordinates into the coordinate system of your mobile os using the **convert** method

  2. Create a scalable image. We use a circle in this example. Make sure to use a color.

  3. Create a map overlay and set the image to use using the **drawing** field

  4. Append the overlay to the list of overlays

(Script tags will be stripped)

# Troubleshooting

## GoogleMaps in China

Please understand that Google Maps is not or only partially supported in China and the MapWidget won't work on Android