android – Including Markers to Maps Utilizing the TomTom Static Picture API

I’m working with the TomTom Static Picture API to generate map photographs for my flutter software. I want to show markers (pins) on particular places inside the map. Nevertheless, I couldn’t discover detailed documentation or examples on how one can implement markers within the static photographs.

How can I add markers to maps generated utilizing the TomTom Static Picture API? Are there particular parameters or codecs that should be included within the API request URL to realize this?

I attempted utilizing the TomTom Static Picture API with a typical URL format to generate map photographs. Here is the URL I used: https://api.tomtom.com/map/1/staticimage?key=<TomTom_API_Key>&zoom=16&middle=37.4219983,-122.084&format=jpg&layer=primary&fashion=primary&width=600&peak=300

I used to be anticipating to have the ability to add markers (pins) at particular coordinates on the map by appending the related parameters, however I could not discover any documentation or clear directions on how one can embody markers.

Notice: I simply want to indicate the marker (pin) on the map. there is no such thing as a difficulty inside the app code.

That is the code i used to show a picture of the map inside my app:

import 'dart:convert';

import 'package deal:favorite_places/fashions/place.dart';
import 'package deal:flutter/materials.dart';
import 'package deal:location/location.dart';
import 'package deal:http/http.dart' as http;

class LocationInput extends StatefulWidget {
  const LocationInput({
    tremendous.key,
  });

  @override
  State<LocationInput> createState() {
    return _LocationInputState();
  }
}

class _LocationInputState extends State<LocationInput> {
  PlaceLocation? _pickedLocation;
  var _isGettingLocation = false;

  String get locationImage {
    if (_pickedLocation == null) {
      return '';
    }

    closing lat = _pickedLocation!.latitude;
    closing lng = _pickedLocation!.longitude;

    return 'https://api.tomtom.com/map/1/staticimage?key={API_KEY}&zoom=4&middle=$lng,$lat&format=jpg&layer=primary&fashion=primary&width=600&peak=300&view=Unified&language=en-GB';
  }

  void _getLocation() async {
    Location location = new Location();

    bool serviceEnabled;
    PermissionStatus permissionGranted;
    LocationData locationData;

    serviceEnabled = await location.serviceEnabled();
    if (!serviceEnabled) {
      serviceEnabled = await location.requestService();
      if (!serviceEnabled) {
        return;
      }
    }

    permissionGranted = await location.hasPermission();
    if (permissionGranted == PermissionStatus.denied) {
      permissionGranted = await location.requestPermission();
      if (permissionGranted != PermissionStatus.granted) {
        return;
      }
    }

    setState(() {
      _isGettingLocation = true;
    });

    locationData = await location.getLocation();
    closing lat = locationData.latitude;
    closing lng = locationData.longitude;

    if (lat == null || lng == null) {
      return;
    }

    closing url = Uri.parse(
        'https://api.tomtom.com/search/2/reverseGeocode/$lat,$lng.json?key={API_key}&radius=100');

    closing response = await http.get(url);
    closing resData = json.decode(response.physique);
    closing deal with = resData['addresses'][0]['address']['freeformAddress'];

    print(lat);
    print(lng);

    setState(() {
      _pickedLocation =
          PlaceLocation(latitude: lat, longitude: lng, deal with: deal with);
      _isGettingLocation = false;
    });
  }

  @override
  Widget construct(BuildContext context) {
    Widget previewContent = Textual content(
      'No location chosen',
      textAlign: TextAlign.middle,
      fashion: Theme.of(context).textTheme.bodyLarge!.copyWith(
            colour: Theme.of(context).colorScheme.onBackground,
          ),
    );

    if (_pickedLocation != null) {
      previewContent = Picture.community(
        locationImage,
        match: BoxFit.cowl,
        width: double.infinity,
        peak: double.infinity,
      );
    }

    if (_isGettingLocation) {
      previewContent = const CircularProgressIndicator();
    }

    return Column(
      youngsters: [
        Container(
          height: 170,
          width: double.infinity,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            border: Border.all(
              width: 1,
              color: Theme.of(context).colorScheme.primary.withOpacity(0.2),
            ),
          ),
          child: previewContent,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            TextButton.icon(
              icon: const Icon(Icons.location_on),
              label: const Text('Get Current Location'),
              onPressed: _getLocation,
            ),
            TextButton.icon(
              icon: const Icon(Icons.map),
              label: const Text('Select on Map'),
              onPressed: () {},
            ),
          ],
        )
      ],
    );
  }
}