@@ -5,30 +5,81 @@ A `contextmenu` extension for OpenLayers 3.
5
5
You can see [ here a demo] ( http://rawgit.com/jonataswalker/ol3-contextmenu/master/examples/contextmenu.html ) or [ JSFiddle] ( http://jsfiddle.net/jonataswalker/ooxs1w5d/ ) .
6
6
7
7
## How to use it?
8
- Load the CSS and Javascript:
8
+ ##### CDN Hosted - [ jsDelivr] ( http://www.jsdelivr.com/projects/openlayers.contextmenu )
9
+ Load CSS and Javascript:
9
10
``` HTML
10
- <link rel = " stylesheet " href =" ol3-contextmenu.css" / >
11
- <script src =" ol3-contextmenu.js" ></script >
11
+ <link href =" //cdn.jsdelivr.net/openlayers.contextmenu/latest/ ol3-contextmenu.min. css" rel = " stylesheet " >
12
+ <script src =" //cdn.jsdelivr.net/openlayers.contextmenu/latest/ ol3-contextmenu.js" ></script >
12
13
```
14
+ ##### Self hosted
15
+ Download [ latest release] ( https://github.com/jonataswalker/ol3-contextmenu/releases/latest ) and (obviously) load CSS and Javascript.
13
16
14
- Instantiate with some options and add the Control
17
+ ##### Instantiate with some options and add the Control
15
18
``` javascript
16
19
var contextmenu = new ContextMenu ({
17
- width: 170 ,
18
- default_items: true , // default_items are (for now) Zoom In/Zoom Out
19
- items: [
20
- {
21
- text: ' Center map here' ,
22
- callback: center // center is your callback function
23
- },
24
- {
25
- text: ' Add a Marker' ,
26
- icon: ' img/marker.png' , // this can be relative or absolute
27
- callback: marker
28
- },
29
- ' -' // this is a separator
30
- ]
31
-
20
+ width: 170 ,
21
+ default_items: true , // default_items are (for now) Zoom In/Zoom Out
22
+ items: [
23
+ {
24
+ text: ' Center map here' ,
25
+ callback: center // center is your callback function
26
+ },
27
+ {
28
+ text: ' Add a Marker' ,
29
+ icon: ' img/marker.png' , // this can be relative or absolute
30
+ callback: marker
31
+ },
32
+ ' -' // this is a separator
33
+ ]
32
34
});
33
35
map .addControl (contextmenu);
34
- ```
36
+ ```
37
+
38
+ # API
39
+
40
+ ## Constructor
41
+
42
+ #### ` new ContextMenu(options) `
43
+
44
+ ###### ` options ` is an object with the following possible properties:
45
+ * ` default_items ` : * true* ; Whether the default items (which are: Zoom In/Out) are enabled
46
+ * ` width ` : * 150* ; The menu's width
47
+ * ` items ` : * [ ] * ; An array of object|string
48
+
49
+ ## Methods
50
+
51
+ #### contextmenu.clear()
52
+
53
+ Remove all elements from the menu.
54
+
55
+ #### contextmenu.extend(arr)
56
+
57
+ @param {Array} arr Array.
58
+
59
+ Add items to the menu. This pushes each item in the provided array to the end of the menu.
60
+
61
+ Example:
62
+ ``` js
63
+ var contextmenu = new ContextMenu ();
64
+ map .addControl (contextmenu);
65
+
66
+ var add_later = [
67
+ ' -' , // this is a separator
68
+ {
69
+ text: ' Add a Marker' ,
70
+ icon: ' img/marker.png' ,
71
+ callback: marker
72
+ }
73
+ ];
74
+ contextmenu .extend (add_later);
75
+ ```
76
+
77
+ #### contextmenu.push(item)
78
+
79
+ @param {Object|String} item Item.
80
+
81
+ Insert the provided item at the end of the menu.
82
+
83
+ #### contextmenu.pop(item)
84
+
85
+ Remove the last item of the menu.
0 commit comments