Shapes

Used to add shapes to the map, including Polygons, Lines, Routes.

Polygon Example

//add a polygon with black border and transparent red fill over the state of Oklahoma
var ok = {
	title : 'Oklahoma',
	fillColor : '#880000',
	fillOpacity : 0.5,
	lineWidth : 3.4,
	lineColor : '#000000',
	lineOpacity: 0.8,
	//lineDashLengths: [10, 7],
	lineJoin: mapbox.LINE_JOIN_ROUND,
	points : [{
		longitude : -100.087706,
		latitude : 37.000263
	}, {
		longitude : -94.616242,
		latitude : 37.000263
	}
	//...a bunch more points
	]
};

mapView.addShape(ok);

Properties

Points

• Required
• Array of objects containing latitude and logitude of each point that makes up the polygon

title

• String
• Will be used as an identifier for removing polygon

fillColor

• Hex color to fill in the polygon
• Defaults to no color

fillOpacity

• Float between 0 and 1
• defaults to 1

lineWidth

• Float
• Defaults to 1.0

lineColor

• Hex value of the line color
• Defaults to black

lineOpacity

• Float between 0 and 1
• Defaults to 1

lineDashLengths:

• Array of integers representing a pattern for length of line, followed by length of space, etc.
• Defaults to a solid line

lineDashPhase

• Float specifies how far into the dash pattern the line starts
• Defaults to 0

scaleLineDash

• Bool determining whether to scale the length of line/dash specified in lineDashLengths when zooming in/out
• Defaults to false
• Careful! Small lineDashLengths will give a performance hit

lineJoin

• Constant specifying join style where lines connect
• Available styles:
  • LINE_JOIN_MITER (Default)
  • LINE_JOIN_ROUND
  • LINE_JOIN_BEVEL
• More info

Removing Shapes

Shapes are remove the same way as annotations.

removeAnnotation()

• You can remove a single annotation by calling mapView.removeAnnotation('Oklahoma'); and passing the annotation's title.
• Alternatively, you could pass the entire annotation object, such as mapView.removeAnnotation(ok);

removeAllAnnotations()

• Removes all annotations and shapes from the map