In my React project, I want to render offline maps. For this purpose I have downloaded map tiles of northern India from QGIS. I have downloaded 4 levels of zoom (10-14), they are stored in the directory src/Assets/map_data/zoom_levels/
The goal is to be able to render all these maps offline on top of each other so that the user is able to go upto 4 zoom levels for the area that I have dowloaded. The first file has min zoom of 10 and max zoom of 10 the second one has min zoom of 11 and a max zoom of 11, so on upto 14.

The problem is that I am unable to render even one offline map using the local mbtile file, and I am unable to understand where the problem lies.

I am new to offline maps and any kind of help/explanation will be really helpful!

Thanks in advance

import React, { Fragment, useEffect, useState, useContext, useRef } from "react";
import {
  MapContainer,
  TileLayer,
  Marker,
  Popup,
  // Polyline,
  Tooltip,
  useMap
} from "react-leaflet";
import L from "leaflet";
import "leaflet.offline";
import "leaflet/dist/leaflet.css";
import LocationIcon from "../Assets/loactionIcon_red.webp";
import moment from "moment";
import { Breadcrumb, Button, DatePicker, Select, Spin } from "antd";
import axiosInstance from "./Interceptor";
import dayjs from "dayjs";
import { ThemeContext } from '../index';
import 'leaflet-mbtiles';
import MBTilesLayer from "./offlineMapMount"

const MapComponent = () => {

  const [map, setMap] = useState(null);
  const mapRef = useRef(null);
  const mbtilesFiles = [
    '/Users/sudhanippani/Desktop/cc/seeker-cc-frontend/src/Assets/map_data/zoom_levels/oci_10.mbtiles',
    '/Users/sudhanippani/Desktop/cc/seeker-cc-frontend/src/Assets/map_data/zoom_levels/oci_11.mbtiles',
    '/Users/sudhanippani/Desktop/cc/seeker-cc-frontend/src/Assets/map_data/zoom_levels/oci_12.mbtiles',
    '/Users/sudhanippani/Desktop/cc/seeker-cc-frontend/src/Assets/map_data/zoom_levels/oci_13.mbtiles',
    '/Users/sudhanippani/Desktop/cc/seeker-cc-frontend/src/Assets/map_data/zoom_levels/oci_14.mbtiles',
  ];

  return (
    <Fragment>
      <Spin size="large" spinning={loading}>
        <MapContainer
          center={
            output?.result?.length > 0
              ? output?.result?.[0]?.positions
              : [33.8716, 74.8946]
          }
          zoom={9}
          style={{ height: "90vh", width: "100%" }}
          ref={setMap}
        >
          <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
          <MBTilesLayer map={map} center={ output?.result?.length > 0 ? output?.result?.[0]?.positions : [33.8716, 74.8946]} zoom ={9}/>

        </MapContainer>

      </Spin>
    </Fragment>
  );
};

export default MapComponent;

This is the MBTilesLayer component in the offlineMapMount.jsx file

import  { useEffect } from 'react';
import L from 'leaflet';
import 'leaflet-mbtiles';

const MBTilesLayer = ({ map , center, zoom}) => {
  useEffect(() => {
    if (!map) return;
    
    console.log(map);
    map.setView(center, zoom);
    // Use the leaflet-mbtiles plugin to add MBTiles layer
    const mbTilesLayer = new L.TileLayer('../src/Assets/map_data/zoom_levels/oci_10.png', {
      minZoom: 10,
      maxZoom: 10
    }).addTo(map);

    // Log the layer and map for debugging
    console.log(mbTilesLayer);
    console.log(map);

    // Clean up the layer when the component is unmounted
    return () => {
      map.removeLayer(mbTilesLayer);
    };
  }, [map]);

  return null;
};

export default MBTilesLayer;

I have even added the scripts that leaflet library asks to add in my index.html file, but even that doesn’t solve the problem.

https://leafletjs.com/download.html

I tried to render offline maps using leaflet, I am unable to render it.