Project make with ReactJS and Leaflet to show specified points and heat points in the map

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.

Demo

Used Libs

Install

npm i offline-map-react

Add following Leaflet CDN in your index.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>

Usage

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'
      }])
    })
  }, [])

  useEffect(() => {
    // create heat points if map instance exists
    OfflineMapInstance.addHeatPoints([
      {
        lat: 40.750749,
        lng: -74.077218,
        intensity: 20, // 0 to 100
      }
    ])

    // 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
      )}
    </div>
  );

}

export default App;

Style

  • Without “height” and “width” property the map will be not render

#map {
  height: 400px;
  width: 800px;
}

NextJS Support

  • 1º Create “Map” component

    Map.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

    import dynamic from 'next/dynamic'
    
    function DynamicMap() {
      const DynamicComponentWithNoSSR = dynamic(
        () => import('./Map'),
        {ssr: false}
      )
      return (
        <DynamicComponentWithNoSSR />
      )
    }
    
    export default DynamicMap
  • 3º Use the DynamicMap component in your screen component

    Home.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

Author

? Eduardo Fernandes

? Contributing

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

Show your support

Give a ⭐️ if this project helped you!


GitHub

View Github