4 formas de pintar mapas con jQuery y JavaScript

25-04-2016 - Andrés Cruz

4 formas de pintar mapas con jQuery y JavaScript In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

Los mapas son un recurso fundamental en algunas aplicaciones en las que se requiera saber la ubicación de algún ente pero que no necesariamente deseamos que sea exacta -como en el caso de Google Map- si no solo obtener el país, región o estado de una forma gráfica.

Existen muchos plugins para pintar mapas mundiales, continentales, regiones, estados y en esta entrada veremos algunos de ellos.

El vector es el rey

corona

Un punto común en todos los plugins para pintar mapas que veremos aquí, es el uso de los vectores como tecnologías fundamental para pintar los mapas; esto lo puedes corroborar viendo el código fuente de los mapas:

jquery vector tags de un mapa del mundo

Y que todos los plugins para dibujar mapas emplean jQuery:

jquery logo

jVectorMap

jVectorMap es una interesante obción para pintar mapas; verás que puedes aplicar zoom sobre las diferentes secciones que conforman el mapa y estas no se pixelan (y es una características fundamental en los vectores); en general permite:

Mapa del mundo:

jVectorMap mapa del mundo

Mapa por país y sus estados:

jVectorMap mapa de los EEUU

Inclusive por regiones que definamos:

jVectorMap mapa de una región

La única pega, es que es de pago para proyectos comerciales, ver más sobre la licencia en el siguiente enlace.

World Map Generator

El plugin World Map Generator nos brinda algunas opciones menos que el plugin anterior ya que no nos permite visualizar los estados de un país (un nivel de detalle menos) ni hacer zoom, aunque debes de tener en cuenta la licencia para incorporar en nuestros proyectos; para este caso es MIT:

World Map Generator mapa del mundo

jQuery Mapael

Este plugin jQuery Mapael tiene muchísimas opciones para personalizar los mapas; permite seleccionar por países, estados, regiones e inclusive podemos incorporar otros gráficos y textos para enriquecer más el contenido:

jQuery Mapael, varios mapas

Entre otras cosas como el manejo de eventos; su licencia, MIT.

HTML5 Interactive Maps

HTML5 Interactive Maps ofrece tambien várias modalidades para ver los mapas por paises, sectores inslusive permite agregar capas de información sobre el mapa, entre otras opciones de personalización; lo malo, es de pago y bastante costoso:

HTML5 Interactive Maps, varios mapas

Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!