Mapbox in flutter - getting started
1 min read

Mapbox in flutter - getting started

Install flutter_map and latlong2 packages and then set the following as the child of the page.

Column(
        children: [
          Flexible(
            child: FlutterMap(
              options: MapOptions(
                center: LatLng(51.5, -0.09),
                zoom: 5,
              ),
              children: [
                TileLayer(
                  urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                  userAgentPackageName: 'dev.fleaflet.flutter_map.example',
                ),
              ],
            ),
          ),
        ],
      ),

Modify the TileLayer to use MapBox

TileLayer(
                  urlTemplate:
                        'https://api.mapbox.com/styles/v1/suhairhassan		                              /cl84ao15l00en14pmjtqlfx32/tiles/256/{z}/{x}/{y}@2x?
                        access_token=<your access  token>',
                  additionalOptions: {'id': 'mapbox.mapbox-streets-v8'},
),