13 бібліотек JavaScript для створення інтерактивних і налаштованих карт

Раніше ми пропонували Картограф Google і ще 10 інших інструментів, які допоможуть вам створити карти. Проте, якщо ви віддаєте перевагу використанню бібліотек Javascript, то ми отримали повідомлення для вас. Нижче наведено бібліотеки JS, які можна використовувати для показу спеціальних маркерів карти, накреслення ліній маршрутів або навіть відображення діалогового вікна під час наведення або натискання певних точок на карті.

Персоналізуйте свої карти у потрібному стилі - деякі з них можуть бути оформлені за допомогою CSS - або налаштуйте карту як інтерактивну. Джерело даних карти, залежності та ліцензії кожної бібліотеки було включено для вашої зручності.

Докладніше про Hongkiat:

• Як оформляти Карти Google
• Отримання місця розташування користувача за допомогою HTML5 Geolocation API
• Візуалізація даних: 20+ корисних інструментів і ресурсів

GMaps

GMaps допомагає додавати та налаштовувати Карти Google. Крім додавання карти, ви також можете нанести на карту кілька речей, таких як полілінії, які можуть бути корисними для малювання маршруту, спеціального керування меню та навіть елементів HTML..

GMaps сумісний з форматованими даними JSON, які можна використовувати для інтеграції вашої карти з певною програмою, наприклад, Foursquare.

• Джерело даних карти: Гугл-мапи
• Залежності: ні
• Ліцензія: Ліцензія MIT

j

У 5KB, jHERE показує вам, що розмір не має значення; Ви все ще можете створити потужну інтерактивну карту з декількома варіантами налаштування. jHERE отримує візуалізацію карти з карти HERE, яка є однією з найпопулярніших провайдерів карт для Windows Phone.

Бібліотеку можна розширити за допомогою нових функціональних можливостей, а для цієї бібліотеки розроблено кілька розширень, включаючи одну для додавання фігур, маршрутів і спеціальних маркерів..

• Джерело даних карти: HERE Карти
• Залежності: jQuery або ZeptoJS
• Ліцензія: Ліцензія MIT

Картограф

Картограф складається з двох файлів: Kartograph.ph для створення карти у форматі SVG, а Kartograph.js для додавання інтерактивних елементів у верхній частині карти. Оскільки Kartograph.js побудовано на вершині Raphael.js, карта буде добре працювати до IE7. Ви можете ознайомитися з інтерактивними демонстраційними картами, щоб дізнатися, що може зробити Kartograph.

• Джерело даних карти: Картограф
• Залежності: Kartograph.py, Raphael і jQuery
• Ліцензія: AGPL та LGPL

Mapael

jQuery Mapael дозволяє створювати карти з елегантною візуалізацією даних, а також інтерактивність. Ви можете, наприклад, створити карту та позначити кожну область на карті різними кольорами на основі регіону. Також можна додати підказку в регіоні, а також обробники подій натисніть або hover.

Карта будується з урахуванням SEO, надаючи альтернативний вміст для роботів пошукових систем, які не можуть сканувати вміст, створений JavaScript.

• Джерело даних карти: Raphael.js
• Залежності: jQuery
• Ліцензія: Ліцензія MIT

D3js

D3.js є всеосяжною бібліотекою JavaScript, яка допомагатиме вашим даним у життя через HTML, SVG і CSS. Використання D3 досить різноманітне, у тому числі для створення високоінтерактивної карти. Дивіться цю карту Світового банку Світового розвитку, і ви побачите можливості того, що ви можете побудувати за допомогою D3.js.

• Джерело даних карти: D3.js
• Залежності: ні
• Ліцензія: Не визначено

DataMaps

Якщо побудова карти з D3.js є переважною, можна використовувати DataMaps. DataMaps - це, по суті, плагін D3.js, розроблений спеціально для створення карт. Він успадковує багато можливостей D3.js, тому ви можете створювати прості або дуже налаштовані карти з ним. Я згадав, що карта реагує?

• Джерело даних карти: D3.js
• Залежності: D3.js і TopoJSON
• Ліцензія: Ліцензія MIT

GeoChart

GeoChart - це спрощена карта Google, яка надає регіон, маркери та текст, а не повноцінну карту з дрібними деталями. Карта створюється в SVG і може бути налаштована багатьма способами, включаючи зміну кольорів регіону, додавання спливаючих вікон і спеціальних маркерів карт.

• Джерело даних карти: Гугл-мапи
• Залежності: ні
• Ліцензія: Прочитайте TOS Google Maps

Maplace

Maplace, плагін jQuery для створення карти через API Карт Google v3. Maplace працює у всіх браузерах, включаючи IE6. Отже, це ще один відмінний плагін від вашої уваги, якщо ви хочете створити карту найпростішим способом.

• Джерело даних карти: Гугл-мапи
• Залежності: jQuery
• Ліцензія: Ліцензія MIT

Величний

Велика є бібліотека JavaScript, розроблена для створення карт США. Бібліотека порівняно легка, враховуючи, що ви можете додавати інтерактивні елементи поверх створених карт.

• Джерело даних карти: Велика / SVG
• Залежності: ні
• Ліцензія: Ліцензія MIT

GeoComplete

GeoComplete - це окрема бібліотека JavaScript самостійно. Бібліотека додасть поле введення разом з картою, яка покаже пропозиції міст, країн або держав під час введення тексту.

• Джерело даних карти: Гугл-мапи
• Залежності: jQuery
• Ліцензія: Ліцензія MIT

Інструменти карти

Інструменти "Карта" надають інтуїтивно зрозумілий API для додавання Карт Google. Він підтримує завантаження даних у форматі JSON, таких як TopoJSON і GeoJSON, щоб відобразити карту. Крім того, ви можете додати анімовані маркери, які, на мою думку, зроблять карту більш життєздатною, вставити вміст HTML із змінними або заповнювачами ala Handlebars.

• Джерело даних карти: Гугл-мапи
• Залежності: GeoJSON / TopoJSON
• Ліцензія: Ліцензія MIT

OpenLayers

OpenLayers це високопродуктивний фреймворк з відкритим вихідним кодом для створення інтерактивних карт з використанням різних служб відображення. Ви можете вибрати джерело шару карти, використовуючи плитковий шар або векторний шар з ряду картографічних служб.

OpenLayer виходить з мобільного пристрою, який підходить для створення карт через пристрої та браузери. Ви можете використовувати CSS для іншого вигляду вашої карти. Щоб реалізувати карту в Інтернеті за допомогою OpenLayers, можна ознайомитися з підручником.

• Джерело даних карти: OpenStreetMap
• Залежності: немає
• Ліцензія: Не визначено

Листівка

Розробники дали Листівка Основні функції для відмінної роботи, зберігаючи невеликі розміри, ідеально підходять для мобільних пристроїв. Для конкретних функцій просто розширюйте листівку за допомогою плагінів. Листівка має більшість функцій онлайн-карти, які вам потрібні: шари плитки, спливаючі вікна, маркери та вільні векторні шари, такі як полілінії, багатокутники, кола або прямокутники. Він поставляється з гарним дизайном за замовчуванням, хоча ви можете легко налаштувати стиль за допомогою CSS3.

Листівка має найбільше функціональних можливостей взаємодії як для мобільних, так і для настільних браузерів.

• Джерело даних карти: OpenStreetMap
• Залежності: немає
• Ліцензія: Не визначено