Js Tutorial – jQuery Mapael – Build 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 build simple dataviz by setting some parameters in order to automatically set a color to each area of your map and generate the legend. Moreover, you can plot cities on a map with their latitude and longitude. As Raphaël, Mapael supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ All options are provided as an object argument of the function $.fn.mapael(Object options). Some of them have a default value. If you want to redefine these default values, you can overload the variable $.fn.mapael.defaultOptions. Update map data is as simple as triggering an 'update' event on the map container with new data provided as argument. All attributes from plots and areas can be updated (including their related text, contents of the tooltips , ...). Update the values of plots and areas connected to a legend will automatically update their attributes according their new slices. Maps for the world, France and USA countries are available with Mapael. It's easy to create new maps, so feel free to add new ones. The first step is to retrieve the SVG file of the wanted map. You can find this kind of resources on Natural Earth Data or Wikimedia Commons. If necessary, SVG files can be edited with dedicated tools like Inkscape. Then, you have to create a new JS file from this template : You have to set the default width and height of your map. If you want to plot cities, you will have to customize the getCoords() function that takes as arguments a latitude and a longitude, and returns x,y coordinates depending on the map projection (mercator, miller, ...). Then, the last step is to open the SVG image with a text editor and copy the paths definitions into the 'elems' parameter. In order to use your new map, you need to load the JS file, and set 'yourMapName' for the Mapael 'name' parameter. Categories: All Slideshow Tooltip Autocomplete Menu & Accordion Tabs Scroll Lightbox Date & Time Maps Charts Drag and drop Forms Validation Rating Captcha Mobile Media Social & RSS Text Editor Image editor File Upload Tables Layout Drawing & SVG Reader & Parser Game Animation Others Source.

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