Tengo una aplicación web React y me pidieron que hiciera un mapa fuera de línea, así que después de investigar mucho y encontrar un mapa que coincidiera también con las características del diseño, finalmente encontré que react-leaflet es la mejor opción para usar. un mapa.

Pero después de que terminé la instalación del mapa y la capa de mosaico estaba usando HTTPS para dibujar el mapa según la latitud, el idioma y el centro.

Me pidieron una vez más que apague el mapa y lo convierta en un mapa fuera de línea, así que encontré una solución después de un poco de búsqueda: seleccionar un área en el mapa de osm (Open Street Map) y descargar un archivo XML que contiene etiquetas de nodos que se encargan de dibujar el mapa, después de eso usé una aplicación para leer ese archivo que es (Maperitive).

Hice y exporté el mapa en pequeñas capas de mosaicos. Finalmente, agregué la carpeta de mosaicos a mi aplicación como la imagen adjunta y, desde el componente, usé la ruta para navegar a esa carpeta de mosaicos para cargar los mosaicos. Pero la respuesta para mí es texto/HTML y debería ser imagen/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;