Drawing with Polylines and Polygons

Frequently, you want to add a simple annotation to the map, which MapIcons are well suited for. Sometimes you will want to highlight a geographic region, or draw additional paths between points on the map. To do this, you will want to use MapPolygon and MapPolyline classes, respectively.

Examples

Adding a line

Display a line by using the MapPolyline. The following example shows how to add a dashed black line on a map.

Java

void drawLineOnMap() {
    Geoposition center = mapView.getCenter().getPosition();

    ArrayList<Geoposition> geopoints = new ArrayList<Geoposition>();
    geopoints.add(new Geoposition(center.getLatitude() - 0.0005, center.getLongitude() - 0.001));
    geopoints.add(new Geoposition(center.getLatitude() + 0.0005, center.getLongitude() + 0.001));

    MapPolyline mapPolyline = new MapPolyline();
    mapPolyline.setPath(new Geopath(geopoints));
    mapPolyline.setStrokeColor(Color.BLACK);
    mapPolyline.setStrokeWidth(3);
    mapPolyline.setStrokeDashed(true);

    // Add Polyline to a layer on the map control.
    MapElementLayer linesLayer = new MapElementLayer();
    linesLayer.setZIndex(1.0f);
    linesLayer.getElements().add(mapPolyline);
    mapView.getLayers().add(linesLayer);
}

Swift

func drawLineOnMap() {
    let center = self.mapView.mapCenter.position

    let geopath = MSGeopath(positions:
        [MSGeoposition(latitude: center.latitude-0.0005, longitude: center.longitude-0.001),
         MSGeoposition(latitude: center.latitude+0.0005, longitude: center.longitude+0.001)])

    let mapPolyline = MSMapPolyline()
    mapPolyline.path = geopath
    mapPolyline.strokeColor = UIColor.black
    mapPolyline.strokeWidth = 3
    mapPolyline.strokeDashed = true

    // Add Polyline to a layer on the map control.
    let linesLayer = MSMapElementLayer()
    linesLayer.zIndex = 1
    linesLayer.elements.add(mapPolyline)
    mapView.layers.add(linesLayer);
}

Objective-C

- (void) drawLineOnMap
{
    MSGeoposition *center = self.mapView.mapCenter.position;

    NSMutableArray<MSGeoposition*>* positions;
    [positions addObject:[MSGeoposition geopositionWithLatitude: center.latitude-0.0005 longitude: center.longitude-0.001]];
    [positions addObject:[MSGeoposition geopositionWithLatitude: center.latitude+0.0005 longitude: center.longitude+0.001]];
    MSGeopath *geopath = [MSGeopath geopathWithPositions:positions];

    MSMapPolyline* mapPolyline = [MSMapPolyline polyline];
    mapPolyline.path = geopath;
    mapPolyline.strokeColor = [UIColor blackColor];
    mapPolyline.strokeWidth = 3;
    mapPolyline.strokeDashed = YES;

    // Add Polyline to a layer on the map control.
    MSMapElementLayer* linesLayer = [MSMapElementLayer layer];
    linesLayer.zIndex = 1;
    [[linesLayer elements] addMapElement:mapPolyline];
    [[self.mapView layers] addMapLayer: linesLayer];
}

Adding a shape

Display a multi-point shape on a map by using the MapPolygon. The following exampe shows how to add a red box with blue outline on a map.

Java

void highlightArea() {
    Geoposition center = mapView.getCenter().getPosition();

    ArrayList<Geoposition> geopoints = new ArrayList<Geoposition>();
    geopoints.add(new Geoposition(center.getLatitude() + 0.0005, center.getLongitude() - 0.001));
    geopoints.add(new Geoposition(center.getLatitude() - 0.0005, center.getLongitude() - 0.001));
    geopoints.add(new Geoposition(center.getLatitude() - 0.0005, center.getLongitude() + 0.001));

    MapPolygon mapPolygon = new MapPolygon();
    mapPolygon.setPaths(Arrays.asList(new Geopath(geopoints)));
    mapPolygon.setFillColor(Color.RED);
    mapPolygon.setStrokeColor(Color.BLUE);
    mapPolygon.setStrokeWidth(3);
    mapPolygon.setStrokeDashed(false);

    MapElementLayer highlightsLayer = new MapElementLayer();
    highlightsLayer.setZIndex(1.0f);
    highlightsLayer.getElements().add(mapPolygon);
    mapView.getLayers().add(highlightsLayer);
}

Swift

func highlightArea() {
    let center = self.mapView.mapCenter.position

    let geopath = MSGeopath(positions:
        [MSGeoposition(latitude: center.latitude+0.0005, longitude: center.longitude-0.001),
         MSGeoposition(latitude: center.latitude-0.0005, longitude: center.longitude-0.001),
         MSGeoposition(latitude: center.latitude-0.0005, longitude: center.longitude+0.001)])

    let mapPolygon = MSMapPolygon()
    mapPolygon.paths = [geopath]
    mapPolygon.zIndex = 1
    mapPolygon.fillColor = UIColor.red
    mapPolygon.strokeColor = UIColor.blue
    mapPolygon.strokeWidth = 3
    mapPolygon.strokeDashed = false

    let highlightsLayer = MSMapElementLayer()
    highlightsLayer.zIndex = 1
    highlightsLayer.elements.add(mapPolygon)
    mapView.layers.add(highlightsLayer)
}

Objective-C

- (void) highlightArea
{
    MSGeoposition *center = self.mapView.mapCenter.position;

    NSMutableArray<MSGeoposition*>* positions;
    [positions addObject:[MSGeoposition geopositionWithLatitude: center.latitude+0.0005 longitude: center.longitude-0.001]];
    [positions addObject:[MSGeoposition geopositionWithLatitude: center.latitude-0.0005 longitude: center.longitude-0.001]];
    [positions addObject:[MSGeoposition geopositionWithLatitude: center.latitude-0.0005 longitude: center.longitude+0.001]];
    [positions addObject:[MSGeoposition geopositionWithLatitude: center.latitude+0.0005 longitude: center.longitude+0.001]];
    MSGeopath *geopath = [MSGeopath geopathWithPositions:positions];

    MSMapPolygon* mapPolygon = [MSMapPolygon polygon];
    mapPolygon.paths = [NSArray arrayWithObject:geopath];
    mapPolygon.zIndex = 1;
    mapPolygon.fillColor = [UIColor redColor];
    mapPolygon.strokeColor = [UIColor blueColor];
    mapPolygon.strokeWidth = 3;
    mapPolygon.strokeDashed = NO;

    MSMapElementLayer* highlightsLayer = [MSMapElementLayer layer];
    highlightsLayer.zIndex = 1;
    [[highlightsLayer elements] addMapElement:mapPolygon];
    [[self.mapView layers] addMapLayer: highlightsLayer];
}

See also Map Polylines and Polygons