Markers

The Mappedin iOS SDK allows you to add markers to the map. These are elements containing arbitrary HTML that the SDK will anchor to an MPINode or a MPICoordinate on the map, and automatically handle rotation and repositioning to face the camera.

Drawing Markers

The createMarker method of the MPIMapView allows us to draw a marker at a specified map node.

We can draw a marker when a user taps on a polygon using the onPolygonClick function exposed by the MPIMapViewDelegate. Get the polygon entrance node from the touched polygon to position the marker and pass this to the createMarker method. We can also access the polygon's location to display the location name in the contentHtml.

Copy
func onPolygonClicked(polygon: MPIPolygon) {
    guard let location = polygon.locations?.first else { return }
    guard let entrance = polygon.entrances?.first else { return }

    mapView?.createMarker(
      node: entrance,
      contentHtml: "<div style=\"background-color:white; border: 2px solid black; padding: 0.4rem; border-radius: 0.4rem;\">\(location.name)</div>")
}

Alternatively, pass an MPICoordinate to draw a marker at a specified latitude/longitude.

Copy
if let coordinate = mapView?.currentMap?.createCoordinate(
  latitude: 43.51905183293411,
  longitude: -80.53701846381122) {
    mapView?.createMarker(coordinate: coordinate, contentHtml: "<div>Marker</div>")
}

Using a coordinate doesn't require a pre-configured node and the marker can be placed at any arbitrary location on the map.

Removing Markers

Markers can be removed from the map by passing the marker id returned from createMarker to removeMarker.

We can adjust the onPolygonClicked example to store the marker id after it has been created. If a marker exists when another polygon is touched, we call the removeMarker before creating another.

Copy
// UIViewController
var markerId: String?

// MPIMapViewDelegate
func onPolygonClicked(polygon: MPIPolygon) {
  guard let location = polygon.locations?.first else { return }
  guard let entrance = polygon.entrances?.first else { return }

  if let markerId = markerId {
      mapView?.removeMarker(id: markerId)
  }
  mapView?.createMarker(
      node: entrance,
      contentHtml: "<div style=\"background-color:white; border: 2px solid black; padding: 0.4rem; border-radius: 0.4rem;\">\(location.name)</div>")
}

Marker Options

Individual marker anchoring and rank can be tweaked via the options parameter of createMarker.

Copy
mapView?.createMarker(
  node: someNode, 
  contentHtml: "<div>Marker</div>",
  markerOptions: MPIOptions.Marker(
    rank: 4.0, 
    anchor: MPIOptions.MARKER_ANCHOR.CENTER))

The rank parameter enables you to set the priority or rank of the markers. The ranks are closely associated with the Web SDK enum COLLISION_RANKING_TIERS. The default rank is 3.0 (HIGH).

The anchor option sets the default position of the marker. The positions are defined in the MARKER_ANCHOR enum. The default position is CENTER.