World map jquery plugin


Содержание

Features

JavaScript-based

jVectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML. No Flash or any other proprietary browser plug-in is required. This allows jVectorMap to work in all modern mobile browsers.

Interactivity

Using documented API you can handle various events from the map like hovers, clicks, label displaying and customize the behavior of the plug-in.

Many maps of the world, world regions, countries and cities are available for download from this site. All of them are made from the data in public domain or data licensed under the free licenses, so you can use them for any purpose without of charge.

Converter

Plug-in package includes maps converter written in Python. It’s used to create maps available on this site. If you want to create some custom map you can create it using data in common GIS formats like Shapefile for example.

Standard compliant

For identification of the countries and regions ISO 3166 standard is used. So you easily visualize data which is compliant with this standard.

Создаем интерактивную карту

Raphael — мощная библиотека для работы с векторной графикой в веб проектах. В данном уроке мы разберемся, как создать интерактивную карту её помощью.

Сначала создаем структуру каталогов и файлов как на рисунке ниже:

Raphael (raphael.js)

Raphael — маленькая библиотека JavaScript, которая упрощает работу с векторной графикой в веб проектах.

Raphael использует SVG W3C и VML как основу для создания графики. Каждый графический объект создается как объект DOM и, таким образом, к нему можно присоединить обработчик события или модифицировать в процессе обработки страницы.

paths.js

В данном файле хранятся траектории SVG paths и названия каждой страны.

index.html

Сделаем разметку HTML.

Мы подключаем таблицу стилей (default.css) , библиотеки jQuery, Raphael, и файлы paths.js и init.js.

Создаем траекторию из SVG файла (paths.js)

Scalable Vector Graphics (SVG — масштабируемая векторная графика) является семейством спецификаций основанного на XML формата файла для описания двумерной векторной графики.

Таким образом, SVG является XML файлом, а, следовательно, мы можем редактировать его в текстовом редакторе.

Для карты используется SVG файл с изображением Европы. Вы может использовать свое векторное изображение (если взять что-то другое, кроме карты, то может получиться очень интересная интерактивная графика). Конвертировать векторное изображение в формат SVG можно с помощью Adobe Illustrator или Inkspace.

Открываем paths.js и создаем новый объект с именем paths.

Затем открываем карту SVG и видим XML код. К счастью, нам нужно только одно значение, которое называется d. Посмотрите на следующее изображение.

Скопируем контур первой страны. В нашем SVG файле это будет Исландия, копируем значение d и создаем новый параметр iceland в объект paths.

И далее действуем аналогичным образом для создания контуров других стран.

Создаем карту (init.js)

Теперь напишем скрипт, который будет выводить карту на экран.

Создадим обработчик события hover.

Теперь добавим обработку события click.

..и обработку события click для кнопки закрытия:

В итоге файл init.js будет выглядеть следующим образом:

default.css

Добавим стили CSS.

Готово!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: playground.mobily.pl/tutorials/building-an-interactive-map-with-raphael.html
Перевел: Сергей Фастунов
Урок создан: 28 Февраля 2011
Просмотров: 141750
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

jQuery — map (метод)

Статья, в которой рассматривается метод библиотеки jQuery .map() .

Назначение метода map()

Метод .map() используется для прогона каждого элемента текущего набора через функцию.

Он обычно находит применение, когда необходимо получить некоторое значение у каждого элемента текущего набора или, наоборот, для того, чтобы установить элементам текущего набора некоторые значения.

Метод .map() использует в качестве параметра функцию, которая выполняется для каждого элемента текущего набора. В теле этой функции Вы можете прописывать различные действия, которые будут что-то производить над текущим элементом или получать у него какие-то данные. После прогона всех элементов текущего набора через функцию, данный метод возвращает результат в виде объекта jQuery, который состоит из массива значений, которые вернула функция для каждого элемента текущего набора.

Но работать с массивом, который находится в объекте jQuery не очень удобно. Поэтому очень часто после вызова данного метода, вызывают метод .get() чтобы преобразовать массив находящийся в объекте jQuery в обычный массив.

Использование метода map()

Например, получить значения атрибутов href для всех элементов а в документе:

Например, получить значение атрибута href только у тех элементов a на странице, у которых класс равен значению btn-primary . Кроме этого, необходимо вернуть полученные значения в виде простого массива.

Mapplic — Custom Interactive Map jQuery Plugin

Mapplic is the #1 custom map plugin on the web. Turn simple images and vector graphics into high quality, responsive and fully interactive maps.

Key Features

  • Unlimited landmarks: locations with unique pins and various actions
  • Unlimited floors: multiple floors are supported without any limitation
  • Deeplinking: every location can be referenced by its own URL
  • Responsive design: provides optimal experience across a wide range of devices
  • Touch optimized: touchscreen devices, like tablets and smartphones, are also supported
  • Well documented: a detailed user guide is included

The Ultimate Versatile Solution

The only limit is your own imagination!

Your site is powered by WordPress? Try the WordPress version of Mapplic!

One-of-a-Kind Map Plugin

Fully Customizable and Unlimited

Built-in Maps

The built-in portfolio includes the most popular 15 geographical maps: World, World Continents, Europe, United States (USA), Canada, Australia, France, Germany, Italy, United Kingdom (UK), The Netherlands, Switzerland, Russia, China, Brazil.

We are constantly expanding our online map directory with free, high quality maps, including Austria, Belgium, Hungary, Japan, Mexico, Poland, Romania, South Africa, Spain.


Tagged: map

jVectorMap

jQuery plugin for embedding vector maps with reach API and methods for data visualization to the web-pages.

jQuery Mapael

jQuery Mapael is a jQuery plugin based on raphael.js that allows you to display dynamic vector maps.

jQuery Geo

An interactive mapping widget and geo-spatial API built on open source and open data (*NOT* a wrapper of other APIs, such as Google Maps)

jQuery Automatic Geocoder

Automatically geocode and display a location entered in a text field by a user using Google Maps.

Google Maps Latitude and Longitude Picker

A jQuery Latitude and Longitude plugin to pick a location using Google Maps. Supports multiple maps. Works on touchscreen. Easy to customize markup and CSS. Features:

Google Maps Latitude and Longitude Picker

A jQuery Latitude and Longitude plugin to pick a location using Google Maps. Supports multiple maps. Works on touchscreen. Easy to customize markup and CSS. Features:

jQuery Location Picker

Japan Map – clickable map of Japan

jQuery plugin for creating clickable canvas (as far) map of prefectures or areas of Japan.

Canvas Image Map Area Editor

Create and edit image map area polygons in a canvas-based GUI that replaces form elements.

jQuery GoogleMaps

JQuery plugin wrapper around GoogleMaps API for easier use of GoogleMaps on web sites and back-end web pages.

8 JavaScript библиотек для визуализации данных в виде интерактивных карт

Визуализация данных стала неотъемлемой частью жизни практически каждого веб-разработчика. Если построение графиков, диаграмм, карт и дашбордов до сих пор никогда не были вашей головной болью, просто немного подождите: наверняка и вы скоро вступите в наш «клуб».

Данная статья дает общее, но вовлеченное представление о восьми самых интересных, на мой взгляд, JavaScript-библиотеках для построения интерактивных геовизуализаций. В целом, таких решений сейчас много, и выбрать оптимальное под тот или иной конкретный проект – задача порой непростая как минимум по времени. Этой публикацией я попытаюсь хотя бы немного упростить жизнь тем, кто только начинает разбираться в данной теме. Кстати, это слегка модифицированный перевод моей недавней статьи на Onextrapixel (оригинал на английском).

На всякий случай сразу уточню: вообще, JavaScript-библиотеки для создания карт можно разделить на два типа. Одни просто позволяют отображать географическое положение одного или нескольких объектов. Для подобной задачи можно использовать карты типа Google Maps или OpenStreetMaps в качестве источника. В принципе, таких решений достаточно, и результат их работы примерно таков:

Другой тип – и о нем я хочу сегодня поговорить – JavaScript-библиотеки, с помощью которых можно делать именно визуализацию данных посредством создания красивых интерактивных карт. Они показывают либо связи между величинами в разных географических регионах, либо перемещение каких-либо объектов относительно их местоположения, и т.п. – всё то, что крайне важно в плане анализа данных и business intelligence.

JavaScript-библиотеки для интерактивных карт-визуализаций

amMap (от amCharts)

amMap – специальная JavaScript (HTML5) библиотека для построения карт, разработанная командой amCharts. Она не нуждается в каких-либо внешних зависимостях и позволяет довольно просто делать красивые choropleth, bubble, dot (point), connector и flow карты, поддерживая много полезных интерактивных фич.

В частности, amMap дает возможность легко «погружаться» в тот или иной выбранный участок карты с помощью drill down или, например, использовать любые картинки в качестве маркеров – довольно любопытная вещь.

Для начала работы с amMap нужно скачать ZIP-файл с бинарниками. Кстати, в нем уже лежит по 455 карт в каждом из поддерживаемых форматов (JavaScript/SVG). Документация у amMap не очень большая и сводится по большей части к набору вопросов и ответов.

Описание API: есть.
Зависимости: нет.
Лицензия: бесплатно (брендированные карты) или платно (от $140).

AnyMap (от AnyChart)

AnyMap – одна из популярных JavaScript (HTML5) библиотек для визуализации данных, созданных компанией AnyChart. Как и в случае с amMap, для создания карты с ее помощью не требуется больших усилий, равно как и подключения каких-либо внешних ресурсов или сторонних библиотек (jQuery и т.д.). AnyMap также поддерживает все базовые типы серий, который только могут понадобиться: choropleth, bubble, dot, connector, flow.

В число основных интерактивных фич AnyMap входят drill down для более плотного изучения отдельных районов, событийная модель для обработки событий (пользовательской интерактивности), цветовая шкала для автоматического раскрашивания карты по заданным настройкам.

Забегая немного вперед, скажу, что, на мой взгляд, AnyMap больше похожа на D3, нежели на amMap или Highmaps. Она как бы сочетает в себе возможности «коробочных» решений и в то же время является хорошо расширяемой и контролируемой со стороны разработчика, позволяет полностью кастомизировать визаулизации путем добавления или изменения различных элементов и легко создать собственные карты.

Бинарники AnyMap находятся в ZIP-файле и содержат множество примеров, а на CDN у AnyChart доступны сотни карт в самых разных форматах: GeoJSON, TopoJSON, SHP, SVG. Также стоит заметить, что у этой библиотеки богатая документация и обширное описание API, кстати, довольно легкое для понимания и – опять же – с большим количеством сэмплов.

Описание API: есть.
Зависимости: нет.
Лицензия: бесплатно (брендированные карты) или платно (от $79).

D3.js (от Mike Bostock)

D3.js – мощная в плане возможных результатов библиотека для визуализации данных с открытым исходным кодом. В отличие от других упомянутых JavaScript-библиотек, D3 – это, скорее, фреймворк, который дает максимальную свободу творчества. Хотя создание интерактивных карт здесь не так очевидно, как, скажем, в решениях от amCharts, AnyChart или Highcharts.

В частности, чтобы сделать такую замечательную интерактивную карту, как на иллюстрации, потребуется изучить достаточно большое количество материалов. Хотя, надо сказать, это стоит того, потому что в итоге можно сделать реально потрясающие, оригинальные визуализации.

Фактически в D3 доступно множество фич, среди которых полная кастомизация поведения, событийная модель и т.д. В целом, я бы сказал, что это – идеальное решение для веб-приложений. Хотя, к сожалению, D3 не предоставляет собственных карт. Это значит – их придется самостоятельно искать в открытых источниках, но вряд ли сейчас это большая проблема.

Документации как таковой у D3 нет, однако есть хорошо расписанное API и множество различных туториалов, примеров и прочих полезных материалов буквально по всему Интернету.

Описание API: есть.
Зависимости: нет.
Лицензия: бесплатно.

Google GeoCharts (от Google)

У гиганта Google есть своя JavaScript-библиотека для визуализации данных – Google Charts. Она содержит возможности и для построения интерактивных карт-визуализаций, называющихся здесь geocharts, видимо, чтобы их не путали с обычными картами, которые нужны только для отображения местоположения объектов.

Карта в Google Geocharts только одна, и это – карта мира. Однако можно выбрать регион, на который при рисовании будет сделан фокус с помощью зума.

К сожалению, здешний API не поддерживает прокрутку (scrolling), изменение масштаба (zoom), перетаскивание (drag). Также Google не предлагает иных типов серий для карт, кроме choropleth и bubble. Однажды данные недостатки довольно сильно меня, мягко скажем, опечалили, но в этом был и положительный момент: в конечном счете мне пришлось начать искать и изучать всяческие другие библиотеки, и вот я сейчас делюсь результатами этого микроисследования с вами.

Так или иначе, GeoCharts – отличное решение для тех людей и проектов, которым не нужны большие и сложные фичи, но кто ищет прежде всего скорость и стабильность вместо какой-то особенной красоты и кастомизации.

Илон Маск рекомендует:  Что такое код printer_draw_elipse

Описание API: есть.
Зависимости: нет.
Лицензия: бесплатно.

Highmaps (от Highsoft)

Highmaps – «младшая сестра» Highcharts и Highstock, популярных библиотек разработки компании Highsoft. Ее ключевые преимущества – открытый код со всеми его плюсами, небольшой размер, высокая скорость отрисовки и широкий набор интерактивных возможностей, таких как drill down и т.п.

Среди поддерживаемых в Highmaps серий – choropleth и bubble. Кроме того, с помощью этой библиотеки можно рисовать линии для обозначения дорог, рек и коннекторов. Хотя сделать, скажем, flow-карту здесь не так просто, как в тех же amMap и AnyMap.

Также стоит отметить, что ни Highcharts, ни Highmaps не работают без jQuery, так что для их использования эта зависимость должна быть подключена (или, конечно, есть еще вариант поискать другую библиотеку для визуализации данных — ха-ха).

Положительный момент – Highmaps имеет большое количество карт в форматах SVG и GeoJSON. Также у нее обильная документация, которая позволяет довольно быстро и успешно разобраться во всевозможных настройках.

Описание API: есть.
Зависимости: jQuery.
Лицензия: бесплатно (брендированные карты) и платно (от $390).

jQuery Mapael (от Vincent Broute)

jQuery Mapael – еще одна очень достойная, хорошо сделанная библиотека с открытым исходным кодом, предназначенная для создания динамических векторных карт. Она основана на jQuery и Raphael JS, так что эти зависимости нужно иметь в виду при построении поддерживаемых ею choropleth, bubble или connector карт.

Набор своих, готовых для использования карт лежит в репозитории Mapael. Документация и описание API соединены в одну статью но, честно говоря, начать работу с данной библиотекой достаточно легко и с помощью вот этого подробного туториала.

Описание API: есть.
Зависимости: jQuery и Raphael.
Лицензия: бесплатно.

jVectorMap (от Kirill Lebedev)

Библиотека для интерактивных карт jVectorMap имеет открытый исходный код, как и ряд других перечисленных в статье. Она не будет работать без jQuery. Хотя кому-то может показаться, что такая внешняя зависимость делает данную (или любую другую) библиотеку не слишком легко-универсальной, это не должно стать большой проблемой в наше время, ведь jQuery с большим отрывом занимает первое место среди JavaScript-библиотек для сайтов и по популярности, и по доле рынка.

К сожалению, выбор доступных типов серий здесь не слишком велик: в jVectorMap предлагаются только choropleth и marker карты, но в то же время – отдадим этой библиотеке должное – они сделаны весьма добротно. Кроме того, тут можно использовать в качестве маркеров любые картинки, а также имеются drill down и ряд других интерактивных фич.

У jVectorMap довольно небольшое описание API и нет документации в привычном по крайней мере для меня виде. Однако имеется маленький, но все равно очень полезный туториал Getting Started. Свои карты используются, но только в формате GeoJSON.

Описание API: есть.
Зависимости: jQuery.
Лицензия: бесплатно и платно (от $39).

Kartograph (от Gregor Aisch)

Kartograph – еще одно открытое решение со всеми вытекающими из этого преимуществами. Данную библиотеку характеризует обилие визуальных эффектов, таких как тени, размытие и т.д.

Интересно также, что вдобавок к традиционным choropleth и bubble типам серий здесь еще есть 3D columns (или, как их иногда называют, вертикальные 3D bars).

Готовой коллекции карт в Kartograph нет. Но библиотека работает с любыми картами в формате SVG. Также она предлагает утилиту Kartograph.py для создания карт.

Хотя Kartograph имеет зависимости и не будет работать без Raphael JS (используется как движок для рисования) и jQuery, эта библиотека делает процесс создания карт действительно довольно понятным и беспроблемным, тогда как документация и описание API данной библиотеки, соединенные в одну статью, позволяют вполне легко и удобно заполучить нужные интерактивные карты для ваших проектов.

Описание API: есть.
Зависимости: jQuery и Raphael.
Лицензия: бесплатно.

Заключение

Все перечисленные мною JavaScript-библиотеки для визуализации данных с помощью интерактивных карт – кросс-браузерные. (Ну, в XXI веке иначе, наверное, и быть уже не может.) Некоторые из них даже поддерживают старые браузеры, такие как Internet Explorer 6. (Хотя вот это, я надеюсь, очень скоро уже перестанет быть важным, в конце 2010-х.)

Все бесплатные библиотеки, которые я упомянул, довольно-таки неплохо справляются с созданием интерактивных карт. Но зато они не обеспечивают такую широкую поддержку, как коммерческие, да и – положа руку на сердце – не так уж сильны в кастомизации (ну, кроме D3, конечно).

Говоря о коммерческих библиотеках – кстати, обычно ими можно пользоваться бесплатно для некоммерческих и личных целей, – я не могу не отметить AnyMap и Highmaps за их обстоятельные документации и описания API, равно как и за большие пулы всяческих примеров/демо JavaScript-карт с добротной интерактивностью.

Спасибо за внимание. Надеюсь, эта статья окажется для кого-то полезна с той целью, чтобы быстро ухватить основную суть топовых JavaScript-библиотек, предназначенных для визуализации данных посредством интерактивных карт. Пожалуйста, делитесь в комментариях собственными мыслями, выводами, пониманиями и, конечно, названиями ваших любимых библиотек, если вдруг я незаслуженно, на ваш взгляд, не затронул их в данной статье.

jQuery Mapael

jQuery Mapael 2.2.0
Released on March 08, 2020, what’s new ?

Ease the build of pretty data visualizations on dynamic vector maps


Map with some plotted cities, areas and zoom enabled. Try it »

Map with a legend for areas. Try it »

Map with a legend for plotted cities. Try it »

Map with multiple plotted cities legends that handle different criteria. Try it »

Dataviz example : evolution of the population by country through the years. Try it »

Map with links between the plotted cities. Try it »

#Overview

Friends

jQuery Mapael is a jQuery plugin based on raphael.js that allows you to display dynamic vector maps.

For example, with Mapael, you can display a map of the world with clickable countries. You can also build simple dataviz by setting some parameters in order to automatically set a color depending on a value to each area of your map and display the associated legend. Moreover, you can plot cities on the map with circles, squares or images by their latitude and longitude. Many more options are available, read the documentation in order to get a complete overview of mapael abilities.

Mapael supports all modern browsers and Internet Explorer 9+. For older versions of IE, you can load jQuery 1.11.x and Raphael.js 2.1.2 as dependencies, most of the jQuery Mapael features should work fine.

Key features

  • based on jQuery and raphael.js. And optionnaly based on jQuery mousewheel for the zoom on mousewheel feature.
  • Interactive. Set href, tooltip, add events and many more on the elements of your map.
  • Plottable cities Cities can be plotted on the map with circles, squares, images or SVG paths by their latitude and longitude.
  • Areas and plotted points colorization. Mapael automatically sets attributes like color and size to each area and plotted point displayed on map and generates an interactive legend in order to build pretty dataviz
  • Links between cities. You can draw links between the cities of the map.
  • Easy to add new maps. Build your own maps based on SVG paths
  • SEO-friendly. An alternative content can be set for non-JS users and web crawlers
  • Resizable Maps are easily resizable.
  • Zoom Zoom and panning abilities (also on mobile devices).

#Basic code example

Here is the simplest example that shows how to display an empty map of the world :

Javascript

Result

#Code examples

The basic examples only involve to call Mapael with a simple configuration object whereas advanced examples show advanced features or more complex integration of Mapael.

Basic

Advanced

#API reference (version 2.2.0)

All options are provided as an object argument of the function $.fn.mapael(Object options). Many of them have a default value. Default values are stored in the variables $.mapael.prototype.defaultOptions and $.mapael.prototype.legendDefaultOptions (Overriding default options example). If you want to re-define them, you can overload these two variables.

Through these mapael options, you can load a map (such as the world map, the USA map, or your own map) and customize the attributes of areas (such as the background-color, the tooltip content, link, text, attributes on mouseover, jquery events, etc). You can plot points on the map by latitude and longitude or x and y and set their attributes. You can add curved links between two points. You can enable the zoom feature that allow to zoom the map through the buttons or through the mousewheel. You can define legends for areas and/or plotted points in order to apply automatically some attributes to the elements of the map depending on the associated value. Here is the complete API documentation.

Parameter ‘options’ :

  • map : main options for the map and default options for all plotted points and areas
    • name : (String) Name of the map to load
    • width : (Integer) Width of the map. If not specified, the map will get the width of its container.
    • zoom : (Object) Options for the zoom (example).
      • enabled : (Boolean, default value : false) Set to true in order to enable zoom features on the map.
      • mousewheel : (Boolean, default value : true) Set to true in order to enable the zoom on mousewheel. This option requires jQuery mousewheel dependencie to work.
      • touch : (Boolean, default value : true) Set to true in order to enable zoom and panning through touch actions.
      • minLevel : (Integer, default value : 0) The minimum zoom level that the user can set.
      • maxLevel : (Integer, default value : 5) The maximum zoom level that the user can set.
      • step : (Float, default value : 0.25) Zoom ratio between two levels.
      • animDuration : (Int, default value : 200) The duration of the zoom animation (this option have to be set to 0 in order to disable animation).
      • animEasing : (String, default value : «linear») The easing function to use to animate the zoom action.
      • buttons : (Object) Object of options that allow to define the cssClass, the title and the text content of the zoom related buttons. The object can contain the following keys : ‘reset’ to define the options for the reset button, ‘in’ to define the options for the zoom-in button, ‘out’ to define the options for the zoom-out button. Here are the available options for each button type :
        • cssClass : (String) The CSS class for the zoom button.
        • content : (String) The text content for the zoom ibutton.
        • title : (String) The title of the the zoom button.
      • init : (Objet) Set an initial zoom to the map that focus on a specific point (example). The point to focus on can be set by latitude and longitude or by x and y coordinates.
        • level : (Integer) level of the initial zoom between 0 and maxLevel.
        • x : (Integer) x coordinate of the point to focus on
        • y : (Integer) y coordinate of the point to focus on
        • latitude : (Float) latitude of the point to focus on
        • longitude : (Float) longitude of the point to focus on
    • beforeInit : (Callback) Hook called before the initialization of the map, that allows to draw custom elements right after the display of the areas. See the «Extend Mapael» section for more information.
    • afterInit : (Callback) Hook called after the initialization of the map that allows to draw custom elements (example). See the «Extend Mapael» section for more information.
    • cssClass : (String, default value : «map») CSS class name of the map container.
    • tooltip : (Object) options for the tooltip
      • cssClass : (String, default value : «mapTooltip») CSS class name of the tooltip container.
      • css : (Object) Additional CSS properties for the tooltip container
    • defaultArea / defaultPlot / defaultLink : (Object) Default options for all areas, plotted points or curved links of the map.
      • attrs : (Object) Default Raphael attributes for all elements. Go to the Raphael reference to view available options.
      • attrsHover : (Object) Raphael attributes on mouse hover for all elements. Go to the Raphael reference to view available options. You can set the animation duration with the ‘animDuration’ option.
      • tooltip : (Object) Options for the tooltip
        • content : (String or function) Tooltip content to display on mouse hover. It can be a string or a function that returns the content to display within the tooltip and takes as only parameter the options object of the element currently overflown.
        • cssClass : (String) Additional CSS class(es) of the tooltip container. This option can be set to a specific value for each area or plotted point.
        • overflow : (Object, default value : null) This option allows the tooltip to overflow from the right and/or bottom border of the container.
          • right (boolean) : allows the tooltip to overflow from the right border of the container
          • bottom (boolean) : allows the tooltip to overflow from the bottom border of the container
        • offset : (Object, default value : null) This option allows to set a custom offset value between the tooltip and the cursor.
          • left (int, default value : 10) : left offset value.
          • top (int, default value : 20) : top offset value.
      • text : (Object) Options for the label displayed within or next to the element
        • content : (String) Text of the label
        • attrs : (Object) Default Raphael attributes for each text within areas. Go to the Raphael reference to view available options.
        • attrsHover : (Object) Default Raphael attributes on mouse hover for each text within areas. Go to the Raphael reference to view available options. You can set the animation duration with the ‘animDuration’ option.
        • position : (String) Position of the text relative to the elements. Possible values : ‘inner’, ‘right’, ‘left’, ‘top’ or ‘bottom’
        • margin : (Integer or Object, default value : 10) Margin between the text and the plotted point. You can define a x,y margin by setting an object instead, eg : . This margin object can also be used for a text within an area in order to apply an offset.
      • href : (String) Href for the elements.
      • target : (String) Target of the href for the elements (it can be set to a regular HTML target such as _blank, _self, . ).
      • eventHandlers : (Object) Collection of handlers (‘eventName’ : function(e, id, mapElem, textElem, elemOptions) < . >) that will be called when event ‘eventName’ occurs on elements. The key must match with a valid event like ‘click’ or ‘dblclick’ (example 1, example 2).
      • cssClass : (String, default value : ‘area’, ‘link’ or ‘plot’ depending on the type of the considered element) CSS class set on each element.
    • defaultPlot specific attributes :
      • type : (String, default value : «circle») Plotted points shape : ‘circle’, ‘square’ or ‘image’ or ‘svg’.
      • size : (Integer, default : 15) The default size of all circles and squares. For image and svg plotted points, size must be specified with width and height options, see below.
      • width : (Integer) The default width of all image and svg plotted points.
      • height : (Integer) The default height of all image and svg plotted points.
      • url : (String) For image plotted points only. Url of the image to display.
      • path : (String) For svg plotted points only. SVG path to display.
  • legend : (Object) Options to build the legends of plotted points and areas. It allows to define the display of the legends boxes and to set specific options by slice of values.The ‘area’ entry let you define options for the areas legend. The ‘plot’ entry let you define options for the plotted points legend.

      redrawOnResize : (Boolean, default value : true) Redraw the legen(s) of the map at window resize.

    area / plot : (Object or array of Object). Options for the areas or plotted points legend (example 1, example 2). It can be just an Object of options, or an array of objects of options in case of a multiple criteria legend. Mapael allows you to handle multiple criteria for your map by setting several values to each elements and configuring multiple legends here (example).

    • mode : (String, default value : «vertical») Orientation of the legend. This option can be set to ‘vertical’ or ‘horizontal’ (example).
    • exclusive : (Boolean, default value : false) Set to true to allow the user to activate only one item from the legend at a time.
    • cssClass : (String, default value : «mapLegend») CSS class of the container for the areas legend.
    • display : (Boolean, default value : true) Display the legend.
    • marginLeft : (Integer, default value : 10) Margin left for each line of the legend.
    • marginLeftTitle : (Integer, default value : 5) Margin left for title of the legend.
    • marginLeftLabel : (Integer, default value : 10) Margin left for the label of each slice.
    • marginBottom : (Integer, default value : 10) Margin bottom under each line of the legend.
    • marginBottomTitle : (Integer, default value : 10) Margin bottom under the title of the legend.
    • titleAttrs : (Object) Raphael attributes for the title of the legend. Go to the Raphael reference to view available options.
    • labelAttrs : (Object) Raphael attributes for the labels of each slice. Go to the Raphael reference to view available options.
    • labelAttrsHover : (Object) Raphael attributes on mouse hover for the labels of each slice. Go to the Raphael reference to view available options.
    • hideElemsOnClick : (Object) Hide map elements when user clicks on a label of the legend.
      • enabled : (Boolean, default value : true) If true, map elements are hidden when user clicks on a label of the legend.
      • opacity : (Float, default value : 0.2) Opacity for the hidden elements.
      • animDuration : (Integer, default value : 300) Number of milliseconds for the animation duration when hiding the matching elements from the map.

      slices :(Array, default : []) Array of objects of options for each slice of values. For each slice, options are provided as an object. A slice can be defined with a min and a max value (example) or with a fixed value ‘sliceValue’ (example). It allows to set the label to display next to each slice in the legend box and to set the attributes that will be applied to each elements of the map (areas or plotted points) whose the value matches with the legend slice.

      • sliceValue : (String or Float) : The value for the slice. This option can be used instead of the ‘min’ and ‘max’ options in order to set a fixed value instead of an interval of values for the slice.
      • min : (Float) The minimal value for the interval defining the slice
      • max : (Float) The maximal value for the interval defining the slice
      • label : (String) The label of the slice for the legend
      • display : (Boolean, default : true) Display the slice in the legend
      • clicked : (Boolean, default : false) Set to true in order to initialize the legend item in the ‘clicked’ state on the map load.
      • + Overload : all options from map.defaultArea (in case of a areas legend) or map.defaultPlot (in case of a plotted points legend) can be overloaded here. It allows to set the attributes that will be applied to each elements of the map (areas or plotted points) whose the value matches with the legend slice. These overloading attributes will also be applied to the elements displayed in the legend.
      • legendSpecificAttrs : (Object) Raphael attributes that will be only applied on the elements displayed in the legend box and not on the elements displayed in the map. Go to the Raphael reference to view available options (example).


areas : (Object) List of specific options for each area to display on the map. Areas must be identified according to the ids from the JS file of the intended map. For each area, options are provided as an object :

  • value : (Float or array) Value to associate to the area. It allows the point attributes to be overloaded by legend attributes if the value matches with a slice defined in the legend. It can be an array of values if you set a multiple criteria legend for areas.
  • + Overload : all options from map.defaultArea and options from the associated legend if it exists can be overloaded here. For example, you can redefine specific values for attrs, attrsHover, tooltip content, etc.

plots : (Object) Array of specific options for each plotted points to display on the map. A plotted point can be positioned with a (latitude, longitude), a (x, y) couple of coordinates or through the plotsOn option in order to add a point within a specific area of your map. For each plotted point, options are provided as an object :

  • value : (Float or array) Value to associate to the plotted point. It allows the point attributes to be overloaded by legend attributes if the value matches with a slice defined in the legend. It can be an array of values if you set a multiple criteria legend for plotted points.
  • latitude : (Float) latitude of the plotted point
  • longitude : (Float) longitude of the plotted point
  • x : (Float) X coordinate of the plotted point
  • y : (Float) Y coordinate of the plotted point
  • plotsOn : (String) Area ID where to plot the point on
  • + Overload : all options from map.defaultPlot and options from the associated legend if it exists can be overloaded here. For example, you can redefine specific values for attrs, attrsHover, tooltip content, etc.

links : (Object) Collection of curved links to draw on the map. For each link, options are provided as an object (example) :

  • between : (Array) Array of two elements where the first one is the source of the link and the second one is the destination. Each can be a plotted point ID, an object that stores a latitude and a longitude (), or an object that stores a x and y coordinates () (example).
  • Overload : all options from map.defaultLink and options from the associated legend if it exists can be overloaded here. For example, you can redefine specific values for attrs, attrsHover, tooltip content, etc.

#Update the map data

Update map data is as simple as triggering an ‘update’ event on the map container with new data provided as argument. All attributes from plotted points and areas can be updated (including their related text, contents of the tooltips , . ).
Update the values of plotted points and areas connected to a legend will automatically update their attributes according their new slices.

  • options : (Object) Update options that can contains the following entries :
    • mapOptions : (Object) Object that contains the options to update for existing plots, areas or legends. If you want to send some areas, links or points to the front of the map, you can additionnaly pass the option ‘toFront: true’ for these elements.
    • replaceOptions : (Boolean) whether mapsOptions should entirely replace current map options, or just extend it.
    • newPlots : (Object) new plots to add to the map.
    • newLinks : (Object) Object containing the new links to draw on the map.
    • deletePlotKeys : (array or string) plots to delete from the map (array, or «all» to remove all plots).
    • deleteLinkKeys : (array or string) links to remove from the map (array, or «all» to remove all links).
    • setLegendElemsState : (string or object) the state of legend elements to be set : ‘show’ (default) or ‘hide’. This options can also be set with an object that contains several pairs of legendCssClass/state, for instance : <"areaLegend": "hide">. (Example)
    • animDuration : (Integer, default value : 0) Number of milliseconds for the animation duration.
    • afterUpdate : (Callback) Hook called after updating the map. See the «Extend Mapael» section for more information.

#Extend Mapael

Mapael can easily be extended with several hooks and events.

Hook map.beforeInit

This hook is called before the initialization of the map, right after the display of the areas.

  • container : (Object) Map container
  • paper : (Object) Raphael Object
  • options : (Object) Map options

Hook map.afterInit

This hook is called after the initialization of the map.

  • container : (Object) Map container
  • paper : (Object) Raphael Object
  • areas : (Object) Drawn areas
  • plots : (Object) Drawn plotted points
  • options : (Object) Map options

Here is an example of use with the afterInit hook that allows to position images on the map : afterInit example

Hook afterUpdate

This hook is called after each update of the map (‘update’ event triggered).

  • container : (Object) Map container
  • paper : (Object) Raphael Object
  • areas : (Object) Drawn areas
  • plots : (Object) Drawn plotted points
  • options : (Object) Map options
  • links : (Object) Drawn links

Event afterZoom

This event is triggered after a zoom action on the map. The event brings these data :

  • x1 : (int) left coordinate of the visible part
  • y1 : (int) top coordinate of the visible part
  • x2 : (int) right coordinate of the visible part
  • y2 : (int) bottom coordinate of the visible part

Event afterPanning

This event is triggered after a panning action on the map. The event brings these data :

  • x1 : (int) left coordinate of the visible part
  • y1 : (int) top coordinate of the visible part
  • x2 : (int) right coordinate of the visible part
  • y2 : (int) bottom coordinate of the visible part

#Filter the elements to show on the map depending on values intervals

The elements to show on the map can be filtered depending on values intervals by triggering a ‘showElementsInRange’ event on the map container : $(«.mapcontainer»).trigger(«showElementsInRange», [opt]); . Examples : Map with a range selection for plotted cities, Map with a range selection for areas. Available options :

    h >Mapael allows you to trigger an event ‘zoom’ on the map container.

options (Object) : Zoom options. The point to focus on can be set by latitude and longitude, by x and y coordinates or with an area ID. The following options are available :

  • animDuration : (Integer, default value : 0) The duration of the zoom animation
  • level : (Integer or string) The level of the zoom between 0 and maxLevel. In order to zoom-in or zoom-out relatively to the current zoom level, you can set the level to a negative integer (eg : -5), or a string beginning by ‘+’ (eg : ‘+5’).
  • fixedCenter : (Boolean) Set to true in order to preserve the position of x,y in the canvas when zoomed
  • x : (Integer) x coordinate of the point to focus on
  • y : (Integer) y coordinate of the point to focus on

Or

  • latitude : (Float) latitude of the point to focus on
  • longitude : (Float) longitude of the point to focus on

Or

  • area : (String) area ID to focus on
  • areaMargin : (Integer) margin (in pixels) around the area

The current zoom data can be retrieved with the data from «zoomData» key :

Here are some examples of use of the «zoom» event : Zoom on specific areas, Zoom on click

#Create your own vector map for jQuery Mapael

A complete tutorial that explains you how to create your own vector map for jQuery Mapael is available here.
Some usefull online tools are available to ease the work :

If you need a special integration of jQuery Mapael in your application, a custom feature or map, feel free to contact me at contactvincentbroutefr.

Copyright (C) 2013 — 2020 Vincent BroutГ© — Released under MIT license

jQuery Maps Plugins: 20 Samples of interactive jQuery Map Plugins

Integrating maps in your website is a strategy that you can use in order to make your site more interactive for your visitors. Some of the maps that you can use for your website are created using the API, but this can make the process more complicated.

jQuery offers you a cross browser Java Script library for maps that simplifies the map experience of your website visitors and you can instantly integrate them to your website in the form of plugins for instant display of interactive maps on your website.

The use of jQuery maps is becoming popular among website designers and here are some 20 examples of jQuery maps plugins to start your searching.

5sec Google Maps Standalone with jQuery

This jQuery maps plugin is highly responsive and configurable using HTML without any hassles of creating your interactive maps. You can instantly create your maps with greater speed using its “iframe” feature or using a single image map. You can also display multiple maps per page of your website. It works well on CMS and provides location pins (configurable bubbles) for your image maps.

Europe CSS & jQuery Clickable Map

If your website caters to a local market within Europe, this jQuery plugin will serve your European customers better. The maps are created with 47 countries within the European region. You can easily list the names of the European regions that are clickable within the map even without the need of using external plugins or Flash for viewing. It only uses CSS Sprites and supports modern desktop and mobile browsers.

ImageMapster

ImageMapster allows you to create HTML image maps without the need of a Flash and it is supported for all types of browser viewing even for Smartphones and tablets. You can easily create a map that is color coded by locations. You can control the highlights and opacity of the colors to use for your map and you can also add cool effects to your maps by using alternative images. The plugin has the feature of creating floating tips for each location on your map.

iPicture

This plugin gives your website visitors a unique experience when viewing the interactive maps that are optimized for map images and text descriptions. The plugin has a drag and drop feature that makes setting up your maps to your site very simple. You are free to add icons to your map locations and even add animations to it. It is also easy to integrate your interactive maps to sliders and you can change the color on the fly instantly on your map designs.

qTip

This jQuery plugin is light to your website as it is small file sized plugin that works with cross browsers. It works within a Java Script framework with a user friendly interface. You can create rounded corners for your map and you can create speech bubble tips. Its HTML is dynamically generated and it is degradable for its users. It also comes with a positioning tools and is pre-packed with elegant tool tips style to use without the need for an extra code to use for your map. You can also customize your map designs.

jQuery Birdseye

This is a plugin for a moving map search that you can use for your website. The plugin replicates the search in map feature seen in Yelp, Google and Airbnb under an API option. This version of the map is more efficient to use for a moving map search under Java Script which is lighter and faster and easy to use plugin features.

Google Maps Event

This plugin allows you to create a map that can show information about specific locations when you click on the map markers that use XML files for the script. The user of the plugin has the freedom to choose whether they opt to display the information on the tab menu, on the accordion menu or as a simple division or modal window within the area of a web page. You can simply add addresses within the markers on the map and can create stylish polylines and lines for giving directions using different colors and changing the opacity of your design and use arrows for directions.

bMap

You can easily add mapping directly on your website with this plugin. It is capable of handling many markers and layers and it has several marker icons that you can use for designing your map. It also retains the Google maps API to allow you to use its features if you want to. It is also optimized for creating maps for your mobile website and you will not be required to use the Google maps API key anymore in creating the maps.


jQuery Interactive Google Map using Twitter API

This plugin offers a geocoding service using the Twitter API in order to create Google maps to your website. One can easily retrieve the location of the website user using the Twitter API and it will display the user’s profile picture on Twitter directly on the map. The plugin is also capable of retrieving the user’s 5 latest tweets from their Twitter account and displays it to the map for viewing.

HTML5 Geolocation API with Google, Bing and Nokia Maps

This jQuery plugin allows its users to share their location with their permission where the approximate longitude and latitude coordinates are captured on the map. It has a geolocation feature that automatically shows location information such that the user could share their location in their social network. The Geolocation API on HTML5 makes this plugin work well with other map applications like Nokia Ovi maps, Bing maps, Google maps and Yahoo maps.

Maplace.js

This plugin gives its users the ability to embed the Google maps on their website. It is easy to create markers on your map as well. The user however needs to use this plugin with the Google Maps API v3 in order to enjoy both features on their web page. You can easily create as many maps as you like and it supports directions, polylines, style maps, polygons and fusion tables for your map designs. It is also optimized for all kinds of web browsers and provides numerous custom icons for markers, zoom level and custom control menus.

Majuro.js

This is a plugin that allows one to create interactive maps with an open building data platform. For every city on the map, the user can select a neighborhood and view buildings. Each building can be annotated with descriptions and may be created with a color code. If your goal is to provide your website visitors an interactive map that will provide them data and information about certain cities without the need to leave their web page browser, this plugin will help you accomplish this goal.

jQuery Zepto Geolocator

This plugin is capable of obtaining the list of addresses of your user and to display his current geolocation position directly on the map. The tool uses the HTML5 geolocation in finding your visitor’s location and it uses queries from the Google Maps API in order to obtain addresses from your map list.

Data Maps for jQuery

Data Maps is a jQuery maps plugin that provides unique data visualization effects on your website map in bundles of a single Java Script file. It can display map of cities and countries with a geolocation of your choice. You can use its Backbone feature for standalone viewing. It uses Zepto, Underscore, D3.js and Backbone.

Geo Autocomplete

This plugin comes with an autocomplete field that provides suggestions in each entry to the input field on a web page. It works similar to the Google Instant for your Maps and it shows small thumbnails to help the user select the right location.

MapBox

You can create small scaled maps that are zoomable and one that you can drag and add layers of contents. This is compatible for creating map applications and integrating it with social networks. It is mostly applicable for games and development plans and other layouts that need zooming and panning to optimize the map view.

jLocator/strong>

The plugin uses the Google Maps API v3 that allows searching, filtering and pagination for stores on the map. You can provide filter boxes with the map like dropdown filter, checkbox filter and textbox search. You can add more information about specific stores and use images to replace the map pins. The map is fully customizable and works with major browsers.

Maps Widgets for jQuery

You can create a stylish jQuery and Google Maps v3 based maps for your website that comes with three themes and two widgets. The markers are also highly customizable. You can easily create maps on business websites such as business directories, travel sites, and real estate websites. It comes with an icon photoshop file to create stunning maps.

JQVMap

Create a vector map to your website using this plugin. Its vector graphics are resizable and scalable and works in modern browsers. You can display maps of countries as well as the world map. While it supports the modern browsers like Safari, Google Chrome, Firefox, Internet Explorer 9 and Opera, older version browsers for IE are supported with VML.

jQuery Rockstar Map Plugin

Create interactive maps that provide several great features like a full screen mode, inertia, fluid width, smooth animations, touch gestures, and with a beautiful interface. It comes with a navigation feature and location information which is best to be integrated with contact pages. The map is fully responsive and with a dynamic width that is optimized even for mobile viewing.

About Author:

Stacy Carter is a tech writer and freelance blogger laying out for tech news via online exposures. She is the author of the site: Cell Phone Spy; where you can get valuable information about spy software programs on your cell phone.

Mapplic — Custom Interactive Map jQuery Plugin

Mapplic is the #1 custom map plugin on the web. Turn simple images and vector graphics into high quality, responsive and fully interactive maps.

Key Features

  • Unlimited landmarks: locations with unique pins and various actions
  • Unlimited floors: multiple floors are supported without any limitation
  • Deeplinking: every location can be referenced by its own URL
  • Responsive design: provides optimal experience across a wide range of devices
  • Touch optimized: touchscreen devices, like tablets and smartphones, are also supported
  • Well documented: a detailed user guide is included

The Ultimate Versatile Solution

The only limit is your own imagination!

Your site is powered by WordPress? Try the WordPress version of Mapplic!

One-of-a-Kind Map Plugin

Fully Customizable and Unlimited

Built-in Maps

The built-in portfolio includes the most popular 15 geographical maps: World, World Continents, Europe, United States (USA), Canada, Australia, France, Germany, Italy, United Kingdom (UK), The Netherlands, Switzerland, Russia, China, Brazil.

We are constantly expanding our online map directory with free, high quality maps, including Austria, Belgium, Hungary, Japan, Mexico, Poland, Romania, South Africa, Spain.

50 полезных плагинов JQuery 2012 года

29 декабря 2012 | Опубликовано в Веб-дизайн | 12 Комментариев »

jQuery плагины являются одними из самых необходимых компонентов при построении сайта, да и вообще любого веб-приложения. Именно они позволяют вам расширить свой функционал. В этой статье перечислены самые полезные плагины за 2012 год. Для более удобного поиска все плагины разделены на следующие категории: Web Page Layout — плагины, плагины для навигации, Form Plugins, плагины для создания слайдеров, плагины для диаграмм и графиков, эффекты для изображений и другие. Также среди этих плагинов есть плагины, которые помогут вам в создании ваших адаптивных приложений.

Page Layout плагины

equalize.js — это плагин для jQuery, который позволяет создавать блочную структуру сайта. Он позволяет выравнивать высоту и ширину любого элемента.

Новый плагин для адаптивных макетов.Freetile позволяет создавать элементы любого размера, при этом необходимость создания фиксированного размера столбцов сетки отпадает.

Gridster.JS jquery плагин для построения drag and drop — сетки. Также с помощью него можно динамично удалять и добавлять элементы из сетки.

Zoomooz.js — это простой в использовании jQuery-плагин для увеличения любого элемента веб-страницы. Вы можете легко добавить zoom-эффект, просто добавив класс «zoomTarget» к любому HTML-элементу. Увеличение можно сбросить, кликнув на страницу. Плагин был протестирован в Internet Explorer 9, Safari 3 +, Firefox 3.6 +, Opera и Chrome.

Wookmark — плагин для создания динамичного многоколоночного шаблона.

jQuery HiddenPosition — плагин, который позволяет добавлять любой элемент, даже если он является скрытым.

Stellar.js — JQuery-плагин, который обеспечивает эффект параллакса для элементов.

Плагин jQuery, который добавляет эффект реального переворачивания страниц при переходе между разделами. Используется аппаратное ускорение. Работает на планшетах и смартфонах.

Плагин для адаптивной типографики. Он позволяет вам использовать селектор, генерирующий идеальный размер шрифта.

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

Плагины для навигации

HorizontalNav — это jQuery плагин, который растягивает горизонтальное меню, чтобы она соответствовала всей ширине контейнера. Если Вы когда-либо пытались создать эффект правильной натяжки меню навигации на CSS контейнер у проекта, то Вы однозначно знаете насколько это тяжело сделать для кросс-браузерной совместимости. Данный плагин делает это с легкостью.

stickyMojo – это легкий, быстрый и гибкий плагин «липучей» боковой панели на jQuery. Он работает с Firefox, Chrome, Safari и IE8 + (неплохо поддерживает старые версии IE).

ddSlick — плагин, который позволяет создавать выпадающие меню с изображениями и описаниями.

Плагин для простой организации раскрывающихся панелей. Плагин поддерживает работу с куки для хранения состояния панелей. Среди опций есть возвратные функции для настройки процесса открывания и закрывания секций.

Плагин для создания сворачивающихся блоков, которые могут содержать любые данные в ограниченном пространстве.

Формирующие плагины

Плагин позволяет определять уровень сложности пароля.

JQuery-плагин для визуализации процесса загрузки файлов. Он поддерживает drag&drop и создает моментальные превью для фотографий.

Плагин, который определяет и проверяет номера кредитных карт. Он позволяет вам определить тип кредитной карты.

Плагин для фильтрации данных. Вы можете фильтровать данные по тегу и по нескольких тегам и категориям.

Плагин, который проверяет ввод электронной почты на правильность по заранее подготовленному списку (сюда можно включить самые популярные почтовые сервисы mail.ru, yandrex.ru, gmail и т.п. ).

Плагины для создания слайдеров и каруселей

Плагин, который позволяет управлять переходами с помощью мыши, тачпада и клавиатуры. К переходам, которые установлены по умолчанию, можно добавлять дополнительные, которые также есть в исходном файле.

iosSlider

iosSlider — плагин для адаптивного кроссбраузерного слайдера.

RSlider — полноэкраннный адаптивный слайдер. О н будет автоматически подстраиваться под ширину вашего экрана.

Fresco — адаптивный лайтбокс-плагин. Он может использоваться, чтобы создать ошеломляющие оверлейные программы, которые отлично работают на любых размерах экрана, во всех браузерах, на всех устройствах.

BookBlock — jQuery-плагин, который можно использовать для создания компонентов в виде буклетов, которые позволят вам создавать навигацию наподобие «переворачивающихся страниц». Здесь можно задействовать любой контент, будь то изображения или текст. Плагин трансформирует структуру только при необходимости (другими словами, только при переворачивании страницы) и использует наложения и тени для придания реалистичности.

Adapter — легкий слайдер контента, который предоставляет простой интерфейс разработчикам для создания красивой 2D или 3D анимации перелистывания слайдов. В настоящее время имеется поддержка 3D свойств в браузерах webkit и Firefox. Все 2D переходы были протестированы в IE6 + и других современных браузерах.

Непрерывная карусель с несколькими полезными возможностями. Она легко настраивается и поддерживает даже старые браузеры.

Rhinoslider — довольно гибкий jQuery плагин слайдшоу. Предлагаются не только разнообразные эффекты, но и есть возможность добавления собственных стилей, эффектов и функций к слайдеру.

Sequence – это jQuery-плагин для прокрутки контента оригинальным образом и предоставляет вам полноценный контроль. Можно использовать любой тип контента; он будет прокручиваться бесконечно. Здесь используется семантическая разметка, а также поддерживаются адаптивные шаблоны и устройства, основанные на технологии touch.

Glisse.js — простая, адаптивная и легко настраиваемая JQuery-фото-галерея.

Плагины для диаграмм и графиков

Morris.js представляет собой облегченную библиотеку, которая использует JQuery и Raphaël, чтобы облегчить рисование графиков временных рядов.

JQuery Org Chart представляет собой плагин, который позволяет создавать древовидные структуры с вложенными элементами. Данные вводятся во вложенный неупорядоченный список, что делает плагин невероятно простым в использовании.

Плагины для типографики

Bacon.js является JQuery плагином, который позволяет обернуть текст вокруг кривой Безье или линии.

Textualizer — jQuery плагин для создания красивых эффектов над текстом. Поддерживается работа в: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+, Mobile Safari (iOS 4)

SlabText — очень полезный JQuery-плагин, который построчно разбивает заголовки перед изменением размеров каждой строки, чтобы заполнить доступное пространство по горизонтали.

trunk8 — это плагин усечения текста в JQuery. Позволяет сократить большой блок текста на меньшую часть для предварительного осмотра.

Плагины для создание различных эффектов для изображений

Это плагин для jQuery, который использует фильтры на CSS3 для создания tilt-эффекта.

Плагин для реализации эффекта адаптивных изображений.

jQuery-плагин, который позволяет легко создавать карты-изображения. С помощью этого инструмента, любая карта-изображение может быть подсвечена или выбрана, а также картой можно управлять различными способами. Он работает на всех основных браузерах, в том числе Internet Explorer 6, он не использует Flash, и не требует ничего кроме jQuery. Некоторые продвинутые эффекты требуют поддержки HTML5, но он все равно будет работать в старых браузерах.

Плагин позволяет странице изменять src-атрибуты изображений в соответствии с шириной контейнера, а PHP-файл автоматически создает новые/измененные в размере изображения. Изображения создаются только тогда, когда они запрашиваются в первый раз, и этот процесс не будет повторяться при последующих запросах, что положительно сказывается на производительности.

Backstretch — простой плагин, который позволяет добавлять фоновое изображение изображение на любую страницу.

И другие.

Плагин для плавных трансформаций и переходов. Вместо работы с таймерами, плагин использует CSS3 трансформации.

Noty — это jQuery плагин, с помощью которого без особых проблем и сложностей можно легко на своем сайте или блоге создать уведомления типа: information, error, alert, success, warning, или просто заменить стандартные уведомления на сайте, при регистрации например. Абсолютно каждое уведомление можно настроить, чтобы оно выводилось поочередно.

JQuery-плагин позволяет легко помещать маркеры на карте сайта с помощью Google Map API V3.

Плагин, который позволяет легко добавлять интерактивные карты на вашем сайте. Вы получите мощную API карту, настраиваемые маркеры и обработчик-событий.

Jплагин, который использует Scalable Vector Graphics (SVG) для рендера векторных карт. Он работает во всех браузерах, поддержка в старых версиях IE 6-8 осуществляется через VML.

Простой в использовании JQuery плагин для социальных виджетов сетей. В настоящее время он поддерживает Facebook, Twitter и Google+.

Tooltipster представляет собой легкий и простой в стиле JQuery плагин, который поможет вам легко создавать всплывающие подсказки.

BigVideo.js — jQuery плагин, который упрощает адаптирование фонового видео на веб-страницу. Вы можете использовать одно или несколько видео или использовать плагин в качестве проигрывателя, с отображением плей-листа.

С помощью плагина calendario вы сможете для своего сайта организовать замечательный календарь, в котором будут отмечаться все вам важные материалы и праздники, которые можно с легкостью задать самостоятельно.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL