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:
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),
],
)
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'
,),
or
TileLayer(
urlTemplate: 'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'
,),
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...