[EDIT] Impossible to display two vectorLayers // Old :Second TileProvider from second source is not transparent

[GaelleJoubert]

I am trying to display some tiles from a custum server and with a custum theme.

I have two sources and tile provider, one for the main map, and the other is to draw the "contours" (wich is the levels lines on a topographic map).

My problem is that when I add the "contour" tile provider, it hides the map bellow.
I would like the "backgroubnd of contour to be transparent.

The style I use is the exact copy of the Json that can be found at this adress : https://tile.map.api-k.com/styles/topo/style.json

My code is the following :

//The Vector layer used as a children of Flutter Map
VectorTileLayer(
          theme: mapTheme(),
          backgroundTheme: backgroundTheme(), //I have tried to comment this line, no différence
          tileProviders: TileProviders(
              {
                'openmaptiles': cachingTileProvider(urlTemplate()),
                'contours':cachingTileProvider(contourUrlTemplate()),
               }),
        ),


VectorTileProvider cachingTileProvider(String urlTemplate) {
  return MemoryCacheVectorTileProvider(
      delegate: NetworkVectorTileProvider(
          urlTemplate: urlTemplate,
          // this is the maximum zoom of the provider, not the
          // maximum of the map. vector tiles are rendered
          // to larger sizes to support higher zoom levels
          maximumZoom: 14),
      maxSizeBytes: 1024 * 1024 * 2);
}

Theme mapTheme() {
  return ProvidedThemes.apikTheme(); //I have added the theme available at the link I gave earlier, into provided themes.
}

backgroundTheme() {
  return mapTheme().copyWith(types: {ThemeLayerType.background, /*ThemeLayerType.fill*/});
}

String urlTemplate() {
  return "https://tile.map.api-k.com/data/planet/{z}/{x}/{y}.pbf";
}

String contourUrlTemplate() =>
    "https://tile.map.api-k.com/data/contour/{z}/{x}/{y}.pbf";

In my theme, I tried to modify the background layer , with the following code :

{
        "id": "background",
        "type": "background",
        "paint": {
          "background-color": "#ffff38", "fill-opacity": 0.01
        }
      },

I can see it has some impact, because when I change the color, the color of my background changes. But it looks like fill-opacity has no influence ...

Also, I have an error that is present only when I add the contour TileProvider :

Here is some screenshots to illustrate :

The map WITHOUT contour :

The map with contour but with background that is not transparent

Same with another color as background

[GaelleJoubert]

Update :
I tried many different things, I though I should write them here to help.

First, about the error displayed, I found the origin, it is the line : ""text-field": "{elev} m"," in the Json file I use for the style.
Once commented out, the error disapear.

Then about the background, I tried many things :

1- I deleted the "background" from the style :
First I though it was not working, because I saw only the contour lines and not the map behind, and then I realised, The color I saw in the background is the one from "scaffoldBackgroundColor" from my AppTheme. I confirmed it by changing this color, and the background of my contour lines did change.

So it seems like the tileProvider is not able to paint both the 'openMaptiles' and the 'contour'.

TileProviders(
            // Name must match name under "sources" in theme
              {
                'openmaptiles': cachingTileProvider(urlTemplate()), //I can see that only when I comment the next line
                'contours':cachingTileProvider(contourUrlTemplate()), //When i comment this line I can see the map
               }),

I tryed also to add two background layers with the different sources like this :

{
        "id": "backgroundc",
        "type": "background",
        "source": "contours",
        "paint": {
          "background-opacity":0,
          "fill-opacity": 0,
          "background-color": "#f8f8f8"
        }
       },
      {
        "id": "background",
        "type": "background",
        "source": "openmaptiles",
        "paint": {
         // "background-opacity":0,   
         // "fill-opacity": 0,
          "background-color": "#f8f8f8"  
        }
      },

On the previous code, I tryed to comment/uncomment various lines. I noticed the following behaviour :

• if I uncomment background color, I have tha background color specified
• "source" doesn't matter : I always have the background behind the contour lines, no matter which sources is specified and even if I don't specify a source.

Then I thought : maybe I can Make it work with two differents VectorTileLayer.

So I tried the following code :

FlutterMap(
      mapController: widget.mapController,
      options: MapOptions(
        enableScrollWheel: true,
        center: _pos,
        maxZoom: 18,
        bounds:  getBoundsFromKipperList(_pos, _kippersList),
        boundsOptions: FitBoundsOptions(padding: EdgeInsets.all(80), maxZoom: 15),
        interactiveFlags: InteractiveFlag.pinchZoom | InteractiveFlag.drag |InteractiveFlag.pinchMove, //To remove rotation
      ),
      children: [

        VectorTileLayer(
          theme: mapTheme(),
          //backgroundTheme:backgroundTheme(),
          tileProviders: TileProviders(
            // Name must match name under "sources" in theme
              {
                'openmaptiles': cachingTileProvider(urlTemplate()),

               }),
        ),
        VectorTileLayer(
          theme: mapThemeContour(),
          backgroundTheme: backgroundThemeContour(),//backgroundTheme(),
          tileProviders: TileProviders(
            // Name must match name under "sources" in theme
              {
                'contours':cachingTileProvider(contourUrlTemplate()),
              }),
        ),

TileLayer(
//Tile layer with raster url
)
]);

And with this code, I have the same result :

• The Map is displayed only if the VectorTileLayer with contour is commented out
• If I try with both Vector Layers, only the contour is display
• The Raster layer I provided as well with FlutterMap works well on top !
  -I have the same behaviour with background, if not specified I have the the scaffold background color
• If secified, I see the color specified.

About the theme used for the backgroundTheme() the code is the following :

Map<String, dynamic> apikThemeContourData() {
  return {
    "version": 8,
    "name": "Topo map",
    "metadata": {
      "mapbox:type": "template",
      "mapbox:groups": {
        "1444849364238.8171": {
          "collapsed": false,
          "name": "Buildings"
        },
        "1444849354174.1904": {
          "collapsed": true,
          "name": "Tunnels"
        },
        "1444849388993.3071": {
          "collapsed": false,
          "name": "Land"
        },
        "1444849242106.713": {
          "collapsed": false,
          "name": "Places"
        },
        "1444849382550.77": {
          "collapsed": false,
          "name": "Water"
        },
        "1444849345966.4436": {
          "collapsed": false,
          "name": "Roads"
        },
        "1444849334699.1902": {
          "collapsed": true,
          "name": "Bridges"
        }
      },
      "mapbox:autocomposite": false
    },
    "sources": {
    
      "contours": {
        "type": "vector",
        "url": "https://tile.map.api-k.com/data/contour.json"
      }
    },
    "sprite": "https://tile.map.api-k.com/styles/topo/sprite",
    "glyphs": "https://tile.map.api-k.com/fonts/{fontstack}/{range}.pbf",
    "layers": [
     /* {
        "id": "background",
        "type": "background",
        "source": "contours",
        "paint": {
          //"background-opacity":0,
          "background-color": "#f88080", "fill-opacity": 0
          //"background-color": "#f8f8f8"
        }
       },*/
     
      {
        "id": "contour_label",
        "type": "symbol",
        "metadata": {},
        "source": "contours",
        "source-layer": "contour",
        "filter": [
          "all",
          [
            "==",
            [
              "%",
              [
                "get",
                "elev"
              ],
              100
            ],
            0
          ]
        ],
        "layout": {
          "text-size": {
            "base": 1,
            "stops": [
              [
                15,
                9.5
              ],
              [
                20,
                12
              ]
            ]
          },
          "text-allow-overlap": false,
          "symbol-avoid-edges": true,
          "text-ignore-placement": false,
          "symbol-placement": "line",
          "text-padding": 10,
          "text-rotation-alignment": "map",
          "text-field": "{${10}} m",
          "text-font": [
            "Noto Sans Regular"
          ]
        },
        "paint": {
          "text-color": "hsl(0, 0%, 37%)",
          "text-halo-color": "hsla(0, 0%, 100%, 0.7)",
          "text-halo-width": 1.5
        }
      },
      {
        "id": "contour_index",
        "type": "line",
        "source": "contours",
        "source-layer": "contour",
        "filter": [
          "all",
          [
            "==",
            [
              "%",
              [
                "get",
                "elev"
              ],
              100
            ],
            0
          ]
        ],
        "layout": {
          "visibility": "visible"
        },
        "paint": {
          "line-color": "#d45500",
          "line-opacity": 0.7,
          "line-width": 1.1
        }
      },
      {
        "id": "contour",
        "type": "line",
        "source": "contours",
        "source-layer": "contour",
        "filter": [
          "all",
          [
            "!=",
            [
              "%",
              [
                "get",
                "elev"
              ],
              100
            ],
            0
          ]
        ],
        "layout": {
          "visibility": "visible"
        },
        "paint": {
          "line-color": "#d45500",
          "line-opacity": 0.4,
          "line-width": 0.6
        }
      },
     
    ],
    "id": "osm-bright",
    "owner": ""
  };

}

If you have any idea how to display two vector tile ontop of each other, that would be great.

Thanks you very much !

[GaelleJoubert]

Edit 2 :

I noticed another weird behavior.
When I try to make it works with two Vector layers, like with the following code :

VectorTileLayer(
          theme: mapTheme(),
          backgroundTheme:backgroundTheme(),
          tileProviders: TileProviders(
            // Name must match name under "sources" in theme
              {
                'openmaptiles': cachingTileProvider(urlTemplate()),

               }),
        ),
        VectorTileLayer(
          theme: mapThemeContour(),
          tileProviders: TileProviders(
            // Name must match name under "sources" in theme
              {
                'contours':cachingTileProvider(contourUrlTemplate()),
              }),
        ),

And I gave no background two the second vector Layer (contour), but I did gave a background to the 1st vector layer (map), I have the following result :

• The background from the map vector layer is displayed
• The map vector layer is NOT displayed
• The contour vector layer is displayed.

As usual, if the contour vector layer is commented out, the map vector layer suddenly displays well.
And if the map vector layers is commented out, the contour vector layer is displayed, without background this time.

So it really behave like it cannot display two Vector layer at a time ...

If anyone has an idea on how to fix this, that would be amazing !

[DanielBerrioB]

I'm wondering if maybe you're missing the openmaptiles key in the sources object, so instead of this:

"sources": {
      "contours": {
        "type": "vector",
        "url": "https://tile.map.api-k.com/data/contour.json"
      }
    },

You'd have something like:

"sources": {
      "openmaptiles": {
        "type": "vector",
        "url": "https://host/whateverthing/openmaptiles.json"
      },
      "contours": {
        "type": "vector",
        "url": "https://tile.map.api-k.com/data/contour.json"
      }
    },

Maybe you can try that. If that doesn't work can I see both themes if possible, for the openmaptiles layer and the contours layer.

[harsh24]

@GaelleJoubert
I am not able to display hillshade using raster- dem tiles.
I see in your style, you are using hillshade, does it work for you?

[greensopinion]

This may be fixed by #137 which is now available as version 3.3.3 of this library.
Can you try updating to the latest version and see if it fixes the problem that you observed?

You can try it out with flutter-vector-map-tiles-examples using the MapTiler Outdoor theme.