O objetivo do projeto é criar uma aplicação que permita ao usuário encontrar um local no mapa e salvar o local encontrado.
Foi utilizado a biblioteca OpenLayers para a manipulação do mapa, a biblioteca Vite como servidor de desenvolvimento local e as APIs HGBrasil e Open Wheather Map para a obtenção de informações sobre o local pesquisado.
Foi utilizada a seguinte biblioteca para a renderização e manipulação do mapa:
Foram utilizadas duas APIs para a obtenção de informações sobre o local pesquisado:
Importante: Acesse os links das APIs e crie uma conta para obter as chaves de acesso.
É necessário adicionar as chaves de acesso às APIs HGBrasil e Open Wheather Map no arquivo .env na raiz do projeto.
find-on-map/.env
Adicione as chaves de acesso em VITE_API_HGBR_KEY e VITE_API_OPENWEATHER_KEY respectivamente, da seguinte forma:
VITE_API_HGBR_KEY=chave_de_acesso
VITE_API_HGBR_URL=https://api.hgbrasil.com/
VITE_API_OPENWEATHER_KEY=chave_de_acesso
VITE_API_OPENWEATHER_URL=http://api.openweathermap.org/
VITE_PORT=3000
VITE_ZOOM_MAP_DEFAULT=14
Após adicionar as chaves de acesso, execute os seguintes comandos:
- Instalar todas as dependências do projeto:
yarn
- Rodar o projeto:
yarn start
ou
npm start
Se tudo ocorrer bem, o projeto estará rodando em http://localhost:5173.
Para permitir a comunicação com as APIs corretamente, é necessário habilitar o CORS no navegador. Para isso, é necessário instalar uma extensão que permita a habilitação do CORS. Foi utilizado a extensão Allow CORS no navegador Google Chrome.
- Instale a extensão no navegador.
- Habilite a extensão clicando no ícone da extensão e habilitar o CORS --> Toggle ON | OFF.
- Atualize a página.
- Pronto! Agora a comunicação com as APIs está habilitada.
Linkedin 😊