A Responsive Blogger Website, That Take my blog to the next level.

I am a Software Developer, Learning and experementing with .Net Technology and try to put my Learning altogether here.

We have all sections related to .Net Technology, like .Net-C#, Asp.Net, MVC, jQuery, AngularJs, Sharepoint. Find out more...

Following are the some of the Advantages of using this Web site :-

  • Get Update about latest in .Net world.
  • Collection of Useful, Frequently used .Net Solutions.
  • It’s beautiful on every screen size (try resizing your browser!)

Let's Make Some Maps In JQuery

Chandan Kumar
shared this article with you.
In this article you will learn how to make maps in JQuery.
This week I decided to finally create interactive maps for my web app, so I'm writing a simple tutorial on how I did it. If you build web apps and want to display geographical data, I hope you will be able to make use of what I have written here.
Here I will talk about the process of creating maps in one of the most popular JavaScript libraries - jQuery. For maps, we will use FusionCharts JavaScript charts library and their jQuery charts plugin.
With the intro out of our way, let's make some maps!
A quick look into what we will be creating: (Click here to see live version).

I have divided this tutorial into the following two steps:
  1. Loading required JS files
  2. Defining map container and FusionCharts instance 
Step 1: Loading Required JavaScript Files
To render an interactive map, we will need the following JavaScript files:
One quick tip here: include minified/compressed versions for above libraries in your production code. But I hope you are doing that already for all your JavaScript files.
All the above files will go inside HTML `script` tags. Here's how to do it:
  1. <head>        
  2. <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>       
  3. <script type="text/javascript" src="path/to/fusioncharts-jquery-plugin.js"></script>        
  4.     <script type="text/javascript" src="path/to/fusioncharts.js"></script>        
  5.     <script type="text/javascript" src="path/to/fusioncharts.maps.js"></script>  
  6.     <script type="text/javascript" src="path/to/fusioncharts.world.js"></script>  
  7. </head>  
Step 2: Defining Map Container and FusionCharts Instance 
We will use HTML `div` as our map/chart container and select it using standard jQuery `$` selector.
  1. <div id="chart-container">Awesome chart on its way!</div>  
We now need to define FusionCharts instance using `insertFusionCharts` method provided by the jQuery plugin. Properties and values inside `chart` object under `dataSource` are self explanatory.
Here is the jQuery code for this step:
  1. (function() {  
  2.   $("#chart-container").insertFusionCharts({  
  3.     type: 'world',  
  4.     renderAt: 'chart-container',  
  5.     width: '800',  
  6.     height: '480',  
  7.     dataFormat: 'json',  
  8.     dataSource: {  
  9.       "chart": {  
  10.         "caption""Global Population Density",  
  11.         "theme""fint",  
  12.         "showLabels""1",  
  13.         "formatNumberScale""0"  
  14.       },  
  15.       "colorrange": {  
  16.         "minvalue""0",  
  17.         "startlabel""Low",  
  18.         "endlabel""High",  
  19.         "code""#FF4411",  
  20.         "gradient""1",  
  21.         "color": [{  
  22.           "maxvalue""25",  
  23.           "code""#FFDD44",  
  24.           "displayValue""Median"  
  25.         }, {  
  26.           "maxvalue""100",  
  27.           "code""#6baa01"  
  28.         }]  
  29.       },  
  30.       "data": [{  
  31.         "id""NA",  
  32.         "value""22.1",  
  33.         "showLabel""1",  
  34.         "displayValue""Moderate"  
  37.       }, {  
  38.         "id""SA",  
  39.         "value""22.0",  
  40.         "showLabel""1",  
  41.         "displayValue""Moderate"  
  42.       }, {  
  43.         "id""AS",  
  44.         "value""95.0",  
  45.         "showLabel""1",  
  46.         "displayValue""Dense"  
  47.       }, {  
  48.         "id""EU",  
  49.         "value""72.5",  
  50.         "showLabel""1",  
  51.         "displayValue""Dense"  
  52.       }, {  
  53.         "id""AF",  
  54.         "value""33.7",  
  55.         "showLabel""1",  
  56.         "displayValue""Moderate"  
  57.       }, {  
  58.         "id""AU",  
  59.         "value""3.2",  
  60.         "showLabel""1",  
  61.         "displayValue""Sparse"  
  62.       }]  
  63.     }  
  64.   });  
  65. }());  
`type` attribute defines the map we are going to plot - `world` in this example. Size of the map is defined using `height` and `width` attributes. `chart` object under `dataSource` contains map configuration options like caption, background color, data plot color and display formats for numbers etc. `data` array contains the data being plotted inside the map.
My objective with this tutorial was to get you started with making maps in jQuery for your website. But this is just the tip of the iceberg, and there is a lot more you can do with it. If you are interested in exploring further, check out the following resources: 
  • If you are new to FusionCharts, you can visit my earlier tutorial on getting started with FusionCharts.
  • To learn more about abilities of FC's jQuery wrapper, refer to this developer documentation.
  • You can configure you map's functionalities through markers, drill-down etc.
  • To explore which maps you can make, visit this specs page.
PS: I hope you like it! I'll be hanging around here, so feel free to post any question.
View on the web
Inoreader is a light and fast RSS Reader. Follow us on Twitter and Facebook.