13 bibliotecas de JavaScript para crear mapas interactivos y personalizados

Anteriormente presentamos Google Map Maker y otras 10 herramientas para ayudarlo a construir mapas. Sin embargo, si prefieres usar las bibliotecas de Javascript, tenemos el post para ti. Estas son las bibliotecas de JS que puede usar para mostrar marcadores de mapas especiales, dibujar líneas de ruta personalizadas o incluso mostrar un diálogo cuando se desplaza o hace clic en ciertos puntos del mapa..

Personalice sus mapas en el estilo que desee, algunos de ellos se pueden diseñar con CSS, o Personaliza tu mapa para que sea tan interactivo como quieras.. La fuente de los datos del mapa, las dependencias y las licencias de cada biblioteca se han incluido para su conveniencia..

Más sobre Hongkiat:

• Cómo diseñar Google Maps
• Obtención de la ubicación del usuario con HTML5 Geolocation API
• Visualización de datos: más de 20 herramientas y recursos útiles

GMaps

GMaps hace que agregar y personalizar Google Maps sea muy fácil. Además de agregar un mapa, también puede hacer un par de cosas en el mapa, como polilíneas que pueden ser útiles para dibujar una ruta, un control de menú especial e incluso elementos HTML..

GMaps es compatible con los datos con formato JSON que puede utilizar para integrar su mapa con una aplicación en particular, como Foursquare.

• Fuente de datos del mapa: Mapas de Google
• Dependencias: ninguna
• Licencia: Licencia MIT

aquí

A 5KB, jHERE te muestra que el tamaño no importa; Todavía puedes construir un mapa interactivo poderoso con un puñado de opciones de personalización. jHERE deriva la visualización de mapas de HERE map, que es uno de los proveedores de mapas más populares para Windows Phone.

La biblioteca se puede ampliar con nuevas funciones, y hay un par de extensiones desarrolladas para esta biblioteca, incluida una para agregar formas, rutas y marcadores personalizados.

• Fuente de datos del mapa: AQUI Mapas
• Dependencias: jQuery o ZeptoJS
• Licencia: Licencia MIT

Kartograph

Kartograph se compone de dos archivos, Kartograph.ph para generar el mapa en formato SVG y Kartograph.js para agregar elementos interactivos en la parte superior del mapa. Ya que Kartograph.js está construido sobre Raphael.js, el mapa funcionaría muy bien hasta IE7. Puede echar un vistazo a las demostraciones de mapas interactivos para descubrir qué puede hacer Kartograph.

• Fuente de datos del mapa: Kartograph
• Dependencias: Kartograph.py, Rafael y jQuery
• Licencia: AGPL y LGPL

Mapael

jQuery Mapael le permite crear mapas con una elegante visualización de datos, así como interactividad. Por ejemplo, puede crear un mapa y designar cada región en el mapa con diferentes colores según la región. También puede agregar información sobre herramientas en la región, así como controladores de eventos como hacer clic o flotar.

El mapa se ha creado teniendo en cuenta el SEO al proporcionar contenido alternativo para robots de motores de búsqueda que no son capaces de rastrear contenido generado por JavaScript.

• Fuente de datos del mapa: Raphael.js
• Dependencias: jQuery
• Licencia: Licencia MIT

D3js

D3.js es una biblioteca de JavaScript completa que dará vida a sus datos a través de HTML, SVG y CSS. El uso de D3 es bastante variado, incluso para construir un mapa altamente interactivo. Vea este mapa de Desarrollo Global del Banco Mundial y verá las posibilidades de lo que puede construir con D3.js.

• Fuente de datos del mapa: D3.js
• Dependencias: ninguna
• Licencia: Indefinido

DataMaps

Si construir un mapa con D3.js es abrumador, puedes usar DataMaps. DataMaps es esencialmente un plugin D3.js que se desarrolla especialmente para construir mapas. Hereda muchas de las capacidades de D3.js, por lo que puede construir mapas simples o muy personalizados con él. ¿Ya mencioné que el mapa responde??

• Fuente de datos del mapa: D3.js
• Dependencias: D3.js y TopoJSON
• Licencia: Licencia MIT

GeoChart

GeoChart es un mapa de Google simplificado que representa la región, los marcadores y el texto, en lugar de un mapa completo con pequeños detalles. El mapa se genera en SVG y se puede personalizar de muchas maneras, incluso cambiando los colores de la región, agregando ventanas emergentes y marcadores de mapa personalizados..

• Fuente de datos del mapa: Mapas de Google
• Dependencias: ninguna
• Licencia: Leer TOS de Google Maps

Maplace

Maplace, un complemento de jQuery para generar un mapa a través de la API de Google Maps v3. Maplace funciona en todos los navegadores, incluido IE6. Así que este es otro gran complemento que merece su atención si desea crear un mapa de la manera más fácil posible..

• Fuente de datos del mapa: Mapas de Google
• Dependencias: jQuery
• Licencia: Licencia MIT

Majestuoso

Stately es una biblioteca de JavaScript desarrollada para generar mapas de los Estados Unidos. La biblioteca es comparativamente liviana, ya que puedes agregar elementos interactivos sobre tus mapas generados.

• Fuente de datos del mapa: Stately / SVG
• Dependencias: ninguna
• Licencia: Licencia MIT

GeoCompleta

GeoComplete es una biblioteca de JavaScript distinta por sí misma. La biblioteca agregará un campo de entrada junto con el mapa, que mostrará sugerencias de ciudades, países o estados a medida que escribe.

• Fuente de datos del mapa: Mapas de Google
• Dependencias: jQuery
• Licencia: Licencia MIT

Herramientas de mapa

Map Tools proporciona una API intuitiva para agregar Google Maps. Admite la carga de datos JSON con formato geográfico, como TopoJSON y GeoJSON, para representar el mapa. Además de eso, puede agregar marcadores animados que creo que harán que el mapa sea más animado, insertar contenido HTML con variables o marcadores de posición en el manillar..

• Fuente de datos del mapa: Mapas de Google
• Dependencias: GeoJSON / TopoJSON
• Licencia: Licencia MIT

OpenLayers

OpenLayers es un marco de JavaScript de código abierto de alto rendimiento para construir mapas interactivos utilizando varios servicios de mapeo. Puede elegir la fuente de la capa del mapa utilizando una capa en mosaico o una capa vectorial de una serie de servicios de mapas.

OpenLayer viene listo para usar, listo para dispositivos móviles, adecuado para construir mapas en dispositivos y navegadores. Puedes usar CSS para un aspecto diferente de tu mapa. Para implementar el mapa en su web usando OpenLayers, aquí hay un tutorial que le ayudará.

• Fuente de datos del mapa: OpenStreetMap
• Dependencias: ninguna
• Licencia: Indefinido

Folleto

Los desarrolladores dieron Folleto Funciones básicas para funcionar perfectamente, manteniendo su tamaño pequeño, perfecto para dispositivos móviles. Para funciones específicas, simplemente extienda el folleto utilizando complementos. El folleto tiene la mayoría de las funciones de mapas en línea que necesita: capas de mosaico, ventanas emergentes, marcadores y capas de vectores libres como polilíneas, polígonos, círculos o rectángulos. Viene con bonitos diseños predeterminados, aunque puede personalizar el estilo usando CSS3 con facilidad..

Leaflet tiene la mayoría de las funciones de interacción de uso tanto para navegadores móviles como de escritorio.

• Fuente de datos del mapa: OpenStreetMap
• Dependencias: ninguna
• Licencia: Indefinido