Лучшие библиотеки и API JavaScript для создания карт
Хочешь проверить свои знания по фронтенду?
Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!
Решать задачи
×
Сокращенный перевод статьи «Top JavaScript maps API and libraries».
Большинство приложений и сайтов, которыми мы пользуемся сегодня, показывают местоположение и различные данные на картах. Карты используются повсюду: от сайтов доставки еды до онлайн-магазинов и сложных приложений для логистических компаний. Они очень широко используются в веб-дизайне, и если они представляют какие-то данные, мы обычно ожидаем, что отображение будет интерактивным. Отображаться на карте могут, например, дочерние предприятия международной компании, статистические данные по странам, пункты назначения.
Заранее подготовленные карты помогают
людям найти физическое местоположение
вашей компании, не тратя на это лишнее
время.
Занимаясь разработкой приложений, вы неизбежно столкнетесь с необходимостью работы с картами. Какие инструменты использовать для этого? Платные или с открытым исходным кодом? Какие-то отдельные программы или веб-сервисы?
Google Maps это хорошее решение, но не единственное и не всегда подходящее. Например, «гуглокарты» не предоставляют таких возможностей кастомизации, как добавление дополнительных виджетов для большей интерактивности ваших карт. Кроме того, вам могут понадобиться специальные карты для конкурсов, исследований, путешествий, походов и прочих целей. Вот почему вам могут пригодиться open-source решения.
Некоторые из этих инструментов могут существенно снизить количество усилий, необходимых для создания интерактивных карт. Многие из них позволяют реализовывать все виды динамических карт при помощи всего лишь нескольких строчек кода.
Вы можете персонализировать карты,
придав им желаемый стиль (некоторые из
них можно видоизменять при помощи CSS)
или нужную степень интерактивности.
Leafletjs
Сайт: https://leafletjs.com/
Звезд на GitHub: 25807, https://github.com/Leaflet/Leaflet/
Цена: бесплатно
Источник данных для карт: OpenStreetMap
Зависимости: нет
Лицензия: BSD 2-Clause “Simplified” License
Категория: библиотека
Examples/Demo/Gallery: https://leafletjs.com/examples.html
Leaflet это одна из лучших библиотек JavaScript для создания mobile-friendly интерактивных карт. Она относительно маленькая, но при этом имеет множество функций и плагинов, простой API и работает во всех браузерах и на всех платформах.
Маленький размер делает Leaflet отличным
вариантом для мобильных приложений и
ситуаций, когда время загрузки и вес
имеют большое значение. Эта библиотека
также имеет множество доступных плагинов,
то есть, вы можете добавить практически
любой функционал, доступный в значительно
более объемных библиотеках.
Leaflet поддерживается ведущими мировыми компаниями: GitHub, Flickr, Facebook, Etsy и многими другими. Поскольку это проект с открытым исходным кодом, члены сообщества могут стать контрибуторами репозитория проекта и сделать его еще лучше.
Кроме того, Leaflet имеет хорошую документацию, а это особенно хорошо для начинающих. Также в интернете можно найти множество примеров использования этой библиотеки, созданных сообществом — это пригодится в случае, если вы вдруг застрянете. Много примеров можно найти и на домашней странице проекта.
Openlayers
Сайт: https://openlayers.org/
Звезд на GitHub: 5517, https://github.com/openlayers/openlayers
Цена: бесплатно
Зависимости: нет
Лицензия: 2-Clause BSD
Категория: библиотека
Примеры: https://openlayers.org/en/latest/examples/
OpenLayers это высокопроизводительный
JavaScript-фреймворк с открытым исходным
кодом, предназначенный для создания
интерактивных карт при помощи различных
сервисов. Вы можете выбрать сервер,
предоставляющий слой карты.
Этот продукт «из коробки» готов к работе в мобильных приложениях и подходит для использования на различных устройствах и в различных браузерах. Чтобы самостоятельно определить внешний вид карты, можно использовать CSS. Реализовать карту в вашем проекте вам поможет специальное руководство.
OpenLayers также подходит для рендеринга векторных данных из GeoJSON, TopoJSON, KML, GML и других географических форматов данных.
Документация OpenLayers хорошо организована и предоставляет большое количество информации для разработчиков. На сайте OpenLayers вы найдете галерею с большой выборкой живых демок, а на GitHub доступны примеры кода.
Mapbox
Сайт: https://www.mapbox.com/
Звезд на GitHub: 4845, https://github.com/mapbox/mapbox-gl-js
Цена: бесплатно, цена платной версии начинается с $4 за 1000 загрузок
Источник данных для карт: Mapbox
Зависимости: нет
Лицензия: Mapbox copyright
Категория: веб-приложение
Примеры: https://docs. mapbox.com/mapbox-gl-js/examples/
Mapbox это одно из самых продвинутых решений для создания карт на данное время. Эта платформа создана опытными разработчиками и для разработчиков. Она предоставляет простой в использовании набор инструментов для создания прекрасных карт как для веба, так и для мобильных приложений. Пользователи получают полный контроль над стилем карты (включая фон). Есть множество крутых дополнительных сервисов, таких как спутниковые изображения, геокодирование или направления.
Платформа Mapbox предоставляет текстуры, иллюстрации, пользовательские маркеры, статичные карты, геокодирование и многое другое. Что касается оплаты, Mapbox имеет пять различных планов, от бесплатного начального плана до полномасштабного корпоративного.
Также платформа предлагает Mapbox Editor — онлайн-редактор, позволяющий пользователям быстро собирать карты с использованием собственных данных. Данные при этом можно импортировать из таблиц (файлы CSV), GeoJSON, KML или GPX.
Документация платформы хорошо
спроектирована, ею легко пользоваться.
Google Maps API
Сайт: https://developers.google.com/maps/documentation
Звезд на GitHub: –
Цена: бесплатно, цена платной версии начинается с $14 за 14000 загрузок в статических картах
Источник данных для карт: Google
Зависимости: нет
Лицензия: Google copyright
Категория: веб-приложение
Примеры: https://developers.google.com/maps/documentation/javascript/examples
Google Maps это безопасный выбор для каждого,
начиная от неопытного веб-мастера и
заканчивая опытным разработчиком. Этот
проект существует уже достаточно долго
и успел зарекомендовать себя в качестве
лидера картографической индустрии.
Можно добавить, что JavaScript API облегчает
интеграцию Google Maps в любое приложение,
сервис или сайт. Кроме того, пользователи
WordPress могут найти множество плагинов
для поддержки Google Maps на своем сайте
(все они используют API для доставки
конечного результата).
Datamaps
Сайт: https://datamaps.github.io/
Звезд на GitHub: 3245, https://github.com/markmarkoh/datamaps
Цена: бесплатно
Источник данных для карт: D3.js
Зависимости: D3.js и TopoJSON
Лицензия: MIT
Категория: библиотека
Примеры: https://datamaps.github.io/
DataMaps — интерактивные карты для визуализации данных, упакованные в простой файл JavaScript. Карты созданы на основе SVG, могут масштабироваться для любого размера экрана и очень зависят от D3.js. Поставляются готовые к использованию карты мира с обозначенными странами, карта США со штатами и комбинированная карта. Данные карт хранятся в виде JSON. Следуя их структуре, можно создавать пользовательские карты.
Jvectormap
Сайт: http://jvectormap.com/
Звезд на GitHub: –
Цена: From $39
Источник данных для карт: jVectorMap
Зависимости: jQuery
Лицензия: GNU GPL, paid
Категория: библиотека
Примеры: http://jvectormap. com/examples/world-gdp/
jVectorMap это библиотека с открытым исходным кодом для создания интерактивных карт. Документации в обычном виде нет, но есть краткое руководство Getting Started, что тоже очень полезно.
JvectorMap использует только нативные браузерные технологии, такие как JavaScript, CSS, HTML, SVG или VML. Для работы не нужны ни Flash, ни любые другие проприетарные плагины браузеров. Благодаря этому jVectorMap работает во всех современных мобильных браузерах.
Bing Maps
Сайт: https://www.microsoft.com/en-us/maps/choose-your-bing-maps-api
Звезд на GitHub: –
Цена: бесплатно, пользовательский тариф (по запросу)
Источник данных для карт: Bing Maps
Зависимости: нет
Лицензия: Microsoft copyright
Категория: веб-приложение
Примеры: https://docs.microsoft.com/en-us/bingmaps/v8-web-control/index
Bing Maps от Microsoft это очень популярная
картографическая платформа. Microsoft
постоянно работает над добавлением
нового функционала и различными
улучшениями платформы.
Здесь есть прекрасный интерактивный набор инструментов разработки AJAX, предоставляющий примеры функций и сниппеты кода разработчикам, создающим приложения на JavaScript. Платформа Bing Maps предоставляет различные варианты API для приложений, включая Web Control, Windows Store apps control, WPF control, REST Services и Spatial Data Services.
Amcharts Map Chart
Сайт: http://www.amcharts.com/javascript-maps/
Звезд на GitHub: –
Цена: бесплатно, платная версия от $180
Источник данных для карт: amCharts
Зависимости: нет
Лицензия: Amcharts copyright
Категория: библиотека
Примеры: https://www.amcharts.com/demos/#maps
amMap это специальная картографическая
библиотека JavaScript (HTML5), разработанная
amCharts. Она не имеет внешних зависимостей
и позволяет вам с легкостью создавать
красивые фоновые, точечные и многие
другие картограммы. Также эта библиотека
поддерживает различные интерактивные
функции.
Этот инструмент можно использовать для показа расположения офисов, маршрутов путешествий, создания карт дистрибьюторов и т. д. Продукт предлагает множество функций, например, вы можете использовать в качестве слоев и фона фотографии или картинки, а также подсвечивать локации и маршруты.
Kartograph
Сайт: http://kartograph.org/
Звезд на GitHub: 1519, https://github.com/kartograph/kartograph.js
Цена: бесплатно
Источник данных для карт: Kartograph
Зависимости: Kartograph.py, Raphael и jQuery
Лицензия: AGPL и LGPL
Категория: фреймворк
Примеры: http://kartograph.org/showcase/
Kartograph это простой и легковесный
фреймворк для генерации SVG-карт без
участия любых других картографических
сервисов. Kartograph.js это библиотека
JavaScript для создания интерактивных карт
на базе SVG-карт Kartograph. Библиотека построена
на Raphael и jQuery.
В Kartograph нет готовых к использованию коллекций карт, но эта библиотека работает с любыми SVG-картами, а также предлагает утилиту Kartograph.py для их создания.
Kartograph не лишен зависимостей (требует Raphael JS для рисования и jQuery). Благодаря документации библиотеки и справки по API (скомбинированным в одной статье) создавать интерактивные карты будет легко и приятно.
ArcGIS
Сайт: https://developers.arcgis.com/
Звезд на GitHub: –
Цена: бесплатно, платная версия от $125 ежемесячно
Источник данных для карт: Esri
Зависимости: нет
Лицензия: Esri copyright
Категория: фреймворк
Примеры: https://developers.arcgis.com/javascript/3/jssamples/
ArcGIS API для JavaScript это легковесный способ
встраивать карты в веб-приложения. Поставляется с большим количеством
функций, примеров, упакованных виджетов
и шаблонов.
Esri имеет очень хороший портал для разработчиков, продуманный и простой в использовании. Благодаря ему вы получаете доступ к ArcGIS APIs и SDKs, хорошую документацию, живые демки, примеры кода и многое другое.
Технология Esri используется в более чем 350 тыс. организаций по всему миру, из них больше двух третей это компании Fortune 500.
Zeemaps
Сайт: https://www.zeemaps.com/
Звезд на GitHub: –
Цена: бесплатно, платная версия от $19.95 в месяц
Источник данных для карт: –
Зависимости: нет
Лицензия: Zeemaps copyright
Категория: веб-приложение
Примеры: https://www.zeemaps.com/mobile?group=1971477
ZeeMaps это картографический сервис
корпоративного уровня, позволяющий вам
с легкостью создавать и публиковать
интерактивные карты, а также делиться
ими. Вы можете конструировать динамические
визуализации географической информации,
создавая карты из вашего списка людей
или мест. Например, вы можете создать
карту мест, которые вы посещали, или
карту адресов ваших клиентов (друзей,
родственников). Все карты хранятся на
их собственных серверах, а доступ к ним
можно получить откуда угодно и в любое
время, с любого стандартного веб-браузера
на компьютере или мобильном устройстве.
Все дополнения к картам могут создаваться путем краудсорсинга. Это делает платформу очень удобной для использования группами людей. Среди отличительных особенностей создаваемых карт — сетки, значки, метки и пользовательские поля.
Этот инструмент предназначен для
особого вида интерактивных карт: он
позволяет вам создавать, публиковать
и делиться картами для презентаций или
геоанализа. ZeeMaps даст вам все те же
функции, что и большинство других
инструментов из нашего списка. Но помимо
этого вы сможете брать входящие данные
для карты из разных источников и
устанавливать 3-уровневый доступ к
картам.
Anymap от Anychart
Сайт: https://www.anychart.com/products/anymap/overview/
Звезд на GitHub: –
Цена: от $79
Источник данных для карт: Anychart
Зависимости: нет
Лицензия: Anycharts copyright
Категория: библиотека
Примеры: https://www.anychart.com/products/anymap/gallery/
AnyMap это одна из популярных JavaScript (HTML5) библиотек для создания диаграмм. С ее помощью вы сможете без особого труда создавать карты. Для ее работы не требуются сторонние библиотеки, такие как jQuery. AnyMap поддерживает все базовые типы карт.
Интерактивные функции AnyMap включают детализацию для понимания особенностей региона, модель событий для обработки действий вьюера карт и цветовую шкалу для автоматической раскраски карты в соответствии с вашими настройками.
Highmaps от Highcharts
Сайт: https://www. highcharts.com/products/highmaps/
Звезд на GitHub: 8999, https://github.com/highcharts/highcharts
Цена: бесплатно и платно (от $390)
Источник данных для карт: Highcharts
Зависимости: jQuery
Лицензия: Highcharts copyright
Категория: библиотека
Примеры: https://www.highcharts.com/maps/demo
Библиотека Highmaps это младшая сестра Highcharts и Highstock — популярных библиотек для создания диаграмм, разработанных норвежской компанией Highsoft. Основные преимущества этой библиотеки — открытый исходный код, легковесность, обеспечивающая высокую производительность рендеринга, и большое количество интерактивных функций.
Среди типов карт, поддерживаемых
Highmaps, есть фоновые картограммы и
пузырьковые карты. Также можно рисовать
линии, чтобы изображать дорогу или реку.
Однако карты-схемы создавать не так
просто, как, например, с amMap или AnyMap.
Также стоит отметить, что ни Highcharts, ни Highmaps не могут работать без jQuery.
Из положительных свойств Highmaps стоит отметить то, что эта библиотека предоставляет готовые к использованию карты (SVG и GeoJSON). Документация довольно обширна и хорошо помогает быстро разобраться в настройках библиотеки.
Cesium
Сайт: https://cesiumjs.org/
Звезд на GitHub: 4941, https://github.com/AnalyticalGraphicsInc/cesium
Цена: бесплатно
Источник данных для карт: Cesium
Зависимости: нет
Лицензия: Apache License 2.0
Категория: библиотека
Примеры: https://cesiumjs.org/demos/
Cesium это картографическая библиотека
JavaScript, работающая на базе WebGL. Поддерживает
3 режима просмотра: 3D-глобус, 2D-карту и
2.5D Columbus View. Работает на различных
платформах и в разных браузерах (о
совместимости беспокоиться не стоит).
Polymaps
Сайт: http://polymaps.org/
Звезд на GitHub: 1533, https://github.com/simplegeo/polymaps
Цена: бесплатно
Источник данных для карт: OSM, Bing
Зависимости: нет
Лицензия: SimpleGeo and Stamen copyright
Категория: библиотека
Примеры: http://polymaps.org/ex/
Polymaps это бесплатная библиотека JavaScript для создания динамических и интерактивных карт. В отличие от обычной картографии OpenStreetMap, CloudMade, Bing и пр., она работает с картами на основе изображений и векторов, предоставляя быстрый показ наборов данных в разном приближении. Поддерживает различные визуальные презентации.
Основное достоинство этой библиотеки
— способность очень легко объединять
растровые и векторные данные из разных
источников. Она может удовлетворить
все ваши требования, в частности, позволит
вам с легкостью добавлять ваши собственные
цвета, делать группировки и осуществлять
взаимодействие с картой. Polymaps также
довольно эффективна: запускается она
быстро, хорошо справляется с загрузкой
фона, а делают это всего 30 Кб JavaScript.
Плюс использования SVG (масштабируемой векторной графики) для создания карт заключается в том, что многие параметры стилей, которые можно применять к веб-документам при помощи CSS, также будут работать в вашем дизайне карты.
Поскольку Polymaps может загружать данные во всех масштабах, она хорошо подходит для показа информации на уровне страны и далее к штатам, городам, округам и отдельным улицам.
Mapael
Сайт: https://www.vincentbroute.fr/mapael/
Звезд на GitHub: 922, https://github.com/neveldo/jQuery-Mapael
Цена: бесплатно
Источник данных для карт: Raphael.js
Зависимости: jQuery
Лицензия: MIT License
Категория: библиотека
Примеры: https://www.vincentbroute.fr/mapael/
jQuery Mapael позволяет создавать карты с
отличной визуализацией данных, а также
интерактивные карты. Можно, например,
создать карту и назначить каждому
региону какой-то цвет. Можно сделать
обработку событий по клику или наведению
мыши.
Карта создается с учетом SEO (предоставляется альтернативный контент для роботов поисковиков, неспособных исследовать контент, генерируемый JavaScript).
Mapael предоставляет коллекцию карт из собственного репозитория. Документация и описание API скомбинированы в одной статье, но руководство подробное и начать пользоваться библиотекой легко.
Заключение
Согласно Google Trends, самыми популярными инструментами для работы с картами являются Leaflet, Google Maps API и Mapbox. На графике видно, как отличаются (от лидеров) по запросам Bing Maps API и Openlayers, несмотря на то, что они тоже весьма популярны.
Javascript Tools for mappingВсе бесплатные библиотеки в нашем списке прекрасно справляются с созданием интерактивных карт. Все API способны производить отличные картографические системы, так что ваш выбор должен сообразовываться с нуждами вашей компании (в том числе и будущими).
Мир возможностей — используйте VTAP API Designer и подключайтесь к внешним приложениям
Поскольку данные являются важным элементом нашей повседневной жизни, Vtiger стремится сделать данные легкодоступными даже вне CRM.
Одна из самых важных особенностей Vtiger Application Platform (VTAP) — это способность передавать необходимые данные из CRM в любое место и наоборот. И объединяя VTAP Инструмент конструктора модулей, который позволяет настраивать пользовательский интерфейс, с помощью API Designer, который может подключаться к внешним приложениям, открыл мир возможностей.
Напомним, мы говорили о платформе VTAP в наших предыдущих блогах.
- Инструмент Module Designer поможет вам настроить пользовательский интерфейс.
- Инструмент API Designer помогает создавать собственные API REST.
В этом блоге мы обсудим, как мы можем подключиться к другим приложениям, поддерживающим REST API, и показать данные внутри пользовательского интерфейса Vtiger. Для этого мы будем использовать:
- Конструктор API для подключения и получения данных из внешних приложений
- Инструмент Module Designer для добавления пользовательского интерфейса виджета
Тематическое исследование: Получение сведений о погоде для местоположения контакта и отображение сведений в записи контакта.
Давайте посмотрим, как мы можем получить информацию о погоде для контакта и отобразить ее внутри виджета в контакте. Подробная страница. openweathermap.org предоставляет бесплатный погодный API. Вы можете зарегистрироваться и получить ключ API для доступа к детали из более чем 200,000 XNUMX городов.
Вот как это будет выглядеть в записи контакта в Vtiger CRM после подключения к OpenWeatherMap.
Начнем с API Designer.
Шаг 1. Использование API Designer для подключения и получения данных с openweathermap.org.
На этом этапе мы:
- Создайте API с помощью API Designer
- Определите конечные точки на основе HTTP
- Определение конечных точек на основе HTTP
Все наши API зависят от ВАДЛ(Vtiger Application Definition Language), который основан на XML и позволяет вызывать любые конечные точки на основе HTTP.
Нам необходимо определить структуру конечной точки HTTP, которая обычно включает тип запроса, такой как GET, POST, PUT, DELETE, конечную точку URL, заголовки запросов и аутентификацию, такую как базовая проверка подлинности и т. Д. Чтобы получить доступ к городским сведения о погоде из openweathermap.org они определили запрос GET с конечной точкой ниже.
ПОЛУЧИТЬ api.openweathermap.org/дата/2.5/weather?q= {город имя} & appid = {API (Программный интерфейс приложения) ключ}
Нам нужно сопоставить это с VADL, и ему нужно что-то вроде примера ниже:
Позвольте мне объяснить этот процесс шаг за шагом:
- Любой HTTP API (Программный интерфейс приложения) находится под a отдых узел с обязательным атрибутом метода, который определяет тип запроса HTTP (GET, POST и т. д.).
- Внутри этого мы используем URL чтобы попасть в конечную точку API.
- Обратите внимание, что есть атрибуты с URL узел.
Эти атрибуты являются динамической частью конечной точки и используются для замены их значениями во время выполнения.
- Любой атрибут с динамическим значением (добавить в начале @) будет принят при передаче в запросе; здесь мы использовали @city.
- Для ключа API вы можете вставить значение из openweathermap. Для любого атрибута убедитесь, что вы добавили $ с именем атрибута, чтобы заменить их во время выполнения.
- Компания CDATA раздел внутри URL. Такие специальные символы, как &, сохраняются.
После сохранения и публикации вы можете получить доступ к API из внешних приложений, как и другие наши REST API с конечными точками. Посмотрите на URL-адрес ниже. Мы вызываем API с именем API get_weather. Вы можете получить доступ к окончательному xml из здесь так же.
https://xxxx.odx.vtiger.com/restapi/vtap/api/get_weather?city=London
Одно важное замечание: вы должны занести в белый список каждый домен API в настройках API.
Вы также можете получить доступ к этому API из Vtiger Javascript API, и мы расскажем вам, как это сделать. Перед этим мы хотим создать виджет на странице сведений, чтобы отображать информацию о погоде.
Для этого мы перейдем в Конструктор модулей, выберем Контакты и добавим TAP-скрипт.
Шаг 2. Добавление нового виджета погоды с помощью конструктора модулей
На этом этапе мы будем
- Добавить виджет на странице сведений
- Добавить визуальный компонент для виджета — Карта
- Добавьте модель всплывающего окна и настройки администратора
Начнем.
Добавление виджета
Чтобы добавить виджет на страницу с подробностями, мы предоставили API-интерфейсы javascript VTAP.Компонент.Регистр.
Это поможет вам определить тип кнопки, виджета или значка, которые вы можете добавить на определенную страницу.
Например:
- Чтобы добавить кнопку на страницу списка, используйте «LIST_BASIC_BUTTON
- Чтобы добавить виджет на страницу сведений, используйте «DETAIL_SUMMARY_WIDGET
Чтобы увидеть полный список таких хуков, нажмите здесь.
Чтобы определить, как должен выглядеть виджет, нам нужно добавить компонент, который будет иметь необходимый HTML. В этом случае мы переходим к компоненту WeatherWidgetContents.
В Vtiger компонент является основой любого интерфейса пользовательского интерфейса, такого как виджеты, кнопки и т. Д. Определяется базовый каркас компонента. здесь.
Компонент WeatherWidgetContents выполняет следующие действия:
- Вызовите API openweathermap get_weather, который мы создали в API Designer.
- Загрузите некоторые основные данные, такие как текущее время, время восхода и заката, температура и общий прогноз.
- Загрузите Open Street и покажите город на карте.
Чтобы понять структуру компонента Vtiger, вам нужно немного знать Компонент Vue поскольку наша платформа VTAP построена на нем.
Рассмотрим пример ниже. Здесь мы называем get_weather API, который мы добавили в API Designer (внутри созданной функции). VTAP.Detail.Record () Javascript API предоставляет подробную информацию о записи. Мы будем получать доступ к информации поля города рассылки контактов, чтобы получить доступ к информации о погоде.
После получения данных мы используем данные о погоде в шаблоне для их визуализации с помощью функций, специфичных для компонентов, определенных внутри методов.
МЫ ИСПОЛЬЗУЕМ VTAP.CustomApi.Get API для получения данных с openweathermap.org путем вызова get_weather API написан в API Designer. Назначьте ответ переменной данных, чтобы к нему можно было получить доступ:
- Компонентный метод обработки
- Шаблон для показа.
Многие вспомогательные функции написаны в методах, помогающих отображать время и температуру в удобочитаемом формате.
Вы можете увидеть код здесь.
Вот как это будет выглядеть, если вы сохраните и опубликуете скрипт и откроете контакт, у которого есть город рассылки. Но тебе не кажется, что это немного скучно? Почему бы не добавить карту?
- Добавление визуального компонента — карта
В этом примере давайте добавим карту OpenStreet и покажем на ней город рассылки.
Чтобы добавить карту Open Street, нам сначала нужно подключить ее файл библиотеки. Библиотека Javascript в VTAP позволяет включать любую библиотеку в среду выполнения, используя VTAP.Resource.Require API.
Вы можете включить эти библиотеки при регистрации самого виджета деталей.
Теперь нам нужно показать карту в WeatherWidgetContent. Начните с добавления заполнителя в шаблон и загрузки его после получения данных из API get_weather с координатами. Вы можете получить полный сценарий из наших примеров здесь и посмотрите его в действии.
Теперь предположим, что вы хотите выпустить это как модуль расширения, и каждый клиент хочет установить его и использовать свой собственный ключ API openweathermap.org. Для этого мы можем хранить данные клиентов с помощью наших API-интерфейсов хранилища javascript, к которым можно получить доступ в API Designer с помощью переменные-заполнители.
- Добавление модели всплывающего окна и настроек администратора
Давайте создадим небольшое модальное всплывающее окно, к которому только администраторы могут получить доступ и сохранить ключ API в нашем хранилище данных. Сначала зарегистрируйте компонент, чтобы настройки отображались на странице списка.
Вот как это будет выглядеть на странице списка.
- Хранение данных в Vtiger
Мы будем использовать VTAP.AppData API для хранения и получения ключей API. Обратите внимание, что мы используем weather_apikey в качестве ключа для хранения, и к нему можно получить доступ в API Designer с помощью $ apps. $ App.Contacts.weather_apikey.
Вы можете получить доступ ко всему коду WeatherSettings из здесь.
После использования API данных хранилища VTAP для хранения ключа API мы можем изменить определение get_weather в API Designer, как показано ниже. Мы заменяем прямое значение ключа на $ apps. $ app.Contacts.weather_apikey.
Теперь вы находитесь в состоянии, когда вы можете опубликовать свое расширение на нашем рынке, поскольку вы сделали ключ API настраиваемым для каждого клиента.
По любым другим вопросам, пожалуйста, отправьте электронное письмо по адресу [электронная почта защищена].
Подпишитесь на версию для разработчиков здесь.
Теги:# платформа с низким кодом#SalesBestPracticesCRM блогиНастройка CRMВТАПAPI VtigerVtiger CRMПлатформа с низким кодом vtigerКонструктор модулей Vtiger
Класс карты | Microsoft Узнайте
Редактировать
Твиттер LinkedIn Фейсбук Электронная почта
- Артикул
- Упаковка:
- лазурные карты-управление
Элемент управления визуальной и интерактивной веб-картой.
Конструкторы
Карта (строка | HTMLElement, Сервис | Отображает карту в указанном контейнере. |
Свойства
аутентификация | |
органы управления | |
события | |
изображение | |
слоя | |
маркеры | |
всплывающие окна | |
источники |
Методы
являются | Возвращает логическое значение, указывающее, все ли плитки в текущем окне просмотра для всех источников загружены или нет. |
очистить() | Удаляет с карты все добавленные пользователем источники, слои, маркеры и всплывающие окна. Добавленные пользователем изображения сохраняются. |
распоряжаться () | Очистить ресурсы карты. Карта не будет работать правильно после вызова этого метода. |
получить | Возвращает текущие свойства камеры. |
получить | Возвращает элемент HTMLCanvasElement, на который нарисована карта. |
получить | Возвращает HTMLElement, содержащий HTMLCanvasElement карты. События карты (например, панорамирование и масштабирование) присоединяются к этому элементу. |
получить | Возвращает элемент HTMLElement, содержащий карту. |
получить | Возвращает параметры службы, с которыми был инициализирован элемент управления картой. |
получить | Возвращает текущие настройки стиля элемента управления картой. |
получить | Вернуть текущие настройки трафика управления картой. |
получить | Вернуть текущие настройки обработчика взаимодействия с пользователем элемента управления картой. |
пикселей | Преобразует массив объектов Pixel в массив объектов географического положения на карте. |
позиций | Преобразует массив объектов Positions в массив объектов Pixel относительно контейнера карты. |
изменить размер (любой) | Измените размер карты в соответствии с размерами элемента-контейнера. |
изменение размера (число | строка, число | строка, любое) | Изменяет размер элемента-контейнера карты, а затем самой карты. |
комплект | Установить камеру управления картой с анимированным переходом. Любые параметры, которые не указаны, по умолчанию будут текущие значения. |
комплект | Задайте параметры службы. |
комплект | Установите параметры стиля элемента управления картой. Любые неуказанные параметры по умолчанию будут принимать свои текущие значения. |
набор | Установите параметры трафика для карты. Любые неуказанные параметры по умолчанию будут принимать свои текущие значения. |
набор | Установите обработчики взаимодействия с пользователем элемента управления картой. |
стоп() | Останавливает любой текущий анимированный переход. |
триггер | Запустить визуализацию одного кадра. Используйте этот метод со слоями WebGL, чтобы перерисовать карту, когда слой свойства или свойства, связанные с изменением источника слоя. Вызов этого несколько раз перед рендерингом следующего кадра по-прежнему будет приводит к рендерингу только одного кадра. |
Сведения о конструкторе
Map(string | HTMLElement, Service
Сведения о собственности
аутентификация
контролирует
события
изображение
слои
маркеры
источники
Детали метода
прозрачный()
распоряжаться ()
получить
получить
получить
получить
получить
получить стиль
получить
получить
пикселей
позиции
изменить размер (любой)
изменить размер (число | строка, число | строка, любое)
set
набор
установить стиль
установить
установить
останавливаться()
триггер
Карта | Справка по API просмотра
Иерархия
- асинхронный инициализируемый
- карта
- MapInterface
- карта
Индекс
Конструкторы
- конструктор
События
- на
Инициализация Ошибка - на
Инициализировано
Свойства
- _инициализация
- база
Карты - экспорт
Карта Изображение Опции - экстент
Менеджер - подходит
Плитка Карты ToExtent - полный
объем - начальный
Расширение - инициализация
Ошибка - — это
Инициализировано - Слой
Темы Информация - карта
Услуги - карта
Услуги Отфильтровано Просмотр - оригинал
URL-адрес - основной
Карта Служба - сервис
Слои Добавлено - набор
Экстент OnLoad - сайт
- пространственный
Артикул - поддерживается
Экспорт Форматы - единиц
- адрес
Методы
- _configure
Карта Услуги - _configure
Объект - _initialization
Ошибка Обработчик - _initialized
Обработчик - _rest
Ошибка Обработчик - _rest
Загрузка Обработчик - добавить
Карта Сервис - добавить
Служба Слои - все
слои - все
слои и таблицы - все
Столы - применить
Каталог Слои Изменить - применить
Запуск Тема - вычислить
Шкала - до
При инициализации - экспорт
Карта - отфильтровано
Слои - find
Layer From Matching Esri Feature Layer - найти
Карта Сервис ById - получить
Карта - инициализировать
- загрузка
Сервис Слои InMap - обновить
Отфильтровано Коллекции - удалить
Карта Сервис - удалить
Служба Слой - резюме
Подвесной Слои - комплект
Элемент Слой Исключительно Видимый
Конструкторы
конструктор
События
на
на
Унаследовано от AsyncInitializable. onInitializationFailed
- Определено в Essentials.ts:262
Декларация типа
Параметры
- Ошибка
: Ошибка
Возвращает недействительным
- Ошибка
на
на
Унаследовано от AsyncInitializable.onInitialized
- Определено в Essentials.ts:268
Декларация типа
Параметры
отправитель: любой
Возвращает недействительным
Свойства
Частная _инициализация
_инициализация: логическое значение
Унаследовано от AsyncInitializable._initializing
- Определено в Essentials.ts:270
база
база
- Определено в Essentials.
ts:2288
экспорт
экспорт
- Определено в Essentials.ts:2316
экстент
экстент
- Определено в Essentials.ts:2322
подходит
подходит
- Определено в Essentials.ts:2299
полный
полный
- Определено в Essentials.ts:2292
Начальный
начальный
- Определено в Essentials.ts:2294
инициализация
инициализация
Унаследовано от AsyncInitializable. initializationFailure
- Определено в Essentials.ts:251
— это
равно
Унаследовано от AsyncInitializable.isInitialized
- Определено в Essentials.ts:253
Слой
слой
- Определено в Essentials.ts:2310
карта
карта
- Определено в Essentials.ts:2301
карта
карта
- Определено в Essentials.ts:2306
оригинал
оригинал
- Определено в Essentials.
ts:2290
основной
основной
- Определено в Essentials.ts:2312
сервис
служба
- Определено в Essentials.ts:2320
набор
set
- Определено в Essentials.ts:2329
сайт
сайт: SiteInterface
Унаследовано от AsyncInitializable.site
- Определено в Essentials.ts:257
пространственный
пространственный
- Определено в Essentials.ts:2324
поддерживается
поддерживается
- Определено в Essentials.
ts:2314
единиц
единиц: DistanceUnit
- Определено в Essentials.ts:2318
адрес
URL: строка
Унаследовано от AsyncInitializable.url
- Определено в Essentials.ts:255
Методы
Private _configure
Частный _configure
Частная _инициализация
Private _initialized
Частный _rest
Частный _rest
добавить
добавить
все
- Определено в Essentials.ts:2352
Возвращает Слой[]
все
- Определено в Essentials.
ts:2360
Возвращает Слой[]
- Определено в Essentials.
все
- Определено в Essentials.ts:2356
Возвращает Слой[]
применить
- Определено в Essentials.ts:2446
Параметры
деталейРезультаты: любые
Возвращает недействительным
применить
- Определено в Essentials.ts:2447
Возвращает недействительным
расчет
- Определено в Essentials.ts:2372
Возвращает число
до
экспорт
отфильтровано
- Определено в Essentials.
ts:2364
Возвращает Слой[]
- Определено в Essentials.
find
- Определено в Essentials.ts:2435
Параметры
- Слой
: FeatureLayer
Возвращает уровень
найти
получить
- Определено в Essentials.ts:2348
Карта возврата
инициализировать
загрузка
- Определено в Essentials.ts:2368
Параметры
- Карта
: Карта
Возвращает недействительным
обновление
- Определено в Essentials.
- Определено в Essentials.