Getting static image with marker in mapbox in flutter

Question

I want to get static image with calling an API from mapbox, but it returns me this message:

{"message":"Failed parsing geojson"} // with status code:422

I used mapbox_search package to create the API. this is My code:

MapBoxStaticImage staticImage = MapBoxStaticImage(
apiKey:
    'pk.eyJ1IjoiYXNocmFmaWowMDciLCJhIjoiY2s2Nm40ZjFkMDAxMDNubXo3M3V4Y2pvaiJ9.cQACwGfCXD1iuKdJeZDozA',
);

Future<String> getStaticImageWithMarker() async {
final locationData = await locationFinder.Location().getLocation();
return staticImage.getStaticUrlWithMarker(
  center: Location(lat: locationData.latitude, lng: locationData.longitude),
  marker: MapBoxMarker(
      markerColor: Color.rgb(200, 0, 0),
      markerLetter: 'p',
      markerSize: MarkerSize.LARGE),
  height: 300,
  width: 600,
  zoomLevel: 16,
  style: MapBoxStyle.Streets,
  render2x: true,
);
}

getStaticImageWithMarker() function returns this api for creating the image, but I get the error that I mentioned at the top.

https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-l-p+c800(-122.084,37.4219983)/-122.084,37.4219983,16,0,20/600x300@2x?access_token=pk.eyJ1IjoiYXNocmFmaWowMDciLCJhIjoiY2s2Nm40ZjFkMDAxMDNubXo3M3V4Y2pvaiJ9.cQACwGfCXD1iuKdJeZDozA

Is there anybody to know where I did wrong in this APIcalling?

Answer 1

In mapbox i got "Invalid Image" error. And i select Carto in Mapbox style it fixed.

enter image description here

Answer 2

This is where MapBox explains how to use the link Jafar is describing in his answer that worked for me.

https://docs.mapbox.com/api/maps/static-images/

Example in docs:

/styles/v1/{username}/{style_id}/static/{overlay}/{lon},{lat},{zoom},{bearing},{pitch}|{bbox}|{auto}/{width}x{height}{@2x}

Once you have a link returned, use it inside a Image.network widget like this:

Image.network('${getStaticImageWithMarker(routeLat, routeLong)}'),

Answer 3

Function which provides a few more options (e.g. marker color), based on Jafars answer:

String getStaticImageWithMarker(
    {required double longitude,
    required double latitude,
    required int width,
    required int height,
    int zoom = 16}) {

  Map geoJson = {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {
          "marker-color": '#ff0000',
          "marker-size": 'large',
        },
        "geometry": {
          "type": "Point",
          "coordinates": [longitude, latitude]
        }
      }
    ]
  };

  return 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/'
      'geojson(${Uri.encodeComponent(json.encode(geoJson))})'
      '/$longitude,$latitude,$zoom'
      '/${width}x$height?access_token=$mapboxPublicToken';

Example usage:

GestureDetector(
  onTap: onMapClicked,
  child: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 15),
    child: Center(
      child: SizedBox(
          width: double.infinity,
          height: 150,
          child: Image.network(
            getStaticImageWithMarker(
                latitude: latitude,
                longitude: longitude,
                width:
                    MediaQuery.of(context).size.width.toInt(),
                height: 150,
                zoom: 13),
          )),
    ),
  )
)

Answer 4

I created a function that gets longitude and latitude and returns the link of image from mapbox:

String getStaticImageWithMarker(double latitude, double longitude) {
return 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/' +
    'geojson(%7B%22type%22%3A%22Point%22%2C%22coordinates%22%3A%5B$longitude%2C$latitude%5D%7D)/$longitude,$latitude,16/500x300?' +
    'access_token=your token from mapbox';
}

after that you can use image box from web to get the place image.