Using Open Sea Map

[andy130342]

Has anyone already managed to use Open Sea Map in flutter_map? If not, can anyone explain the necessary steps to get there?

[ibrierley]

I think it should work ok, just add it as a layer on top of your normal tile layer iirc. It was a long time ago since I saw it, so can't remember exactly.

[andy130342]

Maybe this is a stupid question, but I think it should look somehow like this:
layers: [
TileLayerOptions(
urlTemplate: "https://{s}.tiles.openseamap.org/seamark/{z}/{x}/{y}.png",
subdomains: ['a', 'b', 'c'],
),
But this seems not to be the right URL. Do you know the right URL or where I could get it?

[ibrierley]

I don't think it supports subdomains, try...

layers: [
TileLayerOptions(
urlTemplate: "https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png",
),

[andy130342]

Thanks a lot, that works.

[tobiasht]

I am unable to see the base map layer, only the overlays. What am I missing?

[ibrierley]

I don't think you're actually including any other layer in your code ? Include another tile layer first with which ever map base you want ?

[tobiasht]

I´ve already tried to have another map as the base, but the gray background covers it unfortunately.
But maybe I am doing it wrong?

class OpenSeaMap extends StatelessWidget {
  const OpenSeaMap({super.key});

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(),
      children: [
        TileLayer(
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
        ),
        TileLayer(
          urlTemplate: "https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png",
        ),
      ],
    );
  }
}

[JaffaKetchup]

Try setting the background color of the sea map to be transparent. (https://docs.fleaflet.dev/layers/tile-layer#:~:text=It%20is%20possible%20to%20use%20more%20than%20one%20tile%20layer%2C%20and%20can%20be%20used%20with%20transparency/opacity.)

[tobiasht]

Thank you so much for the help. That's a parameter i wasn't aware of. Kinda weird it's not set to transparent by default, but it's probably a reason for it. In the end i just had to add the following line:

backgroundColor: Colors.transparent,

Final code below

class OpenSeaMap extends StatelessWidget {
  const OpenSeaMap({super.key});

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(),
      children: [
        TileLayer(
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
        ),
        TileLayer(
          backgroundColor: Colors.transparent,
          urlTemplate: "https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png",
        ),
      ],
    );
  }
}

[JaffaKetchup]

Great!

It's grey as default because:

• That's 'traditional' for mapping libraries instead of white, and resolves confusion about whether the map widget is working at all
• Most users will have one tile layer, so the above applies

Maybe we could do some fancy logic to set background color to transparent if it's not the first layer in the children list. Shouldn't be too hard?