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

Last update: Jul 29, 2022

Welcome to offline-map-react 👋

Version Documentation License: MIT Twitter: fernandesdotts

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

  
  <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/[email protected]/dist/leaflet.css'
    integrity='sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=='
    rel='stylesheet'
  />
  <script
    crossorigin=''
    integrity='sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=='
    src='https://unpkg.com/[email protected]/dist/leaflet.js'
  >script>

    ...
head>

Usage

([]) 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 (
{/* 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 )}
); } export default App; ">
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

    { return (
    {/* your header and Leaflet CDN's */}
    footer
    ) } export default Home">
    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!


This README was generated with ❤️ by readme-md-generator

GitHub

https://github.com/fernandes-dev/offline-map-react
You might also like...

The IP address tracker app fetches location data using an IP address and then displays the location on an interactive map

The IP address tracker app fetches location data using an IP address and then displays the location on an interactive map

The IP address tracker app fetches location data using an IP address and then displays the location on an interactive map. It also uses the user's IP address to fetch and display the user's location on the map.

Jul 26, 2022

İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

 İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

Apr 20, 2022

İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

 İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

🟡 instagram-clone This is a instagram clone. You can sign in, sign up, upload image, make comment 📷 ⚡ LIVE To check out the live demo of this app AB

Jun 6, 2021

A bookmarks list app - a personal project that aims to make the collection of bookmarks easy and efficient

A bookmarks list app - a personal project that aims to make the collection of bookmarks easy and efficient

A bookmarks list app - a personal project that aims to make the collection of bookmarks easy and efficient

Jun 7, 2022

A simple app to show NBA games and scores/details.

A simple app to show NBA games and scores/details.

NBA Remix A simple app to show NBA games and scores/details. Deployment After having run the create-remix command and selected "Vercel" as a deploymen

Jul 23, 2022

A Recipe App that lets you search for recipes and also show you some in the homepage

A Recipe App that lets you search for recipes and also show you some in the homepage

if you just want to run it locally without specifications, you can go to the How to run it locally section What is this App about? It's a Recipe App t

Jul 17, 2022

"The Bookstore" is a react web app built to show collections of books, and give users access to add new books or remove existing book

Bookstore "The Bookstore" is a react web app built to show collections of books, and give users access to add new books or remove existing book Built

Jun 12, 2022

A catalogue of characters from the Infamous Adult Swim hit show Final Space.

A catalogue of characters from the Infamous Adult Swim hit show Final Space.

Final-Space-React-Redux A mobile Web Application Hub for getting cool details on characters from the Adult swim show Final space. Built With React JSX

Mar 29, 2022

Ecommerce shopping cart to show my products By React.js

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Nov 26, 2021
An React Native app that recommmends popular tourist destinations to users based on specified categories
An React Native app that recommmends popular tourist destinations to users based on specified categories

An React Native app that recommmends popular tourist destinations to users based on specified categories

Jul 28, 2022
Stock metrics an app that allows you to display active stocks of companies built with react and redux
Stock metrics an app that allows you to display active stocks of companies built with react and redux

Stock metrics is an app that allows you to display active stocks of companies ,and you can see I ncome statement of past 5years by selecting a selected company.It is built with react and redux .

Jul 20, 2022
A simpe react app that plots a live view of the T-Mobile Home Internet Nokia 5G Gateway signal stats, helpful for optimizing signal.
A simpe react app that plots a live view of the T-Mobile Home Internet Nokia 5G Gateway signal stats, helpful for optimizing signal.

A simpe react app that plots a live view of the T-Mobile Home Internet Nokia 5G Gateway signal stats, helpful for optimizing signal.

Jul 24, 2022
Joguinho do dinossauro quando está sem internet, mas como se fosse o jogo do mario bros.
Joguinho do dinossauro quando está sem internet, mas como se fosse o jogo do mario bros.

Projeto front-end construído no Bootcamp React Web Developer da Digital Innovation One.

Mar 13, 2022
A simple ReactJS package ment to make ReactJS/NextJS Firebase authentication easy

A simple ReactJS package ment to make ReactJS/NextJS Firebase authentication easy

Jun 5, 2022
Mordan React in this project I demonstrate some of the most important tools that will make you design and build a protectional react project using a simple todo idea.
Mordan React in this project I demonstrate some of the most important tools that will make you design and build a protectional react project using a simple todo idea.

Mordan React in this project I demonstrate some of the most important tools that will make you design and build a protectional react project using a simple todo idea.

May 24, 2022
Clone for Book My Show ( online movie tickets booking site ) built with ReactJS
Clone for Book My Show ( online movie tickets booking site ) built with ReactJS

Clone for Book My Show ( online movie tickets booking site ) built with ReactJS

Jul 30, 2022
A simple calculator built with ReactJs. The purpose is to use React Class Component without hooks in order to get familiar with legacy code.
A simple calculator built with ReactJs. The purpose is to use React Class Component without hooks in order to get familiar with legacy code.

Simple Calculator This is a simple calculator built with ReactJs. The purpose is to use React Class Component without hooks in order to get familiar w

Aug 8, 2021
The game wordle made with ReactJS, without writing a line of CSS
The game wordle made with ReactJS, without writing a line of CSS

I made Wordle XD Hello everyone ?? , I am glad to see you here I know it ain't much but this is the game wordle (popular in twitter recently!) I made

May 21, 2022