Лучшие библиотеки и 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
Цена: бесплатно

Источник данных для карт: OpenStreetMap
Зависимости: нет
Лицензия: 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. Добавление нового виджета погоды с помощью конструктора модулей 

На этом этапе мы будем 

1. Добавить виджет на странице сведений
2. Добавить визуальный компонент для виджета — Карта
3. Добавьте модель всплывающего окна и настройки администратора

Начнем.

Добавление виджета

Чтобы добавить виджет на страницу с подробностями, мы предоставили 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, Сервис Параметры и стиль Параметры и пользователь Взаимодействие Параметры и (Камера Параметры | Камера Границы Параметры))

Отображает карту в указанном контейнере.

Свойства

аутентификация
органы управления
события
изображение Спрайт
слоя
маркеры
всплывающие окна
источники

Методы

являются Тайлами Loaded()	Возвращает логическое значение, указывающее, все ли плитки в текущем окне просмотра для всех источников загружены или нет.
очистить()	Удаляет с карты все добавленные пользователем источники, слои, маркеры и всплывающие окна. Добавленные пользователем изображения сохраняются.
распоряжаться ()	Очистить ресурсы карты. Карта не будет работать правильно после вызова этого метода.
получить Камера()	Возвращает текущие свойства камеры.
получить Canvas()	Возвращает элемент HTMLCanvasElement, на который нарисована карта.
получить Холст Контейнер()	Возвращает HTMLElement, содержащий HTMLCanvasElement карты. События карты (например, панорамирование и масштабирование) присоединяются к этому элементу.
получить Карта Контейнер()	Возвращает элемент HTMLElement, содержащий карту.
получить Сервис Опции()	Возвращает параметры службы, с которыми был инициализирован элемент управления картой.
получить Стиль()	Возвращает текущие настройки стиля элемента управления картой.
получить Трафик()	Вернуть текущие настройки трафика управления картой.
получить Пользователь Взаимодействие()	Вернуть текущие настройки обработчика взаимодействия с пользователем элемента управления картой.
пикселей ToPositions(Pixel[])	Преобразует массив объектов Pixel в массив объектов географического положения на карте.
позиций До пикселей (Позиция [])	Преобразует массив объектов Positions в массив объектов Pixel относительно контейнера карты.
изменить размер (любой)	Измените размер карты в соответствии с размерами элемента-контейнера.
изменение размера (число | строка, число | строка, любое)	Изменяет размер элемента-контейнера карты, а затем самой карты.
комплект Камера((Камера Опции | (Камера Границы Параметры и { пеленг?: номер, шаг?: номер })) и анимация Параметры)	Установить камеру управления картой с анимированным переходом. Любые параметры, которые не указаны, по умолчанию будут текущие значения.
комплект Сервис Опции (Сервис Опции)	Задайте параметры службы.
комплект Стиль (Параметры стиля , логическое значение)	Установите параметры стиля элемента управления картой. Любые неуказанные параметры по умолчанию будут принимать свои текущие значения.
набор Трафик (Трафик Варианты)	Установите параметры трафика для карты. Любые неуказанные параметры по умолчанию будут принимать свои текущие значения.
набор Пользователь Взаимодействие (Пользователь Взаимодействие Опции)	Установите обработчики взаимодействия с пользователем элемента управления картой. Любые неуказанные параметры по умолчанию будут принимать свои текущие значения.
стоп()	Останавливает любой текущий анимированный переход.
триггер Перекрасить()	Запустить визуализацию одного кадра. Используйте этот метод со слоями WebGL, чтобы перерисовать карту, когда слой свойства или свойства, связанные с изменением источника слоя. Вызов этого несколько раз перед рендерингом следующего кадра по-прежнему будет приводит к рендерингу только одного кадра.

Сведения о конструкторе

Map(string | HTMLElement, Service

Options & Style Options & User Interaction Options & (Camera Options | Camera Bounds Options))

Сведения о собственности

аутентификация

контролирует

события

изображение

Спрайт

слои

маркеры

источники

Детали метода

плитки загружены()

прозрачный()

распоряжаться ()

получить

Камера()

получить

Canvas()

получить

Холст Контейнер()

получить

Карта Контейнер()

получить

Сервис Опции()

получить стиль

()

получить

трафика ()

получить

User Interaction()

пикселей

ToPositions(Pixel[])

позиции

ToPixels(Position[])

изменить размер (любой)

изменить размер (число | строка, число | строка, любое)

set

Camera((Camera Options | (Camera Bounds Options & { пеленг?: number, pitch?: number })) & Animation Options)

набор

Сервис Опции (Сервис Опции)

установить стиль

(параметры стиля , логическое значение)

установить

Traffic (Параметры трафика )

установить

User Interaction (User Interaction Options)

останавливаться()

триггер

Перекрасить()

Карта | Справка по 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

база

Карты

база Карты: BaseMap[]

• Определено в Essentials. ts:2288

экспорт

Карта Изображение Опции

экспорт Карта Изображение Параметры: ExportMapImageOptions

• Определено в Essentials.ts:2316

экстент

менеджер

экстент Менеджер: ExtentManager

• Определено в Essentials.ts:2322

подходит

Плитка Карты ToExtent

подходит Плитка Карты Экстент: логический

• Определено в Essentials.ts:2299

полный

экстент

полный Объем: Объем

• Определено в Essentials.ts:2292

Начальный

Объем

начальный Объем: Объем

• Определено в Essentials.ts:2294

инициализация

Сбой

инициализация Сбой: ошибка

Унаследовано от AsyncInitializable. initializationFailure

• Определено в Essentials.ts:251

— это

Инициализировано

равно Инициализировано: логическое значение

Унаследовано от AsyncInitializable.isInitialized

• Определено в Essentials.ts:253

Слой

Темы Информация

слой Темы Информация: LayerThemesInfo

• Определено в Essentials.ts:2310

карта

Услуги

карта Услуги: MapService[]

• Определено в Essentials.ts:2301

карта

Услуги Отфильтровано Просмотр

карта Услуги Отфильтровано Вид: MapService[]

• Определено в Essentials.ts:2306

оригинал

URL-адрес

оригинал URL: строка

• Определено в Essentials. ts:2290

основной

Карта Служба

основной Карта Сервис: MapService

• Определено в Essentials.ts:2312

сервис

Слои Добавлено

служба Слои Добавлено: логическое значение

• Определено в Essentials.ts:2320

набор

экстент при загрузке

set Extent OnLoad: boolean

• Определено в Essentials.ts:2329

сайт

сайт: SiteInterface

Унаследовано от AsyncInitializable.site

• Определено в Essentials.ts:257

пространственный

Артикул

пространственный Ссылка: SpatialReference

• Определено в 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.ts:2356

  Возвращает Слой[]

применить

Каталог Слои Изменить

• • Определено в Essentials.ts:2446

  Параметры

  • деталейРезультаты: любые

  Возвращает недействительным

применить

Запуск Тема

• • Определено в Essentials.ts:2447

  Возвращает недействительным

расчет

Масштаб

• • Определено в Essentials.ts:2372

  Возвращает число

до

При инициализации

экспорт

Карта

отфильтровано

Слои

• • Определено в Essentials. ts:2364

  Возвращает Слой[]

find

Layer From Matching Esri Feature Layer

• • Определено в Essentials.ts:2435

  Параметры

  • Слой

    : FeatureLayer

  Возвращает уровень

найти

Карта Сервис ById

получить

Карта

• • Определено в Essentials.ts:2348

  Карта возврата

инициализировать

загрузка

сервис слои InMap

• • Определено в Essentials.ts:2368

  Параметры

  • Карта

    : Карта

  Возвращает недействительным

обновление

Отфильтровано Коллекции

• • Определено в Essentials.