/
jquery.mapquery.mqOverviewMap.js
133 lines (110 loc) · 4.55 KB
/
jquery.mapquery.mqOverviewMap.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/* Copyright (c) 2011 by MapQuery Contributors (see AUTHORS for
* full list of contributors). Published under the MIT license.
* See https://github.com/mapquery/mapquery/blob/master/LICENSE for the
* full text of the license. */
/**
#jquery.mapquery.mqOverviewMap.js
The file containing the mqOverviewMap Widget
### *$('selector')*.`mqOverviewMap([options])`
_version added 0.1_
####**Description**: create a widget to show an overview map
+ **options**:
- **map**: the mapquery instance
- **title**: Title that will be displayed at the top of the overview window
- **position**: The position of the overview map dialog (default right bottom)
- **width**: width of the overview window (default 300px)
- **height**: height of the overview window (default 200px)
>Returns: widget
The mqOverviewMap widget allows us to display an overview map dialog
(http://jqueryui.com/demos/dialog/) and a toggle button. The dialog will be put
on the given position see (http://jqueryui.com/demos/dialog/#option-position).
The toggle button will be put in the element where the widget is attached to.
$('#overviewmap').mqOverviewMap({
map: '#map',
position: ['right','top']
});
*/
(function($) {
$.template('mqOverviewMap',
'<div class="mq-overviewmap-button ui-state-default ui-corner-all">'+
'<div class="mq-overviewmap-close ui-icon ui-icon-arrowthick-1-se "></div>'+
'</div>'+
'<div id="${id}" class="mq-overviewmap ui-widget ">'+
'</div>');
$.widget("mapQuery.mqOverviewMap", {
options: {
// The MapQuery instance
map: undefined,
// Title that will be displayed at the top of the overview window
title: "Overview map",
//the position of the overview map, default right bottom of the window
position: ['right','bottom'],
//initial size of the overviewmap
width: 300,
height: 200
},
_create: function() {
var map;
var self = this;
var element = this.element;
//TODO smo20110620 make this configurable
var id = 'mqOverviewMap-dialog';
//get the mapquery object
map = $(this.options.map).data('mapQuery');
this.element.addClass('ui-widget ui-helper-clearfix ' +
'ui-corner-all');
$.tmpl('mqOverviewMap',{
id: id}).appendTo(element);
var dialogElement = $('#'+id).dialog({
dialogClass: 'mq-overviewmap-dialog',
autoOpen: true,
width: this.options.width,
height: this.options.height,
title: this.options.title,
position: this.options.position,
resizeStop: function (event, ui) {
$('.olMap', this).width($(this).width());
$('.olMap', this).height($(this).height());
},
close:function(event,ui){
$('.mq-overviewmap-close').removeClass(
'mq-overviewmap-close ui-icon-arrowthick-1-se').addClass(
'mq-overviewmap-open ui-icon-arrowthick-1-nw');
}
});
var overviewmapsize = {
w: $(dialogElement).width(),
h: $(dialogElement).height() };
var mapOptions = map.olMapOptions;
//remove the controls, otherwise you end up with recursing events
delete mapOptions.controls;
// use the lowest layer of the map as overviewmap
// TODO: make the layer configurable
var overview = new OpenLayers.Control.OverviewMap(
{div: document.getElementById(id),size:overviewmapsize,
mapOptions:mapOptions,layers:[
map.layers().reverse()[0].olLayer.clone()]});
map.olMap.addControl(overview);
// remove OpenLayers blue border around overviewmap
$('.olControlOverviewMapElement', dialogElement).removeClass(
'olControlOverviewMapElement');
element.delegate('.mq-overviewmap-close', 'click', function() {
$(this).removeClass(
'mq-overviewmap-close ui-icon-arrowthick-1-se').addClass(
'mq-overviewmap-open ui-icon-arrowthick-1-nw');
$('#'+id).dialog('close');
});
element.delegate('.mq-overviewmap-open', 'click', function() {
$(this).removeClass(
'mq-overviewmap-open ui-icon-arrowthick-1-nw').addClass(
'mq-overviewmap-close ui-icon-arrowthick-1-se');
$('#'+id).dialog('open');
});
},
_destroy: function() {
this.element.removeClass(' ui-widget ui-helper-clearfix ' +
'ui-corner-all')
.empty();
}
});
})(jQuery);