Atmos
Search…
Getting Started
Build System
Gulp
Page Structure
Sass Modules
UI Elements
Colors
Buttons
Icons
Cards
Alerts
Modals
Avatar
Tables
Mail Templates
forms
Form Layouts
Switch
Tag Input
Radio Box
Select2
Datepickers
Masked Input
Rangeslider
Dropzone Fileupload
Form Wizard
Form Validation
Charts
Charts
Apex Charts
Chartjs
Google Charts
Chartist
Maps
Google Maps
Vector Maps
Starter Template
blank template Markup
Powered By
GitBook
Vector Maps
Vector maps are created using
jQuery Mapael
. it is a jQuery plugin based on raphael.js that allows you to display dynamic vector maps.
Step 1
Add JavaScript library to your body tag on page
1
<
script
src
=
"
assets/vendor/raphael/raphael.2.2.7.min.js
"
>
</
script
>
2
<
script
src
=
"
assets/vendor/mapael/jquery.mapael.min.js
"
>
</
script
>
Copied!
you can additional maps like one in demo by including it in js.
Step 2
Add Markup
1
<
div
class
=
"
map-container
"
>
2
<
div
class
=
"
map
"
>
Alternative content
</
div
>
3
</
div
>
Copied!
Remember to add child to the selector with class name
.map
Step 3
Initialize the map with data
1
$
(
".map-container"
).
mapael
({
2
map
:
{
3
name
:
"world_countries"
4
}
5
});
Copied!
GitHub - neveldo/jQuery-Mapael: jQuery plugin based on raphael.js that allows you to display dynamic vector maps
GitHub
Maps - Previous
Google Maps
Next - Starter Template
blank template Markup
Last modified
3yr ago
Copy link
Contents