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

 

_

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

 

_

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