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.
N Sudha is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.