Styling Map Objects

Annotations, polylines, and polygons associated with a data layer on a weather map are highly customizable by specifying a map item style, AWFMapItemStyle, for each data layer type. These styles are setup and stored within a map’s configuration and used throughout the SDK when rendering the various data layers on the map. Since all map objects are represented on the map by shapes, except for tile and image overlays, the basic map item style defines the options to use for properties like fill and stroke color as well as stroke width.

Styling Polygons

Polygons and polylines are styled using a AWFPolygonStyle instance, which is just a basic subclass of AWFMapItemStyle to define the appearance characteristics of its shape on the map, such as fill color, stroke color and line width:

AWFPolygonStyle *warningStyle = [AWFPolygonStyle style];
warningStyle.fillColor = nil;
warningStyle.strokeColor = [UIColor redColor];
warningStyle.strokeWidth = 2.0;
let warningStyle = AWFPolygonStyle()
warningStyle.fillColor = nil
warningStyle.strokeColor = .red
warningStyle.strokeWidth = 2.0

Styling Annotations

Annotations, on the other hand, are managed by AWFAnnotationStyle instances, and an annotation can be represented on the map by a circular point or an image, or both. By default all annotations are circular points with both a fill and stroke color:

AWFAnnotationStyle *earthquakeStyle = [AWFAnnotationStyle styleWithRadius:12.0 fillColor:[UIColor greenColor] strokeColor:[UIColor whiteColor] strokeWidth:2.0];
let earthquakeStyle = AWFAnnotationStyle(radius: 12.0, fill: .green, stroke: .white, strokeWidth: 2.0)

As with most mapping libraries, such as Apple’s MapKit or Google Maps, annotations can also contain an image which represents the annotation in its entirety or is rendered on top of the underlying shape:

earthquakeStyle.image = [UIImage imageNamed:@"quake_minor.png"];

// determines whether or not the point should be drawn under the image
earthquakeStyle.showsPoint = NO;
earthquakeStyle?.image = UIImage(named: "quake_minor")

// determine whether or not the point should be drawn under the image
earthquakeStyle?.showsPoint = false

You can also provide in and out animations as CAAnimation instances that are performed on the associated annotation view when the object is added to and removed from a map:

CABasicAnimation *scaleOutAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
scaleOutAnimation.duration = 0.3f;
scaleOutAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.2, 1.2, 1.0)];
scaleOutAnimation.removedOnCompletion = YES;
scaleOutAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

earthquakeStyle.inAnimation = scaleOutAnimation;
earthquakeStyle.shouldAnimate = YES;
let scaleOutAnimation = CABasicAnimation(keyPath: "transform")
scaleOutAnimation.duration = 0.3
scaleOutAnimation.toValue = NSValue(caTransform3D: CATransform3DMakeScale(1.2, 1.2, 1.0))
scaleOutAnimation.isRemovedOnCompletion = true
scaleOutAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)

earthquakeStyle?.inAnimation = scaleOutAnimation
earthquakeStyle?.shouldAnimate = true

Map Object Groups

For many of the different point and polygon data layers, their map objects are grouped based on certain criteria from the model object they represent. For instance, earthquakes are grouped by their magnitude, whereas storm reports are grouped based on their general type (rain, tornado, snow, etc).

Not only can you define a style to use for a single data layer, but you can also provide a style to use for each of the layer’s groups to better differentiate between them when displayed on the map. Each data layer group, when supported, will define a set of unique identifiers for the available groups that you will use to assign your custom styles with.

Refer to the AWFGroupIdentifier API documentation for the complete list of group identifiers available and the next section for more information on how to use these identifiers to override a weather map’s default styles.

Overriding the Default Styles

The default map configuration already provides the default styles to be used for all weather-related annotations and polygons, but you may want to customize these styles to better fit within the context of your own project. To do so, just use the public method setStyle:forLayerType: on your map’s configuration object, passing the style object you want to associate with the layer type.

For instance, the following will update the annotation style used for all earthquakes displayed on the map:

AWFAnnotationStyle *earthquakeStyle = [AWFAnnotationStyle styleWithRadius:18.0 fillColor:[UIColor redColor] strokeColor:[UIColor whiteColor] strokeWidth:2.0];

AWFWeatherMapConfig *mapConfig = [AWFWeatherMapConfig config];
[mapConfig setStyle:earthquakeStyle forLayerType:AWFLayerTypeEarthquake];
let earthquakeStyle = AWFAnnotationStyle(radius: 18.0, fill: .red, stroke: .white, strokeWidth: 2.0)!
let mapConfig = AWFWeatherMapConfig()
mapConfig.setAnnotationStyle(earthquakeStyle, for: .typeEarthquake)

Styling Legends

Legends for data layers are also dynamically rendered so that they can scale with your weather map’s view and can easily reflect any color changes you make to the various polygon and annotation styles. All you need to do to is set your custom map object styles on your map’s configuration, and its associated legend will automatically be rendered to reflect your changes.

Since image and tile data layers are based on static imagery, their legends and styles cannot be customized.

Last modified: November 02, 2017