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
HI Python

HI Python

1640163960

Folium - Python Data. Leaflet.js Maps

folium

Python Data. Leaflet.js Maps

Python Data, Leaflet.js Maps

folium builds on the data wrangling strengths of the Python ecosystem and the mapping strengths of the Leaflet.js library. Manipulate your data in Python, then visualize it in a Leaflet map via folium.

Installation

$ pip install folium

or

$ conda install -c conda-forge folium

Documentation

https://python-visualization.github.io/folium/

Gallery

There are two galleries of Jupyter notebooks with examples, which you can see using Jupyter's nbviewer:

https://nbviewer.jupyter.org/github/python-visualization/folium/tree/master/examples/

https://nbviewer.jupyter.org/github/python-visualization/folium_contrib/tree/master/notebooks/

Download Details:
Author: python-visualization
Source Code: https://github.com/python-visualization/folium
License: MIT License

#python #leaflet

Folium - Python Data. Leaflet.js Maps

Una guía para principiantes para crear un mapa con Leaflet.js

Leaflet.js es actualmente una de las bibliotecas de mapas más populares . Es una biblioteca de JavaScript flexible, liviana y de código abierto para crear mapas interactivos.

Leaflet es un marco para presentar datos de mapas. Los desarrolladores deben proporcionar los datos, junto con la capa del mapa base. Los mapas se componen de capas de mosaicos junto con compatibilidad con el navegador, interactividad predeterminada, funciones de panorámica y zoom. También puede agregar más capas y complementos personalizados, junto con todo el mapeo en Leaflet. Esta biblioteca de mapas convierte sus datos en capas de mapas y tiene un excelente soporte, lo que la convierte en la primera opción para la mayoría de los desarrolladores. Funciona muy bien en las principales plataformas de escritorio y móviles, lo que la convierte en una biblioteca de JavaScript perfecta para mapas de pantalla móviles y más grandes también.

En este tutorial, les mostraré cómo crear un mapa hermoso e interactivo del Pacífico Sur con HTML, CSS y Leaflet que resaltará las playas más populares. Recopilé los datos del sitio web de TripAdvisor y recopilé las diez mejores playas del Pacífico Sur según la clasificación de la encuesta Travelers 'Choice 2021 .

¿Ha visto algunos mapas en línea interesantes y desea crear uno usted mismo? Siga este emocionante viaje mientras le muestro cómo trazar un mapa genial y resaltar las diez mejores playas usando Leaflet.

Gif de mapa de folleto que muestra las diferentes capas

Creación de un mapa de folletos básico en cuatro pasos

El proceso para crear un mapa simple con folleto es sencillo. Algunos conocimientos previos de HTML y JavaScript son beneficiosos, pero no se preocupe si es un principiante. Es bastante fácil con esta biblioteca de JavaScript, y lo guiaré a través de cada línea de código mientras creo este mapa asombroso y perspicaz.

Crea una página HTML básica

Para empezar, creo una página HTML para representar el objeto del mapa. Luego agrego un </div>para guardar el mapa y le doy una identificación como mapreferencia más adelante. A continuación, agrego algunos detalles de estilo donde especifico el ancho y el alto como 100vwy 100vh. Esto hará que el mapa ocupe toda la 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>

Haga referencia a los archivos de la biblioteca de JavaScript de folletos de código abierto

Como estoy usando la biblioteca de folletos, necesito incluir los archivos JavaScript y CSS necesarios de esta biblioteca. Puede descargar los archivos directamente, usar el administrador de paquetes de JavaScript (npm) para instalar los archivos localmente o usar la versión alojada de su 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>

Nota: el integrityatributo permite que un navegador verifique el script obtenido para asegurarse de que el código no se cargue si la fuente ha sido manipulada.

Prepara los datos

Para trazar cualquier mapa, necesito valores de coordenadas como latitud y longitud. Cotejo la latitud y la longitud de cada uno de los puntos de datos de este sitio aquí . Además, para el desarrollo de folletos, también necesito la capa base, que obtengo de un sitio llamado OpenStreetMap .

Configurar el mapa del folleto

Ahora viene la parte interesante de crear el mapa escribiendo algunas líneas de código. No creerá las pocas líneas de código que se requieren para crear mapas completamente funcionales con Leaflet. Esta facilidad de desarrollo, junto con el hecho de que Leaflet es una biblioteca de JavaScript de código abierto, la coloca en un lugar destacado en la lista de bibliotecas de mapeo.

Entonces, para empezar, recuerde que todo en esta biblioteca JavaScript se accede por la letra "L", y todas las funciones se extienden a través de ella.

Inicializar el mapa

Lo primero que hago es declarar la variable del mapa e inicializarla con el mapa Leaflet. El primer parámetro es el ID del <div>previamente definido. El segundo es donde desea que esté el centro del mapa. El último es el nivel de zoom. Configuré el zoom en 3.5, pero puedes configurarlo como quieras.

Utilizo estos parámetros para mi mapa, pero hay muchas opciones diferentes disponibles para configurar el estado del mapa, la interacción, la animación y los eventos que puede consultar aquí :

 

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

Agrega la capa base

A continuación, agregué la capa de mosaico, que será la capa base para el mapa de folletos. Una capa de mosaicos es un conjunto de mosaicos a los que se accede a través de un servidor mediante una solicitud de URL directa. Esta capa de mosaico agrega los límites geográficos al mapa.

Asegúrese de incluir texto de atribución para esto, ya que la mayoría de los desarrolladores se olvidan de hacerlo:

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);

Agregar los marcadores predeterminados

Para indicar las playas, agrego marcadores. El folleto proporciona esta función de forma predeterminada. Como necesito mostrar diez playas, agregaré un marcador cada una con los valores de latitud y longitud de la playa respectiva:

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! Un mapa de folletos absolutamente encantador y funcional está configurado y listo. ¿No fue muy sencillo el desarrollo de este folleto?

La siguiente imagen muestra cómo se ve todo esto hasta ahora.

Versión inicial del mapa del folleto

Puede encontrar el código completo en este bolígrafo :

Personalización del mapa de folletos

Una de las características útiles de la biblioteca Leaflet JavaScript es su facilidad para construir mapas básicos rápidamente y también tiene un montón de opciones para personalizar los mapas. Entonces, permítanme mostrarles cuatro formas de hacer que este mapa de folletos sea más informativo y estéticamente mejor.

1. Desactive el zoom con el desplazamiento del mouse

Uno de los principales problemas del escritorio es el desplazamiento accidental del mapa al intentar navegar por una página. Para manejar esto, modifico el código donde había declarado el mapa en la etapa de configuración. Agregaré el scrollWheelZoomatributo y lo estableceré en false, lo que garantiza que el mapa se pueda ampliar solo con los botones de zoom. También usaré una forma diferente de establecer el centro y el nivel de zoom que funciona de manera eficiente y es más legible:

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

2. Agrega capas al mapa

Otra característica interesante y útil de Leaflet es la opción de agregar múltiples capas vectoriales. Manteniendo la vista de la calle como una de las capas, agregaré dos capas de mosaicos más de un sitio que proporciona un servicio de mapas web gratuito (WMS). Agregaré una capa de topografía y una capa 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'})
};

Leaflet también proporciona la función para dar al usuario control sobre qué capa renderizar. Usando esa función, agregaré un botón de menú de opciones en la parte superior derecha de la página que le permite seleccionar cuál de las tres capas desea superponer en el mapa:

 

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

Por último, estableceré la capa Topografía como la capa predeterminada para renderizar. En la versión final, volveré a Streetview como la opción predeterminada:

basemaps.Topography.addTo(map);

3. Personaliza los marcadores

El marcador predeterminado es excelente para indicar una ubicación, pero los marcadores personalizados le dan un aspecto personalizado al mapa y es bastante fácil configurarlo usando la biblioteca de folletos.

Para definir un icono, tendré que especificar la URL y el tamaño del icono. Descargaré un icono SVG gratuito y lo alojaré en mi cuenta de GitHub, que proporciona la URL. Estableceré el tamaño en 40, pero puedes mantenerlo más o menos.

Ahora, simplemente agregaré este ícono a cada marcador definido previamente, y eso es todo. Todos los marcadores que indican la playa ahora son iconos de playa:

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);

Vea cómo se ve esta versión personalizada aquí y juegue con el código en CodePen .

 

 

Versión intermedia del mapa de folletos

Este ícono fue solo un ejemplo, así que esté atento a un ícono más divertido mientras cambio el marcador personalizado en la versión final de la visualización.

4. Agregar ventanas emergentes

Al igual que la información sobre herramientas, las ventanas emergentes pueden incluir más información sobre los datos. Se muestra una ventana emergente en los mapas al hacer clic y se puede personalizar según sus preferencias. Con Leaflet, la función emergente se puede agregar muy fácilmente con una función llamada bindPopup.

Como estamos mostrando playas en nuestro objeto de mapa, decido mostrar el nombre de cada playa en la ventana emergente. Solo agrego el texto a la función y lo vinculo a cada uno de los 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);

¡Y eso es una envoltura! Puede encontrar el código completo en CodePen .

 

 

Versión final del mapa del folleto

Otras personalizaciones con mapas de folletos

Además de lo que le he mostrado en este tutorial, hay una gran cantidad de opciones de personalización con Leaflet, como agregar formas como círculos o polígonos, personalizar la ventana emergente y agregar eventos. Puede consultar las instrucciones en la documentación oficial y los numerosos ejemplos proporcionados por Leaflet.

Un complemento abre todo un universo de personalizaciones, y Leaflet, al ser de código abierto, tiene numerosos complementos de terceros que brindan una funcionalidad extendida al mapa original. Puede buscar cualquier complemento desarrollado por la comunidad Leaflet aquí . Puede agregar más mosaicos de mapas, páginas, plantillas de URL, imágenes PNG, imágenes de mosaicos, opciones de zoom avanzadas e interacciones de mosaicos mejoradas con los complementos del folleto. También existe la opción de utilizar la API de Google para la ubicación y la búsqueda.

Conclusión

Como puede ver, es muy fácil y rápido crear mapas interactivos con una biblioteca JS como Leaflet. La instalación es sencilla, funciona de manera eficiente, el código es legible y toda la asignación es manejada convenientemente por la biblioteca. También es una excelente opción para crear mapas interactivos aptos para dispositivos móviles, ya que funciona bien con todas las plataformas móviles. Junto con una gran facilidad de uso, hay muchas opciones de personalización compatibles con Leaflet. Por favor, avíseme si tiene alguna pregunta o sugerencia .

Entonces, dé un paseo por la playa o comience a trazar mapas. ¡Ambas opciones hacen que sea una actividad relajada y divertida!

Enlace: https://www.sitepoint.com

#html #css #webdev #leaflet #javascript 

Una guía para principiantes para crear un mapa con Leaflet.js
Hoang  Ha

Hoang Ha

1639125712

Cách tạo một bản đồ đẹp với HTML, CSS và Leaflet.js

Leaflet.js hiện là một trong những thư viện ánh xạ phổ biến nhất . Đó là một thư viện JavaScript linh hoạt, nhẹ và mã nguồn mở để tạo các bản đồ tương tác.

Leaflet.js là một khuôn khổ để trình bày dữ liệu bản đồ. Dữ liệu, cùng với lớp bản đồ cơ sở, phải được cung cấp bởi các nhà phát triển. Bản đồ bao gồm các lớp xếp cùng với hỗ trợ trình duyệt, khả năng tương tác mặc định, lia và thu phóng. Bạn cũng có thể thêm nhiều lớp và plugin tùy chỉnh hơn, cùng với tất cả các ánh xạ trong Tờ rơi. Thư viện bản đồ này chuyển đổi dữ liệu của bạn sang các lớp bản đồ và có sự hỗ trợ tuyệt vời, khiến nó trở thành lựa chọn hàng đầu cho hầu hết các nhà phát triển. Nó hoạt động thực sự tốt trên các nền tảng máy tính để bàn và di động chính, làm cho nó trở thành một thư viện JavaScript hoàn hảo cho thiết bị di động và bản đồ màn hình lớn hơn.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách tạo một bản đồ đẹp và tương tác của Nam Thái Bình Dương bằng HTML, CSS và Leaflet.js sẽ làm nổi bật những bãi biển nổi tiếng nhất. Tôi đã thu thập dữ liệu từ trang web TripAdvisor và đối chiếu mười bãi biển hàng đầu của Nam Thái Bình Dương theo xếp hạng của cuộc thăm dò Travellers 'Choice 2021 .

Bạn đã xem một số bản đồ trực tuyến thú vị và muốn tự mình tạo ra một bản đồ? Hãy tiếp tục hành trình thú vị này khi tôi hướng dẫn bạn cách vẽ một bản đồ thú vị và làm nổi bật mười bãi biển hàng đầu bằng cách sử dụng Tờ rơi.

Bản đồ tờ rơi gif hiển thị các lớp khác nhau

Tạo bản đồ tờ rơi cơ bản trong bốn bước

Quá trình xây dựng một bản đồ đơn giản với tờ rơi rất đơn giản. Một số kiến ​​thức nền tảng về HTML và JavaScript là có lợi, nhưng đừng lo lắng nếu bạn là người mới bắt đầu hoàn chỉnh. Nó khá dễ dàng với thư viện JavaScript này và tôi sẽ hướng dẫn bạn từng dòng mã khi tôi tạo bản đồ tuyệt đẹp, sâu sắc này.

Tạo một trang HTML cơ bản

Để bắt đầu, tôi tạo một trang HTML để hiển thị đối tượng bản đồ. Sau đó, tôi thêm một </div>để giữ bản đồ và cung cấp cho nó một ID mapđể tham khảo sau này. Tiếp theo, tôi thêm một số chi tiết kiểu nơi tôi chỉ định chiều rộng và chiều cao là 100vw100vh. Điều này sẽ làm cho bản đồ chiếm toàn bộ trang:

<!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>

Tham khảo các tệp của thư viện JavaScript Tờ rơi mã nguồn mở

Vì tôi đang sử dụng thư viện Tờ rơi, nên tôi cần bao gồm các tệp JavaScript và CSS cần thiết của thư viện này. Bạn có thể tải xuống tệp trực tiếp, sử dụng trình quản lý gói JavaScript (npm) để cài đặt tệp cục bộ hoặc sử dụng phiên bản được lưu trữ từ CDN của chúng:

<!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>

Lưu ý: integritythuộc tính này cho phép trình duyệt kiểm tra tập lệnh đã tìm nạp để đảm bảo rằng mã không được tải nếu nguồn đã bị thao túng.

Chuẩn bị dữ liệu

Để vẽ bất kỳ bản đồ nào, tôi yêu cầu các giá trị tọa độ như vĩ độ và kinh độ. Tôi đối chiếu vĩ độ và kinh độ cho từng điểm dữ liệu từ trang web này tại đây . Hơn nữa, để phát triển Tờ rơi, tôi cũng cần lớp cơ sở mà tôi lấy từ một trang web có tên là OpenStreetMap .

Thiết lập bản đồ Tờ rơi

Bây giờ đến phần thú vị của việc tạo bản đồ bằng cách viết một số dòng mã. Bạn sẽ không tin được rằng cần phải có ít dòng mã như thế nào để tạo ra các bản đồ đầy đủ chức năng với Tờ rơi. Sự dễ dàng phát triển này, cùng với thực tế là Leaflet là một thư viện JavaScript mã nguồn mở, đưa nó lên vị trí cao trong danh sách các thư viện ánh xạ.

Vì vậy, để bắt đầu, hãy nhớ rằng mọi thứ trong thư viện JavaScript này đều được truy cập bằng ký tự “L” và tất cả các chức năng đều được mở rộng thông qua nó.

Khởi tạo bản đồ

Việc đầu tiên tôi làm là khai báo biến bản đồ và khởi tạo nó bằng bản đồ Tờ rơi. Tham số đầu tiên là ID của tham số <div>đã xác định trước đó. Thứ hai là nơi bạn muốn trung tâm của bản đồ. Cuối cùng là mức thu phóng. Tôi đã đặt mức thu phóng thành 3,5, nhưng bạn có thể đặt mức thu phóng thành bất kỳ thứ gì bạn thích.

Tôi sử dụng các thông số này cho bản đồ của mình, nhưng có rất nhiều tùy chọn khác nhau có sẵn để thiết lập trạng thái của bản đồ, tương tác, hoạt ảnh và sự kiện mà bạn có thể xem tại đây :

 

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

Thêm lớp cơ sở

Tiếp theo, tôi đã thêm lớp xếp, sẽ là lớp cơ sở cho bản đồ Tờ rơi. Lớp xếp là một tập hợp các ô được truy cập qua máy chủ bằng một yêu cầu URL trực tiếp. Lớp ô xếp này thêm các ranh giới địa lý vào bản đồ.

Hãy nhớ bao gồm văn bản ghi nhận tác giả cho việc này, vì hầu hết các nhà phát triển đều quên làm điều đó:

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);

Thêm các điểm đánh dấu mặc định

Để chỉ ra các bãi biển, tôi thêm các điểm đánh dấu. Tờ rơi cung cấp tính năng này như mặc định. Vì tôi cần hiển thị mười bãi biển, nên tôi sẽ thêm một điểm đánh dấu mỗi bãi biển với các giá trị kinh độ và vĩ độ của bãi biển tương ứng:

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);

Thì đấy! Một bản đồ Tờ rơi hoàn toàn đáng yêu và đầy đủ chức năng đã được thiết lập và sẵn sàng. Việc phát triển Tờ rơi này có phải là một việc dễ dàng không?

Hình ảnh dưới đây cho thấy tất cả điều này trông như thế nào cho đến nay.

Bản đồ tờ rơi phiên bản ban đầu

Bạn có thể tìm thấy toàn bộ mã này :

Tùy chỉnh bản đồ Leaflet

Một trong những tính năng hữu ích của thư viện Leaflet JavaScript là cơ sở của nó để xây dựng các bản đồ cơ bản một cách nhanh chóng và nó cũng có một loạt các tùy chọn để tùy chỉnh các bản đồ. Vì vậy, hãy để tôi chỉ cho bạn bốn cách để làm cho bản đồ Tờ rơi này trở nên đầy đủ thông tin hơn và tốt hơn về mặt thẩm mỹ.

1. Tắt tính năng thu phóng khi cuộn chuột

Một trong những vấn đề chính của máy tính để bàn là tình cờ cuộn bản đồ khi cố điều hướng qua một trang. Để xử lý điều này, tôi sửa đổi mã nơi tôi đã khai báo bản đồ trong giai đoạn thiết lập. Tôi sẽ thêm scrollWheelZoomthuộc tính và đặt nó thành false, điều này đảm bảo rằng bản đồ có thể được thu phóng chỉ bằng cách sử dụng các nút thu phóng. Tôi cũng sẽ sử dụng một cách khác để đặt trung tâm và mức thu phóng hoạt động hiệu quả và dễ đọc hơn:

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

2. Thêm các lớp vào bản đồ

Một tính năng thú vị và hữu ích khác của Tờ rơi là tùy chọn thêm nhiều lớp vectơ. Giữ chế độ xem phố là một trong các lớp, tôi sẽ thêm hai lớp lát nữa từ một trang web cung cấp dịch vụ bản đồ web miễn phí (WMS). Tôi sẽ thêm một lớp địa hình và một lớp địa điểm:

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'})
};

Tờ rơi cũng cung cấp tính năng cho phép người dùng kiểm soát lớp nào sẽ hiển thị. Sử dụng tính năng đó, tôi sẽ thêm một nút menu tùy chọn ở trên cùng bên phải của trang cho phép bạn chọn lớp nào trong số ba lớp bạn muốn phủ lên bản đồ:

 

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

Cuối cùng, tôi sẽ đặt lớp Địa hình làm lớp mặc định để hiển thị. Trong phiên bản cuối cùng, tôi sẽ hoàn nguyên về Chế độ xem phố làm tùy chọn mặc định:

basemaps.Topography.addTo(map);

3. Tùy chỉnh các điểm đánh dấu

Điểm đánh dấu mặc định là tuyệt vời để chỉ ra một vị trí, nhưng các điểm đánh dấu tùy chỉnh mang lại giao diện được cá nhân hóa cho bản đồ và khá dễ dàng để thiết lập nó bằng cách sử dụng thư viện Tờ rơi.

Để xác định một biểu tượng, tôi sẽ cần chỉ định URL và kích thước của biểu tượng. Tôi sẽ tải xuống biểu tượng SVG miễn phí và lưu trữ nó trên tài khoản GitHub của mình, tài khoản cung cấp URL. Tôi sẽ đặt kích thước thành 40, nhưng bạn có thể giữ nó nhiều hơn hoặc ít hơn.

Bây giờ, tôi sẽ chỉ cần thêm biểu tượng này vào mỗi điểm đánh dấu được xác định trước đó, và thế là xong. Tất cả các điểm đánh dấu cho biết bãi biển hiện là biểu tượng bãi biển:

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);

Hãy xem phiên bản được cá nhân hóa này trông như thế nào tại đây và chơi với mã trên CodePen .

Bản đồ tờ rơi phiên bản trung gian

Biểu tượng này chỉ là một ví dụ, vì vậy hãy để ý biểu tượng vui nhộn hơn khi tôi thay đổi điểm đánh dấu tùy chỉnh trong phiên bản cuối cùng của hình ảnh trực quan.

4. Thêm cửa sổ bật lên

Giống như chú giải công cụ, cửa sổ bật lên có thể đóng gói thêm thông tin về dữ liệu. Một cửa sổ bật lên trong bản đồ được hiển thị khi nhấp chuột và có thể được tùy chỉnh theo sở thích của bạn. Với Tờ rơi, tính năng cửa sổ bật lên có thể được thêm vào rất dễ dàng với một chức năng được gọi bindPopup.

Vì chúng tôi đang hiển thị các bãi biển trên đối tượng bản đồ của mình, tôi quyết định hiển thị tên của từng bãi biển trong cửa sổ bật lên. Tôi chỉ thêm văn bản vào hàm và liên kết nó với từng điểm đánh dấu:

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);

Và đó là một bọc! Bạn có thể tìm thấy toàn bộ mã trên CodePen .

 

 

Bản đồ tờ rơi phiên bản cuối cùng

Các tùy chỉnh khác với bản đồ Tờ rơi

Ngoài những gì tôi đã chỉ cho bạn trong hướng dẫn này, có rất nhiều tùy chọn tùy chỉnh với Tờ rơi - chẳng hạn như thêm các hình dạng như hình tròn hoặc đa giác, tùy chỉnh cửa sổ bật lên và thêm sự kiện. Bạn có thể xem hướng dẫn trong tài liệu chính thức và nhiều ví dụ được cung cấp bởi Tờ rơi.

Một plugin mở ra toàn bộ vũ trụ tùy chỉnh và Leaflet, là mã nguồn mở, có nhiều plugin của bên thứ ba cung cấp chức năng mở rộng cho bản đồ gốc. Bạn có thể tìm kiếm bất kỳ plugin nào được phát triển bởi cộng đồng Tờ rơi tại đây . Bạn có thể thêm nhiều ô bản đồ, trang, mẫu URL, hình ảnh PNG, hình ảnh ô xếp, tùy chọn thu phóng nâng cao và tương tác ô nâng cao với các plugin Tờ rơi. Ngoài ra còn có tùy chọn sử dụng API của Google cho vị trí và tìm kiếm.

Sự kết luận

Như bạn có thể thấy, việc tạo bản đồ tương tác với thư viện JS như Tờ rơi cực kỳ dễ dàng và nhanh chóng. Việc cài đặt không phức tạp, hoạt động hiệu quả, mã có thể đọc được và tất cả các ánh xạ được thư viện xử lý thuận tiện. Đây cũng là một lựa chọn tuyệt vời để tạo bản đồ tương tác, thân thiện với thiết bị di động, vì nó hoạt động tốt với tất cả các nền tảng di động. Cùng với khả năng sử dụng tuyệt vời, có rất nhiều tùy chọn tùy chỉnh được hỗ trợ bởi Leaflet. Vui lòng cho tôi biết nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào .

Vì vậy, hãy đi dạo trên bãi biển hoặc bắt đầu vẽ bản đồ. Cả hai tùy chọn đều giúp thư giãn và hoạt động vui vẻ!

Nguồn: https://www.sitepoint.com

#html #css #leaflet

 

Cách tạo một bản đồ đẹp với HTML, CSS và Leaflet.js
Sister  O'Kon

Sister O'Kon

1633335840

How Do I Simply Get The Current Geolocation API and Leaflet JS in 2021

Learn How Do I Simply Get The Current Geolocation API and Leaflet JS in 2021

#leaflet #api 

How Do I Simply Get The Current Geolocation API and Leaflet JS in 2021
Opal  Gulgowski

Opal Gulgowski

1627357620

How to Build A IP Tracking App with Vue 3, Tailwind CSS & Leaflet.js

in this video we build an ip tracking app using vue 3 & the composition api, tailwind css & leaflet.js. We cover all the basics of setting up an application using the Vue 3 Composition API such as: setting up the “setup option”, creating data values & functions, making data reactive & lifecycle hooks.

We don’t cover everything, but we touch upon enough to create a simple starting app. This video should give you the knowledge & confidence to start build apps using Vue 3 & the Composition API.

Starting Repo: https://github.com/johnkomarnicki/vue-tailwinds-ip-tracker/tree/starting-files
Completed Repo: https://github.com/johnkomarnicki/vue-tailwinds-ip-tracker/tree/completed-app

Timestamps:
0:00 Introduction
3:42 Project Setup
9:55 Update Page/Document Title
12:07 Search Input
23:04 IP Address Info Component
30:12 Leaflet Map Implementation
36:45 Get Geolocation Function

#vue #vue3 #leaflet #vue3compositionapi
Current Subscribers: 1,789

#tailwind css #vue #leaflet #leaflet.js #css

How to Build A IP Tracking App with Vue 3, Tailwind CSS & Leaflet.js
Maria  Nicolas

Maria Nicolas

1626932520

Java Web GIS and Mapping Programming | Leaflet | Maps JS Libraries

Hope this video will be interesting in the Web or Front-end/GUI/UI application development with Java, JavaScript &, javascript frameworks, OpenLayers, Leaflet, Google Maps APIs JS libraries, and graphs-charts JS libraries to be helpful for those who are interested.
Technology & Tools used:

  1. Eclipse IDE & Selenium Functional/GUI Testing tool
  2. Java 8+ & Thymeleaf(Java-based Template Engine for Front-end/GUI/UI development)
  3. JavaScript &, javascript frameworks, OpenLayers, Leaflet, and Google Maps APIs JS libraries
  4. GeoServer, Postgresql with PostGIS
  5. OSM, Google & Google Earth, Yahoo & Bing Maps server
  6. Maven (building tool)
  7. PostgreSQL with PostGIS database (backend server)
  8. jar based packaging(geospatialwebapp-0.1.0.1.jar)
  9. External or client-side configuration & deployment(Development, Production, and Test) and Web GUI/UI testing
  10. Spring Boot profiles & application Profiles
  11. Web GIS-Mapping programming

#java #javascript #leaflet

Java Web GIS and Mapping Programming | Leaflet | Maps JS Libraries

How to create a React-Leaflet control component with Leaflet-Routing-Machine

Follow along with this sandbox on StackBlitz

When  working with React-Leaflet, there will be times when we want to add our own custom controls to the map. Let’s say that we want to show our users how to get from Point A to Point B.  React-Leaflet doesn’t come with a routing feature straight out of the box, but we can use  third-party plugins to get this done quick and easy.  Leaflet-Routing-Machine gives us exactly the functionality that we want, but how can we get this vanilla Leaflet control plugin to work with our React-Leaflet application?

Using React’s useRef Hook

It’s important to remember that even though we are using React,  Leaflet will be handling the DOM rendering for our map. This means that we are able to access our Leaflet elements by utilizing  React’s useRef hook.

If we take a look at the  docs for the MapContainer component, we see that it has a whenCreated prop:

Map Container Props list from the documentation

#programming #react #leaflet #javascript

How to create a React-Leaflet control component with Leaflet-Routing-Machine
Justyn  Ortiz

Justyn Ortiz

1623747636

Python Tutorial on Making A Multilayer Leaflet Web Map with Folium

Learn how to create Leaflet web maps from scratch with Python and the Folium library.
The tutorial has been extracted from “The Python Mega Course: Build 10 Real World Applications” which you can get here:
https://www.udemy.com/course/the-python-mega-course/?referralCode=405B0BCBCA7B6E1AFE3A

Data sources
The JSON file for the population layer: http://pythonhow.com/data/world_geojson_from_ogr.json
The JSON file for the volcano locations: http://pythonhow.com/data/Volcanoes_USA.txt

#python #leaflet #folium

Python Tutorial on Making A Multilayer Leaflet Web Map with Folium
Hollie  Ratke

Hollie Ratke

1623746012

Python - Create Maps with Folium and Leaflet

Creation of Maps, Markers and Custom Markers with Python Folium and Leaflet.js.

The code is uploaded to github:
https://github.com/code-and-dogs/foliumSuperheros

#maps #python #folium #leaflet #google-maps

Python - Create Maps with Folium and Leaflet

How To Build Maps in Angular with Leaflet, Part 4: The Shape Service

Learn how to build Maps in Angular with Leaflet, learn how to render shapes for the continental states of the United States of America.

Leaflet supports shapes. By providing a GeoJSON file that contains data for boundaries, you can indicate counties, states, and countries on your map.

Note: This is Part 4 of a 4-part series on using Angular and Leaflet.

In this tutorial, you will learn how to render shapes for the continental states of the United States of America.

#angular #leaflet #javascript

How To Build Maps in Angular with Leaflet, Part 4: The Shape Service

How To Build Maps in Angular with Leaflet, Part 3: The Popup Service

In this third part of a series on building Angular apps using Leaftlet, learn how to add a popup service.

Leaflet supports popups. When clicking on markers or specified regions on the map, popups containing text will appear. This provides a way to display additional information on a map.

Note: This is Part 3 of a 4-part series on using Angular and Leaflet.

In this tutorial, you will learn how to add popups to your map using a service to manage the popup logic.

#angular #leaflet #javascript

How To Build Maps in Angular with Leaflet, Part 3: The Popup Service

How To Build Maps in Angular with Leaflet, Part 2: The Marker Service

Learn how to build Maps in Angular with Leaflet, learn how to add markers to your map using a service to manage the marker logic.

Leaflet supports markers. These are indicators placed on the map that can contain information. This provides a way to highlight landmarks and destinations on a map.

Note: This is Part 2 of a 4-part series on using Angular and Leaflet.

In this tutorial, you will learn how to add markers to your map using a service to manage the marker logic.

#angular #leaflet #javascript

How To Build Maps in Angular with Leaflet, Part 2: The Marker Service

How To Build Maps in Angular with Leaflet, Part 1: Generating Maps

Learn how to build dynamic and stylish maps in Angular using Leaflet.

Leaflet is a JavaScript library for creating maps. It comes packed with nice features and is extremely mobile-friendly.

Note: This is Part 1 of a 4-part series on using Angular and Leaflet.

You can use this library to display a map that supports zooming in and out and panning with click and drag.

In this tutorial, you will learn how to integrate Leaflet into an Angular app.

#angular #leaflet #javascript #google-maps

How To Build Maps in Angular with Leaflet, Part 1: Generating Maps

Build a Santa Tracker with Next.js and Leaflet

Learn how to build a Santa Tracker mapping app using Next.js and Leaflet.

In this stream, Alex Troast and I walk through:

  • Setting up a new Next.js app with a map using a Next.js Leaflet Starter
  • Fetching Santa’s locations using an API
  • Adding markers to the map for all of Santa’s locations
  • Adding a path that shows where Santa has traveled and where he has left to go
  • Simulate Santa traveling around the world

#next #nextjs #react #reactjs #leaflet

Build a Santa Tracker with Next.js and Leaflet