2

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),
            ],
          )
Ali Abbas
  • 1,415
  • 12
  • 19

1 Answers1

2

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...

Amirali Eric Janani
  • 1,477
  • 3
  • 10
  • 20
  • Salam Amirali, Thanks for the answer and the efforts. The solution that you provided will work of course but I am asking for rendering the tiles colors inside the mobile app not in the server. Let's see if anyone else came with that solution that I wanted, or your answer will be the only accepted answer :) – Ali Abbas Mar 28 '23 at 20:33