Add a layer/tile to the map

Question

I'm working on a project in Flutter with Mapbox and I'm looking for a way to import a layer or tiles to my map, like this exemple (in JS) : https://docs.mapbox.com/mapbox-gl-js/example/adjust-layer-opacity/

So far I'm able to diplay the map :

import 'package:mapbox_gl/mapbox_gl.dart';

class MapsDemo extends StatelessWidget {

  static const String ACCESS_TOKEN = "...";
  MapboxMapController mapController;

  static const LatLng SOURCE_LOCATION = LatLng(0.0, 0.0);

  void _onMapCreated(MapboxMapController controller) {
    mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: MapboxMap(
      accessToken: MapsDemo.ACCESS_TOKEN,
      onMapCreated: _onMapCreated,
      initialCameraPosition: const CameraPosition(target: SOURCE_LOCATION),
    ));
  }
}

void main() {
  runApp(MaterialApp(home: MapsDemo()));
}

So here is my complete question : Is there a way to get a x*x square (or cicle) layer/tile for a given position and display it over a map, at the correct coordinates ?

Thx !

Answer 1

Best way to do it is to use flutter_map as recommanded by Akif: https://pub.dev/packages/flutter_map https://github.com/fleaflet/flutter_map

In their exemple, the page "overlay_image" fits perfectly with my requirements.

Answer 2

I'm not sure mapbox_gl package has layer support but there is a complete package to find adding layers on the map. Maybe you can check this.

https://pub.dev/packages/flutter_map

EDIT: There are two methods in MapboxMapController. You can use them.

Future<List> queryRenderedFeatures(
     Point<double> point, List<String> layerIds, List<Object> filter) async {
   return MapboxGlPlatform.getInstance(_id)
       .queryRenderedFeatures(point, layerIds, filter);
 }

 Future<List> queryRenderedFeaturesInRect(
     Rect rect, List<String> layerIds, String filter) async {
   return MapboxGlPlatform.getInstance(_id)
       .queryRenderedFeaturesInRect(rect, layerIds, filter);
 }