Welcome to offline-map-react 👋

> Project make with ReactJS and Leaflet to show specified points and heat points in the map, without active internet connexion.

$3

Used Libs

* Leaflet JS v1.8.0
* React Leaflet v4.0.0
* Leaflet.LocateControl v0.76.1
* Leaflet.Offline v2
* Leaflet.WebglTemperatureMap v0.2.0
* Leaflet.Heat

Install

sh

npm i offline-map-react





#### Add following Leaflet CDN in your index.html

html



    ...



  

  

  



      crossorigin=''

    href='https://unpkg.com/leaflet@1.8.0/dist/leaflet.css'

    integrity='sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=='

    rel='stylesheet'

  />

  



    ...





Usage

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([])



  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 (

    

      {/ 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 /}

      



      



      {/ custom button to toggle user location /}

      



      {/ progress bar when save map /}

      {

        mapInstance?.progressSaveMap > 0 && (

                              value={Number((mapInstance?.progressSaveMap / mapInstance?.totalLayersToSave) * 100).toFixed(2)}

                    max="100">

            {Number((mapInstance?.progressSaveMap / mapInstance?.totalLayersToSave) * 100).toFixed(2)}%

          

        )

      }



      {/ show gps accuracy /}

      

        GPS Accuracy: {mapInstance?.accuracy} meters

      



      {/ show tutorial do calibrate gps /}

      

        {mapInstance?.calibrateGpsTutorial()}

      



      {/ reset heatlayer render /}

      

        {mapInstance?.resetHeatLayerRender()}

      

    

  );



}



export default App;





Style



* Without "height" and "width" property the map will be not render

css

#map {

  height: 400px;

  width: 800px;

}





NextJS Support

- ### 1º Create "Map" component

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



- ### 2º Create "DynamicMap" component

DynamicMap.tsx

tsx

  import dynamic from 'next/dynamic'



  function DynamicMap() {

    const DynamicComponentWithNoSSR = dynamic(

      () => import('./Map'),

      {ssr: false}

    )

    return (

      

    )

  }



  export default DynamicMap





- ### 3º Use the DynamicMap component in your screen component

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 (

      

        {/ your header and Leaflet CDN's /}

        

          

        

        

          footer

        

      

    )

  }



  export default Home

Author

👤 Eduardo Fernandes

* Twitter: @fernandesdotts
* Github: @fernandes-dev
* LinkedIn: @fernandes-dev

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to
check issues page.

Show your support

Give a ⭐️ if this project helped you!

*
_This README was generated with ❤️ by readme-md-generator_