jQuery Mapael 1.0.0 Whats new ?

Ease the build of pretty data visualizations on dynamic vector maps

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

Map with a legend for areas. Try on JSFiddle »

Map with a legend for plotted cities. Try on JSFiddle »

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

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

Map with links between the plotted cities. Try on JSFiddle »

Download version 1.0.0



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.

As Raphaël, Mapael supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

To download mapael, go to the GitHub repository. Additional maps are stored in the repository 'neveldo/mapael-maps'.

Key features

#Basic code example

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


<div class="container">
	<div class="map">Alternative content</div>


				map : {
					name : "world_countries"





#API reference (version 1.0.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 $.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.

Parameter 'options' :