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

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.

Answer 3

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)}'),

👌🏻