Arden  Keebler

Arden Keebler

1652115600

How to Build a Weather App with GeoJSON and Leafletjs

In this video tutorial, We'll show you How to Build a Weather App with GeoJSON and Leafletjs With Step by Step. Let's explore it with us now!

#weatherapp  #leafletjs  #geojson #json 

How to Build a Weather App with GeoJSON and Leafletjs
Opal  Gulgowski

Opal Gulgowski

1641818383

How to Build & Deploy a Geocoding Map App With Vue 3, Tailwind CSS

In this video we build a geocoding application using vue 3, express & tailwind css. We will be using leaflet.js & mapbox for displaying our map as well as mapbox's geocoding API.

Repo: https://github.com/johnkomarnicki/express-vue3-tailwind-map
Demo: https://agile-waters-16077.herokuapp.com/

What is covered: 
✔️  simple express server to proxy API
✔️  spa with Vue 3 using composition API
✔️  integrating tailwind & leaflet.js with Vue 3
✔️  deploying vue 3 application with express to production

Timestamps: 
0:00 introduction
2:15 project requirements
4:28 create simple express server
11:01 create express route
15:51 add a parameter to express route
22:21 adding query strings to express route
26:32 using the express router
30:19 creating vue 3 project 
35:23 add tailwind and other dependencies
40:00 implement leaflet.js map 
50:35 get users location
59:08 plotting user location on map
1:06:11 handling geolocation errors
1:18:27 toggle tracking location
1:31:12 making search request's
1:42:52 add lazy search to input
1:46:58 output results from api
2:05:00 display selected results
2:13:33 getting our app ready for deployment
2:18:14 deploy to heroku


#vue #api #tailwindcss #express #tailwind #leaflet #leafletjs 

How to Build & Deploy a Geocoding Map App With Vue 3, Tailwind CSS
Rui  Silva

Rui Silva

1640317675

Como Criar Um Mapa Usando Leaflet.js Para iniciantes

Leaflet.js é atualmente uma das bibliotecas de mapeamento mais populares . É uma biblioteca JavaScript flexível, leve e de código aberto para a criação de mapas interativos.

O folheto é uma estrutura para a apresentação de dados de mapas. Os dados, junto com a camada de mapa de base, devem ser fornecidos pelos desenvolvedores. Os mapas são compostos por camadas de blocos junto com o suporte do navegador, interatividade padrão, recursos de panorâmica e zoom. Você também pode adicionar mais camadas e plug-ins personalizados, junto com todo o mapeamento no Folheto. Esta biblioteca de mapeamento converte seus dados em camadas de mapas e tem um suporte maravilhoso, tornando-a a primeira escolha para a maioria dos desenvolvedores. Ele funciona muito bem nas principais plataformas de desktop e móveis, tornando-se uma biblioteca JavaScript perfeita para mapas móveis e de tela maiores também.

Neste tutorial, vou mostrar como criar um mapa bonito e interativo do Pacífico Sul com HTML, CSS e folheto que irá destacar as praias mais populares. Coletei os dados do site do TripAdvisor e comparei as dez melhores praias do Pacífico Sul avaliadas pela pesquisa Travellers 'Choice 2021 .

Você viu alguns mapas online interessantes e gostaria de criar um você mesmo? Acompanhe esta jornada emocionante enquanto eu mostro como traçar um mapa legal e destacar as dez melhores praias usando o folheto.

Gif do mapa do folheto mostrando as diferentes camadas

Criação de um mapa básico de folheto em quatro etapas

O processo de construção de um mapa simples com folheto é direto. Algum conhecimento prévio de HTML e JavaScript é benéfico, mas não se preocupe se você for um iniciante. É muito fácil com esta biblioteca JavaScript, e irei guiá-lo através de cada linha de código enquanto crio este mapa impressionante e perspicaz.

Crie uma página HTML básica

Para começar, crio uma página HTML para renderizar o objeto de mapa. Em seguida, adiciono um </div>para conter o mapa e atribuo a ele um ID mappara referência posterior. Em seguida, adiciono alguns detalhes de estilo onde especifico a largura e a altura como 100vwe 100vh. Isso fará com que o mapa ocupe toda a página:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Leaflet Map</title>
    <style type="text/css">
      body{
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

Consulte os arquivos da biblioteca JavaScript de código aberto do Leaflet

Como estou usando a biblioteca Leaflet, preciso incluir os arquivos JavaScript e CSS necessários dessa biblioteca. Você pode baixar os arquivos diretamente, usar o gerenciador de pacotes JavaScript (npm) para instalar os arquivos localmente ou usar a versão hospedada de seu CDN:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Leaflet Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
    <style type="text/css">
      body{
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
    <script>
      // All the code for the leaflet map will come here
    </script>
  </body>
</html>

Observação: o integrityatributo permite que um navegador verifique o script obtido para garantir que o código não foi carregado se a fonte foi manipulada.

Prepare os dados

Para plotar qualquer mapa, preciso coordenar valores como latitude e longitude. Eu reúno a latitude e a longitude para cada um dos pontos de dados deste site aqui . Além disso, para o desenvolvimento do folheto, também preciso da camada de base, que obtive de um site chamado OpenStreetMap .

Configure o mapa do folheto

Agora vem a parte interessante de criar o mapa escrevendo algumas linhas de código. Você não vai acreditar como poucas linhas de código são necessárias para criar mapas totalmente funcionais com o Leaflet. Essa facilidade de desenvolvimento, junto com o fato de que o Leaflet é uma biblioteca JavaScript de código aberto, o coloca no topo da lista de bibliotecas de mapeamento.

Portanto, para começar, lembre-se que tudo nesta biblioteca JavaScript é acessado pela letra “L”, e todas as funções são estendidas através dela.

Inicialize o mapa

A primeira coisa que faço é declarar a variável map e inicializá-la com o mapa Leaflet. O primeiro parâmetro é o ID do <div>definido anteriormente. O segundo é onde você deseja que o centro do mapa esteja. O último é o nível de zoom. Eu configurei o zoom para 3,5, mas você pode configurá-lo como quiser.

Eu uso esses parâmetros para o meu mapa, mas existem muitas opções diferentes disponíveis para definir o estado do mapa, interação, animação e eventos que você pode verificar aqui :

const map = L.map('map', {  center: [-29.50, 145],  zoom: 3.5});

Adicione a camada de base

Em seguida, adicionei a camada de blocos, que será a camada de base para o mapa do folheto. Uma camada de blocos é um conjunto de blocos acessados ​​por meio de um servidor por meio de uma solicitação direta de URL. Esta camada de blocos adiciona os limites geográficos ao mapa.

Certifique-se de incluir o texto de atribuição para isso, pois a maioria dos desenvolvedores se esquece de fazer isso:

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);

Adicione os marcadores padrão

Para indicar as praias, adiciono marcadores. O folheto fornece esse recurso como padrão. Como preciso mostrar dez praias, adicionarei um marcador a cada um com os valores de latitude e longitude da respectiva praia:

const marker1 = L.marker([-37.699450, 176.279420]).addTo(map);const marker2 = L.marker([-27.643310, 153.305140]).addTo(map);const marker3 = L.marker([-33.956330, 122.150270]).addTo(map);const marker4 = L.marker([-34.962390, 117.391220]).addTo(map);const marker5 = L.marker([-17.961210, 122.214820]).addTo(map);const marker6 = L.marker([-16.505960, 151.751520]).addTo(map);const marker7 = L.marker([-22.594400, 167.484440]).addTo(map);const marker8 = L.marker([-37.977000, 177.057000]).addTo(map);const marker9 = L.marker([-41.037600, 173.017000]).addTo(map);const marker10 = L.marker([-37.670300, 176.212000]).addTo(map);

Voila! Um mapa Folheto absolutamente adorável e funcional está todo configurado e pronto. Este folheto não foi uma brisa?

A imagem abaixo mostra como tudo isso se parece até agora.

Versão inicial do mapa do folheto

Você pode encontrar o código completo nesta caneta :

 

Personalizando o Mapa do Folheto

Um dos recursos úteis da biblioteca Leaflet JavaScript é sua facilidade para construir mapas básicos rapidamente e também ter uma carga de opções para personalizar os mapas. Então, deixe-me mostrar quatro maneiras de tornar este mapa do Folheto mais informativo e esteticamente melhor.

1. Desative o zoom com a rolagem do mouse

Um dos principais problemas da área de trabalho é a rolagem acidental do mapa ao tentar navegar por uma página. Para lidar com isso, eu modifico o código onde declarei o mapa no estágio de configuração. Vou adicionar o scrollWheelZoomatributo e defini-lo como false, o que garante que o mapa só possa ser ampliado usando os botões de zoom. Também usarei uma maneira diferente de definir o centro e o nível de zoom que funciona de maneira eficiente e é mais legível:

const map = L.map('map', {scrollWheelZoom:false}).setView([-29.50, 145], 3.5);

2. Adicione camadas ao mapa

Outro recurso interessante e útil do Leaflet é a opção de adicionar várias camadas vetoriais. Mantendo a vista da rua como uma das camadas, adicionarei mais duas camadas de blocos de um site que fornece serviço gratuito de mapas da web (WMS). Vou adicionar uma camada de topografia e uma camada de lugares:

const basemaps = {  StreetView: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',   {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}),  Topography: L.tileLayer.wms('http://ows.mundialis.de/services/service?',   {layers: 'TOPO-WMS'}),  Places: L.tileLayer.wms('http://ows.mundialis.de/services/service?', {layers: 'OSM-Overlay-WMS'})};

O folheto também fornece o recurso para dar ao usuário controle sobre qual camada renderizar. Usando esse recurso, adicionarei um botão de menu de opções no canto superior direito da página que permite selecionar qual das três camadas deseja sobrepor no mapa:

 

 

L.control.layers(basemaps).addTo(map);

Por último, irei definir a camada Topografia como a camada padrão a ser renderizada. Na versão final, voltarei ao Streetview como a opção padrão:

basemaps.Topography.addTo(map);

3. Personalize os marcadores

O marcador padrão é ótimo para indicar um local, mas os marcadores personalizados fornecem uma aparência personalizada ao mapa e é muito fácil de configurá-lo usando a biblioteca de Folhetos.

Para definir um ícone, vou precisar especificar a URL e o tamanho do ícone. Baixarei um ícone SVG gratuito e o hospedarei em minha conta do GitHub, que fornece o URL. Definirei o tamanho para 40, mas você pode mantê-lo mais ou menos.

Agora, simplesmente adicionarei este ícone a cada marcador definido anteriormente, e é isso. Todos os marcadores que indicam a praia agora são ícones de praia:

const basicBeachIcon = L.icon({  iconUrl: 'https://raw.githubusercontent.com/shacheeswadia/leaflet-map/main/beach-icon-chair.svg',  iconSize: [40, 40],});const marker1 = L.marker([-37.699450, 176.279420], {icon: basicBeachIcon}).addTo(map);const marker2 = L.marker([-27.643310, 153.305140], {icon: basicBeachIcon}).addTo(map);const marker3 = L.marker([-33.956330, 122.150270], {icon: basicBeachIcon}).addTo(map);const marker4 = L.marker([-34.962390, 117.391220], {icon: basicBeachIcon}).addTo(map);const marker5 = L.marker([-17.961210, 122.214820], {icon: basicBeachIcon}).addTo(map);const marker6 = L.marker([-16.505960, 151.751520], {icon: basicBeachIcon}).addTo(map);const marker7 = L.marker([-22.594400, 167.484440], {icon: basicBeachIcon}).addTo(map);const marker8 = L.marker([-37.977000, 177.057000], {icon: basicBeachIcon}).addTo(map);const marker9 = L.marker([-41.037600, 173.017000], {icon: basicBeachIcon}).addTo(map);const marker10 = L.marker([-37.670300, 176.212000], {icon: basicBeachIcon}).addTo(map);

Verifique a aparência desta versão personalizada aqui e brinque com o código no CodePen .

Versão intermediária do mapa do folheto

Este ícone é apenas um exemplo, então fique atento para um ícone mais funk enquanto eu altero o marcador personalizado na versão final da visualização.

4. Adicionar pop-ups

Assim como as dicas de ferramentas, os pop-ups podem incluir mais informações sobre os dados. Um pop-up em mapas é exibido ao clicar e pode ser personalizado de acordo com sua preferência. Com o Leaflet, o recurso pop-up pode ser facilmente adicionado com uma função chamada bindPopup.

Como estamos exibindo praias em nosso objeto de mapa, decido mostrar o nome de cada praia no pop-up. Eu apenas adiciono o texto à função e o vinculo a cada um dos marcadores:

const marker1 = L.marker([-37.699450, 176.279420], {icon: basicBeachIcon})    .bindPopup('Whitehaven Beach, Whitsunday Island')    .addTo(map);const marker2 = L.marker([-27.643310, 153.305140], {icon: basicBeachIcon})    .bindPopup('Turquoise Bay Exmouth, Australia')    .addTo(map);const marker3 = L.marker([-33.956330, 122.150270], {icon: basicBeachIcon})    .bindPopup('Cape Le Grand National Park Esperance, Australia')    .addTo(map);const marker4 = L.marker([-34.962390, 117.391220], {icon: basicBeachIcon})    .bindPopup('Greens Pool Denmark, Australia')    .addTo(map);const marker5 = L.marker([-17.961210, 122.214820], {icon: basicBeachIcon})    .bindPopup('Cable Beach Broome, Australia')    .addTo(map);const marker6 = L.marker([-16.505960, 151.751520], {icon: basicBeachIcon})    .bindPopup('Matira Beach, Society Islands')    .addTo(map);const marker7 = L.marker([-22.594400, 167.484440], {icon: basicBeachIcon})    .bindPopup('Piscine Naturelle Ile Des Pins, New Caledonia')    .addTo(map);const marker8 = L.marker([-37.977000, 177.057000], {icon: basicBeachIcon})    .bindPopup('Ohope Beach Whakatane, New Zealand')    .addTo(map);const marker9 = L.marker([-41.037600, 173.017000], {icon: basicBeachIcon})    .bindPopup('Kaiteriteri Beach, New Zealand')    .addTo(map);const marker10 = L.marker([-37.670300, 176.212000], {icon: basicBeachIcon})    .bindPopup('Mt Maunganui Main Beach, New Zealand')    .addTo(map);

E pronto! Você pode encontrar o código completo no CodePen .

 

 

Versão final do mapa do folheto

Outras personalizações com mapas de folheto

Além do que mostrei neste tutorial, há uma infinidade de opções de personalização com o folheto - como adicionar formas como círculos ou polígonos, personalizar o pop-up e adicionar eventos. Você pode verificar as instruções na documentação oficial e os inúmeros exemplos fornecidos pelo Leaflet.

Um plug-in abre todo um universo de personalizações e o Leaflet, por ser de código aberto, possui vários plug-ins de terceiros que fornecem funcionalidade estendida ao mapa original. Você pode pesquisar qualquer plugin desenvolvido pela comunidade do Leaflet aqui . Você pode adicionar mais blocos de mapas, páginas, modelos de URL, imagens PNG, imagens de blocos, opções de zoom avançadas e interações de blocos aprimoradas com os plug-ins do folheto. Também existe a opção de usar a API do Google para localização e pesquisa.

Conclusão

Como você pode ver, é muito fácil e rápido criar mapas interativos com uma biblioteca JS como o Leaflet. A instalação é descomplicada, funciona de forma eficiente, o código é legível e todo o mapeamento é manipulado convenientemente pela biblioteca. É uma excelente escolha para criar mapas interativos e compatíveis com dispositivos móveis, pois funciona bem com todas as plataformas móveis. Junto com grande usabilidade, há uma série de opções de personalização suportadas pelo Leaflet. Por favor, deixe-me saber se você tiver alguma dúvida ou sugestão .

fonte: https://www.sitepoint.com/leaflet-create-map-beginner-guide/

#leafletjs 

Como Criar Um Mapa Usando Leaflet.js Para iniciantes
Jennie  Hane

Jennie Hane

1625956200

Leaflet.js Crash Course with Practical Project | Open-source interactive Maps

⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. I’ve started using Kite and I love it!
https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codersgyan&utm_content=description-only

Leaflet.js crash course with practical project | Open-source interactive maps 🔥
In this video we will learn how to build interactive maps using Leaflet js and javascript.
We can build light-weight, mobile friendly and advance maps using this library.

We will build a store locator mini project also where we will display all pizza our outlets.

Source code: https://github.com/codersgyan/leaflet-store-locator

NodeJs crash course: https://youtu.be/wdBCoRMMxto
Tailwind css crash course: https://youtu.be/91evwKVzGRE
Realtime pizza app using Node Js: https://www.youtube.com/playlist?list=PLXQpH_kZIxTVRmXQN9J0Az76te5mAreLV

You may connect with me:
Facebook - ✅ https://www.facebook.com/codersgyan
Discord - ✅ https://discord.gg/WPfWD3B
Telegram - ✅ https://t.me/joinchat/AAAAAFbBD_inny1ksCzOvA
Instagram - ✅ https://www.instagram.com/codersgyan
Twitter - ✅ https://twitter.com/CoderGyan

You may support this channel by becoming a patron :)
https://www.patreon.com/codersgyan

Time stamps :-
0:00:00 - Intro
1:08:52 - Mini project

#leaflet #maps #leafletJs #storeLocator #interactiveMaps

#leafletjs #storelocator #interactivemaps

Leaflet.js Crash Course with Practical Project | Open-source interactive Maps