flutterdartfluttermap

Styling map of flutter_map package


I'm working on a Flutter app that displays an OpenStreetMap (OSM) map. I'm trying to style the map to look like the following image:

enter image description here

However, I haven't been able to find a way to achieve this style directly within the mobile application. All the methods I've come across rely on third-party APIs or rendering the styled tiles of the map on servers.

Has anyone successfully styled an OSM map in a Flutter app to achieve a similar look? If so, what approach did you use?

dependencies:
  flutter_map: ^3.1.0

The code:

FlutterMap(
            options: MapOptions(
              center: LatLng(51.5, -0.09),
              zoom: 5,
            ),
            nonRotatedChildren: [
              AttributionWidget.defaultWidget(
                source: 'OpenStreetMap contributors',
                onSourceTapped: () {},
              ),
            ],
            children: [
              TileLayer(
                urlTemplate:
                    'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                userAgentPackageName: 'dev.fleaflet.flutter_map.example',
              ),
              MarkerLayer(markers: markers),
            ],
          )

Solution

  • Salaam Ali, you can use a map style editor like Mapbox Studio or TileMill to create in the format for the FlutterMap as a custom for yourself.

    for example:

    TileLayer(
     urlTemplate: 'https://basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png'
    ,),
    

    enter image description here

    or

    TileLayer(
     urlTemplate: 'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'
    ,),
    
    

    enter image description here

    at the end you should provide something like this as a custom for yourself:

    TileLayer(
      urlTemplate: 'https://my-custom-tile-server.com/{z}/{x}/{y}.png',
    ),
    

    happy coding...