Tech
News
Videos
Forums
Jobs
Books
Events
More
Interviews
Live
Learn
Training
Career
Members
Blogs
Challenges
Certification
Contribute
Article
Blog
Video
Ebook
Interview Question
Collapse
Feed
Dashboard
Wallet
Learn
Achievements
Network
Refer
Rewards
SharpGPT
Premium
Contribute
Article
Blog
Video
Ebook
Interview Question
Register
Login
Let's Make Some Maps In jQuery
WhatsApp
Gagan Sikri
9y
9.4k
0
4
100
Article
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:
Loading required JS files
Defining map container and FusionCharts instance
Step 1: Loading Required JavaScript Files
To render an interactive map, we will need the following JavaScript files:
jQuery library
FusionCharts
jQuery plugin
FC's
JavaScript chart library
and
map definition 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:
<
head
>
<!-- jQuery - Either include CDN Link or download jQuery and use local link -->
<
script
type
=
"text/javascript"
src
=
"http://code.jquery.com/jquery-1.12.0.min.js"
>
</
script
>
<!-- FusionCharts' jQuery Plugin -->
<
script
type
=
"text/javascript"
src
=
"path/to/fusioncharts-jquery-plugin.js"
>
</
script
>
<!-- FusionCharts Core Library JavaScript File-->
<
script
type
=
"text/javascript"
src
=
"path/to/fusioncharts.js"
>
</
script
>
<!-- FusionCharts Maps File-->
<
script
type
=
"text/javascript"
src
=
"path/to/fusioncharts.maps.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"path/to/fusioncharts.world.js"
>
</
script
>
</
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.
<
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:
(
function
() {
$(
"#chart-container"
).insertFusionCharts({
type:
'world'
,
renderAt:
'chart-container'
,
width:
'800'
,
height:
'480'
,
dataFormat:
'json'
,
dataSource: {
"chart"
: {
"caption"
:
"Global Population Density"
,
"theme"
:
"fint"
,
"showLabels"
:
"1"
,
"formatNumberScale"
:
"0"
},
"colorrange"
: {
"minvalue"
:
"0"
,
"startlabel"
:
"Low"
,
"endlabel"
:
"High"
,
"code"
:
"#FF4411"
,
"gradient"
:
"1"
,
"color"
: [{
"maxvalue"
:
"25"
,
"code"
:
"#FFDD44"
,
"displayValue"
:
"Median"
}, {
"maxvalue"
:
"100"
,
"code"
:
"#6baa01"
}]
},
"data"
: [{
"id"
:
"NA"
,
"value"
:
"22.1"
,
"showLabel"
:
"1"
,
"displayValue"
:
"Moderate"
}, {
"id"
:
"SA"
,
"value"
:
"22.0"
,
"showLabel"
:
"1"
,
"displayValue"
:
"Moderate"
}, {
"id"
:
"AS"
,
"value"
:
"95.0"
,
"showLabel"
:
"1"
,
"displayValue"
:
"Dense"
}, {
"id"
:
"EU"
,
"value"
:
"72.5"
,
"showLabel"
:
"1"
,
"displayValue"
:
"Dense"
}, {
"id"
:
"AF"
,
"value"
:
"33.7"
,
"showLabel"
:
"1"
,
"displayValue"
:
"Moderate"
}, {
"id"
:
"AU"
,
"value"
:
"3.2"
,
"showLabel"
:
"1"
,
"displayValue"
:
"Sparse"
}]
}
});
}());
`
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.
jQuery
JQuery Maps
Make Maps in JQuery
Maps in jQuery
Up Next
Ebook Download
View all
Frontend Developer Interview Questions and Answers
Read by 986 people
Download Now!
Learn
View all
Membership not found