jQuery Mapael – Ease the build of pretty data visualizations on dynamic vector maps

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. Click here to download the lastest stable release of Mapael from GitHub. Additional maps are stored in the repository 'neveldo/mapael-maps'. 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 $.fn.mapael.defaultOptions and $.fn.mapael.legendDefaultOptions. 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. 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. 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). 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. 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 : 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) or a (x, y) couple. For each plotted point, options are provided as an object : links : (Object) Collection of curved links to draw on the map. For each link, options are provided as an object (example) : 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. Here is an example of use with the afterInit hook that allows to position images on the map : afterInit example options (Object) : Zoom options. The point to focus on can be set by latitude and longitude or by x and y coordinates. 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 contact{at}vincentbroute{dot}fr. Source.


Яндекс.Метрика Рейтинг@Mail.ru Free Web Counter
page counter
Last Modified: April 18, 2016 @ 7:04 pm