Post
Ask Question

Let's Make Some 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.       
  3.     <!-- jQuery - Either include CDN Link or download jQuery and use local link -->  
  4.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>  
  5.   
  6.     <!-- FusionCharts' jQuery Plugin -->  
  7.     <script type="text/javascript" src="path/to/fusioncharts-jquery-plugin.js"></script>  
  8.   
  9.     <!-- FusionCharts Core Library JavaScript File-->  
  10.     <script type="text/javascript" src="path/to/fusioncharts.js"></script>  
  11.   
  12.     <!-- FusionCharts Maps File-->  
  13.     <script type="text/javascript" src="path/to/fusioncharts.maps.js"></script>  
  14.     <script type="text/javascript" src="path/to/fusioncharts.world.js"></script>  
  15.   
  16. </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"  
  35.   
  36.   
  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.

Conclusion

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.


Similar Articles