├── LICENSE
├── README.md
├── css
├── buttons.css
├── images
│ ├── layers-2x.png
│ ├── layers.png
│ ├── marker-icon-2x.png
│ ├── marker-icon.png
│ ├── marker-shadow.png
│ ├── spritesheet-2x.png
│ ├── spritesheet.png
│ └── spritesheet.svg
├── leaflet.css
├── leaflet.draw-src.css
├── leaflet.label.css
├── sweetalert.css
└── sweetalert2.min.css
├── img
├── 1.jpg
├── 2.jpg
├── 3.jpg
└── 4.png
├── index.html
└── js
├── L.LabelTextCollision.js
├── Leaflet.Illustrate.js
├── _leaflet.draw-src.js
├── images
├── marker-icon-2x.png
├── marker-icon.png
└── marker-shadow.png
├── jquery.min.js
├── leaflet-src.js
├── leaflet.draw-src.js
├── leaflet.draw.lang.zh-cn.js
├── leaflet.label.js
├── pinyinUtil.js
├── pinyin_dict_firstletter.js
├── sweetalert.min.js
└── sweetalert2.min.js
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 DomeiGanbatte
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | #### 实现热点图像区域编辑功能,能够在图片上绘制、编辑、删除图形区域以及文字说明。
2 | 
3 |
4 | ### 使用
5 | [leaflet](https://github.com/Leaflet/Leaflet "leaflet")(v0.7.7)
6 | [leaflet.draw](https://github.com/Leaflet/Leaflet.draw "leaflet.draw")(v0.4.9)
7 | [leaflet.label](https://github.com/Leaflet/Leaflet.label "leaflet.label")
8 | [sweetalert2](https://github.com/limonte/sweetalert2 "sweetalert2")
9 | [pinyinjs](https://github.com/sxei/pinyinjs "pinyinjs")
10 | [jquery](https://github.com/jquery/jquery "jquery")(v3.1.1)
11 | ### Demo
12 | [http://demo.laji.blog/hotspots](http://demo.laji.blog/hotspots "http://demo.laji.blog/hotspots")
13 | ### Github
14 | [https://github.com/xiaomai0830/leaflet-image-hotspots](https://github.com/xiaomai0830/leaflet-image-hotspots "https://github.com/xiaomai0830/leaflet-image-hotspots")
15 |
16 | ###遇到的各种问题的解决方法和解答出处
17 | #### 1.用代码添加了一个多边形但是无法通过点击工具栏来编辑的原因
18 | 应该addTo(drawnItems)而不是addTo(map)
19 | [https://github.com/Leaflet/Leaflet.draw/issues/159](https://github.com/Leaflet/Leaflet.draw/issues/159 "https://github.com/Leaflet/Leaflet.draw/issues/159")
20 | 
21 | 
22 | #### 2.leaflet在使用CRS.Simple坐标时画圆的问题
23 | 添加以下代码:
24 | ```javascript
25 | L.Edit.Circle.include({
26 | _move: function (latlng) {
27 | var resizemarkerPoint = this._getResizeMarkerPoint(latlng);
28 |
29 | // Move the resize marker
30 | this._resizeMarkers[0].setLatLng(resizemarkerPoint);
31 |
32 | // Move the circle
33 | this._shape.setLatLng(latlng);
34 |
35 | // output the radius, for debugging purpose.
36 | document.getElementById("radius").innerHTML = this._shape._radius;
37 | }
38 | });
39 | // Correct Leaflet L.Circle for use with flat map. Comment the following function to see the original impact on radius when the circle is dragged along the vertical axis.
40 | L.Circle.include({
41 | _getLngRadius: function () {
42 | return this._getLatRadius();
43 | }
44 | });
45 | ```
46 | [https://stackoverflow.com/questions/29366268/leaflet-circle-drawing-editing-issue](https://stackoverflow.com/questions/29366268/leaflet-circle-drawing-editing-issue "https://stackoverflow.com/questions/29366268/leaflet-circle-drawing-editing-issue")
47 | 
48 | [http://jsfiddle.net/jameslaneconkling/mhpd9ca5](http://jsfiddle.net/jameslaneconkling/mhpd9ca5 "http://jsfiddle.net/jameslaneconkling/mhpd9ca5")
49 | #### 3.leaflet 添加文字的方法
50 | **方法一**:通过修改Marker的icon来实现
51 | [https://stackoverflow.com/questions/41082236/leafletjs-l-divicon-html-marker-text-scale-relative-to-map-zoom](https://stackoverflow.com/questions/41082236/leafletjs-l-divicon-html-marker-text-scale-relative-to-map-zoom "https://stackoverflow.com/questions/41082236/leafletjs-l-divicon-html-marker-text-scale-relative-to-map-zoom")
52 |
53 | **方法二**:添加以下代码(参照别人的代码改的,但在画polygon的时候会出现无法使用setText方法的问题,后来改用include就可以了):
54 | ```javascript
55 | //添加文字
56 | var original_getPathString_circle = L.Circle.prototype.getPathString;
57 | L.Circle.include({
58 | getPathString: function () {
59 | var center = this._point,
60 | r = this._radius;
61 | if (this._textNode && this._textNode.parentNode) {
62 | this._path.parentNode.removeChild(this._textNode);
63 | delete this._textNode;
64 | }
65 | var textNode = L.Path.prototype._createElement('text');
66 |
67 | textNode.setAttribute('text-anchor', 'middle');
68 | textNode.setAttribute('style', 'font-weight:bold');
69 | textNode.setAttribute('x', center.x);
70 | textNode.setAttribute('y', center.y);
71 | var font_size;
72 | if(this._map.getZoom()>0){
73 | font_size = (textFontSize_default+4) * this._map.getZoom()*2;
74 | }else{
75 | font_size = textFontSize_default;
76 | }
77 | textNode.setAttribute('font-size', font_size );
78 |
79 | textNode.appendChild(document.createTextNode((this.text)?this.text:''));
80 |
81 | this._path.parentNode.appendChild(textNode);
82 |
83 | this._textNode = textNode;
84 |
85 | return original_getPathString_circle.call(this);
86 |
87 | },
88 | setText: function (text) {
89 | this.text = text;
90 | return this.redraw();
91 | }
92 |
93 | });
94 |
95 | var original_getPathString_rectangle = L.Rectangle.prototype.getPathString;
96 | L.Rectangle.include({
97 | getPathString: function () {
98 | var center = map.latLngToLayerPoint(this.getBounds().getCenter());
99 | if (this._textNode && this._textNode.parentNode) {
100 | this._path.parentNode.removeChild(this._textNode);
101 | delete this._textNode;
102 | }
103 | var textNode = L.Path.prototype._createElement('text');
104 |
105 | textNode.setAttribute('text-anchor', 'middle');
106 | textNode.setAttribute('style', 'font-weight:bold');
107 | textNode.setAttribute('x', center.x);
108 | textNode.setAttribute('y', center.y);
109 | var font_size;
110 | if(this._map.getZoom()>0){
111 | font_size = (textFontSize_default+4) * this._map.getZoom()*2;
112 | }else{
113 | font_size = textFontSize_default;
114 | }
115 | textNode.setAttribute('font-size', font_size );
116 |
117 | textNode.appendChild(document.createTextNode((this.text)?this.text:''));
118 |
119 | this._path.parentNode.appendChild(textNode);
120 |
121 | this._textNode = textNode;
122 |
123 | return original_getPathString_rectangle.call(this);
124 |
125 | },
126 | setText: function (text) {
127 | this.text = text;
128 | return this.redraw();
129 | }
130 |
131 | });
132 |
133 |
134 | var original_getPathString_polygon = L.Polygon.prototype.getPathString;
135 | L.Polygon.include({
136 | getPathString: function () {
137 | var center = map.latLngToLayerPoint(this.getBounds().getCenter());
138 | if (this._textNode && this._textNode.parentNode) {
139 | this._path.parentNode.removeChild(this._textNode);
140 | delete this._textNode;
141 | }
142 | var textNode = L.Path.prototype._createElement('text');
143 | textNode.setAttribute('text-anchor', 'middle');
144 | textNode.setAttribute('style', 'font-weight:bold');
145 | textNode.setAttribute('x', center.x);
146 | textNode.setAttribute('y', center.y);
147 | var font_size;
148 | if(this._map.getZoom()>0){
149 | font_size = (textFontSize_default+4) * this._map.getZoom()*2;
150 | }else{
151 | font_size = textFontSize_default;
152 | }
153 | textNode.setAttribute('font-size', font_size );
154 |
155 | textNode.appendChild(document.createTextNode((this.text)?this.text:''));
156 |
157 | this._path.parentNode.appendChild(textNode);
158 |
159 | this._textNode = textNode;
160 |
161 | return original_getPathString_polygon.call(this);
162 |
163 | },
164 | setText: function (text) {
165 | this.text = text;
166 | return this.redraw();
167 | }
168 |
169 | });
170 | ```
171 | [https://stackoverflow.com/questions/39367040/can-i-have-fixed-text-in-leaflet](https://stackoverflow.com/questions/39367040/can-i-have-fixed-text-in-leaflet "https://stackoverflow.com/questions/39367040/can-i-have-fixed-text-in-leaflet")
172 | 
173 | #### 4.leaflet 获取图形的中心点
174 | Circle可直接用_point属性,Rectangle、Polygon要用map.latLngToLayerPoint(this.getBounds().getCenter())来获取。
175 | [https://stackoverflow.com/questions/13316925/simple-label-on-a-leaflet-geojson-polygon](https://stackoverflow.com/questions/13316925/simple-label-on-a-leaflet-geojson-polygon "https://stackoverflow.com/questions/13316925/simple-label-on-a-leaflet-geojson-polygon")
176 | 
177 |
--------------------------------------------------------------------------------
/css/buttons.css:
--------------------------------------------------------------------------------
1 | .btn {
2 | display: inline-block;
3 | padding: 6px 12px;
4 | margin-bottom: 0;
5 | font-size: 24px;
6 | font-weight: normal;
7 | line-height: 1.42857143;
8 | text-align: center;
9 | white-space: nowrap;
10 | vertical-align: middle;
11 | -ms-touch-action: manipulation;
12 | touch-action: manipulation;
13 | cursor: pointer;
14 | -webkit-user-select: none;
15 | -moz-user-select: none;
16 | -ms-user-select: none;
17 | user-select: none;
18 | background-image: none;
19 | border: 1px solid transparent;
20 | border-radius: 4px;
21 | }
22 | .btn:focus,
23 | .btn:active:focus,
24 | .btn.active:focus,
25 | .btn.focus,
26 | .btn:active.focus,
27 | .btn.active.focus {
28 | outline: thin dotted;
29 | outline: 5px auto -webkit-focus-ring-color;
30 | outline-offset: -2px;
31 | }
32 | .btn:hover,
33 | .btn:focus,
34 | .btn.focus {
35 | color: #333;
36 | text-decoration: none;
37 | }
38 | .btn:active,
39 | .btn.active {
40 | background-image: none;
41 | outline: 0;
42 | -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
43 | box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
44 | }
45 | .btn.disabled,
46 | .btn[disabled],
47 | fieldset[disabled] .btn {
48 | cursor: not-allowed;
49 | filter: alpha(opacity=65);
50 | -webkit-box-shadow: none;
51 | box-shadow: none;
52 | opacity: .65;
53 | }
54 | a.btn.disabled,
55 | fieldset[disabled] a.btn {
56 | pointer-events: none;
57 | }
58 | .btn-default {
59 | color: #333;
60 | background-color: #fff;
61 | border-color: #ccc;
62 | }
63 | .btn-default:focus,
64 | .btn-default.focus {
65 | color: #333;
66 | background-color: #e6e6e6;
67 | border-color: #8c8c8c;
68 | }
69 | .btn-default:hover {
70 | color: #333;
71 | background-color: #e6e6e6;
72 | border-color: #adadad;
73 | }
74 | .btn-default:active,
75 | .btn-default.active,
76 | .open > .dropdown-toggle.btn-default {
77 | color: #333;
78 | background-color: #e6e6e6;
79 | border-color: #adadad;
80 | }
81 | .btn-default:active:hover,
82 | .btn-default.active:hover,
83 | .open > .dropdown-toggle.btn-default:hover,
84 | .btn-default:active:focus,
85 | .btn-default.active:focus,
86 | .open > .dropdown-toggle.btn-default:focus,
87 | .btn-default:active.focus,
88 | .btn-default.active.focus,
89 | .open > .dropdown-toggle.btn-default.focus {
90 | color: #333;
91 | background-color: #d4d4d4;
92 | border-color: #8c8c8c;
93 | }
94 | .btn-default:active,
95 | .btn-default.active,
96 | .open > .dropdown-toggle.btn-default {
97 | background-image: none;
98 | }
99 | .btn-default.disabled:hover,
100 | .btn-default[disabled]:hover,
101 | fieldset[disabled] .btn-default:hover,
102 | .btn-default.disabled:focus,
103 | .btn-default[disabled]:focus,
104 | fieldset[disabled] .btn-default:focus,
105 | .btn-default.disabled.focus,
106 | .btn-default[disabled].focus,
107 | fieldset[disabled] .btn-default.focus {
108 | background-color: #fff;
109 | border-color: #ccc;
110 | }
111 | .btn-default .badge {
112 | color: #fff;
113 | background-color: #333;
114 | }
115 | .btn-primary {
116 | color: #fff;
117 | background-color: #337ab7;
118 | border-color: #2e6da4;
119 | }
120 | .btn-primary:focus,
121 | .btn-primary.focus {
122 | color: #fff;
123 | background-color: #286090;
124 | border-color: #122b40;
125 | }
126 | .btn-primary:hover {
127 | color: #fff;
128 | background-color: #286090;
129 | border-color: #204d74;
130 | }
131 | .btn-primary:active,
132 | .btn-primary.active,
133 | .open > .dropdown-toggle.btn-primary {
134 | color: #fff;
135 | background-color: #286090;
136 | border-color: #204d74;
137 | }
138 | .btn-primary:active:hover,
139 | .btn-primary.active:hover,
140 | .open > .dropdown-toggle.btn-primary:hover,
141 | .btn-primary:active:focus,
142 | .btn-primary.active:focus,
143 | .open > .dropdown-toggle.btn-primary:focus,
144 | .btn-primary:active.focus,
145 | .btn-primary.active.focus,
146 | .open > .dropdown-toggle.btn-primary.focus {
147 | color: #fff;
148 | background-color: #204d74;
149 | border-color: #122b40;
150 | }
151 | .btn-primary:active,
152 | .btn-primary.active,
153 | .open > .dropdown-toggle.btn-primary {
154 | background-image: none;
155 | }
156 | .btn-primary.disabled:hover,
157 | .btn-primary[disabled]:hover,
158 | fieldset[disabled] .btn-primary:hover,
159 | .btn-primary.disabled:focus,
160 | .btn-primary[disabled]:focus,
161 | fieldset[disabled] .btn-primary:focus,
162 | .btn-primary.disabled.focus,
163 | .btn-primary[disabled].focus,
164 | fieldset[disabled] .btn-primary.focus {
165 | background-color: #337ab7;
166 | border-color: #2e6da4;
167 | }
168 | .btn-primary .badge {
169 | color: #337ab7;
170 | background-color: #fff;
171 | }
172 | .btn-success {
173 | color: #fff;
174 | background-color: #5cb85c;
175 | border-color: #4cae4c;
176 | }
177 | .btn-success:focus,
178 | .btn-success.focus {
179 | color: #fff;
180 | background-color: #449d44;
181 | border-color: #255625;
182 | }
183 | .btn-success:hover {
184 | color: #fff;
185 | background-color: #449d44;
186 | border-color: #398439;
187 | }
188 | .btn-success:active,
189 | .btn-success.active,
190 | .open > .dropdown-toggle.btn-success {
191 | color: #fff;
192 | background-color: #449d44;
193 | border-color: #398439;
194 | }
195 | .btn-success:active:hover,
196 | .btn-success.active:hover,
197 | .open > .dropdown-toggle.btn-success:hover,
198 | .btn-success:active:focus,
199 | .btn-success.active:focus,
200 | .open > .dropdown-toggle.btn-success:focus,
201 | .btn-success:active.focus,
202 | .btn-success.active.focus,
203 | .open > .dropdown-toggle.btn-success.focus {
204 | color: #fff;
205 | background-color: #398439;
206 | border-color: #255625;
207 | }
208 | .btn-success:active,
209 | .btn-success.active,
210 | .open > .dropdown-toggle.btn-success {
211 | background-image: none;
212 | }
213 | .btn-success.disabled:hover,
214 | .btn-success[disabled]:hover,
215 | fieldset[disabled] .btn-success:hover,
216 | .btn-success.disabled:focus,
217 | .btn-success[disabled]:focus,
218 | fieldset[disabled] .btn-success:focus,
219 | .btn-success.disabled.focus,
220 | .btn-success[disabled].focus,
221 | fieldset[disabled] .btn-success.focus {
222 | background-color: #5cb85c;
223 | border-color: #4cae4c;
224 | }
225 | .btn-success .badge {
226 | color: #5cb85c;
227 | background-color: #fff;
228 | }
229 | .btn-info {
230 | color: #fff;
231 | background-color: #5bc0de;
232 | border-color: #46b8da;
233 | }
234 | .btn-info:focus,
235 | .btn-info.focus {
236 | color: #fff;
237 | background-color: #31b0d5;
238 | border-color: #1b6d85;
239 | }
240 | .btn-info:hover {
241 | color: #fff;
242 | background-color: #31b0d5;
243 | border-color: #269abc;
244 | }
245 | .btn-info:active,
246 | .btn-info.active,
247 | .open > .dropdown-toggle.btn-info {
248 | color: #fff;
249 | background-color: #31b0d5;
250 | border-color: #269abc;
251 | }
252 | .btn-info:active:hover,
253 | .btn-info.active:hover,
254 | .open > .dropdown-toggle.btn-info:hover,
255 | .btn-info:active:focus,
256 | .btn-info.active:focus,
257 | .open > .dropdown-toggle.btn-info:focus,
258 | .btn-info:active.focus,
259 | .btn-info.active.focus,
260 | .open > .dropdown-toggle.btn-info.focus {
261 | color: #fff;
262 | background-color: #269abc;
263 | border-color: #1b6d85;
264 | }
265 | .btn-info:active,
266 | .btn-info.active,
267 | .open > .dropdown-toggle.btn-info {
268 | background-image: none;
269 | }
270 | .btn-info.disabled:hover,
271 | .btn-info[disabled]:hover,
272 | fieldset[disabled] .btn-info:hover,
273 | .btn-info.disabled:focus,
274 | .btn-info[disabled]:focus,
275 | fieldset[disabled] .btn-info:focus,
276 | .btn-info.disabled.focus,
277 | .btn-info[disabled].focus,
278 | fieldset[disabled] .btn-info.focus {
279 | background-color: #5bc0de;
280 | border-color: #46b8da;
281 | }
282 | .btn-info .badge {
283 | color: #5bc0de;
284 | background-color: #fff;
285 | }
286 | .btn-warning {
287 | color: #fff;
288 | background-color: #f0ad4e;
289 | border-color: #eea236;
290 | }
291 | .btn-warning:focus,
292 | .btn-warning.focus {
293 | color: #fff;
294 | background-color: #ec971f;
295 | border-color: #985f0d;
296 | }
297 | .btn-warning:hover {
298 | color: #fff;
299 | background-color: #ec971f;
300 | border-color: #d58512;
301 | }
302 | .btn-warning:active,
303 | .btn-warning.active,
304 | .open > .dropdown-toggle.btn-warning {
305 | color: #fff;
306 | background-color: #ec971f;
307 | border-color: #d58512;
308 | }
309 | .btn-warning:active:hover,
310 | .btn-warning.active:hover,
311 | .open > .dropdown-toggle.btn-warning:hover,
312 | .btn-warning:active:focus,
313 | .btn-warning.active:focus,
314 | .open > .dropdown-toggle.btn-warning:focus,
315 | .btn-warning:active.focus,
316 | .btn-warning.active.focus,
317 | .open > .dropdown-toggle.btn-warning.focus {
318 | color: #fff;
319 | background-color: #d58512;
320 | border-color: #985f0d;
321 | }
322 | .btn-warning:active,
323 | .btn-warning.active,
324 | .open > .dropdown-toggle.btn-warning {
325 | background-image: none;
326 | }
327 | .btn-warning.disabled:hover,
328 | .btn-warning[disabled]:hover,
329 | fieldset[disabled] .btn-warning:hover,
330 | .btn-warning.disabled:focus,
331 | .btn-warning[disabled]:focus,
332 | fieldset[disabled] .btn-warning:focus,
333 | .btn-warning.disabled.focus,
334 | .btn-warning[disabled].focus,
335 | fieldset[disabled] .btn-warning.focus {
336 | background-color: #f0ad4e;
337 | border-color: #eea236;
338 | }
339 | .btn-warning .badge {
340 | color: #f0ad4e;
341 | background-color: #fff;
342 | }
343 | .btn-danger {
344 | color: #fff;
345 | background-color: #d9534f;
346 | border-color: #d43f3a;
347 | }
348 | .btn-danger:focus,
349 | .btn-danger.focus {
350 | color: #fff;
351 | background-color: #c9302c;
352 | border-color: #761c19;
353 | }
354 | .btn-danger:hover {
355 | color: #fff;
356 | background-color: #c9302c;
357 | border-color: #ac2925;
358 | }
359 | .btn-danger:active,
360 | .btn-danger.active,
361 | .open > .dropdown-toggle.btn-danger {
362 | color: #fff;
363 | background-color: #c9302c;
364 | border-color: #ac2925;
365 | }
366 | .btn-danger:active:hover,
367 | .btn-danger.active:hover,
368 | .open > .dropdown-toggle.btn-danger:hover,
369 | .btn-danger:active:focus,
370 | .btn-danger.active:focus,
371 | .open > .dropdown-toggle.btn-danger:focus,
372 | .btn-danger:active.focus,
373 | .btn-danger.active.focus,
374 | .open > .dropdown-toggle.btn-danger.focus {
375 | color: #fff;
376 | background-color: #ac2925;
377 | border-color: #761c19;
378 | }
379 | .btn-danger:active,
380 | .btn-danger.active,
381 | .open > .dropdown-toggle.btn-danger {
382 | background-image: none;
383 | }
384 | .btn-danger.disabled:hover,
385 | .btn-danger[disabled]:hover,
386 | fieldset[disabled] .btn-danger:hover,
387 | .btn-danger.disabled:focus,
388 | .btn-danger[disabled]:focus,
389 | fieldset[disabled] .btn-danger:focus,
390 | .btn-danger.disabled.focus,
391 | .btn-danger[disabled].focus,
392 | fieldset[disabled] .btn-danger.focus {
393 | background-color: #d9534f;
394 | border-color: #d43f3a;
395 | }
396 | .btn-danger .badge {
397 | color: #d9534f;
398 | background-color: #fff;
399 | }
400 |
--------------------------------------------------------------------------------
/css/images/layers-2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZanwingMak/leaflet-image-hotspots/196bbafaa9db6b379745be59eca2c381e54528cd/css/images/layers-2x.png
--------------------------------------------------------------------------------
/css/images/layers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZanwingMak/leaflet-image-hotspots/196bbafaa9db6b379745be59eca2c381e54528cd/css/images/layers.png
--------------------------------------------------------------------------------
/css/images/marker-icon-2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZanwingMak/leaflet-image-hotspots/196bbafaa9db6b379745be59eca2c381e54528cd/css/images/marker-icon-2x.png
--------------------------------------------------------------------------------
/css/images/marker-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZanwingMak/leaflet-image-hotspots/196bbafaa9db6b379745be59eca2c381e54528cd/css/images/marker-icon.png
--------------------------------------------------------------------------------
/css/images/marker-shadow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZanwingMak/leaflet-image-hotspots/196bbafaa9db6b379745be59eca2c381e54528cd/css/images/marker-shadow.png
--------------------------------------------------------------------------------
/css/images/spritesheet-2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZanwingMak/leaflet-image-hotspots/196bbafaa9db6b379745be59eca2c381e54528cd/css/images/spritesheet-2x.png
--------------------------------------------------------------------------------
/css/images/spritesheet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZanwingMak/leaflet-image-hotspots/196bbafaa9db6b379745be59eca2c381e54528cd/css/images/spritesheet.png
--------------------------------------------------------------------------------
/css/images/spritesheet.svg:
--------------------------------------------------------------------------------
1 |
2 |
28 |
--------------------------------------------------------------------------------
/css/leaflet.css:
--------------------------------------------------------------------------------
1 | /* required styles */
2 |
3 | .leaflet-map-pane,
4 | .leaflet-tile,
5 | .leaflet-marker-icon,
6 | .leaflet-marker-shadow,
7 | .leaflet-tile-pane,
8 | .leaflet-tile-container,
9 | .leaflet-overlay-pane,
10 | .leaflet-shadow-pane,
11 | .leaflet-marker-pane,
12 | .leaflet-popup-pane,
13 | .leaflet-overlay-pane svg,
14 | .leaflet-zoom-box,
15 | .leaflet-image-layer,
16 | .leaflet-layer {
17 | position: absolute;
18 | left: 0;
19 | top: 0;
20 | }
21 | .leaflet-container {
22 | overflow: hidden;
23 | -ms-touch-action: none;
24 | touch-action: none;
25 | }
26 | .leaflet-tile,
27 | .leaflet-marker-icon,
28 | .leaflet-marker-shadow {
29 | -webkit-user-select: none;
30 | -moz-user-select: none;
31 | user-select: none;
32 | -webkit-user-drag: none;
33 | }
34 | .leaflet-marker-icon,
35 | .leaflet-marker-shadow {
36 | display: block;
37 | }
38 | /* map is broken in FF if you have max-width: 100% on tiles */
39 | .leaflet-container img {
40 | max-width: none !important;
41 | }
42 | /* stupid Android 2 doesn't understand "max-width: none" properly */
43 | .leaflet-container img.leaflet-image-layer {
44 | max-width: 15000px !important;
45 | }
46 | .leaflet-tile {
47 | filter: inherit;
48 | visibility: hidden;
49 | }
50 | .leaflet-tile-loaded {
51 | visibility: inherit;
52 | }
53 | .leaflet-zoom-box {
54 | width: 0;
55 | height: 0;
56 | }
57 | /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
58 | .leaflet-overlay-pane svg {
59 | -moz-user-select: none;
60 | }
61 |
62 | .leaflet-tile-pane { z-index: 2; }
63 | .leaflet-objects-pane { z-index: 3; }
64 | .leaflet-overlay-pane { z-index: 4; }
65 | .leaflet-shadow-pane { z-index: 5; }
66 | .leaflet-marker-pane { z-index: 6; }
67 | .leaflet-popup-pane { z-index: 7; }
68 |
69 | .leaflet-vml-shape {
70 | width: 1px;
71 | height: 1px;
72 | }
73 | .lvml {
74 | behavior: url(#default#VML);
75 | display: inline-block;
76 | position: absolute;
77 | }
78 |
79 |
80 | /* control positioning */
81 |
82 | .leaflet-control {
83 | position: relative;
84 | z-index: 7;
85 | pointer-events: auto;
86 | }
87 | .leaflet-top,
88 | .leaflet-bottom {
89 | position: absolute;
90 | z-index: 1000;
91 | pointer-events: none;
92 | }
93 | .leaflet-top {
94 | top: 0;
95 | }
96 | .leaflet-right {
97 | right: 0;
98 | }
99 | .leaflet-bottom {
100 | bottom: 0;
101 | }
102 | .leaflet-left {
103 | left: 0;
104 | }
105 | .leaflet-control {
106 | float: left;
107 | clear: both;
108 | }
109 | .leaflet-right .leaflet-control {
110 | float: right;
111 | }
112 | .leaflet-top .leaflet-control {
113 | margin-top: 10px;
114 | }
115 | .leaflet-bottom .leaflet-control {
116 | margin-bottom: 10px;
117 | }
118 | .leaflet-left .leaflet-control {
119 | margin-left: 10px;
120 | }
121 | .leaflet-right .leaflet-control {
122 | margin-right: 10px;
123 | }
124 |
125 |
126 | /* zoom and fade animations */
127 |
128 | .leaflet-fade-anim .leaflet-tile,
129 | .leaflet-fade-anim .leaflet-popup {
130 | opacity: 0;
131 | -webkit-transition: opacity 0.2s linear;
132 | -moz-transition: opacity 0.2s linear;
133 | -o-transition: opacity 0.2s linear;
134 | transition: opacity 0.2s linear;
135 | }
136 | .leaflet-fade-anim .leaflet-tile-loaded,
137 | .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
138 | opacity: 1;
139 | }
140 |
141 | .leaflet-zoom-anim .leaflet-zoom-animated {
142 | -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
143 | -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
144 | -o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1);
145 | transition: transform 0.25s cubic-bezier(0,0,0.25,1);
146 | }
147 | .leaflet-zoom-anim .leaflet-tile,
148 | .leaflet-pan-anim .leaflet-tile,
149 | .leaflet-touching .leaflet-zoom-animated {
150 | -webkit-transition: none;
151 | -moz-transition: none;
152 | -o-transition: none;
153 | transition: none;
154 | }
155 |
156 | .leaflet-zoom-anim .leaflet-zoom-hide {
157 | visibility: hidden;
158 | }
159 |
160 |
161 | /* cursors */
162 |
163 | .leaflet-clickable {
164 | cursor: pointer;
165 | }
166 | .leaflet-container {
167 | cursor: -webkit-grab;
168 | cursor: -moz-grab;
169 | }
170 | .leaflet-popup-pane,
171 | .leaflet-control {
172 | cursor: auto;
173 | }
174 | .leaflet-dragging .leaflet-container,
175 | .leaflet-dragging .leaflet-clickable {
176 | cursor: move;
177 | cursor: -webkit-grabbing;
178 | cursor: -moz-grabbing;
179 | }
180 |
181 |
182 | /* visual tweaks */
183 |
184 | .leaflet-container {
185 | background: #ddd;
186 | outline: 0;
187 | }
188 | .leaflet-container a {
189 | color: #0078A8;
190 | }
191 | .leaflet-container a.leaflet-active {
192 | outline: 2px solid orange;
193 | }
194 | .leaflet-zoom-box {
195 | border: 2px dotted #38f;
196 | background: rgba(255,255,255,0.5);
197 | }
198 |
199 |
200 | /* general typography */
201 | .leaflet-container {
202 | font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
203 | }
204 |
205 |
206 | /* general toolbar styles */
207 |
208 | .leaflet-bar {
209 | box-shadow: 0 1px 5px rgba(0,0,0,0.65);
210 | border-radius: 4px;
211 | }
212 | .leaflet-bar a,
213 | .leaflet-bar a:hover {
214 | background-color: #fff;
215 | border-bottom: 1px solid #ccc;
216 | width: 26px;
217 | height: 26px;
218 | line-height: 26px;
219 | display: block;
220 | text-align: center;
221 | text-decoration: none;
222 | color: black;
223 | }
224 | .leaflet-bar a,
225 | .leaflet-control-layers-toggle {
226 | background-position: 50% 50%;
227 | background-repeat: no-repeat;
228 | display: block;
229 | }
230 | .leaflet-bar a:hover {
231 | background-color: #f4f4f4;
232 | }
233 | .leaflet-bar a:first-child {
234 | border-top-left-radius: 4px;
235 | border-top-right-radius: 4px;
236 | }
237 | .leaflet-bar a:last-child {
238 | border-bottom-left-radius: 4px;
239 | border-bottom-right-radius: 4px;
240 | border-bottom: none;
241 | }
242 | .leaflet-bar a.leaflet-disabled {
243 | cursor: default;
244 | background-color: #f4f4f4;
245 | color: #bbb;
246 | }
247 |
248 | .leaflet-touch .leaflet-bar a {
249 | width: 30px;
250 | height: 30px;
251 | line-height: 30px;
252 | }
253 |
254 |
255 | /* zoom control */
256 |
257 | .leaflet-control-zoom-in,
258 | .leaflet-control-zoom-out {
259 | font: bold 18px 'Lucida Console', Monaco, monospace;
260 | text-indent: 1px;
261 | }
262 | .leaflet-control-zoom-out {
263 | font-size: 20px;
264 | }
265 |
266 | .leaflet-touch .leaflet-control-zoom-in {
267 | font-size: 22px;
268 | }
269 | .leaflet-touch .leaflet-control-zoom-out {
270 | font-size: 24px;
271 | }
272 |
273 |
274 | /* layers control */
275 |
276 | .leaflet-control-layers {
277 | box-shadow: 0 1px 5px rgba(0,0,0,0.4);
278 | background: #fff;
279 | border-radius: 5px;
280 | }
281 | .leaflet-control-layers-toggle {
282 | background-image: url(images/layers.png);
283 | width: 36px;
284 | height: 36px;
285 | }
286 | .leaflet-retina .leaflet-control-layers-toggle {
287 | background-image: url(images/layers-2x.png);
288 | background-size: 26px 26px;
289 | }
290 | .leaflet-touch .leaflet-control-layers-toggle {
291 | width: 44px;
292 | height: 44px;
293 | }
294 | .leaflet-control-layers .leaflet-control-layers-list,
295 | .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
296 | display: none;
297 | }
298 | .leaflet-control-layers-expanded .leaflet-control-layers-list {
299 | display: block;
300 | position: relative;
301 | }
302 | .leaflet-control-layers-expanded {
303 | padding: 6px 10px 6px 6px;
304 | color: #333;
305 | background: #fff;
306 | }
307 | .leaflet-control-layers-selector {
308 | margin-top: 2px;
309 | position: relative;
310 | top: 1px;
311 | }
312 | .leaflet-control-layers label {
313 | display: block;
314 | }
315 | .leaflet-control-layers-separator {
316 | height: 0;
317 | border-top: 1px solid #ddd;
318 | margin: 5px -10px 5px -6px;
319 | }
320 |
321 |
322 | /* attribution and scale controls */
323 |
324 | .leaflet-container .leaflet-control-attribution {
325 | background: #fff;
326 | background: rgba(255, 255, 255, 0.7);
327 | margin: 0;
328 | }
329 | .leaflet-control-attribution,
330 | .leaflet-control-scale-line {
331 | padding: 0 5px;
332 | color: #333;
333 | }
334 | .leaflet-control-attribution a {
335 | text-decoration: none;
336 | }
337 | .leaflet-control-attribution a:hover {
338 | text-decoration: underline;
339 | }
340 | .leaflet-container .leaflet-control-attribution,
341 | .leaflet-container .leaflet-control-scale {
342 | font-size: 11px;
343 | }
344 | .leaflet-left .leaflet-control-scale {
345 | margin-left: 5px;
346 | }
347 | .leaflet-bottom .leaflet-control-scale {
348 | margin-bottom: 5px;
349 | }
350 | .leaflet-control-scale-line {
351 | border: 2px solid #777;
352 | border-top: none;
353 | line-height: 1.1;
354 | padding: 2px 5px 1px;
355 | font-size: 11px;
356 | white-space: nowrap;
357 | overflow: hidden;
358 | -moz-box-sizing: content-box;
359 | box-sizing: content-box;
360 |
361 | background: #fff;
362 | background: rgba(255, 255, 255, 0.5);
363 | }
364 | .leaflet-control-scale-line:not(:first-child) {
365 | border-top: 2px solid #777;
366 | border-bottom: none;
367 | margin-top: -2px;
368 | }
369 | .leaflet-control-scale-line:not(:first-child):not(:last-child) {
370 | border-bottom: 2px solid #777;
371 | }
372 |
373 | .leaflet-touch .leaflet-control-attribution,
374 | .leaflet-touch .leaflet-control-layers,
375 | .leaflet-touch .leaflet-bar {
376 | box-shadow: none;
377 | }
378 | .leaflet-touch .leaflet-control-layers,
379 | .leaflet-touch .leaflet-bar {
380 | border: 2px solid rgba(0,0,0,0.2);
381 | background-clip: padding-box;
382 | }
383 |
384 |
385 | /* popup */
386 |
387 | .leaflet-popup {
388 | position: absolute;
389 | text-align: center;
390 | }
391 | .leaflet-popup-content-wrapper {
392 | padding: 1px;
393 | text-align: left;
394 | border-radius: 12px;
395 | }
396 | .leaflet-popup-content {
397 | margin: 13px 19px;
398 | line-height: 1.4;
399 | }
400 | .leaflet-popup-content p {
401 | margin: 18px 0;
402 | }
403 | .leaflet-popup-tip-container {
404 | margin: 0 auto;
405 | width: 40px;
406 | height: 20px;
407 | position: relative;
408 | overflow: hidden;
409 | }
410 | .leaflet-popup-tip {
411 | width: 17px;
412 | height: 17px;
413 | padding: 1px;
414 |
415 | margin: -10px auto 0;
416 |
417 | -webkit-transform: rotate(45deg);
418 | -moz-transform: rotate(45deg);
419 | -ms-transform: rotate(45deg);
420 | -o-transform: rotate(45deg);
421 | transform: rotate(45deg);
422 | }
423 | .leaflet-popup-content-wrapper,
424 | .leaflet-popup-tip {
425 | background: white;
426 |
427 | box-shadow: 0 3px 14px rgba(0,0,0,0.4);
428 | }
429 | .leaflet-container a.leaflet-popup-close-button {
430 | position: absolute;
431 | top: 0;
432 | right: 0;
433 | padding: 4px 4px 0 0;
434 | text-align: center;
435 | width: 18px;
436 | height: 14px;
437 | font: 16px/14px Tahoma, Verdana, sans-serif;
438 | color: #c3c3c3;
439 | text-decoration: none;
440 | font-weight: bold;
441 | background: transparent;
442 | }
443 | .leaflet-container a.leaflet-popup-close-button:hover {
444 | color: #999;
445 | }
446 | .leaflet-popup-scrolled {
447 | overflow: auto;
448 | border-bottom: 1px solid #ddd;
449 | border-top: 1px solid #ddd;
450 | }
451 |
452 | .leaflet-oldie .leaflet-popup-content-wrapper {
453 | zoom: 1;
454 | }
455 | .leaflet-oldie .leaflet-popup-tip {
456 | width: 24px;
457 | margin: 0 auto;
458 |
459 | -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
460 | filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
461 | }
462 | .leaflet-oldie .leaflet-popup-tip-container {
463 | margin-top: -1px;
464 | }
465 |
466 | .leaflet-oldie .leaflet-control-zoom,
467 | .leaflet-oldie .leaflet-control-layers,
468 | .leaflet-oldie .leaflet-popup-content-wrapper,
469 | .leaflet-oldie .leaflet-popup-tip {
470 | border: 1px solid #999;
471 | }
472 |
473 |
474 | /* div icon */
475 |
476 | .leaflet-div-icon {
477 | background: #fff;
478 | border: 1px solid #666;
479 | }
480 |
--------------------------------------------------------------------------------
/css/leaflet.draw-src.css:
--------------------------------------------------------------------------------
1 | /* ================================================================== */
2 | /* Toolbars
3 | /* ================================================================== */
4 |
5 | .leaflet-draw-section {
6 | position: relative;
7 | }
8 |
9 | .leaflet-draw-toolbar {
10 | margin-top: 12px;
11 | }
12 |
13 | .leaflet-draw-toolbar-top {
14 | margin-top: 0;
15 | }
16 |
17 | .leaflet-draw-toolbar-notop a:first-child {
18 | border-top-right-radius: 0;
19 | }
20 |
21 | .leaflet-draw-toolbar-nobottom a:last-child {
22 | border-bottom-right-radius: 0;
23 | }
24 |
25 | .leaflet-draw-toolbar a {
26 | background-image: url('images/spritesheet.png');
27 | background-image: linear-gradient(transparent, transparent), url('images/spritesheet.svg');
28 | background-repeat: no-repeat;
29 | background-size: 270px 30px;
30 | background-clip: padding-box;
31 | }
32 |
33 | .leaflet-retina .leaflet-draw-toolbar a {
34 | background-image: url('images/spritesheet-2x.png');
35 | background-image: linear-gradient(transparent, transparent), url('images/spritesheet.svg');
36 | }
37 |
38 | .leaflet-draw a {
39 | display: block;
40 | text-align: center;
41 | text-decoration: none;
42 | }
43 |
44 | .leaflet-draw a .sr-only {
45 | position: absolute;
46 | width: 1px;
47 | height: 1px;
48 | padding: 0;
49 | margin: -1px;
50 | overflow: hidden;
51 | clip: rect(0,0,0,0);
52 | border: 0;
53 | }
54 |
55 | /* ================================================================== */
56 | /* Toolbar actions menu
57 | /* ================================================================== */
58 |
59 | .leaflet-draw-actions {
60 | display: none;
61 | list-style: none;
62 | margin: 0;
63 | padding: 0;
64 | position: absolute;
65 | left: 26px; /* leaflet-draw-toolbar.left + leaflet-draw-toolbar.width */
66 | top: 0;
67 | white-space: nowrap;
68 | }
69 |
70 | .leaflet-touch .leaflet-draw-actions {
71 | left: 32px;
72 | }
73 |
74 | .leaflet-right .leaflet-draw-actions {
75 | right: 26px;
76 | left: auto;
77 | }
78 |
79 | .leaflet-touch .leaflet-right .leaflet-draw-actions {
80 | right: 32px;
81 | left: auto;
82 | }
83 |
84 | .leaflet-draw-actions li {
85 | display: inline-block;
86 | }
87 |
88 | .leaflet-draw-actions li:first-child a {
89 | border-left: none;
90 | }
91 |
92 | .leaflet-draw-actions li:last-child a {
93 | -webkit-border-radius: 0 4px 4px 0;
94 | border-radius: 0 4px 4px 0;
95 | }
96 |
97 | .leaflet-right .leaflet-draw-actions li:last-child a {
98 | -webkit-border-radius: 0;
99 | border-radius: 0;
100 | }
101 |
102 | .leaflet-right .leaflet-draw-actions li:first-child a {
103 | -webkit-border-radius: 4px 0 0 4px;
104 | border-radius: 4px 0 0 4px;
105 | }
106 |
107 | .leaflet-draw-actions a {
108 | background-color: #919187;
109 | border-left: 1px solid #AAA;
110 | color: #FFF;
111 | font: 11px/19px "Helvetica Neue", Arial, Helvetica, sans-serif;
112 | line-height: 28px;
113 | text-decoration: none;
114 | padding-left: 10px;
115 | padding-right: 10px;
116 | height: 28px;
117 | }
118 |
119 | .leaflet-touch .leaflet-draw-actions a {
120 | font-size: 12px;
121 | line-height: 30px;
122 | height: 30px;
123 | }
124 |
125 | .leaflet-draw-actions-bottom {
126 | margin-top: 0;
127 | }
128 |
129 | .leaflet-draw-actions-top {
130 | margin-top: 1px;
131 | }
132 |
133 | .leaflet-draw-actions-top a,
134 | .leaflet-draw-actions-bottom a {
135 | height: 27px;
136 | line-height: 27px;
137 | }
138 |
139 | .leaflet-draw-actions a:hover {
140 | background-color: #A0A098;
141 | }
142 |
143 | .leaflet-draw-actions-top.leaflet-draw-actions-bottom a {
144 | height: 26px;
145 | line-height: 26px;
146 | }
147 |
148 | /* ================================================================== */
149 | /* Draw toolbar
150 | /* ================================================================== */
151 |
152 | .leaflet-draw-toolbar .leaflet-draw-draw-polyline {
153 | background-position: -2px -2px;
154 | }
155 |
156 | .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polyline {
157 | background-position: 0 -1px;
158 | }
159 |
160 | .leaflet-draw-toolbar .leaflet-draw-draw-polygon {
161 | background-position: -31px -2px;
162 | }
163 |
164 | .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon {
165 | background-position: -29px -1px;
166 | }
167 |
168 | .leaflet-draw-toolbar .leaflet-draw-draw-rectangle {
169 | background-position: -62px -2px;
170 | }
171 |
172 | .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-rectangle {
173 | background-position: -60px -1px;
174 | }
175 |
176 | .leaflet-draw-toolbar .leaflet-draw-draw-circle {
177 | background-position: -92px -2px;
178 | }
179 |
180 | .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle {
181 | background-position: -90px -1px;
182 | }
183 |
184 | .leaflet-draw-toolbar .leaflet-draw-draw-marker {
185 | background-position: -122px -2px;
186 | }
187 |
188 | .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-marker {
189 | background-position: -120px -1px;
190 | }
191 |
192 | /* ================================================================== */
193 | /* Edit toolbar
194 | /* ================================================================== */
195 |
196 | .leaflet-draw-toolbar .leaflet-draw-edit-edit {
197 | background-position: -152px -2px;
198 | }
199 |
200 | .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit {
201 | background-position: -150px -1px;
202 | }
203 |
204 | .leaflet-draw-toolbar .leaflet-draw-edit-remove {
205 | background-position: -182px -2px;
206 | }
207 |
208 | .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove {
209 | background-position: -180px -1px;
210 | }
211 |
212 | .leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled {
213 | background-position: -212px -2px;
214 | }
215 |
216 | .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled {
217 | background-position: -210px -1px;
218 | }
219 |
220 | .leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled {
221 | background-position: -242px -2px;
222 | }
223 |
224 | .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled {
225 | background-position: -240px -2px;
226 | }
227 |
228 | /* ================================================================== */
229 | /* Drawing styles
230 | /* ================================================================== */
231 |
232 | .leaflet-mouse-marker {
233 | background-color: #fff;
234 | cursor: crosshair;
235 | }
236 |
237 | .leaflet-draw-tooltip {
238 | background: rgb(54, 54, 54);
239 | background: rgba(0, 0, 0, 0.5);
240 | border: 1px solid transparent;
241 | -webkit-border-radius: 4px;
242 | border-radius: 4px;
243 | color: #fff;
244 | font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif;
245 | margin-left: 20px;
246 | margin-top: -21px;
247 | padding: 4px 8px;
248 | position: absolute;
249 | visibility: hidden;
250 | white-space: nowrap;
251 | z-index: 6;
252 | }
253 |
254 | .leaflet-draw-tooltip:before {
255 | border-right: 6px solid black;
256 | border-right-color: rgba(0, 0, 0, 0.5);
257 | border-top: 6px solid transparent;
258 | border-bottom: 6px solid transparent;
259 | content: "";
260 | position: absolute;
261 | top: 7px;
262 | left: -7px;
263 | }
264 |
265 | .leaflet-error-draw-tooltip {
266 | background-color: #F2DEDE;
267 | border: 1px solid #E6B6BD;
268 | color: #B94A48;
269 | }
270 |
271 | .leaflet-error-draw-tooltip:before {
272 | border-right-color: #E6B6BD;
273 | }
274 |
275 | .leaflet-draw-tooltip-single {
276 | margin-top: -12px
277 | }
278 |
279 | .leaflet-draw-tooltip-subtext {
280 | color: #f8d5e4;
281 | }
282 |
283 | .leaflet-draw-guide-dash {
284 | font-size: 1%;
285 | opacity: 0.6;
286 | position: absolute;
287 | width: 5px;
288 | height: 5px;
289 | }
290 |
291 | /* ================================================================== */
292 | /* Edit styles
293 | /* ================================================================== */
294 |
295 | .leaflet-edit-marker-selected {
296 | background-color: rgba(254, 87, 161, 0.1);
297 | border: 4px dashed rgba(254, 87, 161, 0.6);
298 | -webkit-border-radius: 4px;
299 | border-radius: 4px;
300 | box-sizing: content-box;
301 | }
302 |
303 | .leaflet-edit-move {
304 | cursor: move;
305 | }
306 |
307 | .leaflet-edit-resize {
308 | cursor: pointer;
309 | }
310 |
311 | /* ================================================================== */
312 | /* Old IE styles
313 | /* ================================================================== */
314 |
315 | .leaflet-oldie .leaflet-draw-toolbar {
316 | border: 1px solid #999;
317 | }
--------------------------------------------------------------------------------
/css/leaflet.label.css:
--------------------------------------------------------------------------------
1 | .leaflet-label {
2 | background: rgb(235, 235, 235);
3 | background: rgba(235, 235, 235, 0.81);
4 | background-clip: padding-box;
5 | border-color: #777;
6 | border-color: rgba(0,0,0,0.25);
7 | border-radius: 4px;
8 | border-style: solid;
9 | border-width: 4px;
10 | color: #111;
11 | display: block;
12 | font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
13 | font-weight: bold;
14 | padding: 1px 6px;
15 | position: absolute;
16 | -webkit-user-select: none;
17 | -moz-user-select: none;
18 | -ms-user-select: none;
19 | user-select: none;
20 | pointer-events: none;
21 | white-space: nowrap;
22 | z-index: 6;
23 | }
24 |
25 | .leaflet-label.leaflet-clickable {
26 | cursor: pointer;
27 | pointer-events: auto;
28 | }
29 |
30 | .leaflet-label:before,
31 | .leaflet-label:after {
32 | border-top: 6px solid transparent;
33 | border-bottom: 6px solid transparent;
34 | content: none;
35 | position: absolute;
36 | top: 5px;
37 | }
38 |
39 | .leaflet-label:before {
40 | border-right: 6px solid black;
41 | border-right-color: inherit;
42 | left: -10px;
43 | }
44 |
45 | .leaflet-label:after {
46 | border-left: 6px solid black;
47 | border-left-color: inherit;
48 | right: -10px;
49 | }
50 |
51 | .leaflet-label-right:before,
52 | .leaflet-label-left:after {
53 | content: "";
54 | }
55 |
--------------------------------------------------------------------------------
/css/sweetalert.css:
--------------------------------------------------------------------------------
1 | body.stop-scrolling {
2 | height: 100%;
3 | overflow: hidden; }
4 |
5 | .sweet-overlay {
6 | background-color: black;
7 | /* IE8 */
8 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
9 | /* IE8 */
10 | background-color: rgba(0, 0, 0, 0.4);
11 | position: fixed;
12 | left: 0;
13 | right: 0;
14 | top: 0;
15 | bottom: 0;
16 | display: none;
17 | z-index: 10000; }
18 |
19 | .sweet-alert {
20 | background-color: white;
21 | font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
22 | width: 478px;
23 | padding: 17px;
24 | border-radius: 5px;
25 | text-align: center;
26 | position: fixed;
27 | left: 50%;
28 | top: 50%;
29 | margin-left: -256px;
30 | margin-top: -200px;
31 | overflow: hidden;
32 | display: none;
33 | z-index: 99999; }
34 | @media all and (max-width: 540px) {
35 | .sweet-alert {
36 | width: auto;
37 | margin-left: 0;
38 | margin-right: 0;
39 | left: 15px;
40 | right: 15px; } }
41 | .sweet-alert h2 {
42 | color: #575757;
43 | font-size: 30px;
44 | text-align: center;
45 | font-weight: 600;
46 | text-transform: none;
47 | position: relative;
48 | margin: 25px 0;
49 | padding: 0;
50 | line-height: 40px;
51 | display: block; }
52 | .sweet-alert p {
53 | color: #797979;
54 | font-size: 16px;
55 | text-align: center;
56 | font-weight: 300;
57 | position: relative;
58 | text-align: inherit;
59 | float: none;
60 | margin: 0;
61 | padding: 0;
62 | line-height: normal; }
63 | .sweet-alert fieldset {
64 | border: none;
65 | position: relative; }
66 | .sweet-alert .sa-error-container {
67 | background-color: #f1f1f1;
68 | margin-left: -17px;
69 | margin-right: -17px;
70 | overflow: hidden;
71 | padding: 0 10px;
72 | max-height: 0;
73 | webkit-transition: padding 0.15s, max-height 0.15s;
74 | transition: padding 0.15s, max-height 0.15s; }
75 | .sweet-alert .sa-error-container.show {
76 | padding: 10px 0;
77 | max-height: 100px;
78 | webkit-transition: padding 0.2s, max-height 0.2s;
79 | transition: padding 0.25s, max-height 0.25s; }
80 | .sweet-alert .sa-error-container .icon {
81 | display: inline-block;
82 | width: 24px;
83 | height: 24px;
84 | border-radius: 50%;
85 | background-color: #ea7d7d;
86 | color: white;
87 | line-height: 24px;
88 | text-align: center;
89 | margin-right: 3px; }
90 | .sweet-alert .sa-error-container p {
91 | display: inline-block; }
92 | .sweet-alert .sa-input-error {
93 | position: absolute;
94 | top: 29px;
95 | right: 26px;
96 | width: 20px;
97 | height: 20px;
98 | opacity: 0;
99 | -webkit-transform: scale(0.5);
100 | transform: scale(0.5);
101 | -webkit-transform-origin: 50% 50%;
102 | transform-origin: 50% 50%;
103 | -webkit-transition: all 0.1s;
104 | transition: all 0.1s; }
105 | .sweet-alert .sa-input-error::before, .sweet-alert .sa-input-error::after {
106 | content: "";
107 | width: 20px;
108 | height: 6px;
109 | background-color: #f06e57;
110 | border-radius: 3px;
111 | position: absolute;
112 | top: 50%;
113 | margin-top: -4px;
114 | left: 50%;
115 | margin-left: -9px; }
116 | .sweet-alert .sa-input-error::before {
117 | -webkit-transform: rotate(-45deg);
118 | transform: rotate(-45deg); }
119 | .sweet-alert .sa-input-error::after {
120 | -webkit-transform: rotate(45deg);
121 | transform: rotate(45deg); }
122 | .sweet-alert .sa-input-error.show {
123 | opacity: 1;
124 | -webkit-transform: scale(1);
125 | transform: scale(1); }
126 | .sweet-alert input {
127 | width: 100%;
128 | box-sizing: border-box;
129 | border-radius: 3px;
130 | border: 1px solid #d7d7d7;
131 | height: 43px;
132 | margin-top: 10px;
133 | margin-bottom: 17px;
134 | font-size: 18px;
135 | box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06);
136 | padding: 0 12px;
137 | display: none;
138 | -webkit-transition: all 0.3s;
139 | transition: all 0.3s; }
140 | .sweet-alert input:focus {
141 | outline: none;
142 | box-shadow: 0px 0px 3px #c4e6f5;
143 | border: 1px solid #b4dbed; }
144 | .sweet-alert input:focus::-moz-placeholder {
145 | transition: opacity 0.3s 0.03s ease;
146 | opacity: 0.5; }
147 | .sweet-alert input:focus:-ms-input-placeholder {
148 | transition: opacity 0.3s 0.03s ease;
149 | opacity: 0.5; }
150 | .sweet-alert input:focus::-webkit-input-placeholder {
151 | transition: opacity 0.3s 0.03s ease;
152 | opacity: 0.5; }
153 | .sweet-alert input::-moz-placeholder {
154 | color: #bdbdbd; }
155 | .sweet-alert input::-ms-clear {
156 | display: none; }
157 | .sweet-alert input:-ms-input-placeholder {
158 | color: #bdbdbd; }
159 | .sweet-alert input::-webkit-input-placeholder {
160 | color: #bdbdbd; }
161 | .sweet-alert.show-input input {
162 | display: block; }
163 | .sweet-alert .sa-confirm-button-container {
164 | display: inline-block;
165 | position: relative; }
166 | .sweet-alert .la-ball-fall {
167 | position: absolute;
168 | left: 50%;
169 | top: 50%;
170 | margin-left: -27px;
171 | margin-top: 4px;
172 | opacity: 0;
173 | visibility: hidden; }
174 | .sweet-alert button {
175 | background-color: #8CD4F5;
176 | color: white;
177 | border: none;
178 | box-shadow: none;
179 | font-size: 17px;
180 | font-weight: 500;
181 | -webkit-border-radius: 4px;
182 | border-radius: 5px;
183 | padding: 10px 32px;
184 | margin: 26px 5px 0 5px;
185 | cursor: pointer; }
186 | .sweet-alert button:focus {
187 | outline: none;
188 | box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
189 | .sweet-alert button:hover {
190 | background-color: #7ecff4; }
191 | .sweet-alert button:active {
192 | background-color: #5dc2f1; }
193 | .sweet-alert button.cancel {
194 | background-color: #C1C1C1; }
195 | .sweet-alert button.cancel:hover {
196 | background-color: #b9b9b9; }
197 | .sweet-alert button.cancel:active {
198 | background-color: #a8a8a8; }
199 | .sweet-alert button.cancel:focus {
200 | box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important; }
201 | .sweet-alert button[disabled] {
202 | opacity: .6;
203 | cursor: default; }
204 | .sweet-alert button.confirm[disabled] {
205 | color: transparent; }
206 | .sweet-alert button.confirm[disabled] ~ .la-ball-fall {
207 | opacity: 1;
208 | visibility: visible;
209 | transition-delay: 0s; }
210 | .sweet-alert button::-moz-focus-inner {
211 | border: 0; }
212 | .sweet-alert[data-has-cancel-button=false] button {
213 | box-shadow: none !important; }
214 | .sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] {
215 | padding-bottom: 40px; }
216 | .sweet-alert .sa-icon {
217 | width: 80px;
218 | height: 80px;
219 | border: 4px solid gray;
220 | -webkit-border-radius: 40px;
221 | border-radius: 40px;
222 | border-radius: 50%;
223 | margin: 20px auto;
224 | padding: 0;
225 | position: relative;
226 | box-sizing: content-box; }
227 | .sweet-alert .sa-icon.sa-error {
228 | border-color: #F27474; }
229 | .sweet-alert .sa-icon.sa-error .sa-x-mark {
230 | position: relative;
231 | display: block; }
232 | .sweet-alert .sa-icon.sa-error .sa-line {
233 | position: absolute;
234 | height: 5px;
235 | width: 47px;
236 | background-color: #F27474;
237 | display: block;
238 | top: 37px;
239 | border-radius: 2px; }
240 | .sweet-alert .sa-icon.sa-error .sa-line.sa-left {
241 | -webkit-transform: rotate(45deg);
242 | transform: rotate(45deg);
243 | left: 17px; }
244 | .sweet-alert .sa-icon.sa-error .sa-line.sa-right {
245 | -webkit-transform: rotate(-45deg);
246 | transform: rotate(-45deg);
247 | right: 16px; }
248 | .sweet-alert .sa-icon.sa-warning {
249 | border-color: #F8BB86; }
250 | .sweet-alert .sa-icon.sa-warning .sa-body {
251 | position: absolute;
252 | width: 5px;
253 | height: 47px;
254 | left: 50%;
255 | top: 10px;
256 | -webkit-border-radius: 2px;
257 | border-radius: 2px;
258 | margin-left: -2px;
259 | background-color: #F8BB86; }
260 | .sweet-alert .sa-icon.sa-warning .sa-dot {
261 | position: absolute;
262 | width: 7px;
263 | height: 7px;
264 | -webkit-border-radius: 50%;
265 | border-radius: 50%;
266 | margin-left: -3px;
267 | left: 50%;
268 | bottom: 10px;
269 | background-color: #F8BB86; }
270 | .sweet-alert .sa-icon.sa-info {
271 | border-color: #C9DAE1; }
272 | .sweet-alert .sa-icon.sa-info::before {
273 | content: "";
274 | position: absolute;
275 | width: 5px;
276 | height: 29px;
277 | left: 50%;
278 | bottom: 17px;
279 | border-radius: 2px;
280 | margin-left: -2px;
281 | background-color: #C9DAE1; }
282 | .sweet-alert .sa-icon.sa-info::after {
283 | content: "";
284 | position: absolute;
285 | width: 7px;
286 | height: 7px;
287 | border-radius: 50%;
288 | margin-left: -3px;
289 | top: 19px;
290 | background-color: #C9DAE1;
291 | left: 50%; }
292 | .sweet-alert .sa-icon.sa-success {
293 | border-color: #A5DC86; }
294 | .sweet-alert .sa-icon.sa-success::before, .sweet-alert .sa-icon.sa-success::after {
295 | content: '';
296 | -webkit-border-radius: 40px;
297 | border-radius: 40px;
298 | border-radius: 50%;
299 | position: absolute;
300 | width: 60px;
301 | height: 120px;
302 | background: white;
303 | -webkit-transform: rotate(45deg);
304 | transform: rotate(45deg); }
305 | .sweet-alert .sa-icon.sa-success::before {
306 | -webkit-border-radius: 120px 0 0 120px;
307 | border-radius: 120px 0 0 120px;
308 | top: -7px;
309 | left: -33px;
310 | -webkit-transform: rotate(-45deg);
311 | transform: rotate(-45deg);
312 | -webkit-transform-origin: 60px 60px;
313 | transform-origin: 60px 60px; }
314 | .sweet-alert .sa-icon.sa-success::after {
315 | -webkit-border-radius: 0 120px 120px 0;
316 | border-radius: 0 120px 120px 0;
317 | top: -11px;
318 | left: 30px;
319 | -webkit-transform: rotate(-45deg);
320 | transform: rotate(-45deg);
321 | -webkit-transform-origin: 0px 60px;
322 | transform-origin: 0px 60px; }
323 | .sweet-alert .sa-icon.sa-success .sa-placeholder {
324 | width: 80px;
325 | height: 80px;
326 | border: 4px solid rgba(165, 220, 134, 0.2);
327 | -webkit-border-radius: 40px;
328 | border-radius: 40px;
329 | border-radius: 50%;
330 | box-sizing: content-box;
331 | position: absolute;
332 | left: -4px;
333 | top: -4px;
334 | z-index: 2; }
335 | .sweet-alert .sa-icon.sa-success .sa-fix {
336 | width: 5px;
337 | height: 90px;
338 | background-color: white;
339 | position: absolute;
340 | left: 28px;
341 | top: 8px;
342 | z-index: 1;
343 | -webkit-transform: rotate(-45deg);
344 | transform: rotate(-45deg); }
345 | .sweet-alert .sa-icon.sa-success .sa-line {
346 | height: 5px;
347 | background-color: #A5DC86;
348 | display: block;
349 | border-radius: 2px;
350 | position: absolute;
351 | z-index: 2; }
352 | .sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
353 | width: 25px;
354 | left: 14px;
355 | top: 46px;
356 | -webkit-transform: rotate(45deg);
357 | transform: rotate(45deg); }
358 | .sweet-alert .sa-icon.sa-success .sa-line.sa-long {
359 | width: 47px;
360 | right: 8px;
361 | top: 38px;
362 | -webkit-transform: rotate(-45deg);
363 | transform: rotate(-45deg); }
364 | .sweet-alert .sa-icon.sa-custom {
365 | background-size: contain;
366 | border-radius: 0;
367 | border: none;
368 | background-position: center center;
369 | background-repeat: no-repeat; }
370 |
371 | /*
372 | * Animations
373 | */
374 | @-webkit-keyframes showSweetAlert {
375 | 0% {
376 | transform: scale(0.7);
377 | -webkit-transform: scale(0.7); }
378 | 45% {
379 | transform: scale(1.05);
380 | -webkit-transform: scale(1.05); }
381 | 80% {
382 | transform: scale(0.95);
383 | -webkit-transform: scale(0.95); }
384 | 100% {
385 | transform: scale(1);
386 | -webkit-transform: scale(1); } }
387 |
388 | @keyframes showSweetAlert {
389 | 0% {
390 | transform: scale(0.7);
391 | -webkit-transform: scale(0.7); }
392 | 45% {
393 | transform: scale(1.05);
394 | -webkit-transform: scale(1.05); }
395 | 80% {
396 | transform: scale(0.95);
397 | -webkit-transform: scale(0.95); }
398 | 100% {
399 | transform: scale(1);
400 | -webkit-transform: scale(1); } }
401 |
402 | @-webkit-keyframes hideSweetAlert {
403 | 0% {
404 | transform: scale(1);
405 | -webkit-transform: scale(1); }
406 | 100% {
407 | transform: scale(0.5);
408 | -webkit-transform: scale(0.5); } }
409 |
410 | @keyframes hideSweetAlert {
411 | 0% {
412 | transform: scale(1);
413 | -webkit-transform: scale(1); }
414 | 100% {
415 | transform: scale(0.5);
416 | -webkit-transform: scale(0.5); } }
417 |
418 | @-webkit-keyframes slideFromTop {
419 | 0% {
420 | top: 0%; }
421 | 100% {
422 | top: 50%; } }
423 |
424 | @keyframes slideFromTop {
425 | 0% {
426 | top: 0%; }
427 | 100% {
428 | top: 50%; } }
429 |
430 | @-webkit-keyframes slideToTop {
431 | 0% {
432 | top: 50%; }
433 | 100% {
434 | top: 0%; } }
435 |
436 | @keyframes slideToTop {
437 | 0% {
438 | top: 50%; }
439 | 100% {
440 | top: 0%; } }
441 |
442 | @-webkit-keyframes slideFromBottom {
443 | 0% {
444 | top: 70%; }
445 | 100% {
446 | top: 50%; } }
447 |
448 | @keyframes slideFromBottom {
449 | 0% {
450 | top: 70%; }
451 | 100% {
452 | top: 50%; } }
453 |
454 | @-webkit-keyframes slideToBottom {
455 | 0% {
456 | top: 50%; }
457 | 100% {
458 | top: 70%; } }
459 |
460 | @keyframes slideToBottom {
461 | 0% {
462 | top: 50%; }
463 | 100% {
464 | top: 70%; } }
465 |
466 | .showSweetAlert[data-animation=pop] {
467 | -webkit-animation: showSweetAlert 0.3s;
468 | animation: showSweetAlert 0.3s; }
469 |
470 | .showSweetAlert[data-animation=none] {
471 | -webkit-animation: none;
472 | animation: none; }
473 |
474 | .showSweetAlert[data-animation=slide-from-top] {
475 | -webkit-animation: slideFromTop 0.3s;
476 | animation: slideFromTop 0.3s; }
477 |
478 | .showSweetAlert[data-animation=slide-from-bottom] {
479 | -webkit-animation: slideFromBottom 0.3s;
480 | animation: slideFromBottom 0.3s; }
481 |
482 | .hideSweetAlert[data-animation=pop] {
483 | -webkit-animation: hideSweetAlert 0.2s;
484 | animation: hideSweetAlert 0.2s; }
485 |
486 | .hideSweetAlert[data-animation=none] {
487 | -webkit-animation: none;
488 | animation: none; }
489 |
490 | .hideSweetAlert[data-animation=slide-from-top] {
491 | -webkit-animation: slideToTop 0.4s;
492 | animation: slideToTop 0.4s; }
493 |
494 | .hideSweetAlert[data-animation=slide-from-bottom] {
495 | -webkit-animation: slideToBottom 0.3s;
496 | animation: slideToBottom 0.3s; }
497 |
498 | @-webkit-keyframes animateSuccessTip {
499 | 0% {
500 | width: 0;
501 | left: 1px;
502 | top: 19px; }
503 | 54% {
504 | width: 0;
505 | left: 1px;
506 | top: 19px; }
507 | 70% {
508 | width: 50px;
509 | left: -8px;
510 | top: 37px; }
511 | 84% {
512 | width: 17px;
513 | left: 21px;
514 | top: 48px; }
515 | 100% {
516 | width: 25px;
517 | left: 14px;
518 | top: 45px; } }
519 |
520 | @keyframes animateSuccessTip {
521 | 0% {
522 | width: 0;
523 | left: 1px;
524 | top: 19px; }
525 | 54% {
526 | width: 0;
527 | left: 1px;
528 | top: 19px; }
529 | 70% {
530 | width: 50px;
531 | left: -8px;
532 | top: 37px; }
533 | 84% {
534 | width: 17px;
535 | left: 21px;
536 | top: 48px; }
537 | 100% {
538 | width: 25px;
539 | left: 14px;
540 | top: 45px; } }
541 |
542 | @-webkit-keyframes animateSuccessLong {
543 | 0% {
544 | width: 0;
545 | right: 46px;
546 | top: 54px; }
547 | 65% {
548 | width: 0;
549 | right: 46px;
550 | top: 54px; }
551 | 84% {
552 | width: 55px;
553 | right: 0px;
554 | top: 35px; }
555 | 100% {
556 | width: 47px;
557 | right: 8px;
558 | top: 38px; } }
559 |
560 | @keyframes animateSuccessLong {
561 | 0% {
562 | width: 0;
563 | right: 46px;
564 | top: 54px; }
565 | 65% {
566 | width: 0;
567 | right: 46px;
568 | top: 54px; }
569 | 84% {
570 | width: 55px;
571 | right: 0px;
572 | top: 35px; }
573 | 100% {
574 | width: 47px;
575 | right: 8px;
576 | top: 38px; } }
577 |
578 | @-webkit-keyframes rotatePlaceholder {
579 | 0% {
580 | transform: rotate(-45deg);
581 | -webkit-transform: rotate(-45deg); }
582 | 5% {
583 | transform: rotate(-45deg);
584 | -webkit-transform: rotate(-45deg); }
585 | 12% {
586 | transform: rotate(-405deg);
587 | -webkit-transform: rotate(-405deg); }
588 | 100% {
589 | transform: rotate(-405deg);
590 | -webkit-transform: rotate(-405deg); } }
591 |
592 | @keyframes rotatePlaceholder {
593 | 0% {
594 | transform: rotate(-45deg);
595 | -webkit-transform: rotate(-45deg); }
596 | 5% {
597 | transform: rotate(-45deg);
598 | -webkit-transform: rotate(-45deg); }
599 | 12% {
600 | transform: rotate(-405deg);
601 | -webkit-transform: rotate(-405deg); }
602 | 100% {
603 | transform: rotate(-405deg);
604 | -webkit-transform: rotate(-405deg); } }
605 |
606 | .animateSuccessTip {
607 | -webkit-animation: animateSuccessTip 0.75s;
608 | animation: animateSuccessTip 0.75s; }
609 |
610 | .animateSuccessLong {
611 | -webkit-animation: animateSuccessLong 0.75s;
612 | animation: animateSuccessLong 0.75s; }
613 |
614 | .sa-icon.sa-success.animate::after {
615 | -webkit-animation: rotatePlaceholder 4.25s ease-in;
616 | animation: rotatePlaceholder 4.25s ease-in; }
617 |
618 | @-webkit-keyframes animateErrorIcon {
619 | 0% {
620 | transform: rotateX(100deg);
621 | -webkit-transform: rotateX(100deg);
622 | opacity: 0; }
623 | 100% {
624 | transform: rotateX(0deg);
625 | -webkit-transform: rotateX(0deg);
626 | opacity: 1; } }
627 |
628 | @keyframes animateErrorIcon {
629 | 0% {
630 | transform: rotateX(100deg);
631 | -webkit-transform: rotateX(100deg);
632 | opacity: 0; }
633 | 100% {
634 | transform: rotateX(0deg);
635 | -webkit-transform: rotateX(0deg);
636 | opacity: 1; } }
637 |
638 | .animateErrorIcon {
639 | -webkit-animation: animateErrorIcon 0.5s;
640 | animation: animateErrorIcon 0.5s; }
641 |
642 | @-webkit-keyframes animateXMark {
643 | 0% {
644 | transform: scale(0.4);
645 | -webkit-transform: scale(0.4);
646 | margin-top: 26px;
647 | opacity: 0; }
648 | 50% {
649 | transform: scale(0.4);
650 | -webkit-transform: scale(0.4);
651 | margin-top: 26px;
652 | opacity: 0; }
653 | 80% {
654 | transform: scale(1.15);
655 | -webkit-transform: scale(1.15);
656 | margin-top: -6px; }
657 | 100% {
658 | transform: scale(1);
659 | -webkit-transform: scale(1);
660 | margin-top: 0;
661 | opacity: 1; } }
662 |
663 | @keyframes animateXMark {
664 | 0% {
665 | transform: scale(0.4);
666 | -webkit-transform: scale(0.4);
667 | margin-top: 26px;
668 | opacity: 0; }
669 | 50% {
670 | transform: scale(0.4);
671 | -webkit-transform: scale(0.4);
672 | margin-top: 26px;
673 | opacity: 0; }
674 | 80% {
675 | transform: scale(1.15);
676 | -webkit-transform: scale(1.15);
677 | margin-top: -6px; }
678 | 100% {
679 | transform: scale(1);
680 | -webkit-transform: scale(1);
681 | margin-top: 0;
682 | opacity: 1; } }
683 |
684 | .animateXMark {
685 | -webkit-animation: animateXMark 0.5s;
686 | animation: animateXMark 0.5s; }
687 |
688 | @-webkit-keyframes pulseWarning {
689 | 0% {
690 | border-color: #F8D486; }
691 | 100% {
692 | border-color: #F8BB86; } }
693 |
694 | @keyframes pulseWarning {
695 | 0% {
696 | border-color: #F8D486; }
697 | 100% {
698 | border-color: #F8BB86; } }
699 |
700 | .pulseWarning {
701 | -webkit-animation: pulseWarning 0.75s infinite alternate;
702 | animation: pulseWarning 0.75s infinite alternate; }
703 |
704 | @-webkit-keyframes pulseWarningIns {
705 | 0% {
706 | background-color: #F8D486; }
707 | 100% {
708 | background-color: #F8BB86; } }
709 |
710 | @keyframes pulseWarningIns {
711 | 0% {
712 | background-color: #F8D486; }
713 | 100% {
714 | background-color: #F8BB86; } }
715 |
716 | .pulseWarningIns {
717 | -webkit-animation: pulseWarningIns 0.75s infinite alternate;
718 | animation: pulseWarningIns 0.75s infinite alternate; }
719 |
720 | @-webkit-keyframes rotate-loading {
721 | 0% {
722 | transform: rotate(0deg); }
723 | 100% {
724 | transform: rotate(360deg); } }
725 |
726 | @keyframes rotate-loading {
727 | 0% {
728 | transform: rotate(0deg); }
729 | 100% {
730 | transform: rotate(360deg); } }
731 |
732 | /* Internet Explorer 9 has some special quirks that are fixed here */
733 | /* The icons are not animated. */
734 | /* This file is automatically merged into sweet-alert.min.js through Gulp */
735 | /* Error icon */
736 | .sweet-alert .sa-icon.sa-error .sa-line.sa-left {
737 | -ms-transform: rotate(45deg) \9; }
738 |
739 | .sweet-alert .sa-icon.sa-error .sa-line.sa-right {
740 | -ms-transform: rotate(-45deg) \9; }
741 |
742 | /* Success icon */
743 | .sweet-alert .sa-icon.sa-success {
744 | border-color: transparent\9; }
745 |
746 | .sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
747 | -ms-transform: rotate(45deg) \9; }
748 |
749 | .sweet-alert .sa-icon.sa-success .sa-line.sa-long {
750 | -ms-transform: rotate(-45deg) \9; }
751 |
752 | /*!
753 | * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
754 | * Copyright 2015 Daniel Cardoso <@DanielCardoso>
755 | * Licensed under MIT
756 | */
757 | .la-ball-fall,
758 | .la-ball-fall > div {
759 | position: relative;
760 | -webkit-box-sizing: border-box;
761 | -moz-box-sizing: border-box;
762 | box-sizing: border-box; }
763 |
764 | .la-ball-fall {
765 | display: block;
766 | font-size: 0;
767 | color: #fff; }
768 |
769 | .la-ball-fall.la-dark {
770 | color: #333; }
771 |
772 | .la-ball-fall > div {
773 | display: inline-block;
774 | float: none;
775 | background-color: currentColor;
776 | border: 0 solid currentColor; }
777 |
778 | .la-ball-fall {
779 | width: 54px;
780 | height: 18px; }
781 |
782 | .la-ball-fall > div {
783 | width: 10px;
784 | height: 10px;
785 | margin: 4px;
786 | border-radius: 100%;
787 | opacity: 0;
788 | -webkit-animation: ball-fall 1s ease-in-out infinite;
789 | -moz-animation: ball-fall 1s ease-in-out infinite;
790 | -o-animation: ball-fall 1s ease-in-out infinite;
791 | animation: ball-fall 1s ease-in-out infinite; }
792 |
793 | .la-ball-fall > div:nth-child(1) {
794 | -webkit-animation-delay: -200ms;
795 | -moz-animation-delay: -200ms;
796 | -o-animation-delay: -200ms;
797 | animation-delay: -200ms; }
798 |
799 | .la-ball-fall > div:nth-child(2) {
800 | -webkit-animation-delay: -100ms;
801 | -moz-animation-delay: -100ms;
802 | -o-animation-delay: -100ms;
803 | animation-delay: -100ms; }
804 |
805 | .la-ball-fall > div:nth-child(3) {
806 | -webkit-animation-delay: 0ms;
807 | -moz-animation-delay: 0ms;
808 | -o-animation-delay: 0ms;
809 | animation-delay: 0ms; }
810 |
811 | .la-ball-fall.la-sm {
812 | width: 26px;
813 | height: 8px; }
814 |
815 | .la-ball-fall.la-sm > div {
816 | width: 4px;
817 | height: 4px;
818 | margin: 2px; }
819 |
820 | .la-ball-fall.la-2x {
821 | width: 108px;
822 | height: 36px; }
823 |
824 | .la-ball-fall.la-2x > div {
825 | width: 20px;
826 | height: 20px;
827 | margin: 8px; }
828 |
829 | .la-ball-fall.la-3x {
830 | width: 162px;
831 | height: 54px; }
832 |
833 | .la-ball-fall.la-3x > div {
834 | width: 30px;
835 | height: 30px;
836 | margin: 12px; }
837 |
838 | /*
839 | * Animation
840 | */
841 | @-webkit-keyframes ball-fall {
842 | 0% {
843 | opacity: 0;
844 | -webkit-transform: translateY(-145%);
845 | transform: translateY(-145%); }
846 | 10% {
847 | opacity: .5; }
848 | 20% {
849 | opacity: 1;
850 | -webkit-transform: translateY(0);
851 | transform: translateY(0); }
852 | 80% {
853 | opacity: 1;
854 | -webkit-transform: translateY(0);
855 | transform: translateY(0); }
856 | 90% {
857 | opacity: .5; }
858 | 100% {
859 | opacity: 0;
860 | -webkit-transform: translateY(145%);
861 | transform: translateY(145%); } }
862 |
863 | @-moz-keyframes ball-fall {
864 | 0% {
865 | opacity: 0;
866 | -moz-transform: translateY(-145%);
867 | transform: translateY(-145%); }
868 | 10% {
869 | opacity: .5; }
870 | 20% {
871 | opacity: 1;
872 | -moz-transform: translateY(0);
873 | transform: translateY(0); }
874 | 80% {
875 | opacity: 1;
876 | -moz-transform: translateY(0);
877 | transform: translateY(0); }
878 | 90% {
879 | opacity: .5; }
880 | 100% {
881 | opacity: 0;
882 | -moz-transform: translateY(145%);
883 | transform: translateY(145%); } }
884 |
885 | @-o-keyframes ball-fall {
886 | 0% {
887 | opacity: 0;
888 | -o-transform: translateY(-145%);
889 | transform: translateY(-145%); }
890 | 10% {
891 | opacity: .5; }
892 | 20% {
893 | opacity: 1;
894 | -o-transform: translateY(0);
895 | transform: translateY(0); }
896 | 80% {
897 | opacity: 1;
898 | -o-transform: translateY(0);
899 | transform: translateY(0); }
900 | 90% {
901 | opacity: .5; }
902 | 100% {
903 | opacity: 0;
904 | -o-transform: translateY(145%);
905 | transform: translateY(145%); } }
906 |
907 | @keyframes ball-fall {
908 | 0% {
909 | opacity: 0;
910 | -webkit-transform: translateY(-145%);
911 | -moz-transform: translateY(-145%);
912 | -o-transform: translateY(-145%);
913 | transform: translateY(-145%); }
914 | 10% {
915 | opacity: .5; }
916 | 20% {
917 | opacity: 1;
918 | -webkit-transform: translateY(0);
919 | -moz-transform: translateY(0);
920 | -o-transform: translateY(0);
921 | transform: translateY(0); }
922 | 80% {
923 | opacity: 1;
924 | -webkit-transform: translateY(0);
925 | -moz-transform: translateY(0);
926 | -o-transform: translateY(0);
927 | transform: translateY(0); }
928 | 90% {
929 | opacity: .5; }
930 | 100% {
931 | opacity: 0;
932 | -webkit-transform: translateY(145%);
933 | -moz-transform: translateY(145%);
934 | -o-transform: translateY(145%);
935 | transform: translateY(145%); } }
936 |
--------------------------------------------------------------------------------
/css/sweetalert2.min.css:
--------------------------------------------------------------------------------
1 | body.swal2-shown{overflow-y:hidden}body.swal2-iosfix{position:fixed;left:0;right:0}.swal2-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:fixed;top:0;left:0;bottom:0;right:0;padding:10px;background-color:transparent;z-index:1060}.swal2-container.swal2-fade{-webkit-transition:background-color .1s;transition:background-color .1s}.swal2-container.swal2-shown{background-color:rgba(0,0,0,.4)}.swal2-modal{background-color:#fff;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;border-radius:5px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;margin:auto;overflow-x:hidden;overflow-y:auto;display:none;position:relative;max-width:100%}.swal2-modal:focus{outline:0}.swal2-modal.swal2-loading{overflow-y:hidden}.swal2-modal .swal2-title{color:#595959;font-size:30px;text-align:center;font-weight:600;text-transform:none;position:relative;margin:0 0 .4em;padding:0;display:block;word-wrap:break-word}.swal2-modal .swal2-buttonswrapper{margin-top:15px}.swal2-modal .swal2-buttonswrapper:not(.swal2-loading) .swal2-styled[disabled]{opacity:.4;cursor:no-drop}.swal2-modal .swal2-buttonswrapper.swal2-loading .swal2-styled.swal2-confirm{-webkit-box-sizing:border-box;box-sizing:border-box;border:4px solid transparent;border-color:transparent;width:40px;height:40px;padding:0;margin:7.5px;vertical-align:top;background-color:transparent!important;color:transparent;cursor:default;border-radius:100%;-webkit-animation:rotate-loading 1.5s linear 0s infinite normal;animation:rotate-loading 1.5s linear 0s infinite normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.swal2-modal .swal2-buttonswrapper.swal2-loading .swal2-styled.swal2-cancel{margin-left:30px;margin-right:30px}.swal2-modal .swal2-buttonswrapper.swal2-loading :not(.swal2-styled).swal2-confirm::after{display:inline-block;content:'';margin-left:5px 0 15px;vertical-align:-1px;height:15px;width:15px;border:3px solid #999;-webkit-box-shadow:1px 1px 1px #fff;box-shadow:1px 1px 1px #fff;border-right-color:transparent;border-radius:50%;-webkit-animation:rotate-loading 1.5s linear 0s infinite normal;animation:rotate-loading 1.5s linear 0s infinite normal}.swal2-modal .swal2-styled{border:0;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;color:#fff;cursor:pointer;font-size:17px;font-weight:500;margin:15px 5px 0;padding:10px 32px}.swal2-modal .swal2-image{margin:20px auto;max-width:100%}.swal2-modal .swal2-close{background:0 0;border:0;margin:0;padding:0;width:38px;height:40px;font-size:36px;line-height:40px;font-family:serif;position:absolute;top:5px;right:8px;cursor:pointer;color:#ccc;-webkit-transition:color .1s ease;transition:color .1s ease}.swal2-modal .swal2-close:hover{color:#d55}.swal2-modal>.swal2-checkbox,.swal2-modal>.swal2-file,.swal2-modal>.swal2-input,.swal2-modal>.swal2-radio,.swal2-modal>.swal2-select,.swal2-modal>.swal2-textarea{display:none}.swal2-modal .swal2-content{font-size:18px;text-align:center;font-weight:300;position:relative;float:none;margin:0;padding:0;line-height:normal;color:#545454;word-wrap:break-word}.swal2-modal .swal2-checkbox,.swal2-modal .swal2-file,.swal2-modal .swal2-input,.swal2-modal .swal2-radio,.swal2-modal .swal2-select,.swal2-modal .swal2-textarea{margin:20px auto}.swal2-modal .swal2-file,.swal2-modal .swal2-input,.swal2-modal .swal2-textarea{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:18px;border-radius:3px;border:1px solid #d9d9d9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.06);box-shadow:inset 0 1px 1px rgba(0,0,0,.06);-webkit-transition:border-color box-shadow .3s;transition:border-color box-shadow .3s}.swal2-modal .swal2-file.swal2-inputerror,.swal2-modal .swal2-input.swal2-inputerror,.swal2-modal .swal2-textarea.swal2-inputerror{border-color:#f27474!important;-webkit-box-shadow:0 0 2px #f27474!important;box-shadow:0 0 2px #f27474!important}.swal2-modal .swal2-file:focus,.swal2-modal .swal2-input:focus,.swal2-modal .swal2-textarea:focus{outline:0;border:1px solid #b4dbed;-webkit-box-shadow:0 0 3px #c4e6f5;box-shadow:0 0 3px #c4e6f5}.swal2-modal .swal2-file:focus::-webkit-input-placeholder,.swal2-modal .swal2-input:focus::-webkit-input-placeholder,.swal2-modal .swal2-textarea:focus::-webkit-input-placeholder{-webkit-transition:opacity .3s .03s ease;transition:opacity .3s .03s ease;opacity:.8}.swal2-modal .swal2-file:focus:-ms-input-placeholder,.swal2-modal .swal2-input:focus:-ms-input-placeholder,.swal2-modal .swal2-textarea:focus:-ms-input-placeholder{-webkit-transition:opacity .3s .03s ease;transition:opacity .3s .03s ease;opacity:.8}.swal2-modal .swal2-file:focus::placeholder,.swal2-modal .swal2-input:focus::placeholder,.swal2-modal .swal2-textarea:focus::placeholder{-webkit-transition:opacity .3s .03s ease;transition:opacity .3s .03s ease;opacity:.8}.swal2-modal .swal2-file::-webkit-input-placeholder,.swal2-modal .swal2-input::-webkit-input-placeholder,.swal2-modal .swal2-textarea::-webkit-input-placeholder{color:#e6e6e6}.swal2-modal .swal2-file:-ms-input-placeholder,.swal2-modal .swal2-input:-ms-input-placeholder,.swal2-modal .swal2-textarea:-ms-input-placeholder{color:#e6e6e6}.swal2-modal .swal2-file::placeholder,.swal2-modal .swal2-input::placeholder,.swal2-modal .swal2-textarea::placeholder{color:#e6e6e6}.swal2-modal .swal2-range input{float:left;width:80%}.swal2-modal .swal2-range output{float:right;width:20%;font-size:20px;font-weight:600;text-align:center}.swal2-modal .swal2-range input,.swal2-modal .swal2-range output{height:43px;line-height:43px;vertical-align:middle;margin:20px auto;padding:0}.swal2-modal .swal2-input{height:43px;padding:0 12px}.swal2-modal .swal2-input[type=number]{max-width:150px}.swal2-modal .swal2-file{font-size:20px}.swal2-modal .swal2-textarea{height:108px;padding:12px}.swal2-modal .swal2-select{color:#545454;font-size:inherit;padding:5px 10px;min-width:40%;max-width:100%}.swal2-modal .swal2-radio{border:0}.swal2-modal .swal2-radio label:not(:first-child){margin-left:20px}.swal2-modal .swal2-radio input,.swal2-modal .swal2-radio span{vertical-align:middle}.swal2-modal .swal2-radio input{margin:0 3px 0 0}.swal2-modal .swal2-checkbox{color:#545454}.swal2-modal .swal2-checkbox input,.swal2-modal .swal2-checkbox span{vertical-align:middle}.swal2-modal .swal2-validationerror{background-color:#f0f0f0;margin:0 -20px;overflow:hidden;padding:10px;color:gray;font-size:16px;font-weight:300;display:none}.swal2-modal .swal2-validationerror::before{content:'!';display:inline-block;width:24px;height:24px;border-radius:50%;background-color:#ea7d7d;color:#fff;line-height:24px;text-align:center;margin-right:10px}@supports (-ms-accelerator:true){.swal2-range input{width:100%!important}.swal2-range output{display:none}}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.swal2-range input{width:100%!important}.swal2-range output{display:none}}.swal2-icon{width:80px;height:80px;border:4px solid transparent;border-radius:50%;margin:20px auto 30px;padding:0;position:relative;-webkit-box-sizing:content-box;box-sizing:content-box;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.swal2-icon.swal2-error{border-color:#f27474}.swal2-icon.swal2-error .swal2-x-mark{position:relative;display:block}.swal2-icon.swal2-error [class^=swal2-x-mark-line]{position:absolute;height:5px;width:47px;background-color:#f27474;display:block;top:37px;border-radius:2px}.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left]{-webkit-transform:rotate(45deg);transform:rotate(45deg);left:17px}.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right]{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);right:16px}.swal2-icon.swal2-warning{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#f8bb86;border-color:#facea8;font-size:60px;line-height:80px;text-align:center}.swal2-icon.swal2-info{font-family:'Open Sans',sans-serif;color:#3fc3ee;border-color:#9de0f6;font-size:60px;line-height:80px;text-align:center}.swal2-icon.swal2-question{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#87adbd;border-color:#c9dae1;font-size:60px;line-height:80px;text-align:center}.swal2-icon.swal2-success{border-color:#a5dc86}.swal2-icon.swal2-success [class^=swal2-success-circular-line]{border-radius:50%;position:absolute;width:60px;height:120px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=left]{border-radius:120px 0 0 120px;top:-7px;left:-33px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:60px 60px;transform-origin:60px 60px}.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=right]{border-radius:0 120px 120px 0;top:-11px;left:30px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:0 60px;transform-origin:0 60px}.swal2-icon.swal2-success .swal2-success-ring{width:80px;height:80px;border:4px solid rgba(165,220,134,.2);border-radius:50%;-webkit-box-sizing:content-box;box-sizing:content-box;position:absolute;left:-4px;top:-4px;z-index:2}.swal2-icon.swal2-success .swal2-success-fix{width:7px;height:90px;position:absolute;left:28px;top:8px;z-index:1;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.swal2-icon.swal2-success [class^=swal2-success-line]{height:5px;background-color:#a5dc86;display:block;border-radius:2px;position:absolute;z-index:2}.swal2-icon.swal2-success [class^=swal2-success-line][class$=tip]{width:25px;left:14px;top:46px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.swal2-icon.swal2-success [class^=swal2-success-line][class$=long]{width:47px;right:8px;top:38px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.swal2-progresssteps{font-weight:600;margin:0 0 20px;padding:0}.swal2-progresssteps li{display:inline-block;position:relative}.swal2-progresssteps .swal2-progresscircle{background:#3085d6;border-radius:2em;color:#fff;height:2em;line-height:2em;text-align:center;width:2em;z-index:20}.swal2-progresssteps .swal2-progresscircle:first-child{margin-left:0}.swal2-progresssteps .swal2-progresscircle:last-child{margin-right:0}.swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep{background:#3085d6}.swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep~.swal2-progresscircle{background:#add8e6}.swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep~.swal2-progressline{background:#add8e6}.swal2-progresssteps .swal2-progressline{background:#3085d6;height:.4em;margin:0 -1px;z-index:10}[class^=swal2]{-webkit-tap-highlight-color:transparent}@-webkit-keyframes showSweetAlert{0%{-webkit-transform:scale(.7);transform:scale(.7)}45%{-webkit-transform:scale(1.05);transform:scale(1.05)}80%{-webkit-transform:scale(.95);transform:scale(.95)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes showSweetAlert{0%{-webkit-transform:scale(.7);transform:scale(.7)}45%{-webkit-transform:scale(1.05);transform:scale(1.05)}80%{-webkit-transform:scale(.95);transform:scale(.95)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes hideSweetAlert{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}100%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}}@keyframes hideSweetAlert{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}100%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}}.swal2-show{-webkit-animation:showSweetAlert .3s;animation:showSweetAlert .3s}.swal2-show.swal2-noanimation{-webkit-animation:none;animation:none}.swal2-hide{-webkit-animation:hideSweetAlert .15s forwards;animation:hideSweetAlert .15s forwards}.swal2-hide.swal2-noanimation{-webkit-animation:none;animation:none}@-webkit-keyframes animate-success-tip{0%{width:0;left:1px;top:19px}54%{width:0;left:1px;top:19px}70%{width:50px;left:-8px;top:37px}84%{width:17px;left:21px;top:48px}100%{width:25px;left:14px;top:45px}}@keyframes animate-success-tip{0%{width:0;left:1px;top:19px}54%{width:0;left:1px;top:19px}70%{width:50px;left:-8px;top:37px}84%{width:17px;left:21px;top:48px}100%{width:25px;left:14px;top:45px}}@-webkit-keyframes animate-success-long{0%{width:0;right:46px;top:54px}65%{width:0;right:46px;top:54px}84%{width:55px;right:0;top:35px}100%{width:47px;right:8px;top:38px}}@keyframes animate-success-long{0%{width:0;right:46px;top:54px}65%{width:0;right:46px;top:54px}84%{width:55px;right:0;top:35px}100%{width:47px;right:8px;top:38px}}@-webkit-keyframes rotatePlaceholder{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}5%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}12%{-webkit-transform:rotate(-405deg);transform:rotate(-405deg)}100%{-webkit-transform:rotate(-405deg);transform:rotate(-405deg)}}@keyframes rotatePlaceholder{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}5%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}12%{-webkit-transform:rotate(-405deg);transform:rotate(-405deg)}100%{-webkit-transform:rotate(-405deg);transform:rotate(-405deg)}}.swal2-animate-success-line-tip{-webkit-animation:animate-success-tip .75s;animation:animate-success-tip .75s}.swal2-animate-success-line-long{-webkit-animation:animate-success-long .75s;animation:animate-success-long .75s}.swal2-success.swal2-animate-success-icon .swal2-success-circular-line-right{-webkit-animation:rotatePlaceholder 4.25s ease-in;animation:rotatePlaceholder 4.25s ease-in}@-webkit-keyframes animate-error-icon{0%{-webkit-transform:rotateX(100deg);transform:rotateX(100deg);opacity:0}100%{-webkit-transform:rotateX(0);transform:rotateX(0);opacity:1}}@keyframes animate-error-icon{0%{-webkit-transform:rotateX(100deg);transform:rotateX(100deg);opacity:0}100%{-webkit-transform:rotateX(0);transform:rotateX(0);opacity:1}}.swal2-animate-error-icon{-webkit-animation:animate-error-icon .5s;animation:animate-error-icon .5s}@-webkit-keyframes animate-x-mark{0%{-webkit-transform:scale(.4);transform:scale(.4);margin-top:26px;opacity:0}50%{-webkit-transform:scale(.4);transform:scale(.4);margin-top:26px;opacity:0}80%{-webkit-transform:scale(1.15);transform:scale(1.15);margin-top:-6px}100%{-webkit-transform:scale(1);transform:scale(1);margin-top:0;opacity:1}}@keyframes animate-x-mark{0%{-webkit-transform:scale(.4);transform:scale(.4);margin-top:26px;opacity:0}50%{-webkit-transform:scale(.4);transform:scale(.4);margin-top:26px;opacity:0}80%{-webkit-transform:scale(1.15);transform:scale(1.15);margin-top:-6px}100%{-webkit-transform:scale(1);transform:scale(1);margin-top:0;opacity:1}}.swal2-animate-x-mark{-webkit-animation:animate-x-mark .5s;animation:animate-x-mark .5s}@-webkit-keyframes rotate-loading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate-loading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
--------------------------------------------------------------------------------
/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZanwingMak/leaflet-image-hotspots/196bbafaa9db6b379745be59eca2c381e54528cd/img/1.jpg
--------------------------------------------------------------------------------
/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZanwingMak/leaflet-image-hotspots/196bbafaa9db6b379745be59eca2c381e54528cd/img/2.jpg
--------------------------------------------------------------------------------
/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZanwingMak/leaflet-image-hotspots/196bbafaa9db6b379745be59eca2c381e54528cd/img/3.jpg
--------------------------------------------------------------------------------
/img/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ZanwingMak/leaflet-image-hotspots/196bbafaa9db6b379745be59eca2c381e54528cd/img/4.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
直接将图片拖拽到页面内也可更换户型图(注意点击"保存户型图",数据暂时保存在浏览器)
78 |当前可选区域(点击删除),点我添加更多:
80 |