I have a React Web application and I have been asked to make an offline map so after I did a lot of research and to find a map that match also the features that the design have I finally found react-leaflet is the best choice for using a map.

But after I finished the installation for the map and the tile layer was using HTTPS to draw the map depending on the lat, lang, and center.

I have been asked one more time to turn off the map into an offline map so I figured out a solution after a little bit of search: which is to select an area on the map from osm (Open Street Map) and download an XML file that contains node tags that are responsible for drawing the map after that I used an application to read that file which is (Maperitive).

I made and export for the map into small tiles layers. Finally, I added the tiles folder to my application as the attached image, and from the component, I used the path to navigate to that tiles folder to load the tiles. But the response is getting for me text/HTML and it should be image/png.

import React from "react";
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
import L from "leaflet";
import "styles/modules/vehicle/map.scss";

const Map: React.FC<any> = () => {

  const getIcon = (iconSize) => {
    return L.icon({
      iconUrl: require("assets/images/png/location.png"),
      iconSize,
    });
  };

  return (
    <div className="map">
      <MapContainer 
        center={[30.02161, 31.25146]}
        zoom={18}
        scrollWheelZoom={false}
        style={{ width: "100%", height: "100%" }}
      >
        <TileLayer url='assets/tiles/{z}/{x}/{y}.png' />
        <Marker position={[30.02161, 31.25146]} icon={getIcon(60)}>
          <Popup>
            A pretty CSS3 popup. <br /> customizable.
          </Popup>
        </Marker>
      </MapContainer>
    </div>
  );
};

export default Map;