Question: Multiple layer sources for react-leaflet

[DRMPN]

Description

Hello,

I'm encountering an issue with implementing offline map functionality using multiple tile sources.

My intended behavior is for the map to use an online tile source when an internet connection is available and automatically fall back to a local server source when offline.

While the local server itself appears to be working, the map tiles are not displaying correctly. Instead, the layers seem to be overlapping each other, resulting in a blank or incomplete map.

Thank you for your help, and for your work on this fantastic project!

Server

I began by creating and downloading several PMTiles files. These are being served locally using the pmtiles serve . command, with Nginx acting as the reverse proxy.

To validate the server setup, I successfully tested the tile endpoints. The local URLs, structured as http://127.0.0.1/pmtile-1/{z}/{x}/{y}.mvt and http://127.0.0.1/pmtile-2/{z}/{x}/{y}.mvt, correctly return vector tile data with HTTP 200 (Success) or 204 (No Content) status codes.

Client

Following that, I created a custom layer within the react-leaflet framework, defined as follows:

import { leafletLayer } from "protomaps-leaflet";
import { useEffect } from "react";
import { useMap } from "react-leaflet";

export const ProtomapsTileLayer = () => {
  const map = useMap();

  const sources = {
    "": {
      url: "https://data.source.coop/protomaps/openstreetmap/v4.pmtiles",
    },
    pmtiles-1: {
      url: "http://127.0.0.1/pmtiles-1/{z}/{x}/{y}.mvt",
    },
    pmtiles-2: {
      url: "http://127.0.0.1/pmtiles-2/{z}/{x}/{y}.mvt"",
    },
    pmtiles-3: {
      url: "http://127.0.0.1/pmtiles-3/{z}/{x}/{y}.mvt"",
    },
  };

  useEffect(() => {
    const protomapsLayer = leafletLayer({
      sources: sources,
      flavor: "light",
      lang: "en",
    });

    protomapsLayer.addTo(map);

    return () => {
      map.removeLayer(protomapsLayer);
    };
  }, [map]);

  return null;
};

Here's how I use MapContainer:

<MapContainer
       ref={mapRef}
       className="h-100 w-100"
       ...
      >
        <ProtomapsTileLayer/>
       ...
</MapContainer>

[bdon]

Where do you specify how pmtiles-1, pmtiles-2 and pmtiles-3 are drawn?

[DRMPN]

I don't think that I specify that anywhere, I guess I use default settings with flavor: "light".

Anyway, I've found a way to use N number of layers with react-leaflet.

Firstly, I define ProtomapsTileLayer.jsx using Core API as:

import { leafletLayer } from "protomaps-leaflet";

import {
  createElementObject,
  createTileLayerComponent,
  updateGridLayer,
} from "@react-leaflet/core";

export const ProtomapsTileLayer = createTileLayerComponent(
  function createTileLayer({ ...options }, context) {
    const layer = leafletLayer(options);
    return createElementObject(layer, context);
  },
  updateGridLayer
);

Secondly, I use it in my map component:

<MapContainer
       ref={mapRef}
       className="h-100 w-100"
       ...
      >
        <LayersControl position="bottomleft">
          <LayersControl.BaseLayer
            checked={true}
            name="Protomaps Tile Layer"
          >
            <ProtomapsTileLayer
              url="http://127.0.0.1/pmtiles-1/{z}/{x}/{y}.mvt"
              flavor="light"
              lang="en"
            />
        </LayersControl.BaseLayer>
        ...
      </LayersControl>
      ...
</MapContainer>