mapbox / mapbox.js

Mapbox JavaScript API, a Leaflet Plugin
mapbox.com/mapbox.js/
Other
1.91k stars 386 forks source link

Static API returns invalid geojson with MultiPolygon #1359

Closed nicoten closed 1 year ago

nicoten commented 1 year ago

The static API is not working with a valid MultiPolygon:

const encoded = encodeURIComponent(
      JSON.stringify({
        type: 'Feature',
        properties: {
          stroke: '#555555',
          'stroke-width': 2,
          'stroke-8': 1,
          fill: 'red',
          'fill-opacity': 0.3,
        },
        geometry: {
          type: 'MultiPolygon',
          coordinates: [
            [
              [
                [-71.4087892, 41.828065721],
                [-71.409185236, 41.827911685],
                [-71.409329915, 41.828155902],
                [-71.40933081, 41.828158329],
                [-71.409331703, 41.828160755],
                [-71.409125443, 41.828188249],
                [-71.409039373, 41.828195505],
                [-71.408927383, 41.828204077],
                [-71.408672864, 41.828223617],
                [-71.40865877, 41.828092777],
                [-71.4087892, 41.828065721],
              ],
            ],
          ],
        },
      }),
    );

const style = 'https://api.mapbox.com/styles/v1/mapbox/light-v10';

    const staticUrl = [
      `${style}/static/geojson(${encoded})/auto/${height}x${width}`,
      `?access_token=${Config.MAPBOX}&attribution=false`,
    ].join('');

The URL ends up being: https://api.mapbox.com/styles/v1/mapbox/light-v10/static/geojson(%7B%22type%22%3A%22Feature%22%2C%22properties%22%3A%7B%22stroke%22%3A%22%23555555%22%2C%22stroke-width%22%3A2%2C%22stroke-8%22%3A1%2C%22fill%22%3A%22red%22%2C%22fill-opacity%22%3A0.3%7D%2C%22geometry%22%3A%7B%22type%22%3A%22MultiPolygon%22%2C%22coordinates%22%3A%5B%5B%5B%5B-71.4087892%2C41.828065721%5D%2C%5B-71.409185236%2C41.827911685%5D%2C%5B-71.409329915%2C41.828155902%5D%2C%5B-71.40933081%2C41.828158329%5D%2C%5B-71.409331703%2C41.828160755%5D%2C%5B-71.409125443%2C41.828188249%5D%2C%5B-71.409039373%2C41.828195505%5D%2C%5B-71.408927383%2C41.828204077%5D%2C%5B-71.408672864%2C41.828223617%5D%2C%5B-71.40865877%2C41.828092777%5D%2C%5B-71.4087892%2C41.828065721%5D%5D%5D%5D%7D%7D)/auto/150x150?access_token=

this returns "Invalid GeoJSON" although I have validated it on geojson.io:

image

nicoten commented 1 year ago

I just fixed this because apparently now a polygon/multipolygon is required to follow the right-hand rule. This was not required before, been using this for several years without issue and all of a sudden none of my maps were showing.