CODEWITHSUNDEEP
flutterfluttermap
slp
slp

Reputation: 23

flutter_map: Best way to embed whole world map (just landmass, no details)?

I'm developing an aviation app in Flutter, currently using flutter_map which seems to be a great tool and easily allows to display custom Markers. I need to preload the whole world map in the app, but really no details, pretty much like on the picture below. Landmasses and country borders ideally, that's it.

I tried flutter_map_tile_caching, great plugin indeed, but downloading tiles from openstreetmap as I do now for limited areas, it would be a totally unrealistic amount of data, even limiting at a very low zoom level... And I don't need those details.

I'm new in the "mapping business", so any hint about how to achieve this would be most welcome. I'm open to using other libraries if need be.

Best regards!

enter image description here

Upvotes: 0

Views: 2086

Answers (2)

Eric Aig
Eric Aig

Reputation: 1094

I use https://mapstyle.withgoogle.com/ to generate a json file which I then link to my app via pubspec.yaml. For example this json removes quite a lot of info from maps:

[
    {
      "elementType": "labels",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "administrative.land_parcel",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "administrative.neighborhood",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "labels",
      "stylers": [
        {
          "visibility": "on"
        }
      ]
    }
  ]

Add it to pubspec.yaml like:

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/empty_map_style.json

You should then do something like this to load the styles:

  void _setMapStyles() async {
      final _style =
          await MapUtils.getStyles("assets/empty_map_style.json");

      (await _mapCtrl.future).setMapStyle(_style);
  }

I would call this method inside onMapCreated of GoogleMap widget

Upvotes: 0

slp
slp

Reputation: 23

Ok, not much input here. I found a decent solution for now, caching maps from openstreetmaps at zoom 7 for the most relevant region, and then at zoom 4 for the wider region, displaying the best zoom one on top with a transparent default tile, so that the lower resolution one will show around. That keeps the downloaded files to a decent size. For the whole globe, there's a possibility to use shapes files I believe. (like https://osmdata.openstreetmap.de/data/land-polygons.html or such), but didn't make it work with flutter_map yet. I'll investigate in a further iteration. Cheers!

Upvotes: 1

Related Questions