• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

Custom Annotations

This example shows how to add custom annotations in MapView.

  • Add Annotations from GeoJson

  • Animate Annotations

  • Query Visible Annotations in Rect

  • Center Selected Annotation


For all code examples, refer to Maps Code Examples

AnnotationsViewController view source

2// StyleMapLayerViewController.swift
3// maps-ios-demo
6import Foundation
7import UIKit
8import Nbmap
10enum AnnotationActionType{
11 case AddAnnotations
12 case AddNumberAnnotations
13 case AnimateAnnotations
14 case QueryVisibleAnnotations
15 case CenterSelectedAnnotations
16 case AddVisibleAreaPolyline
  1. Initializing nbMapView:

    • The nbMapView is initialized with a frame that matches the bounds of the view controller's view.

    • The mapView is added as a subview of the view controller's view and set as the delegate of the map view.

  2. addAnnotations:

    • Removes any existing annotations from the map view.

    • Asynchronously loads a GeoJSON file named "points.geojson" from the main bundle.

    • Parses the GeoJSON data and extracts the coordinates and title for each feature.

    • Creates NGLPointAnnotation objects for each feature and adds them to an array.

    • Adds the annotations to the map view and shows them with an animated effect.

3 queryVisibleAnnotations:

  • Retrieves the count of visible annotations on the map view using nbMapView.visibleAnnotations.

  • Displays an alert controller with a message indicating the number of visible annotations.

  1. centerSelectedAnnotation:

    • Checks if there is a selected annotation on the map view using nbMapView.selectedAnnotations.

    • Converts the coordinate of the selected annotation to a point on the map view.

    • Converts the point to a coordinate on the map view.

    • Sets the map view's center coordinate to the new coordinate with an animated effect using nbMapView.setCenter(center, animated: true).

4 addVisibleAreaPolyline:

  • Creates a rectangle (constrainedRect) that represents the visible area of the map view.

  • Converts the four corners of the rectangle to coordinates on the map view.

  • Creates an NGLPolyline with the converted coordinates and adds it as an annotation to the map view.

Have Questions ?