Para esta aplicação foi utilizado Javascript, HTML, CSS e a biblioteca React.js.
Esse aplicativo mostra um mapa com a localização de restaurantes em Roma. Ao cliclar em um marcador do mapa ou um item da lista na barra lateral anuma o marcador correspondente e mostra imagens tiradas nas proximidades.
O aplicativo possui um botão na barra superior para mostrar/esconder a barra lateral.
A barra lateral também possui uma campo de entrada que permite filtrar os itens da lista e os marcadores correspondentes no mapa.
Para rodar a aplicação:
- Clone ou baixe o repositório em seu computador.
- Instale as dependências com
npm install
. - Inicie o servidor com
npm start
.
O seu navegador deve abrir uma página com o endereço localhost:3000, onde está rodando a aplicação.
Neste projetos foram usadas as APIs do Google Maps e do Flicker.
A API do Google Maps foi utilizada para a criação do mapa e todos os seus elementos, enquanto a API do Flicker foi utilizada para carregar as fotos tiradas nas proximidades dos locais marcados no mapa.
Para a criação do projeto foi utilizado o pacote create-react-app
.
Para facilitar o carregamento e utilização da API do Google Maps foi utilizado o pacote google-map-react
GIFs e imagens de ícones foram utilizadas de terceiros.
- Icons8
- Loading Icon By Ahm masum CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0)], from Wikimedia Commons
- Kirill Kazachek from www.flaticon.com is licensed by [Creative Commons BY 3.0](http://creativecommons.org/licenses/by/3.0/Creative Commons BY 3.0)