Relembrando fundamentos com webmaps parte II
Nesse webmaps parte II vamos dar uma melhorada no webmap feito no post do dia 18/09/2022, Relembrando fundamentos com webmaps , a intenção de montar um webmap simples, mas relembrando as bases do desenvolvimento web, HTML, CSS, JavaScript, e também aprender sobre a biblioteca para webmaps Leaflet através do livro Desenvolvendo Webmaps.
Agora vamos montar o filtro e dar um visual bacana para a página.
O último exercício do livro, o webmap desenvolvido por ele termina com a seguinte aparência:
Webmap exercicio 07 – Antes
Clique aqui para acessar o webmap do exercício 07.
Filtrar os pontos de acordo com o atributo
Esse foi um desafio bem interessante de se fazer, pois foi necessário uma série de modificações do projeto.
Foi necessário utilizar algumas propriedades das camadas do leaflet que recebe os dados filtrados e os adiciona ao mapa.
Não bastando esse filtro, criar a interface para que a pessoa que estiver usando possa indicar qual campo (propriedade) do dado poderia usar para fazer o filtro, foi necessário criar um campo onde a pessoa que está utilizando o webmap pudesse digitar o valor a ser utilizado no filtro.
Os campos são listados dinamicamente do geojson e inseridos na listagem:
e após digitar o valor que queremos filtrar ao pressionar Enter a camada é filtrada
Webmaps parte II – estilizando a página do webmap
Uma parte importante para atentarmos também é para a apresentação do mapa para a pessoa, um mapa com esse estilo apenas:
Webmap exercicio 07 – Antes
não é tão chamativo quanto esse aqui:
Webmap após estilização
E nessa parte entra habilidades de CSS.
Saber colocar cada item no lugar, como cada item vai aparecer em cada tipo de dispositivo (responsividade) é muito importante quando seu webmap é acessado.
Foi utilizado um layout básico no Canva (clique aqui para ver o design), e normalmente quando vamos criar uma página recebemos um design que vamos trabalhar em cima, para seguir como padrão.
Dessa forma foi possível dar um visual mais bonito para esse webmaps parte II
Você pode conferir o novo layout clicando aqui e o anterior clicando aqui.
Webmaps parte II – mais descrições
No projeto do github tentei comentar o código o máximo possível, e também tem os arquivos README.md explicando muito do que foi feito.
Está sendo bem bacana fazer esse exercício de relembrar essa base.
Esse aqui é o repositório do Github clique aqui.
Podem mandar sugestões e fazer contribuições.
Até breve.