greensopinion / flutter-vector-map-tiles

A plugin for `flutter_map` that enables the use of vector tiles.
BSD 3-Clause "New" or "Revised" License
136 stars 67 forks source link

Can't display pg_tileserv and postgis tiles #203

Open ignarl opened 6 months ago

ignarl commented 6 months ago

Hi! I'm trying to display custom tiles served by a local pg_tileserv and postgis db.

On my browser I can see correctly the preview of my map tiles: http://localhost:7800/public.get_mvt_ocho.html#13.67/-34.86908/-56.22318

image

This is my flutter code, where the basemap from openstreet maps is correctly being displayed.

          return Column(
            children: [
              Expanded(
                child: FlutterMap(
                  mapController: state.mapController,
                  options: MapOptions(
                    initialCenter:
                        style.center ?? const LatLng(49.246292, -123.116226),
                    initialZoom: style.zoom ?? 10,
                  ),
                  children: [
                    TileLayer(
                      urlTemplate:
                          "http://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
                    ),
                    vp.VectorTileLayer(
                        layerMode: vp.VectorTileLayerMode.vector,
                        tileProviders: style.providers,
                        theme: style.theme)
                  ],
                ),
              ),
            ],
          );

This is my provider:

          final style = vp.Style(
            theme: ss.ThemeReader().read(qStyle()),
            center: const LatLng(
              -33.15488634877726,
              -60.447959645902344,
            ),
            providers: vp.TileProviders(
              {
                'qtiles': vp.NetworkVectorTileProvider(
                  urlTemplate:
                      'http://localhost:7800/public.get_mvt_ocho/{z}/{x}/{y}.pbf',
                  maximumZoom: 14,
                )
              },
            ),
            zoom: 14,
          );

and this is my current style:

dynamic qStyle() => {
      "version": 8,
      "name": "q style",
      "sources": {
        "qtiles": {
          "url": "http://localhost:7800/public.get_mvt_ocho/{z}/{x}/{y}.pbf",
          "type": "vector"
        }
      },
      "layers": [
        {
          "id": "batis",
          "type": "fill",
          "source": "qvtiles",
          "source-layer": "public.get_mvt_diez",
          "paint": {"fill-color": "rgb(12,12,12)"}
        }
      ]
    };

Can you help me debug the issue?

Thank you!

ignarl commented 6 months ago

I got it working with this style:

  {
    "id": "get_mvt_batis",
    "type": "line",
    "source": "qtiles",
    "source-layer": "batis",
    "paint": {"line-color": "#00138C", "line-width": 1}
  },