Loading…

Taking too long?

Reload document

| Open in new tab

Objetivos da sessão: Criação de um projeto de mini-mapeamento

O objetivo desta sessão é usar todas as habilidades adquiridas no curso introdutório ao Leaflet para criar um mapa interativo completo.

Os alunos escolhem um tema entre várias propostas de miniprojetos e aplicam os conceitos técnicos e metodológicos abordados nas sessões anteriores.

Objetivos de aprendizado

• Projetar um mapa interativo coerente na Web
• Organizar dados geográficos (pontos, linhas, polígonos)
• Lidar com eventos e interatividade (cliques, passar o mouse, filtros etc.)
• Integrar uma interface de usuário (menus, filtros, legendas, etc.)
• Publicar o mapa em um ambiente local ou on-line

Sugestões de temas para miniprojetos

1. Mapa de trilhas para caminhadas

Objetivo: criar um mapa mostrando uma ou mais rotas de caminhada.

Conteúdo possível:

• Contornos de trilha GPX/GeoJSON
• Pontos de interesse: trilhas, mirantes, áreas de piquenique, etc.
• Pop-ups ilustrados (texto + imagens)
• Carta do caminhante (pop-up ou link)
• Mini-mapa ou escala
• Botão de zoom na rota

Habilidades necessárias :

• Exibição de linhas e pontos
• Uso de estilos personalizados
• Adição de ícones e imagens
• Controles de leaflet (escala, mini-mapa, controle de camadas)

2. Mapa turístico de uma aldeia

Objetivo: criar um mapa interativo para os visitantes.

Conteúdo possível :

• Monumentos, museus, alojamento, restaurantes
• Filtros por categoria (alojamento / cultura / natureza, etc.)
• Descrições e horários de abertura em pop-ups
• Adicionar um mapa temático de fundo (por exemplo, OpenStreetMap Humanitarian, Topo, etc.)

Competências utilizadas :

• Grupos de camadas e camadas filtráveis
• Popups dinâmicos
• Integração de ícones personalizados
• Controlo de legendas e menus HTML interactivos

3. Mapa de localização dos serviços públicos

Objetivo: criar um mapa útil para os residentes ou visitantes.

Conteúdo possível:

• Localização de escolas, hospitais, câmaras municipais, correios, esquadras de polícia, etc.
• Consultas simples: mostrar escolas num raio de X km
• Rotas ou ligações para o Google Maps
• Mostrar horários ou contactos

Competências necessárias:

• Gestão de dados ad hoc
• Reacções a eventos (clicar numa categoria → atualização do mapa)
• Pop-ups melhorados
• Adição de menus pendentes

Resultados esperados

Um mapa interativo funcional que inclui:

• Um mapa de fundo e camadas de dados geográficos
• Uma ou mais formas de interação (cliques, menus, filtros, etc.)
• Um layout limpo, legível e envolvente

Esse mapa pode ser publicado em um repositório do GitHub ou integrado a um site ou blog pessoal.

Apresentando o GitHub Pages

O GitHub Pages é um serviço de hospedagem gratuito que permite que você publique um site estático diretamente de um repositório do GitHub. Ele é particularmente útil para hospedar projetos pessoais, portfólios ou projetos como mapas interativos criados com o Leaflet. Esse serviço é perfeito para pequenos projetos da Web em que você precisa publicar rapidamente uma versão on-line sem ter que se preocupar com a configuração de um servidor.

Etapas para usar o GitHub Pages :

1. Criar um repositório no GitHub

• O que é um repositório do GitHub?

  • Um repositório do GitHub é onde você armazena todos os arquivos relacionados ao seu projeto. Isso inclui arquivos HTML, CSS e JavaScript, além de recursos como imagens e arquivos de dados.

• Como criar um repositório ?

  • Faça login na sua conta do GitHub. Clique no botão “Novo” ou “Criar um novo repositório”. Dê um nome ao seu repositório (por exemplo, my-leaflet-map). Se necessário, adicione uma descrição do seu projeto.
  • Depois que o repositório for criado, o GitHub fornecerá a você uma URL do repositório (por exemplo, https://github.com/francpoisatilio/cartes-leaflet).

2. Sube o empuja tu código al repositorio

Una vez que tu repositorio ha sido creado, necesitas añadir los archivos de tu proyecto a él. Hay varios métodos para hacerlo, dependiendo de tus preferencias.

Método 1: Subir archivos manualmente

• Haz clic en el botón «Añadir archivo» en tu repositorio de GitHub, luego selecciona «Subir archivos».
• Arrastra y suelta tus archivos (HTML, CSS, JavaScript, imágenes, etc.) en la ventana de subida.
• Haz clic en «Confirmar cambios» para guardar los archivos en tu repositorio.

Método 2: Empuja tu código desde Git

Si trabajas localmente con Git, puedes insertar los archivos directamente en el repositorio con los siguientes comandos :

·        git init

·        git add .

·        git commit -m "Initial commit"

·        git remote add origin https://github.com/username/ma-carte-leaflet.git

·        git push -u origin master

3. Vá para as configurações do repositório e ative o GitHub Pages na seção “Pages”.

• Depois que os arquivos do seu projeto forem carregados no repositório, você precisará ativar o GitHub Pages para publicar o site on-line.
• Etapas:

  • Abra seu repositório no GitHub. Vá para a guia “Settings” (Configurações) do repositório. No menu lateral, role para baixo até a seção “GitHub Pages”. Geralmente, você usa o ramo “principal” ou “mestre”.
  • Clique no botão “Save” (Salvar) para ativar o GitHub Pages.

O GitHub gerará um URL exclusivo para seu site, que terá a seguinte aparência

https://username.github.io/ma-carte-leaflet/

Esse URL será o endereço público no qual o seu mapa do Leaflet poderá ser acessado.

4. Seu site poderá ser acessado por meio da URL gerada

• URL pública: depois que você ativar o GitHub Pages, a URL gerada será a seguinte:

  • https://username.github.io/my-card-leaflet/

• É importante observar que pode levar alguns minutos para gerar o site. Em seguida, você poderá acessar seu cartão Leaflet abrindo essa URL em um navegador.
• Se quiser personalizar o nome de domínio do seu site, o GitHub permite que você use um nome de domínio personalizado (por exemplo, www.macarteleaflet.com) adicionando um arquivo CNAME ao seu repositório.

Dicas adicionais:

• Verificação: antes de tornar seu site público, certifique-se de que todos os arquivos necessários estejam incluídos corretamente em seu repositório, incluindo arquivos de mapa, recursos JavaScript (Leaflet, etc.) e arquivos CSS.
• Repositório privado: se você tiver um repositório privado e quiser usar o GitHub Pages, observe que essa opção só está disponível para usuários pagantes. No entanto, para projetos simples e públicos, a versão gratuita do GitHub Pages funciona perfeitamente.
• Solução de problemas: se o seu mapa não estiver sendo exibido corretamente, verifique se todos os arquivos estão vinculados corretamente e se os links para recursos externos (por exemplo, Leaflet CDN) são válidos.

Com essas etapas, você pode colocar facilmente seus mapas interativos criados com o Leaflet on-line. Isso proporciona uma maneira rápida e simples de compartilhar seus projetos com outros usuários ou até mesmo implantá-los em um servidor pessoal.

Apresentando a Netlify

A Netlify é uma plataforma de hospedagem rápida e moderna para sites estáticos. Ela facilita a implantação, o gerenciamento e a hospedagem de sites, com implantação automatizada a partir de um repositório Git (GitHub, GitLab, Bitbucket). A Netlify se destaca por sua facilidade de uso, sua integração contínua e seus muitos recursos, como gerenciamento de redirecionamento, formulários e nomes de domínio personalizados.

Com o Netlify, você pode implantar sites estáticos (como mapas do Leaflet), aplicativos modernos e outros projetos com apenas alguns cliques. Ele também oferece serviços gratuitos de CDN (Content Delivery Network), SSL e otimização de desempenho.

Etapas para usar o Netlify :

Criar uma conta na Netlify

• O que é uma conta Netlify?
  Uma conta Netlify permitirá que você gerencie as implantações de seu site estático. Você pode se inscrever com seu endereço de e-mail ou, mais facilmente, usando sua conta do GitHub, GitLab ou Bitbucket.
• Etapas para criar uma conta:

  • Acesse Netlify.
  • Clique em “Sign Up”.Escolha um método de registro (e-mail ou via GitHub).
  • Siga as instruções para configurar sua conta.

1. Criar uma conta na Netlify

O que é uma conta Netlify?

Uma conta Netlify permitirá que você gerencie as implantações de seu site estático. Você pode se inscrever com seu endereço de e-mail ou, mais facilmente, usando sua conta do GitHub, GitLab ou Bitbucket.

Etapas para criar uma conta:Acesse Netlify.Clique em “Sign Up”.Escolha um método de registro (e-mail ou via GitHub).

Siga as instruções para configurar sua conta.

2. Conecte seu repositório do GitHub

• Conectando-se ao GitHub:

  • Depois de criar sua conta do Netlify, você precisa conectar o Netlify ao seu repositório do GitHub, onde o código do seu projeto (o mapa do Leaflet) está localizado.

• Etapas para conectar o GitHub ao Netlify:

  • Vá para o painel do Netlify,
  • clique em “New Site from Git” e escolha o GitHub como sua fonte.
  • O Netlify solicitará que você permita o acesso à sua conta do GitHub, o que permitirá que ele recupere seus repositórios.
  • Selecione o repositório do GitHub que contém seu projeto Leaflet (por exemplo, my-leaflet-map).

Selecione o projeto a ser implantado

• Seleção de projeto:
  Depois de conectar sua conta do GitHub ao Netlify, o Netlify exibirá todos os seus repositórios do GitHub. Selecione o repositório que contém o código do seu projeto de mapa.
• Definir as configurações do projeto:

  • o Netlify solicitará que você defina as configurações de implantação (por exemplo, qual branch implantar, geralmente principal ou master).
  • Se você tiver arquivos específicos para gerar ou compilar antes da implantação (por exemplo, se estiver usando um gerador de site estático, como o Jekyll ou o Hugo), poderá especificar comandos de compilação.
  • Para um projeto simples do Leaflet, você não precisa de nenhuma configuração adicional.

• Clique em “Deploy Site” (Implantar site) para iniciar a implantação.

O Netlify implantará automaticamente seu site e gerará um URL exclusivo

• Implantação automática:
  Depois de selecionar o repositório e definir as configurações, o Netlify inicia o processo de implantação. O site é então criado e publicado automaticamente.
• URL gerado:
  Após a conclusão da implantação, o Netlify gerará um URL exclusivo para acessar seu mapa on-line. Normalmente, o URL terá o seguinte formato

https://project-name.netlify.app/

Exemplo: se o seu projeto se chamar my-map-leaflet, o URL poderia ser:
https://my-map-leaflet.netlify.app/

Dicas adicionais:

Alterar o URL do site: se você quiser usar um nome de domínio personalizado (por exemplo, www.macarteleaflet.com), poderá configurá-lo facilmente no painel da Netlify adicionando um domínio personalizado e configurando o DNS.

Controle as atualizações: A Netlify oferece um sistema de implantação contínua, o que significa que, assim que você enviar as alterações para o seu repositório do GitHub, o site será atualizado automaticamente.

Monitoramento de desempenho: a Netlify também oferece ferramentas para monitorar o desempenho do seu site (tempo de carregamento, disponibilidade, etc.).

Vantagens da Netlify para hospedar seu mapa Leaflet:

• Implementação rápida e fácil: publique seu mapa com apenas alguns cliques.
• Hospedagem CDN: a Netlify fornece uma infraestrutura CDN que otimiza a velocidade de carregamento de suas páginas.
• SSL gratuito: Todo site implantado na Netlify se beneficia automaticamente de um certificado SSL (HTTPS).
• Suporte a sites estáticos: perfeito para hospedar mapas Leaflet e outros projetos estáticos da Web.
• Implementação contínua: automatize o processo de atualização do seu site assim que você fizer o upload de novas alterações no GitHub.

Com essas etapas, você pode carregar rapidamente seu mapa do Leaflet no Netlify e compartilhá-lo facilmente com outras pessoas. É uma ótima maneira de hospedar projetos de mapeamento interativo, sem precisar gerenciar servidores complexos..

Envie seu projeto de folheto

Nesta sessão final, você terá concluído um projeto individual que incorpora os principais elementos estudados (camadas, estilos, interações, controles, etc.).

Convidamos você a compartilhar seu projeto conosco, para que possamos dar um feedback personalizado e, se desejar, incluí-lo entre os exemplos apresentados em nossas futuras publicações.

Como você faz isso?

Publique seu projeto (código e mapa) no GitHub ou em um serviço equivalente e, em seguida, envie-nos o link para seu repositório usando o formulário fornecido abaixo.

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

Preencha o formulário abaixo. Você receberá uma resposta personalizada em alguns dias.

Si cet article vous a intéressé et que vous pensez qu'il pourrait bénéficier à d'autres personnes, n'hésitez pas à le partager sur vos réseaux sociaux en utilisant les boutons ci-dessous. Votre partage est apprécié !

Atilio Francois