offline-map-react
Version:
<h1 style="text-align: center">Welcome to offline-map-react 👋</h1> <p> <a href="https://www.npmjs.com/package/offline-map-react" target="_blank"> <img alt="Version" src="https://img.shields.io/npm/v/offline-map-react.svg"> </a> <a href="ht
261 lines (205 loc) • 7.25 kB
Markdown
<h1 style="text-align: center">Welcome to offline-map-react 👋</h1>
<p>
<a href="https://www.npmjs.com/package/offline-map-react" target="_blank">
<img alt="Version" src="https://img.shields.io/npm/v/offline-map-react.svg">
</a>
<a href="https://github.com/fernandes-dev/offline-map-react" target="_blank">
<img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" />
</a>
<a href="#" target="_blank">
<img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
</a>
<a href="https://twitter.com/fernandesdotts" target="_blank">
<img alt="Twitter: fernandesdotts" src="https://img.shields.io/twitter/follow/fernandesdotts.svg?style=social" />
</a>
</p>
> Project make with ReactJS and Leaflet to show specified points and heat points in the map, without active internet connexion.
* [Leaflet JS v1.8.0](https://leafletjs.com)
* [React Leaflet v4.0.0](https://react-leaflet.js.org/)
* [Leaflet.LocateControl v0.76.1](https://github.com/domoritz/leaflet-locatecontrol)
* [Leaflet.Offline v2](https://github.com/allartk/leaflet.offline)
* [Leaflet.WebglTemperatureMap v0.2.0](https://github.com/sanchezweezer/Leaflet.webGlTemperatureMap#readme)
* [Leaflet.Heat](https://github.com/Leaflet/Leaflet.heat/blob/gh-pages/dist/leaflet-heat.js)
```sh
npm i offline-map-react
```
```html
<head>
...
<!-- LEAFLET -->
<link href='https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css' rel='stylesheet'/>
<script
charset='utf-8'
src='https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js'
></script>
<link
crossorigin=''
href='https://unpkg.com/leaflet@1.8.0/dist/leaflet.css'
integrity='sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=='
rel='stylesheet'
/>
<script
crossorigin=''
integrity='sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=='
src='https://unpkg.com/leaflet@1.8.0/dist/leaflet.js'
></script>
...
</head>
```
```tsx
import React, {useEffect, useState} from 'react';
import './App.css';
import {OfflineMap} from 'offline-map-react'
import {ICheckpoint} from "offline-map-react/dist/cjs/types/src/lib/LeafletMap/index.types";
function App() {
const [checkpoints, setCheckpoints] = useState<ICheckpoint[]>([])
const OfflineMapInstance = OfflineMap({
checkpoints,
})
useEffect(() => {
window.navigator.geolocation.getCurrentPosition(position => {
// checkpoints will be renderer in map
setCheckpoints([{
position: {lat: 40.750749, lng: -74.077218},
id: Math.random(),
text: 'Ponto de Controle 1',
alreadyCollected: false, // default false
}])
})
}, [])
useEffect(() => {
// create heat points if map instance exists
// [lat, lng, intensity]
OfflineMapInstance.setHeatPoints([40.750749, -74.077218, 0.5])
// set map view on user location
OfflineMapInstance.setMapViewOnUserLocation()
}, [OfflineMapInstance.map])
return (
<div className="App">
{/* saved tiles number */}
{OfflineMapInstance.progressSaveMap}
{/* number of total tiles to save */}
{OfflineMapInstance.totalLayersToSave}
{/* call te function to render the map */}
{OfflineMapInstance.renderMap(
// can be pass any children if is a valid React Leaflet child
)}
{/* custom buttons to save and delete map from cache */}
<button onClick={
() => mapInstance?.offlineMapControls().saveCurrentMapView()
}>
Salvar Mapa
</button>
<button onClick={
() => mapInstance?.offlineMapControls().deleteCurrentMapView()
}>
Excluir Mapa
</button>
{/* custom button to toggle user location */}
<button onClick={
() => mapInstance?.offlineMapControls().toggleUserLocation()
}>
Alternar Localização
</button>
{/* progress bar when save map */}
{
mapInstance?.progressSaveMap > 0 && (
<progress id="file"
value={Number((mapInstance?.progressSaveMap / mapInstance?.totalLayersToSave) * 100).toFixed(2)}
max="100">
{Number((mapInstance?.progressSaveMap / mapInstance?.totalLayersToSave) * 100).toFixed(2)}%
</progress>
)
}
{/* show gps accuracy */}
<div>
GPS Accuracy: {mapInstance?.accuracy} meters
</div>
{/* show tutorial do calibrate gps */}
<div>
{mapInstance?.calibrateGpsTutorial()}
</div>
{/* reset heatlayer render */}
<div>
{mapInstance?.resetHeatLayerRender()}
</div>
</div>
);
}
export default App;
```
* Without "height" and "width" property the map will be not render
```css
height: 400px;
width: 800px;
}
```
-
`Map.tsx`
```tsx
import {OfflineMap} from "offline-map-react";
function Map() {
const mapInstance = OfflineMap({
checkpoints: [], // pass your checkpoints
})
return (mapInstance.renderMap({/* Optional: Pass valid React Leaflet children */}))
}
export default Map
```
-
`DynamicMap.tsx`
```tsx
import dynamic from 'next/dynamic'
function DynamicMap() {
const DynamicComponentWithNoSSR = dynamic(
() => import('./Map'),
{ssr: false}
)
return (
<DynamicComponentWithNoSSR />
)
}
export default DynamicMap
```
-
`Home.tsx`
```tsx
import type {NextPage} from 'next'
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import DynamicMap from "./DynamicMap";
const Home: NextPage = () => {
return (
<div className={styles.container}>
<Head>{/* your header and Leaflet CDN's */}</Head>
<main className={styles.main}>
<DynamicMap />
</main>
<footer className={styles.footer}>
footer
</footer>
</div>
)
}
export default Home
```
👤 **Eduardo Fernandes**
* Twitter: [@fernandesdotts](https://twitter.com/fernandesdotts)
* Github: [@fernandes-dev](https://github.com/fernandes-dev)
* LinkedIn: [@fernandes-dev](https://linkedin.com/in/fernandes-dev)
Contributions, issues and feature requests are welcome!<br />Feel free to
check [issues page](https://github.com/fernandes-dev/offline-map-react/issues).
Give a ⭐️ if this project helped you!
***
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_