How to change size of polygon stroke using Mapbox Android SDK

Question

I am trying to increase the width of the 1px stroke around the outside of a polygon using Mapbox Android SDK version 4.2.0.beta4.

First I tried using the PolygonOptions but there was no option available.

public Polygon addPolygon(MapboxMap mapboxMap) {
    PolygonOptions polygonOptions = new PolygonOptions()
                    .addAll(latLngs)
                    .alpha(ALPHA_UNSELECTED)
                    .fillColor(FILL_COLOR)
                    .strokeColor(BORDER_COLOR);

    // no option for stroke width

    return mapboxMap.addPolygon(polygonOptions);
}

I then tried using the using the new Runtime Style API as defined in the Style Spec but could not find a suitable layer ID, I tried "background" https://www.mapbox.com/mapbox-gl-style-spec/

public void changeStrokeWidth(MapboxMap mapboxMap) {
        Layer styleLayer = mapboxMap.getLayer("background");

        styleLayer.setProperties(PropertyFactory.lineWidth(10f));
}

Does anyone know how to make this work or do I just have to create my own set of polylines over the top of the polygon to emulate the behaviour?

Answer 1

You have a few options here. Currently we don't offer a way to increase polygon stroke width but you can:

1. Add a Polyline using the same latlngs making up the polygon. This is by far the easiest way but you have to consider that polylines are added on top of the map (covering up labels occasionally).

2. Your second option would be to like you mentioned, adding a linelayer to the map using the same geometry as the polygon. Here's an example showing how to take points and create such a layer.

Let me know if you have additional questions.

Answer 2

//Hi, Guys. Below is the simple example to change the properties of polygon border. Hope it will help you.//

{

List<LatLng> plotPolygon = new ArrayList<>();

List<com.mapbox.services.commons.models.Position> coordinates  = new ArrayList<>();

                    plotPolygon.add(new LatLng(18.9965099,75.7316343));
                    plotPolygon.add(new LatLng(20.8858018,74.7288414));
                    plotPolygon.add(new LatLng(21.1612315,79.0024702));
                    plotPolygon.add(new LatLng(18.7918749,78.899195));
                    plotPolygon.add(new LatLng(18.9965099,75.7316343));

                    Polygon polygon1 = mapboxMap.addPolygon(new PolygonOptions()
                            .addAll(plotPolygon)
                    );        
                    polygon1.setFillColor(Color.parseColor("#3bb2d0"));

Below we are creating a list of coordinates of polygon border.

                    coordinates.add(com.mapbox.services.commons.models.Position.fromCoordinates(75.7316343 , 18.9965099));
                    coordinates.add(com.mapbox.services.commons.models.Position.fromCoordinates(74.7288414 , 20.8858018));
                    coordinates.add(com.mapbox.services.commons.models.Position.fromCoordinates(79.0024702 , 21.1612315));
                    coordinates.add(com.mapbox.services.commons.models.Position.fromCoordinates(78.899195 , 18.7918749));
                    coordinates.add(com.mapbox.services.commons.models.Position.fromCoordinates(75.7316343 , 18.9965099));

changeStrokeProperties(mapboxMap , coordinates);

}

public void changeStrokeProperties(MapboxMap mapboxMap , List<com.mapbox.services.commons.models.Position> coordinates) {

// Create the LineString from the list of coordinates and then make a GeoJSON//
// FeatureCollection so we can add the line to our map as a layer.//

    final Feature lineFeature =     Feature.fromGeometry(LineString.fromCoordinates(coordinates));

        final GeoJsonSource source = new GeoJsonSource(
                "route", FeatureCollection.fromFeatures(new Feature[] { lineFeature }));   


            mapboxMap.addSource(source);


            LineLayer lineLayer = new LineLayer("linelayer", "route");

            lineLayer.setProperties(
                    PropertyFactory.lineDasharray(new Float[]{0.01f, 2f}),
                    PropertyFactory.lineCap(Property.LINE_CAP_ROUND),
                    PropertyFactory.lineJoin(Property.LINE_JOIN_ROUND),
                    PropertyFactory.lineWidth(5f),
                    PropertyFactory.lineColor(Color.parseColor("#e55e5e"))

            );
            mapboxMap.addLayer(lineLayer);

    }