@@ -33,23 +33,88 @@ Mapael supports all modern browsers and Internet Explorer 9+. For older versions
3333* ** Resizable** Maps are easily resizable.
3434* ** Zoom** Zoom and panning abilities (also on mobile devices).
3535
36+ ## Installation
37+
38+ ### Directly in your page
39+
40+ ** Note on dependencies** : [ jQuery] ( http://jquery.com/ ) and [ Raphael] ( http://raphaeljs.com )
41+ (and [ Mousewheel] ( https://github.com/jquery/jquery-mousewheel ) , if needed)
42+ must be loaded ** before** Mapael in order to work properly.
43+
44+ ** Note on maps** : map files must be loaded ** after** Mapael in order to work properly.
45+
46+ #### Using CDN
47+
48+ Include in your project page one of these tags:
49+ ``` html
50+ <script src =" //cdnjs.cloudflare.com/ajax/libs/jquery-mapael/2.1.0/js/jquery.mapael.min.js" script >
51+ <script src =" //cdn.jsdelivr.net/npm/jquery-mapael@2.1.0/js/jquery.mapael.min.js" script >
52+ ```
53+
54+ #### Using self-hosted
55+
56+ Download the [ latest version] ( https://github.com/neveldo/jQuery-Mapael/releases/tag/2.1.0 )
57+ and extract ` jquery.mapael.min.js ` in your project.
58+
59+ Then, add the script to your page (update the path as needed):
60+ ``` html
61+ <script src =" path/to/jquery.mapael.min.js" script >
62+ ```
63+
64+ ### Using a package manager
65+
66+ #### NPM / Yarn
67+
68+ In your project root, run either commandline:
69+ ``` text
70+ npm i --save jquery-mapael
71+ yarn add jquery-mapael
72+ ```
73+
74+ However, if you don't need the optional Mousewheel feature (for Zoom feature),
75+ then you can use the ` --no-optional ` flag to skip optional dependencies.
76+
77+ Use either:
78+ ``` text
79+ npm i --no-optional jquery-mapael
80+ yarn add --no-optional jquery-mapael
81+ ```
82+
83+ Then in your application:
84+ ``` js
85+ require (' jquery-mapael'
86+ ```
87+ Or, in ES6:
88+ ``` js
89+ import ' jquery-mapael'
90+ ```
91+
92+ #### Bower
93+
94+ In your project root, run:
95+ ``` text
96+ bower install jquery-mapael --save
97+ ```
98+
3699## Basic code example
37100
38101Here is the simplest example that shows how to display an empty map of the world :
39102
40103** HTML :**
41-
104+ ``` html
42105 <div class =" container"
43106 <div class =" map" div >
44107 </div >
108+ ```
45109
46110** JS :**
47-
111+ ``` js
48112 $ (" .container" mapael ({
49113 map : {
50114 name : " world_countries"
51115 }
52116 });
117+ ```
53118
54119## Examples
55120
0 commit comments