GeoJSON Layer Style missconfiguration in mobile Map component?

[aureliocano]

Hi community,

I am trying to draw very simple lines on Map component and it seems not working for me. I tried with so many options.

This is my config:

GeoJSON:

{
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'LineString',
              coordinates: [
                [
                  [-122.4194, 37.7949],
                  [-122.4794, 37.7749],
                  [-122.4194, 37.7049]
                ],
              ],
            },
          },
        ],
      }

GeoJSON Layer Style:

{
  "type": "line",
  "paint": {
    "line-width": 2,
    "line-color": "green"
  }
}

Problem seems to be on layer style configuration. In webapp, map appers with no line. In iOS app i get this:

Am I missing something?

Thanks!

[Paulo]

Hi @aureliocano here is a setup working for me:

GeoJSON Layer Styling:

{
    "paint": {
      "fill-color": "blue",  // Fill color for the polygon
      "fill-opacity": 0.5,   // Opacity of the fill
      "fill-outline-color": "black"  // Color of the polygon's outline
    }
  }

GeoJSON:

{
   "type":"FeatureCollection",
   "features":[
      {
         "type":"Feature",
         "geometry":{
            "type":"Polygon",
            "coordinates":[
               [
                  [
                     -122.454,
                     37.766
                  ],
                  [
                     -122.510,
                     37.764
                  ],
                  [
                     -122.510,
                     37.772
                  ],
                  [
                     -122.455,
                     37.773
                  ]
               ]
            ]
         }
      },
     { 
       'type': 'Feature',
        'properties': {},
        'geometry': {
           'type': 'LineString',
            'coordinates': [
                        [-122.483696, 37.833818],
                        [-122.483482, 37.833174],
                        [-122.483396, 37.8327],
                        [-122.483568, 37.832056],
                        [-122.48404, 37.831141],
                        [-122.48404, 37.830497],
                        [-122.483482, 37.82992],
                        [-122.483568, 37.829548],
                        [-122.48507, 37.829446],
                        [-122.4861, 37.828802],
                        [-122.486958, 37.82931],
                        [-122.487001, 37.830802],
                        [-122.487516, 37.831683],
                        [-122.488031, 37.832158],
                        [-122.488889, 37.832971],
                        [-122.489876, 37.832632],
                        [-122.490434, 37.832937],
                        [-122.49125, 37.832429],
                        [-122.491636, 37.832564],
                        [-122.492237, 37.833378],
                        [-122.493782, 37.833683]
                  ]
              }
          }
   ]
}

The first feature is drawing a Polygon over the Golden Gate Park:

The second one is drawing over a road north of the Golden Gate Bridge:

Here is my App's JSON for you to test it.
Mapbox draw lines.json (16.3 KB)

[Scottsky]

I noticed @aureliocano was talking mobile mapbox element.
And I am having similar issues. It seems not to do anything no matter what I have in GeoJSON tab.

[aureliocano]

Thanks @Paulo,

What @Scottsky points out is right, the issue happens on mobile element.
Any GeoJSON layer shows that error. No GeoJSON layer shows the map component with no features.

[Paulo]

Thanks for clarifying! What device and OS are we on?

I tried the same settings on the Mobile Map component and it's working on my end. Here is a screenshot from my iPhone 12 (iOS 17.6.1):

[aureliocano]

Hi @Paulo;

I am using iPhone 13, iOS 17.5.1

Just rechecked with the same results:

[Paulo]

I'm sorry, I don't have the paint key on the Mobile component. Try this GeoJSON Layer Style:

{
      'fill-color': 'green',
      'fill-opacity': 0.75,
 }

[aureliocano]

That works for me. But my original problem is that I would like to draw a line, not a polygon.

So, with only the LineString Feature, and trying GeoJSON Layer Styles like:

{
    'line-color': 'red',
    'line-width': 1.5,
}

Map keeps drawing a black polygon.

[Paulo]

I can confirm this limitation exists both in Mobile and Web Apps. When trying to draw a line, the area within the points is automatically filled, even without the fill-color property. I created a bug report for this issue and will update you here when it's fixed. Thank you for you feedback!

[aureliocano]

Thanks for your support!