How to draw dynamic GeoGJSON Point as a rectangle using Mapbox iOS SDK

Question

I have a map layer that has a remote GeoJSON source. I'm adding it to my Mabpox map using the MGLShapeCollectionFeature and then use the MGLCircleStyleLayer and a MGLSymbolStyleLayer to display the data along with some text.

It works as expected and the points are displayed on the map:

Data

{
  "features": [
    {
      "geometry": {
        "coordinates": [
          -120.644,
          35.238
        ],
        "type": "Point"
      },
      "properties": {
        "altim": 1019.0,
        "cover": "CLR",
        "data": "METAR",
        "dewp": 12.2,
        "fltcat": "VFR",
        "id": "KSBP",
        "obsTime": "2020-05-03T18:56:00Z",
        "prior": "5",
        "rawOb": "KSBP 031856Z 31018KT 10SM CLR 22/12 A3009 RMK AO2 SLP187 T02170122",
        "site": "San Luis Obispo/Ches",
        "slp": 1018.7,
        "temp": 21.7,
        "visib": 10.00,
        "wdir": 310,
        "wspd": 18
      },
      "type": "Feature"
    }
  ],
  "type": "FeatureCollection"
}

Result

Now the question is if it's possible to display the data as a rounded rectangle instead of just a circle. Something like this:

score 0 · Answer 1 · edited May 04 '20 at 09:07

This can be done by using not a single position, but a polygon built from a position array in shape of a rounded rectangle. This rectangle can be filled with a pattern the text you would like to show.

Load fill pattern:

// Set the UIImage to be used for the fill pattern.
let fillPatternImage = UIImage(named: "stripe-pattern")!

// Add the fill pattern image to used by the style layer.
style.setImage(fillPatternImage, forName: "stripe-pattern")

With layer from a vector source (Positions Polygon array defining the rounded rectangle)

// Create a style layer using the vector source.
let layer = MGLFillStyleLayer(identifier: "drone-restrictions-style", source: source)

Add the filling pattern and set the opacity of the pattern:

layer.fillPattern = NSExpression(forConstantValue: "stripe-pattern")
layer.fillOpacity = NSExpression(forConstantValue: 0.5)

Use a separate layer to draw the text over the rounded rectangle.

Please also refer to this Mapbox example

but that would require to change the API to return the Polygon instead of a Point which I can't as I don't own the API. — Jan, May 04 '20 at 09:09
I believe the only solution would be to parse the GeoJSON manually and add all the points as native `MGLPointAnnotations` and custom `MGLAnnotationView` — Jan, May 04 '20 at 09:16

How to draw dynamic GeoGJSON Point as a rectangle using Mapbox iOS SDK

1 Answers1