13 JavaScript библиотеки за създаване на интерактивни и персонализирани карти

По-рано представихме Google Map Maker и още 10 инструмента, за да ви помогнем да създадете карти. Ако предпочитате вместо това да използвате Javascript библиотеки, имаме поста за вас. Ето библиотеките на JS, които можете да използвате, за да показвате специални маркери на картата, да рисувате персонализирани маршрутни линии или дори да показвате диалогов прозорец, когато задържите или кликнете върху определени точки от картата.

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

Повече за Hongkiat:

• Как да оформите Google Карти
• Получаване на местоположение на потребителя с HTML5 геолокационния API
• Визуализация на данни: 20+ полезни инструменти и ресурси

GMaps

GMaps прави добавянето и персонализирането на Google Карти лесно. Освен добавяне на карта, можете да добавите и няколко неща в картата, като полилинии, които могат да бъдат полезни за начертаване на маршрут, специален контрол на менюто и дори HTML елементи.

GMaps е съвместим с JSON форматираните данни, които можете да използвате, за да интегрирате картата си с конкретно приложение, като Foursquare.

• Източник на данни на картата: Google Maps
• Зависимостите: нито един
• Разрешително: Лиценз на MIT

jHere

При 5KB, JHERE ви показва, че размерът няма значение; все още можете да изградите мощна интерактивна карта с няколко възможности за персонализиране. jHERE получава карта визуализация от HERE карта, която е една от най-популярните карти доставчици за Windows Phone.

Библиотеката може да бъде разширена с нова функционалност и има няколко разширения, разработени за тази библиотека, включително една за добавяне на форми, маршрути и персонализирани маркери..

• Източник на данни на картата: HERE Maps
• Зависимостите: jQuery или ZeptoJS
• Разрешително: Лиценз на MIT

Kartograph

Kartograph се състои от два файла, Kartograph.ph за генериране на картата в SVG формат, и Kartograph.js за добавяне на интерактивни елементи в началото на картата. Тъй като Kartograph.js е построен върху Raphael.js, картата ще работи добре до IE7. Можете да разгледате интерактивните демонстрации на карти, за да откриете какво може да направи Kartograph.

• Източник на данни на картата: Картограф
• Зависимостите: Kartograph.py, Raphael и jQuery
• Разрешително: AGPL и LGPL

Mapael

jQuery Mapael ви позволява да създавате карти с елегантна визуализация на данните, както и интерактивност. Можете например да създадете карта и да обозначите всеки регион на картата с различни цветове на базата на региона. Можете също така да добавите подсказка за региона, както и подобните манипулатори на събития кликване или мътя.

Картата е изградена с оглед на 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 и може да бъде персонализирана по много начини, включително промяна на цветовете в региона, добавяне на изскачащи и персонализирани маркери за карти..

• Източник на данни на картата: Google Maps
• Зависимостите: нито един
• Разрешително: Прочетете TOS на Google Карти

Maplace

Maplace, плъгин jQuery за генериране на карта чрез API на Google Карти v3. Maplace работи във всички браузъри, включително IE6. Така че това е друг страхотен плъгин, който заслужава вниманието ви, ако искате да създадете карта по най-лесния начин.

• Източник на данни на картата: Google Maps
• Зависимостите: jQuery
• Разрешително: Лиценз на MIT

величествен

Отлична е JavaScript библиотека, която е разработена за генериране на карти в САЩ. Библиотеката е сравнително лека, като се има предвид, че можете да добавяте интерактивни елементи върху генерираните карти.

• Източник на данни на картата: Величествен / SVG
• Зависимостите: нито един
• Разрешително: Лиценз на MIT

GeoComplete

GeoComplete е отделна библиотека на JavaScript сама по себе си. Библиотеката ще добави поле за въвеждане заедно с картата, която ще покаже предложения за градове, държави или държави, докато пишете.

• Източник на данни на картата: Google Maps
• Зависимостите: jQuery
• Разрешително: Лиценз на MIT

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

Инструментите за карти предоставят интуитивен API за добавяне на Google Карти. Той поддържа зареждането на гео-форматирани JSON данни като TopoJSON и GeoJSON, за да визуализира картата. Освен това можете да добавяте анимирани маркери, които мисля, че ще направят картата по-оживена, вмъкнете HTML съдържание с променливи или заместители ala Handlebars.

• Източник на данни на картата: Google Maps
• Зависимостите: GeoJSON / TopoJSON
• Разрешително: Лиценз на MIT

OpenLayers

OpenLayers е високопроизводителна JavaScript рамка с отворен код за изграждане на интерактивни карти, използващи различни услуги за картографиране. Можете да изберете източника на слоя на картата, използвайки керемиден слой или векторния слой от редица картови услуги.

OpenLayer идват с мобилни устройства, готови да излязат от кутията, подходящи за създаване на карти между устройства и браузъри. Можете да използвате CSS за различен вид на вашата карта. За да приложите картата в мрежата си с помощта на OpenLayers, ето урок, който ще ви помогне.

• Източник на данни на картата: OpenStreetMap
• Зависимостите: нито един
• Разрешително: Неопределено

Брошура

Разработчиците дадоха Брошура основни функции, които работят перфектно, запазвайки малкия им размер, идеален за мобилни устройства. За конкретни функции, просто разширете Leaflet, използвайки приставки. Leaflet има най-много онлайн функции, които ви трябват: слоеве от плочки, изскачащи прозорци, маркери и свободни векторни слоеве като полилинии, полигони, кръгове или правоъгълници. Той идва с хубав дизайн по подразбиране, въпреки че можете да персонализирате стила с помощта на CSS3 с лекота.

Leaflet има най-много функции за взаимодействие за използване както за мобилни, така и за настолни браузъри.

• Източник на данни на картата: OpenStreetMap
• Зависимостите: нито един
• Разрешително: Неопределено