source: binary-improvements/webserver/leaflet/minimap/Control.MiniMap.js@ 276

Last change on this file since 276 was 173, checked in by alloc, 10 years ago

LandClaims on webmap
File size: 8.4 KB
Line 
1L.Control.MiniMap = L.Control.extend({
2 options: {
3 position: 'bottomright',
4 toggleDisplay: false,
5 zoomLevelOffset: -5,
6 zoomLevelFixed: false,
7 zoomAnimation: false,
8 autoToggleDisplay: false,
9 width: 150,
10 height: 150,
11 aimingRectOptions: {color: "#ff7800", weight: 1, clickable: false},
12 shadowRectOptions: {color: "#000000", weight: 1, clickable: false, opacity:0, fillOpacity:0}
13 },
14
15 hideText: 'Hide MiniMap',
16
17 showText: 'Show MiniMap',
18
19 //layer is the map layer to be shown in the minimap
20 initialize: function (layer, options) {
21 L.Util.setOptions(this, options);
22 //Make sure the aiming rects are non-clickable even if the user tries to set them clickable (most likely by forgetting to specify them false)
23 this.options.aimingRectOptions.clickable = false;
24 this.options.shadowRectOptions.clickable = false;
25 this._layer = layer;
26 },
27
28 onAdd: function (map) {
29
30 this._mainMap = map;
31
32 //Creating the container and stopping events from spilling through to the main map.
33 this._container = L.DomUtil.create('div', 'leaflet-control-minimap');
34 this._container.style.width = this.options.width + 'px';
35 this._container.style.height = this.options.height + 'px';
36 L.DomEvent.disableClickPropagation(this._container);
37 L.DomEvent.on(this._container, 'mousewheel', L.DomEvent.stopPropagation);
38
39
40 this._miniMap = new L.Map(this._container,
41 {
42 attributionControl: false,
43 zoomControl: false,
44 zoomAnimation: this.options.zoomAnimation,
45 autoToggleDisplay: this.options.autoToggleDisplay,
46 touchZoom: !this.options.zoomLevelFixed,
47 scrollWheelZoom: !this.options.zoomLevelFixed,
48 doubleClickZoom: !this.options.zoomLevelFixed,
49 boxZoom: !this.options.zoomLevelFixed,
50 crs: map.options.crs
51 });
52
53 this._miniMap.addLayer(this._layer);
54
55 //These bools are used to prevent infinite loops of the two maps notifying each other that they've moved.
56 this._mainMapMoving = false;
57 this._miniMapMoving = false;
58
59 //Keep a record of this to prevent auto toggling when the user explicitly doesn't want it.
60 this._userToggledDisplay = false;
61 this._minimized = false;
62
63 if (this.options.toggleDisplay) {
64 this._addToggleButton();
65 }
66
67 this._miniMap.whenReady(L.Util.bind(function () {
68 this._aimingRect = L.rectangle(this._mainMap.getBounds(), this.options.aimingRectOptions).addTo(this._miniMap);
69 this._shadowRect = L.rectangle(this._mainMap.getBounds(), this.options.shadowRectOptions).addTo(this._miniMap);
70 this._mainMap.on('moveend', this._onMainMapMoved, this);
71 this._mainMap.on('move', this._onMainMapMoving, this);
72 this._miniMap.on('movestart', this._onMiniMapMoveStarted, this);
73 this._miniMap.on('move', this._onMiniMapMoving, this);
74 this._miniMap.on('moveend', this._onMiniMapMoved, this);
75 }, this));
76
77 return this._container;
78 },
79
80 addTo: function (map) {
81 L.Control.prototype.addTo.call(this, map);
82 this._miniMap.setView(this._mainMap.getCenter(), this._decideZoom(true));
83 this._setDisplay(this._decideMinimized());
84 return this;
85 },
86
87 onRemove: function (map) {
88 this._mainMap.off('moveend', this._onMainMapMoved, this);
89 this._mainMap.off('move', this._onMainMapMoving, this);
90 this._miniMap.off('moveend', this._onMiniMapMoved, this);
91
92 this._miniMap.removeLayer(this._layer);
93 },
94
95 _addToggleButton: function () {
96 this._toggleDisplayButton = this.options.toggleDisplay ? this._createButton(
97 '', this.hideText, 'leaflet-control-minimap-toggle-display', this._container, this._toggleDisplayButtonClicked, this) : undefined;
98 },
99
100 _createButton: function (html, title, className, container, fn, context) {
101 var link = L.DomUtil.create('a', className, container);
102 link.innerHTML = html;
103 link.href = '#';
104 link.title = title;
105
106 var stop = L.DomEvent.stopPropagation;
107
108 L.DomEvent
109 .on(link, 'click', stop)
110 .on(link, 'mousedown', stop)
111 .on(link, 'dblclick', stop)
112 .on(link, 'click', L.DomEvent.preventDefault)
113 .on(link, 'click', fn, context);
114
115 return link;
116 },
117
118 _toggleDisplayButtonClicked: function () {
119 this._userToggledDisplay = true;
120 if (!this._minimized) {
121 this._minimize();
122 this._toggleDisplayButton.title = this.showText;
123 }
124 else {
125 this._restore();
126 this._toggleDisplayButton.title = this.hideText;
127 }
128 },
129
130 _setDisplay: function (minimize) {
131 if (minimize != this._minimized) {
132 if (!this._minimized) {
133 this._minimize();
134 }
135 else {
136 this._restore();
137 }
138 }
139 },
140
141 _minimize: function () {
142 // hide the minimap
143 if (this.options.toggleDisplay) {
144 this._container.style.width = '19px';
145 this._container.style.height = '19px';
146 this._toggleDisplayButton.className += ' minimized';
147 }
148 else {
149 this._container.style.display = 'none';
150 }
151 this._minimized = true;
152 },
153
154 _restore: function () {
155 if (this.options.toggleDisplay) {
156 this._container.style.width = this.options.width + 'px';
157 this._container.style.height = this.options.height + 'px';
158 this._toggleDisplayButton.className = this._toggleDisplayButton.className
159 .replace(/(?:^|\s)minimized(?!\S)/g, '');
160 }
161 else {
162 this._container.style.display = 'block';
163 }
164 this._minimized = false;
165 },
166
167 _onMainMapMoved: function (e) {
168 if (!this._miniMapMoving) {
169 this._mainMapMoving = true;
170 this._miniMap.setView(this._mainMap.getCenter(), this._decideZoom(true));
171 this._setDisplay(this._decideMinimized());
172 } else {
173 this._miniMapMoving = false;
174 }
175 this._aimingRect.setBounds(this._mainMap.getBounds());
176 },
177
178 _onMainMapMoving: function (e) {
179 this._aimingRect.setBounds(this._mainMap.getBounds());
180 },
181
182 _onMiniMapMoveStarted:function (e) {
183 var lastAimingRect = this._aimingRect.getBounds();
184 var sw = this._miniMap.latLngToContainerPoint(lastAimingRect.getSouthWest());
185 var ne = this._miniMap.latLngToContainerPoint(lastAimingRect.getNorthEast());
186 this._lastAimingRectPosition = {sw:sw,ne:ne};
187 },
188
189 _onMiniMapMoving: function (e) {
190 if (!this._mainMapMoving && this._lastAimingRectPosition) {
191 this._shadowRect.setBounds(new L.LatLngBounds(this._miniMap.containerPointToLatLng(this._lastAimingRectPosition.sw),this._miniMap.containerPointToLatLng(this._lastAimingRectPosition.ne)));
192 this._shadowRect.setStyle({opacity:1,fillOpacity:0.3});
193 }
194 },
195
196 _onMiniMapMoved: function (e) {
197 if (!this._mainMapMoving) {
198 this._miniMapMoving = true;
199 this._mainMap.setView(this._miniMap.getCenter(), this._decideZoom(false));
200 this._shadowRect.setStyle({opacity:0,fillOpacity:0});
201 } else {
202 this._mainMapMoving = false;
203 }
204 },
205
206 _decideZoom: function (fromMaintoMini) {
207 if (!this.options.zoomLevelFixed) {
208 if (fromMaintoMini)
209 return this._mainMap.getZoom() + this.options.zoomLevelOffset;
210 else {
211 var currentDiff = this._miniMap.getZoom() - this._mainMap.getZoom();
212 var proposedZoom = this._miniMap.getZoom() - this.options.zoomLevelOffset;
213 var toRet;
214
215 if (currentDiff > this.options.zoomLevelOffset && this._mainMap.getZoom() < this._miniMap.getMinZoom() - this.options.zoomLevelOffset) {
216 //This means the miniMap is zoomed out to the minimum zoom level and can't zoom any more.
217 if (this._miniMap.getZoom() > this._lastMiniMapZoom) {
218 //This means the user is trying to zoom in by using the minimap, zoom the main map.
219 toRet = this._mainMap.getZoom() + 1;
220 //Also we cheat and zoom the minimap out again to keep it visually consistent.
221 this._miniMap.setZoom(this._miniMap.getZoom() -1);
222 } else {
223 //Either the user is trying to zoom out past the mini map's min zoom or has just panned using it, we can't tell the difference.
224 //Therefore, we ignore it!
225 toRet = this._mainMap.getZoom();
226 }
227 } else {
228 //This is what happens in the majority of cases, and always if you configure the min levels + offset in a sane fashion.
229 toRet = proposedZoom;
230 }
231 this._lastMiniMapZoom = this._miniMap.getZoom();
232 return toRet;
233 }
234 } else {
235 if (fromMaintoMini)
236 return this.options.zoomLevelFixed;
237 else
238 return this._mainMap.getZoom();
239 }
240 },
241
242 _decideMinimized: function () {
243 if (this._userToggledDisplay) {
244 return this._minimized;
245 }
246
247 if (this.options.autoToggleDisplay) {
248 if (this._mainMap.getBounds().contains(this._miniMap.getBounds())) {
249 return true;
250 }
251 return false;
252 }
253
254 return this._minimized;
255 }
256});
257
258L.Map.mergeOptions({
259 miniMapControl: false
260});
261
262L.Map.addInitHook(function () {
263 if (this.options.miniMapControl) {
264 this.miniMapControl = (new L.Control.MiniMap()).addTo(this);
265 }
266});
267
268L.control.minimap = function (options) {
269 return new L.Control.MiniMap(options);
270};
Note: See TracBrowser for help on using the repository browser.