https://github.com/flatypus/react-offline-maps

A simple offline maps component for React
https://github.com/flatypus/react-offline-maps

cache cachestorage google-maps google-maps-api leaflet leafletjs maps offline react reactjs

Last synced: 24 days ago
JSON representation

A simple offline maps component for React

• Host: GitHub
• URL: https://github.com/flatypus/react-offline-maps
• Owner: flatypus
• License: mit
• Created: 2024-05-02T22:10:40.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-05-11T13:43:15.000Z (6 months ago)
• Last Synced: 2024-09-14T12:40:20.906Z (about 2 months ago)
• Topics: cache, cachestorage, google-maps, google-maps-api, leaflet, leafletjs, maps, offline, react, reactjs
• Language: TypeScript
• Homepage: https://npmjs.com/package/react-offline-maps
• Size: 264 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Offline Maps

## A simple offline maps component for React

Traditional maps, like [leaflet](https://github.com/Leaflet/Leaflet), require an internet connection to continually pull tile data from map servers. This is a drop-in react component that renders a generic ['slippy map'](https://wiki.openstreetmap.org/wiki/Slippy_map), but with built-in browser caching. 

Tiles are first pulled from the internet with a given connection, and then saved in both a local cache and an in-browser cache (via the CacheStorage API). The next time the tile is to be requested, the component checks for the resource in the in-memory cache first. If the page is reloaded, no problem! The component simply pulls the resource from the CacheStorage. This allows for clean and efficient map rendering with minimal latency waiting for tiles to load, even when on connection.

## Installation

You may choose any of npm | yarn | pnpm | bun | etc. to install this package.

```bash

npm install react-offline-maps

```

This map component also features a couple of cool but useful configuration features:

```typescript

      ),

      latitude: 49.541125,

      longitude: -112.15398,

    },

  ]}

/>

```

The API also allows for rendering lines directly on the map through the mapLines parameter.



If you have any questions or concerns, please feel free to open an issue, or even leave a Pull Request if you want more customization! And if you happen to use this in a project, please leave a star! 🌟