1 | import {Layer} from './Layer';
|
2 | import {FeatureGroup} from './FeatureGroup';
|
3 | import * as Util from '../core/Util';
|
4 | import {toLatLng} from '../geo/LatLng';
|
5 | import {toPoint} from '../geometry/Point';
|
6 | import * as DomUtil from '../dom/DomUtil';
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 | export var DivOverlay = Layer.extend({
|
17 |
|
18 |
|
19 |
|
20 | options: {
|
21 |
|
22 |
|
23 |
|
24 | offset: [0, 7],
|
25 |
|
26 |
|
27 |
|
28 | className: '',
|
29 |
|
30 |
|
31 |
|
32 | pane: 'popupPane'
|
33 | },
|
34 |
|
35 | initialize: function (options, source) {
|
36 | Util.setOptions(this, options);
|
37 |
|
38 | this._source = source;
|
39 | },
|
40 |
|
41 | onAdd: function (map) {
|
42 | this._zoomAnimated = map._zoomAnimated;
|
43 |
|
44 | if (!this._container) {
|
45 | this._initLayout();
|
46 | }
|
47 |
|
48 | if (map._fadeAnimated) {
|
49 | DomUtil.setOpacity(this._container, 0);
|
50 | }
|
51 |
|
52 | clearTimeout(this._removeTimeout);
|
53 | this.getPane().appendChild(this._container);
|
54 | this.update();
|
55 |
|
56 | if (map._fadeAnimated) {
|
57 | DomUtil.setOpacity(this._container, 1);
|
58 | }
|
59 |
|
60 | this.bringToFront();
|
61 | },
|
62 |
|
63 | onRemove: function (map) {
|
64 | if (map._fadeAnimated) {
|
65 | DomUtil.setOpacity(this._container, 0);
|
66 | this._removeTimeout = setTimeout(Util.bind(DomUtil.remove, undefined, this._container), 200);
|
67 | } else {
|
68 | DomUtil.remove(this._container);
|
69 | }
|
70 | },
|
71 |
|
72 |
|
73 |
|
74 |
|
75 | getLatLng: function () {
|
76 | return this._latlng;
|
77 | },
|
78 |
|
79 |
|
80 |
|
81 | setLatLng: function (latlng) {
|
82 | this._latlng = toLatLng(latlng);
|
83 | if (this._map) {
|
84 | this._updatePosition();
|
85 | this._adjustPan();
|
86 | }
|
87 | return this;
|
88 | },
|
89 |
|
90 |
|
91 |
|
92 | getContent: function () {
|
93 | return this._content;
|
94 | },
|
95 |
|
96 |
|
97 |
|
98 | setContent: function (content) {
|
99 | this._content = content;
|
100 | this.update();
|
101 | return this;
|
102 | },
|
103 |
|
104 |
|
105 |
|
106 | getElement: function () {
|
107 | return this._container;
|
108 | },
|
109 |
|
110 |
|
111 |
|
112 | update: function () {
|
113 | if (!this._map) { return; }
|
114 |
|
115 | this._container.style.visibility = 'hidden';
|
116 |
|
117 | this._updateContent();
|
118 | this._updateLayout();
|
119 | this._updatePosition();
|
120 |
|
121 | this._container.style.visibility = '';
|
122 |
|
123 | this._adjustPan();
|
124 | },
|
125 |
|
126 | getEvents: function () {
|
127 | var events = {
|
128 | zoom: this._updatePosition,
|
129 | viewreset: this._updatePosition
|
130 | };
|
131 |
|
132 | if (this._zoomAnimated) {
|
133 | events.zoomanim = this._animateZoom;
|
134 | }
|
135 | return events;
|
136 | },
|
137 |
|
138 |
|
139 |
|
140 | isOpen: function () {
|
141 | return !!this._map && this._map.hasLayer(this);
|
142 | },
|
143 |
|
144 |
|
145 |
|
146 | bringToFront: function () {
|
147 | if (this._map) {
|
148 | DomUtil.toFront(this._container);
|
149 | }
|
150 | return this;
|
151 | },
|
152 |
|
153 |
|
154 |
|
155 | bringToBack: function () {
|
156 | if (this._map) {
|
157 | DomUtil.toBack(this._container);
|
158 | }
|
159 | return this;
|
160 | },
|
161 |
|
162 | _prepareOpen: function (parent, layer, latlng) {
|
163 | if (!(layer instanceof Layer)) {
|
164 | latlng = layer;
|
165 | layer = parent;
|
166 | }
|
167 |
|
168 | if (layer instanceof FeatureGroup) {
|
169 | for (var id in parent._layers) {
|
170 | layer = parent._layers[id];
|
171 | break;
|
172 | }
|
173 | }
|
174 |
|
175 | if (!latlng) {
|
176 | if (layer.getCenter) {
|
177 | latlng = layer.getCenter();
|
178 | } else if (layer.getLatLng) {
|
179 | latlng = layer.getLatLng();
|
180 | } else {
|
181 | throw new Error('Unable to get source layer LatLng.');
|
182 | }
|
183 | }
|
184 |
|
185 |
|
186 | this._source = layer;
|
187 |
|
188 |
|
189 | this.update();
|
190 |
|
191 | return latlng;
|
192 | },
|
193 |
|
194 | _updateContent: function () {
|
195 | if (!this._content) { return; }
|
196 |
|
197 | var node = this._contentNode;
|
198 | var content = (typeof this._content === 'function') ? this._content(this._source || this) : this._content;
|
199 |
|
200 | if (typeof content === 'string') {
|
201 | node.innerHTML = content;
|
202 | } else {
|
203 | while (node.hasChildNodes()) {
|
204 | node.removeChild(node.firstChild);
|
205 | }
|
206 | node.appendChild(content);
|
207 | }
|
208 | this.fire('contentupdate');
|
209 | },
|
210 |
|
211 | _updatePosition: function () {
|
212 | if (!this._map) { return; }
|
213 |
|
214 | var pos = this._map.latLngToLayerPoint(this._latlng),
|
215 | offset = toPoint(this.options.offset),
|
216 | anchor = this._getAnchor();
|
217 |
|
218 | if (this._zoomAnimated) {
|
219 | DomUtil.setPosition(this._container, pos.add(anchor));
|
220 | } else {
|
221 | offset = offset.add(pos).add(anchor);
|
222 | }
|
223 |
|
224 | var bottom = this._containerBottom = -offset.y,
|
225 | left = this._containerLeft = -Math.round(this._containerWidth / 2) + offset.x;
|
226 |
|
227 |
|
228 | this._container.style.bottom = bottom + 'px';
|
229 | this._container.style.left = left + 'px';
|
230 | },
|
231 |
|
232 | _getAnchor: function () {
|
233 | return [0, 0];
|
234 | }
|
235 |
|
236 | });
|