Duração: aproximadamente 9-12 horas (distribuídas em 6 sessões)
Programa :
- Introdução ao Leaflet on-line
- – Instalação, estrutura básica de um mapa
- – Adicionando fundos de mapas (OSM, mapas base de terceiros)
- Camadas e interatividade (on-line 09 /05/2025)
- – Pontos, polilinhas, polígonos
- – Personalização, eventos, interações
- Camadas GeoJSON e dados externos (on-line 14 /05/2025)
- – Carregando dados GeoJSON
- – Exibição condicional, símbolos dinâmicos
- Controles e ferramentas de interface (on-line 20 /05/2025)
- – Dicas de ferramentas, popups, legendas, grupos de camadas
- – Controle de camadas e filtros simples
- Eventos e interatividade do usuário (on-line 23 /05/2025)
- – Reagindo a cliques, hovers, seleção de itens
- – Criando um mapa interativo simples
- Miniprojeto para um mapa da Web personalizado (on-line 26 /05/2025)
- – Criando um miniprojeto
- – Colocando-o on-line (GitHub Pages ou outra solução gratuita)
Resultado esperado
Ao final do curso, você será capaz de criar um mapa de folheto funcional com seus próprios dados e colocá-lo on-line para compartilhar com o mundo!
Envie seu projeto individual – Sessão 6
Na última sessão deste módulo, você terá produzido um projeto individual incorporando os principais elementos estudados (camadas, estilos, interações, controles etc.).
Convidamos você a compartilhar seu projeto conosco, para que possamos fornecer feedback personalizado e, se desejar, incluí-lo entre os exemplos apresentados em nossas futuras publicações
Como faço isso?
Publique seu projeto (código e mapa) no GitHub ou em um serviço equivalente (o método será descrito na sessão 6) e, em seguida, envie-nos o link para seu repositório usando o formulário fornecido.
Os projetos serão examinados de acordo com os seguintes critérios:
- Bom uso da API do Leaflet
- Legibilidade e organização do código
- Qualidade visual e funcional do mapa
- Relevância do assunto e dos dados escolhidos
Para acompanhar os exercícios do curso, você pode fazer download de um kit inicial em formato zip neste link.
Descompacte o conteúdo em um diretório de sua escolha, onde poderá armazenar todos os arquivos do curso.
Método de ensino para o curso Leaflet
Este curso introdutório ao Leaflet.js, a biblioteca JavaScript para mapeamento interativo, foi criado para ajudá-lo a aprender progressivamente, usando uma abordagem ativa, visual e guiada.
Cada sessão segue uma estrutura de ensino simples e eficaz:
1. Apresentação de slides
Cada sessão começa com uma apresentação de slides resumida que define os conceitos essenciais a serem lembrados:
- conceitos ilustrados com exemplos da vida real,
- trechos de código com comentários,
- diagramas ou capturas de tela,
- ícones e dicas visuais para ajudá-lo a se lembrar.
O objetivo: compreender rapidamente as funções e as possibilidades do Leaflet.aflet.
2. Texto explicativo detalhado
Cada slide é acompanhado por um texto explicativo educacional que:
- desenvolve o conteúdo da apresentação de slides,
- explica o “porquê” e o “como” por trás de cada função,
- sugere variantes de código ou dicas adicionais,
- apresenta boas práticas e erros comuns a serem evitados.
Esse texto foi concebido como um auxílio de leitura autônomo, a ser consultado antes ou depois da sessão.
3. Exercício prático ao final da sessão
Ao final de cada sessão, você encontrará um exercício prático para concluir:
- aplicação direta dos conceitos abordados,
- cenário realista: mapa de um local, adição de marcadores, estilo dinâmico etc.
- instruções claras, com etapas guiadas, se necessário.
O exercício é uma etapa essencial para consolidar seu aprendizado e testar sua compreensão.éhension.
4. A chave de respostas está disponível… mas depois do esforço!
Um link no final do artigo leva você à chave de respostas para o exercício, com:
- uma solução comentada,
- código funcional para copiar e colar ou adaptar,
- às vezes variantes ou áreas para aprimoramento.
Recomendamos enfaticamente que você faça o exercício por conta própria antes de consultar a solução.
Essa é a melhor maneira de melhorar sua autonomia, fortalecer sua memória e se familiarizar com os conceitos.ure façon de progresser en autonomie, de renforcer votre mémoire, et de vous approprier les concepts.
Resumindo
Cada sessão do curso é baseada em:
- uma apresentação visual de slides para ajudá-lo a entender rapidamente,
- um texto explicativo claro para ajudá-lo a entrar em mais detalhes,
- um exercício prático para ajudá-lo a experimentar,
- uma folha de respostas guiada para ajudá-lo a se corrigir e ir além.
Esse método permite que você aprenda o Leaflet passo a passo, no seu próprio ritmo, quer você seja um iniciante ou já tenha algum conhecimento básico de HTML/JavaScript.pas, à votre rythme, que vous soyez débutant ou que vous ayez déjà quelques bases en HTML/JavaScript.
Pronto para começar?
Vá para a primeira sessão: Exibindo um mapa com o Leaflet!
