Sorry, you need to enable JavaScript to visit this website.

Shapes

Shapes

Allow your users to draw shapes like circles, polygons and polylines on your map to mark different areas on the map.

Sample use case: You are developing an app for a delivery company and need to illustrate ranges of the transportation area around different cities.
What you need to do is e.g. to render circles round cities with radiuses indicating zones of deliveries.
The details on the example implementation of shapes rendering are described below.

A TTMapView supports several shape overlays. These are:

  • TTCircle

  • TTPolygon

  • TTPolyline

Shape overlays are immutable i.e. once they have been created, their shapes cannot be changed (although you may change their visibility and color).
If you want to change a shape, you must remove the existing shape and replace it with a new one.

It is the responsibility of the framework user to be conscientious about performance and how many shape overlays they are using.
You should use as few shapes as possible, and hide or dispose of ones that are not being displayed.

Code examples are below:

_

let polygon = TTPolygon(coordinates: &coordinates, count: UInt(pointsCount), opacity: 1, color: color, colorOutline: color)
mapView.annotationManager.add(polygon)
TTPolygon *polygon = [TTPolygon polygonWithCoordinates:coordinates
                                                 count:pointsCount
                                               opacity:1
                                                 color:color
                                          colorOutline:color];
[self.mapView.annotationManager addOverlay:polygon];

 

_

let polyline = TTPolyline(coordinates: &coordinates, count: UInt(pointsCount), opacity: 1, width: 8, color: color)
mapView.annotationManager.add(polyline)
TTPolyline *polyline = [TTPolyline polylineWithCoordinates:coordinates
                                                     count:pointsCount
                                                   opacity:1
                                                     width:8
                                                     color:color];
[self.mapView.annotationManager addOverlay:polyline];

 

_

let circle = TTCircle(center: TTCoordinate.AMSTERDAM(), radius: 5000, opacity: 1, width: 10, color: color, fill: true, colorOutlet: color)
mapView.annotationManager.add(circle)
TTCircle *circle =
    [TTCircle circleWithCenterCoordinate:[TTCoordinate AMSTERDAM]
                                  radius:5000
                                 opacity:1
                                   width:10
                                   color:color
                                    fill:YES
                             colorOutlet:color];
[self.mapView.annotationManager addOverlay:circle];

 



image

Circle

image

Polygon

image

Polyline

Click delegate

You can implement an observable of shape clicked event. You can do that with the global delegate TTAnnotationDelegate
for all shapes that has to be registered on TTAnnotationManager as following

Maps SDK allows to observe shape selected event.
There is one global delegate TTAnnotationDelegate for all shapes that has to be registered on TTAnnotationManager as followed.

_

mapView.annotationManager.delegate = self
self.mapView.annotationManager.delegate = self;

 

_

func annotationManager(_: TTAnnotationManager, touchUp _: TTPolyline) {
    // called when polyline clicked
}
- (void)annotationManager:(id<TTAnnotationManager>)manager
          touchUpPolyline:(TTPolyline *)polyline {
  // called when polyline clicked
}

 

_

func annotationManager(_: TTAnnotationManager, touchUp _: TTPolygon) {
    // called when polygon clicked
}
- (void)annotationManager:(id<TTAnnotationManager>)manager
           touchUpPolygon:(TTPolygon *)polygon {
  // called when polygon clicked
}

 

_

func annotationManager(_: TTAnnotationManager, touchUp _: TTCircle) {
    // called when circle clicked
}
- (void)annotationManager:(id<TTAnnotationManager>)manager
            touchUpCircle:(TTCircle *)circle {
  // called when circle clicked
}

 

You are here