Projeto desenvolvido com o intuito de possibilitar a visualização de pontos específicos em um mapa, mesmo com ausência de internet. A aplicação será utilizada em fazendas, para que os usuários localizem locais específicos cadastrados no sistema.
O projeto consiste de 2 componentes principais
- Mapa
- Ponto de controle
- mais componentes serão adicionados com o desenvolvimento
Para que os componentes do Leaflet funcionem corretamente, é necessário adicionar as seguintes importações:
public/index.html
<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>
src/app/screens/OfflineMap/index.tsx
import 'leaflet.offline'
import 'leaflet.locatecontrol'
src/app/screens/OfflineMap/index.tsx
// estado para armazenar e atualizar o mapa do Leaflet
const [map, setMap] = useState<Leaflet.Map | null>(null)
// armazenar e atualizar posição atual do usuário
const [position, setPosition] = useState<ILatLng>()
// flag para identificar se os controles de "salvar" e "excluir" já foram adicionados ao mapa
// esses controles servem para salvar os "tiles" do leaflet no IndexedDb para visualização sem internet
const [mapControls, setMapControls] = useState<boolean>(false)
// estado utilizado para exibir barra de progresso ao salvar mapa em memória
const [progressSaveMap, setProgressSaveMap] = useState(0)
// quantidade de "tiles" que serão armazenados em memória
const [totalLayerToSave, setTotalLayersToSave] = useState(0)
// as polylines são as linhas que conectam o usuário a um ponto selecionado no mapa
const [polylines, setPolylines] = useState<ILatLng[][]>([])
// estado para armazenar a camada de polylines do Leaflet para poder adicionar ou remover linhas
const [mapPolyline, setMapPolyline] = useState<Leaflet.Polyline<any>>()
// pontos de controle marcados no mapa
const [checkpoints, setCheckpoints] = useState<ICheckpoint[]>([])
src/app/screens/OfflineMap/index.tsx
// altera a visualização do mapa para centralizar na localização recebida
function navigatoTePosition(data: ILatLng, zoomLevel?: number): void
// dado uma coordenada geográfica
// retorna um booleano indicando se existe polyline que se conecta ao usuário
function verifyPolylineExists(destiny: ILatLng): boolean
// adiciona polyline para o destino, se conectado ao usuário
// em seguida altera o zoom do mapa para exibir toda a extesão da linha
function handleAddPolyline(destiny: ILatLng): void
// remove a linha que conecta o usuário ao destino especificado
function handleRemovePolyline(destiny: ILatLng): void
// adiciona os controles para salvar e excluir o mapa da memória
// em seguida registra os eventos para exibir a barra de progresso
function addOfflineMapControls(): void
// adiciona controle para buscar localização do usuário e exibir orientação
function addUserLocationHandler(): void
// verifica se o dispositivo tem suporte a geolocalização
// muda a visualização do mapa para a localização inicial do usuário
function setMapViewOnUserLocation(): void
src/app/screens/OfflineMap/functions/CalculateDistanceBetweenCoords.ts
// calcula a distância entre duas coordenadas, em METROS
function CalculateDistanceBetweenCoords(firstPosition?: ICoords, secondPosition?: ICoords): number
src/app/screens/OfflineMap/functions/TileLayerOffline.ts
// adiciona a possibilidade de salvar a visualização do mapa em memória
function MakeTileLayerOffline(leaflet: typeof Leaflet, map: Map): Leaflet.tileLayerOffline | undefined
- yarn
npm install -g yarn
- Clone este repositório em seu computador
git clone git@github.com:fernandes-dev/offline-map-pwa.git
- Acesse a pasta e instale as dependências
yarn
- Para executar em modo desenvolvimento:
yarn start
- Mapa térmico para identificação de concentração de pragas
- Agrupamento de pontos próximos em um único local
- Em desenvolvimento
Eduardo Fernandes |