foliage 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +22 -0
  3. data/README.md +9 -0
  4. data/app/assets/images/.keep +0 -0
  5. data/app/assets/images/map/marker/icon-2x.png +0 -0
  6. data/app/assets/images/map/marker/icon.png +0 -0
  7. data/app/assets/images/map/marker/icon.svg +67 -0
  8. data/app/assets/images/map/marker/shadow.png +0 -0
  9. data/app/assets/javascripts/core_ext.js.coffee +61 -0
  10. data/app/assets/javascripts/foliage.js.coffee +23 -0
  11. data/app/assets/javascripts/foliage/band.js.coffee +99 -0
  12. data/app/assets/javascripts/foliage/bubbles.js.coffee +77 -0
  13. data/app/assets/javascripts/foliage/categories.js.coffee +70 -0
  14. data/app/assets/javascripts/foliage/choropleth.js.coffee +51 -0
  15. data/app/assets/javascripts/foliage/color.js.coffee +39 -0
  16. data/app/assets/javascripts/foliage/gradient.js.coffee +72 -0
  17. data/app/assets/javascripts/foliage/heatmap.js.coffee +49 -0
  18. data/app/assets/javascripts/foliage/leaf.js.coffee +422 -0
  19. data/app/assets/javascripts/foliage/path.js.coffee +76 -0
  20. data/app/assets/javascripts/foliage/paths.js.coffee +131 -0
  21. data/app/assets/javascripts/foliage/point_group.js.coffee +83 -0
  22. data/app/assets/javascripts/foliage/points.js.coffee +79 -0
  23. data/app/assets/javascripts/foliage/simple.js.coffee +35 -0
  24. data/app/assets/javascripts/leaflet/geographic_util.js.coffee +23 -0
  25. data/app/assets/javascripts/leaflet/ghost_label.js.coffee +100 -0
  26. data/app/assets/javascripts/leaflet/ghost_label_cluster.js.coffee +192 -0
  27. data/app/assets/javascripts/leaflet/layers_scheduler.js.coffee +57 -0
  28. data/app/assets/javascripts/leaflet/reactive_measure.js.coffee +414 -0
  29. data/app/assets/stylesheets/all.scss +16 -0
  30. data/app/assets/stylesheets/application.css +15 -0
  31. data/app/assets/stylesheets/compass/reset.scss +3 -0
  32. data/app/assets/stylesheets/compass/reset/utilities.scss +142 -0
  33. data/app/assets/stylesheets/leaflet.scss +1093 -0
  34. data/app/assets/stylesheets/leaflet/label.scss +40 -0
  35. data/app/assets/stylesheets/leaflet/tooltip.scss +42 -0
  36. data/app/assets/stylesheets/mixins.scss +131 -0
  37. data/app/assets/stylesheets/reset.scss +89 -0
  38. data/app/assets/stylesheets/variables.scss +47 -0
  39. data/app/helpers/foliage_helper.rb +23 -0
  40. data/lib/foliage.rb +9 -0
  41. data/lib/foliage/leaf.rb +235 -0
  42. data/lib/foliage/rails.rb +2 -0
  43. data/lib/foliage/rails/engine.rb +7 -0
  44. data/lib/foliage/rails/integration.rb +8 -0
  45. data/lib/foliage/version.rb +3 -0
  46. data/vendor/assets/javascripts/.keep +0 -0
  47. data/vendor/assets/javascripts/autosize.js +211 -0
  48. data/vendor/assets/javascripts/geographiclib.js +3074 -0
  49. data/vendor/assets/javascripts/leaflet.js.erb +9175 -0
  50. data/vendor/assets/javascripts/leaflet/draw.js +3573 -0
  51. data/vendor/assets/javascripts/leaflet/easy-button.js +366 -0
  52. data/vendor/assets/javascripts/leaflet/fullscreen.js +162 -0
  53. data/vendor/assets/javascripts/leaflet/heatmap.js +142 -0
  54. data/vendor/assets/javascripts/leaflet/label.js +545 -0
  55. data/vendor/assets/javascripts/leaflet/measure.js +6966 -0
  56. data/vendor/assets/javascripts/leaflet/modal.js +364 -0
  57. data/vendor/assets/javascripts/leaflet/providers.js +479 -0
  58. data/vendor/assets/javascripts/rbush.js +621 -0
  59. data/vendor/assets/stylesheets/.keep +0 -0
  60. data/vendor/assets/stylesheets/bootstrap/mixins.scss +55 -0
  61. data/vendor/assets/stylesheets/bootstrap/variables.scss +10 -0
  62. data/vendor/assets/stylesheets/leaflet.scss +479 -0
  63. data/vendor/assets/stylesheets/leaflet/draw.scss +282 -0
  64. data/vendor/assets/stylesheets/leaflet/easy-button.scss +56 -0
  65. data/vendor/assets/stylesheets/leaflet/fullscreen.scss +2 -0
  66. data/vendor/assets/stylesheets/leaflet/measure.scss +168 -0
  67. data/vendor/assets/stylesheets/leaflet/modal.scss +85 -0
  68. metadata +171 -0
@@ -0,0 +1,16 @@
1
+ /*
2
+ * This is a manifest file that'll be compiled into screen.css, which will include all the files
3
+ * listed below.
4
+ *
5
+ *= require_self
6
+ */
7
+
8
+ // Core variables and mixins
9
+ @import "variables";
10
+ @import "mixins";
11
+
12
+ // Reset
13
+ @import "reset";
14
+
15
+ // Leaflet
16
+ @import "leaflet";
@@ -0,0 +1,15 @@
1
+ /*
2
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
3
+ * listed below.
4
+ *
5
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
6
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
7
+ *
8
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
9
+ * compiled file so the styles you add here take precedence over styles defined in any styles
10
+ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
11
+ * file per style scope.
12
+ *
13
+ *= require all
14
+ *= require_self
15
+ */
@@ -0,0 +1,3 @@
1
+ @import "reset/utilities";
2
+
3
+ @include global-reset;
@@ -0,0 +1,142 @@
1
+ // Based on [Eric Meyer's reset 2.0](http://meyerweb.com/eric/tools/css/reset/index.html)
2
+ // Global reset rules.
3
+ // For more specific resets, use the reset mixins provided below
4
+ @mixin global-reset {
5
+ html, body, div, span, applet, object, iframe,
6
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
7
+ a, abbr, acronym, address, big, cite, code,
8
+ del, dfn, em, img, ins, kbd, q, s, samp,
9
+ small, strike, strong, sub, sup, tt, var,
10
+ b, u, i, center,
11
+ dl, dt, dd, ol, ul, li,
12
+ fieldset, form, label, legend,
13
+ table, caption, tbody, tfoot, thead, tr, th, td,
14
+ article, aside, canvas, details, embed,
15
+ figure, figcaption, footer, header, hgroup,
16
+ menu, nav, output, ruby, section, summary,
17
+ time, mark, audio, video {
18
+ @include reset-box-model;
19
+ @include reset-font; }
20
+ // Unlike Eric's original reset, we reset the html element to be compatible
21
+ // with the vertical rhythm mixins.
22
+ html {
23
+ @include reset-body; }
24
+ ol, ul {
25
+ @include reset-list-style; }
26
+ table {
27
+ @include reset-table; }
28
+ caption, th, td {
29
+ @include reset-table-cell; }
30
+ q, blockquote {
31
+ @include reset-quotation; }
32
+ a img {
33
+ @include reset-image-anchor-border; }
34
+ @include reset-html5; }
35
+
36
+ // Reset all elements within some selector scope. To reset the selector itself,
37
+ // mixin the appropriate reset mixin for that element type as well. This could be
38
+ // useful if you want to style a part of your page in a dramatically different way.
39
+ @mixin nested-reset {
40
+ div, span, applet, object, iframe,
41
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
42
+ a, abbr, acronym, address, big, cite, code,
43
+ del, dfn, em, img, ins, kbd, q, s, samp,
44
+ small, strike, strong, sub, sup, tt, var,
45
+ b, u, i, center,
46
+ dl, dt, dd, ol, ul, li,
47
+ fieldset, form, label, legend,
48
+ table, caption, tbody, tfoot, thead, tr, th, td,
49
+ article, aside, canvas, details, embed,
50
+ figure, figcaption, footer, header, hgroup,
51
+ menu, nav, output, ruby, section, summary,
52
+ time, mark, audio, video {
53
+ @include reset-box-model;
54
+ @include reset-font; }
55
+ table {
56
+ @include reset-table; }
57
+ caption, th, td {
58
+ @include reset-table-cell; }
59
+ q, blockquote {
60
+ @include reset-quotation; }
61
+ a img {
62
+ @include reset-image-anchor-border; } }
63
+
64
+ // Reset the box model measurements.
65
+ @mixin reset-box-model {
66
+ margin: 0;
67
+ padding: 0;
68
+ border: 0; }
69
+
70
+ // Reset the font and vertical alignment.
71
+ @mixin reset-font {
72
+ font: inherit;
73
+ font-size: 100%;
74
+ vertical-align: baseline; }
75
+
76
+ // Resets the outline when focus.
77
+ // For accessibility you need to apply some styling in its place.
78
+ @mixin reset-focus {
79
+ outline: 0; }
80
+
81
+ // Reset a body element.
82
+ @mixin reset-body {
83
+ line-height: 1; }
84
+
85
+ // Reset the list style of an element.
86
+ @mixin reset-list-style {
87
+ list-style: none; }
88
+
89
+ // Reset a table
90
+ @mixin reset-table {
91
+ border-collapse: collapse;
92
+ border-spacing: 0; }
93
+
94
+ // Reset a table cell (`th`, `td`)
95
+ @mixin reset-table-cell {
96
+ text-align: left;
97
+ font-weight: normal;
98
+ vertical-align: middle; }
99
+
100
+ // Reset a quotation (`q`, `blockquote`)
101
+ @mixin reset-quotation {
102
+ quotes: none;
103
+ &:before, &:after {
104
+ content: "";
105
+ content: none; } }
106
+
107
+ // Resets the border.
108
+ @mixin reset-image-anchor-border {
109
+ border: none; }
110
+
111
+ // Unrecognized elements are displayed inline.
112
+ // This reset provides a basic reset for block html5 elements
113
+ // so they are rendered correctly in browsers that don't recognize them
114
+ // and reset in browsers that have default styles for them.
115
+ @mixin reset-html5 {
116
+ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
117
+ display: block; } }
118
+
119
+ // Resets the display of inline and block elements to their default display
120
+ // according to their tag type. Elements that have a default display that varies across
121
+ // versions of html or browser are not handled here, but this covers the 90% use case.
122
+ // Usage Example:
123
+ //
124
+ // // Turn off the display for both of these classes
125
+ // .unregistered-only, .registered-only
126
+ // display: none
127
+ // // Now turn only one of them back on depending on some other context.
128
+ // body.registered
129
+ // +reset-display(".registered-only")
130
+ // body.unregistered
131
+ // +reset-display(".unregistered-only")
132
+ @mixin reset-display($selector: "", $important: false) {
133
+ #{append-selector("a, abbr, acronym, audio, b, basefont, bdo, big, br, canvas, cite, code, command, datalist, dfn, em, embed, font, i, img, input, keygen, kbd, label, mark, meter, output, progress, q, rp, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, textarea, time, tt, u, var, video, wbr", $selector)} {
134
+ @if $important {
135
+ display: inline !important; }
136
+ @else {
137
+ display: inline; } }
138
+ #{append-selector("address, article, aside, blockquote, center, dir, div, dd, details, dl, dt, fieldset, figcaption, figure, form, footer, frameset, h1, h2, h3, h4, h5, h6, hr, header, hgroup, isindex, main, menu, nav, noframes, noscript, ol, p, pre, section, summary, ul", $selector)} {
139
+ @if $important {
140
+ display: block !important; }
141
+ @else {
142
+ display: block; } } }
@@ -0,0 +1,1093 @@
1
+ // External dependencies
2
+ // @import "leaflet/measure";
3
+ @import "leaflet/modal";
4
+ @import "leaflet/easy-button";
5
+ @import "leaflet/label";
6
+ @import "leaflet/fullscreen";
7
+ @import "leaflet/tooltip";
8
+
9
+ /* required styles */
10
+
11
+ .leaflet-map-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-pane, .leaflet-tile-container, .leaflet-overlay-pane, .leaflet-shadow-pane, .leaflet-marker-pane, .leaflet-popup-pane, .leaflet-overlay-pane svg, .leaflet-zoom-box, .leaflet-image-layer, .leaflet-layer {
12
+ position: absolute;
13
+ left: 0;
14
+ top: 0;
15
+ }
16
+
17
+ .leaflet-container {
18
+ overflow: hidden;
19
+ -ms-touch-action: none;
20
+ }
21
+
22
+ .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow {
23
+ @include user-select(none);
24
+ }
25
+
26
+ .leaflet-marker-icon, .leaflet-marker-shadow {
27
+ display: block;
28
+ }
29
+
30
+ /* map is broken in FF if you have max-width: 100% on tiles */
31
+
32
+ .leaflet-container img {
33
+ max-width: none !important;
34
+ &.leaflet-image-layer {
35
+ max-width: 15000px !important;
36
+ }
37
+ }
38
+
39
+ /* stupid Android 2 doesn't understand "max-width: none" properly */
40
+
41
+ .leaflet-tile {
42
+ filter: inherit;
43
+ visibility: hidden;
44
+ }
45
+
46
+ .leaflet-tile-loaded {
47
+ visibility: inherit;
48
+ }
49
+
50
+ .leaflet-zoom-box {
51
+ width: 0;
52
+ height: 0;
53
+ }
54
+
55
+ /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
56
+
57
+ .leaflet-overlay-pane svg {
58
+ -moz-user-select: none;
59
+ }
60
+
61
+ .leaflet-tile-pane {
62
+ z-index: 2;
63
+ }
64
+
65
+ .leaflet-objects-pane {
66
+ z-index: 3;
67
+ }
68
+
69
+ .leaflet-overlay-pane {
70
+ z-index: 4;
71
+ }
72
+
73
+ .leaflet-shadow-pane {
74
+ z-index: 5;
75
+ }
76
+
77
+ .leaflet-marker-pane {
78
+ z-index: 6;
79
+ }
80
+
81
+ .leaflet-popup-pane {
82
+ z-index: 7;
83
+ }
84
+
85
+ .leaflet-vml-shape {
86
+ width: 1px;
87
+ height: 1px;
88
+ }
89
+
90
+ .lvml {
91
+ behavior: url(#default#VML);
92
+ @include inline-block;
93
+ position: absolute;
94
+ }
95
+
96
+ /* control positioning */
97
+
98
+ .leaflet-control {
99
+ position: relative;
100
+ z-index: 7;
101
+ pointer-events: auto;
102
+ }
103
+
104
+ .leaflet-top, .leaflet-bottom {
105
+ position: absolute;
106
+ z-index: 10;
107
+ pointer-events: none;
108
+ }
109
+
110
+ .leaflet-top {
111
+ top: 0;
112
+ z-index: 11;
113
+ }
114
+
115
+ .leaflet-right {
116
+ right: 0;
117
+ }
118
+
119
+ .leaflet-bottom {
120
+ bottom: 0;
121
+ }
122
+
123
+ .leaflet-left {
124
+ left: 0;
125
+ }
126
+
127
+ .leaflet-control {
128
+ float: left;
129
+ clear: both;
130
+ }
131
+
132
+ .leaflet-right .leaflet-control {
133
+ float: right;
134
+ }
135
+
136
+ .leaflet-top .leaflet-control {
137
+ margin-top: 10px;
138
+ }
139
+
140
+ .leaflet-bottom .leaflet-control {
141
+ margin-bottom: 10px;
142
+ }
143
+
144
+ .leaflet-left .leaflet-control {
145
+ margin-left: 10px;
146
+ }
147
+
148
+ .leaflet-right .leaflet-control {
149
+ margin-right: 10px;
150
+ }
151
+
152
+ /* zoom and fade animations */
153
+
154
+ .leaflet-fade-anim {
155
+ .leaflet-tile, .leaflet-popup {
156
+ opacity: 0;
157
+ @include transition(opacity 0.2s linear);
158
+ }
159
+ .leaflet-tile-loaded, .leaflet-map-pane .leaflet-popup {
160
+ opacity: 1;
161
+ }
162
+ }
163
+
164
+ .leaflet-zoom-anim {
165
+ .leaflet-zoom-animated {
166
+ @include transition(transform 0.25s cubic-bezier(0, 0, 0.25, 1));
167
+ }
168
+ .leaflet-tile {
169
+ @include transition(none);
170
+ }
171
+ }
172
+
173
+ .leaflet-pan-anim .leaflet-tile, .leaflet-touching .leaflet-zoom-animated {
174
+ @include transition(none);
175
+ }
176
+
177
+ .leaflet-zoom-anim .leaflet-zoom-hide {
178
+ visibility: hidden;
179
+ }
180
+
181
+ /* cursors */
182
+
183
+ .leaflet-clickable {
184
+ cursor: pointer;
185
+ }
186
+
187
+ .leaflet-container {
188
+ cursor: -webkit-grab;
189
+ cursor: -moz-grab;
190
+ }
191
+
192
+ .leaflet-popup-pane, .leaflet-control {
193
+ cursor: auto;
194
+ }
195
+
196
+ .leaflet-dragging {
197
+ .leaflet-container, .leaflet-clickable {
198
+ cursor: move;
199
+ cursor: -webkit-grabbing;
200
+ cursor: -moz-grabbing;
201
+ }
202
+ }
203
+
204
+ /* visual tweaks */
205
+
206
+ .leaflet-container {
207
+ background: #ddd;
208
+ outline: 0;
209
+ }
210
+
211
+ .leaflet-zoom-box {
212
+ border: 2px dotted #38f;
213
+ background: rgba(255, 255, 255, 0.5);
214
+ }
215
+
216
+ /* general typography */
217
+
218
+ .leaflet-container {
219
+ font: $fs-small/$lh-small $base-font-family;
220
+ }
221
+
222
+ /* general toolbar styles */
223
+
224
+ .leaflet-control-layers-toggle {
225
+ &:before{
226
+ content: "=";
227
+ }
228
+ background-position: 50% 50%;
229
+ background-repeat: no-repeat;
230
+ display: flex;
231
+ justify-content: center;
232
+ align-items: center;
233
+ }
234
+
235
+
236
+ .leaflet-bar {
237
+ $default-opacity: 0.8;
238
+ @include menu;
239
+ // box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
240
+ // @include border-radius($default-border-radius * 2);
241
+ // border: $default-border-radius solid rgba($neutral-color, $default-opacity / 2);
242
+ a {
243
+ @include user-select(none);
244
+ @include is-icon;
245
+ // background-color: rgba($mapbar-background-color, $default-opacity);
246
+ border-bottom: $menu-border;
247
+ width: $map-button-size;
248
+ height: $map-button-size;
249
+ line-height: $map-button-size;
250
+ display: block;
251
+ @include text-align(center);
252
+ text-decoration: none;
253
+ color: $active-link-color;
254
+ @include transition(background 0.2s);
255
+ display: flex;
256
+ justify-content: center;
257
+ align-items: center;
258
+ &:hover {
259
+ outline: none;
260
+ background: background-hover($menu-background);
261
+ //background-color: background-hover($mapbar-background-color);
262
+ }
263
+ &:first-child {
264
+ // @include border-top-radius($default-border-radius);
265
+ }
266
+ &:last-child {
267
+ // @include border-bottom-radius($default-border-radius);
268
+ border-bottom: none;
269
+ }
270
+ &.leaflet-disabled {
271
+ &,
272
+ &:active,
273
+ &:focus,
274
+ &:hover {
275
+ outline: none;
276
+ cursor: default;
277
+ // background-color: rgba($neutral-color, $default-opacity);
278
+ background-color: $menu-border-color;
279
+ // color: $text-color;
280
+ @include opacity(0.5);
281
+ // @include text-shadow(-1px -1px 0 white);
282
+ }
283
+ }
284
+ .leaflet-touch & {
285
+ width: 30px;
286
+ height: 30px;
287
+ line-height: 30px;
288
+ }
289
+ background-position: 50% 50%;
290
+ background-repeat: no-repeat;
291
+ }
292
+ }
293
+
294
+ /* zoom control */
295
+ .leaflet-control-zoom-in, .leaflet-control-zoom-out {
296
+ @include text-align(center);
297
+ }
298
+
299
+ .leaflet-control-zoom-in {
300
+ &::before {
301
+ content: "+";
302
+ }
303
+ @include use-icon(plus);
304
+ }
305
+
306
+ .leaflet-control-zoom-out {
307
+ &::before {
308
+ content: "-";
309
+ }
310
+ @include use-icon(minus);
311
+ }
312
+
313
+ .leaflet-control-zoom-fullscreen {
314
+ &::before {
315
+ content: "<>";
316
+ transform: rotate(45deg);
317
+ }
318
+ @include use-icon(arrows-alt);
319
+ }
320
+
321
+ .leaflet-touch {
322
+ .leaflet-control-zoom-in {
323
+ font-size: 22px;
324
+ }
325
+ .leaflet-control-zoom-out {
326
+ font-size: 24px;
327
+ }
328
+ }
329
+
330
+ /* layers control */
331
+
332
+ .leaflet-control-layers {
333
+ @include menu-box;
334
+ .leaflet-control-layers-toggle {
335
+ color: $active-link-color;
336
+ @include is-icon;
337
+ @include use-icon(layers);
338
+ @include text-align(center);
339
+ width: $map-button-size;
340
+ height: $map-button-size;
341
+ line-height: $map-button-size;
342
+ }
343
+ }
344
+
345
+
346
+
347
+ .leaflet-retina .leaflet-control-layers-toggle {
348
+ // background-image: url(images/layers-2x.png);
349
+ background-size: 26px 26px;
350
+ }
351
+
352
+ .leaflet-touch .leaflet-control-layers-toggle {
353
+ width: 44px;
354
+ height: 44px;
355
+ }
356
+
357
+ .leaflet-control-layers .leaflet-control-layers-list {
358
+ display: none;
359
+ }
360
+
361
+ .leaflet-control-layers-expanded {
362
+ .leaflet-control-layers-toggle {
363
+ display: none;
364
+ }
365
+ .leaflet-control-layers-list {
366
+ display: block;
367
+ position: relative;
368
+ .leaflet-control-layers-separator {
369
+ height: 0;
370
+ border-top: $menu-border;
371
+ }
372
+ .leaflet-control-layers-base, .leaflet-control-layers-overlays {
373
+ padding: $default-gap;
374
+ label {
375
+ &, * {
376
+ vertical-align: middle;
377
+ line-height: $lh-normal;
378
+ }
379
+ }
380
+ }
381
+ }
382
+ }
383
+
384
+ .leaflet-control-layers-selector {
385
+ margin-top: 2px;
386
+ position: relative;
387
+ top: 1px;
388
+ }
389
+
390
+ .leaflet-control-layers label {
391
+ display: block;
392
+ }
393
+
394
+
395
+ /* attribution and scale controls */
396
+
397
+ .leaflet-container .leaflet-control-attribution {
398
+ background: #fff;
399
+ background: rgba(255, 255, 255, 0.7);
400
+ margin: 0;
401
+ }
402
+
403
+ .leaflet-control-attribution, .leaflet-control-scale-line {
404
+ padding: 0 5px;
405
+ color: #333;
406
+ }
407
+
408
+ .leaflet-control-attribution a {
409
+ text-decoration: none;
410
+ &:hover {
411
+ text-decoration: underline;
412
+ }
413
+ }
414
+
415
+ .leaflet-container {
416
+ .leaflet-control-attribution, .leaflet-control-scale {
417
+ &, * {
418
+ font-size: $fs-small;
419
+ }
420
+ }
421
+ }
422
+
423
+ .leaflet-left .leaflet-control-scale {
424
+ margin-left: 5px;
425
+ }
426
+
427
+ .leaflet-bottom .leaflet-control-scale {
428
+ margin-bottom: 5px;
429
+ }
430
+
431
+ .leaflet-control-scale-line {
432
+ border: 2px solid #777;
433
+ border-top: none;
434
+ line-height: 1.1em;
435
+ padding: 2px 5px 1px;
436
+ font-size: $fs-small;
437
+ white-space: nowrap;
438
+ overflow: hidden;
439
+ -moz-box-sizing: content-box;
440
+ box-sizing: content-box;
441
+ background: #fff;
442
+ background: rgba(255, 255, 255, 0.5);
443
+ &:not(:first-child) {
444
+ border-top: 2px solid #777;
445
+ border-bottom: none;
446
+ margin-top: -2px;
447
+ &:not(:last-child) {
448
+ border-bottom: 2px solid #777;
449
+ }
450
+ }
451
+ }
452
+
453
+ .leaflet-touch {
454
+ .leaflet-control-attribution, .leaflet-control-layers, .leaflet-bar {
455
+ box-shadow: none;
456
+ }
457
+ .leaflet-control-layers, .leaflet-bar {
458
+ border: 2px solid rgba(0, 0, 0, 0.2);
459
+ background-clip: padding-box;
460
+ }
461
+ }
462
+
463
+ /* popup */
464
+
465
+ .leaflet-popup {
466
+ position: absolute;
467
+ z-index: 2;
468
+ @include text-align(center);
469
+ .leaflet-popup-content-wrapper {
470
+ @include text-align(left);
471
+ @include menu-box;
472
+ background: white;
473
+ border: none;
474
+ .leaflet-popup-content {
475
+ .popup-header {
476
+ .popup-block-content{
477
+ width: 100%;
478
+ display: flex;
479
+ justify-content: space-between;
480
+ }
481
+ }
482
+ .popup-content, .popup-header, .popup-footer {
483
+ padding: $default-gap 2*$default-gap;
484
+ }
485
+ .popup-header, .popup-footer {
486
+ background-color: $popover-title-bg;
487
+ }
488
+ .popup-content {
489
+ .popup-block-label {
490
+ display: block;
491
+ @include legend-label;
492
+ }
493
+ &:last-child {
494
+ padding-bottom: 2*$default-gap;
495
+ }
496
+ }
497
+ }
498
+ }
499
+ .leaflet-popup-tip-container {
500
+ margin: 0 auto;
501
+ width: 40px;
502
+ height: 20px;
503
+ position: relative;
504
+ overflow: hidden;
505
+ .leaflet-popup-tip {
506
+ width: 17px;
507
+ height: 17px;
508
+ padding: 1px;
509
+ margin: -10px auto 0;
510
+ position: relative;
511
+ z-index: 11;
512
+ @include rotate(45deg);
513
+ background: white;
514
+ @include menu-shadow;
515
+ }
516
+ }
517
+ .leaflet-container & a.leaflet-popup-close-button {
518
+ $size: 18px;
519
+ $padding: round($default-gap * 0.4);
520
+ @include menu-box;
521
+ position: absolute;
522
+ top: -1 * round(($size + $padding) / 2);
523
+ right: -1 * round(($size + $padding) / 2);
524
+ padding: $padding;
525
+ @include border-radius(50%);
526
+ @include text-align(center);
527
+ width: $size;
528
+ height: $size;
529
+ font-size: $size;
530
+ line-height: $size;
531
+ text-decoration: none;
532
+ font-weight: bold;
533
+ }
534
+ }
535
+
536
+
537
+
538
+ .leaflet-popup-scrolled {
539
+ overflow: auto;
540
+ border-bottom: 1px solid #ddd;
541
+ border-top: 1px solid #ddd;
542
+ }
543
+
544
+ .leaflet-oldie {
545
+ .leaflet-popup-content-wrapper {
546
+ zoom: 1;
547
+ }
548
+ .leaflet-popup-tip {
549
+ width: 24px;
550
+ margin: 0 auto;
551
+ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
552
+ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
553
+ }
554
+ .leaflet-popup-tip-container {
555
+ margin-top: -1px;
556
+ }
557
+ .leaflet-control-zoom, .leaflet-control-layers, .leaflet-popup-content-wrapper, .leaflet-popup-tip {
558
+ border: 1px solid #999;
559
+ }
560
+ }
561
+
562
+ /* div icon */
563
+
564
+ .leaflet-div-icon {
565
+ background: #fff;
566
+ border: 1px solid #666;
567
+ }
568
+
569
+
570
+ /* ================================================================== */
571
+ /* Toolbars
572
+ /* ================================================================== */
573
+
574
+ .leaflet-draw-section {
575
+ position: relative;
576
+ }
577
+
578
+ .leaflet-draw-toolbar {
579
+ margin-top: 12px;
580
+ }
581
+
582
+ .leaflet-draw-toolbar-top {
583
+ margin-top: 0;
584
+ }
585
+
586
+ .leaflet-draw-toolbar-notop a:first-child {
587
+ border-top-right-radius: 0;
588
+ }
589
+
590
+ .leaflet-draw-toolbar-nobottom a:last-child {
591
+ border-bottom-right-radius: 0;
592
+ }
593
+
594
+
595
+ /* ================================================================== */
596
+ /* Toolbar actions menu
597
+ /* ================================================================== */
598
+
599
+ .leaflet-draw-actions {
600
+ display: none;
601
+ list-style: none;
602
+ margin: 0;
603
+ padding: 0;
604
+ position: absolute;
605
+ left: $map-button-size;
606
+ /* leaflet-draw-toolbar.left + leaflet-draw-toolbar.width */
607
+ top: 0;
608
+ white-space: nowrap;
609
+ }
610
+
611
+ .leaflet-right .leaflet-draw-actions {
612
+ right: $map-button-size;
613
+ left: auto;
614
+ }
615
+
616
+ .leaflet-draw-actions li {
617
+ display: inline-block;
618
+ &:first-child a {
619
+ border-left: none;
620
+ }
621
+ &:last-child a {
622
+ -webkit-border-radius: 0 $default-border-radius $default-border-radius 0;
623
+ border-radius: 0 $default-border-radius $default-border-radius 0;
624
+ }
625
+ }
626
+
627
+ .leaflet-right .leaflet-draw-actions li {
628
+ &:last-child a {
629
+ @include border-radius(0);
630
+ }
631
+ &:first-child a {
632
+ -webkit-border-radius: $default-border-radius 0 0 $default-border-radius;
633
+ border-radius: $default-border-radius 0 0 $default-border-radius;
634
+ }
635
+ }
636
+
637
+ .leaflet-draw-actions a {
638
+ background-color: #919187;
639
+ border-left: 1px solid #AAA;
640
+ color: #FFF;
641
+ font: $fs-small/$lh-small $base-font-family;
642
+ line-height: 28px;
643
+ text-decoration: none;
644
+ padding-left: 10px;
645
+ padding-right: 10px;
646
+ height: 28px;
647
+ }
648
+
649
+ .leaflet-draw-actions-bottom {
650
+ margin-top: 0;
651
+ }
652
+
653
+ .leaflet-draw-actions-top {
654
+ margin-top: 1px;
655
+ a {
656
+ height: $map-button-size + 1px;
657
+ line-height: $map-button-size + 1px;
658
+ }
659
+ }
660
+
661
+ .leaflet-draw-actions-bottom a {
662
+ height: $map-button-size + 1px;
663
+ line-height: $map-button-size + 1px;
664
+ }
665
+
666
+ .leaflet-draw-actions a:hover {
667
+ background-color: #A0A098;
668
+ }
669
+
670
+ .leaflet-draw-actions-top.leaflet-draw-actions-bottom a {
671
+ height: $map-button-size;
672
+ line-height: $map-button-size;
673
+ }
674
+
675
+ /* ================================================================== */
676
+ /* Draw toolbar
677
+ /* ================================================================== */
678
+
679
+ .leaflet-draw-toolbar {
680
+ .leaflet-draw-draw-polyline {
681
+ @include use-icon(angle-down);
682
+ }
683
+ .leaflet-draw-draw-polygon {
684
+ @include use-icon(star-o);
685
+ }
686
+ .leaflet-draw-draw-rectangle {
687
+ @include use-icon(square-o);
688
+ }
689
+ .leaflet-draw-draw-circle {
690
+ @include use-icon(circle-thin);
691
+ }
692
+ .leaflet-draw-draw-marker {
693
+ @include use-icon(map-marker);
694
+ }
695
+ .leaflet-draw-edit-edit {
696
+ @include use-icon(edit);
697
+ }
698
+ .leaflet-draw-edit-remove {
699
+ @include use-icon(times);
700
+ }
701
+ }
702
+
703
+ /* ================================================================== */
704
+ /* Edit toolbar
705
+ /* ================================================================== */
706
+
707
+ /* ================================================================== */
708
+ /* Drawing styles
709
+ /* ================================================================== */
710
+
711
+ .leaflet-mouse-marker {
712
+ background-color: #fff;
713
+ cursor: crosshair;
714
+ }
715
+
716
+ .leaflet-draw-tooltip {
717
+ background: rgb(54, 54, 54);
718
+ background: rgba(0, 0, 0, 0.5);
719
+ border: 1px solid transparent;
720
+ @include border-radius($default-border-radius);
721
+ color: #fff;
722
+ font: $fs-normal/$lh-normal $base-font-family;
723
+ margin-left: 20px;
724
+ margin-top: -21px;
725
+ padding: 4px 8px;
726
+ position: absolute;
727
+ visibility: hidden;
728
+ white-space: nowrap;
729
+ z-index: 6;
730
+ &:before {
731
+ border-right: 6px solid black;
732
+ border-right-color: rgba(0, 0, 0, 0.5);
733
+ border-top: 6px solid transparent;
734
+ border-bottom: 6px solid transparent;
735
+ content: "";
736
+ position: absolute;
737
+ top: 7px;
738
+ left: -7px;
739
+ }
740
+ span {
741
+ color: inherit;
742
+ }
743
+ }
744
+
745
+ .leaflet-error-draw-tooltip {
746
+ background-color: #F2DEDE;
747
+ border: 1px solid #E6B6BD;
748
+ color: #B94A48;
749
+ &:before {
750
+ border-right-color: #E6B6BD;
751
+ }
752
+ }
753
+
754
+ .leaflet-draw-tooltip-single {
755
+ margin-top: -12px;
756
+ }
757
+
758
+ .leaflet-draw-tooltip-subtext {
759
+ color: #f8d5e4;
760
+ }
761
+
762
+ .leaflet-draw-guide-dash {
763
+ font-size: 1%;
764
+ opacity: 0.6;
765
+ position: absolute;
766
+ width: 5px;
767
+ height: 5px;
768
+ }
769
+
770
+ .leaflet-draw-tooltip-top {
771
+ background: rgb(54, 54, 54);
772
+ background: rgba(0, 0, 0, 0.5);
773
+ border: 1px solid transparent;
774
+ -webkit-border-radius: 4px;
775
+ border-radius: 4px;
776
+ color: #fff;
777
+ font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif;
778
+ margin-left: 0;
779
+ margin-top: -38px;
780
+ padding: 4px 8px;
781
+ position: absolute;
782
+ visibility: hidden;
783
+ white-space: nowrap;
784
+ z-index: 6;
785
+ &:before {
786
+ border-top: 6px solid black;
787
+ border-top-color: rgba(0, 0, 0, 0.5);
788
+ border-left: 6px solid transparent;
789
+ border-right: 6px solid transparent;
790
+ content: "";
791
+ position: absolute;
792
+ top: 30px;
793
+ @include calc('left','50% - 3px');
794
+ }
795
+
796
+ transition: margin-left 1s ease;
797
+
798
+ }
799
+
800
+ /* ================================================================== */
801
+ /* Edit styles
802
+ /* ================================================================== */
803
+
804
+ .leaflet-edit-marker-selected {
805
+ background: rgba(254, 87, 161, 0.1);
806
+ border: 4px dashed rgba(254, 87, 161, 0.6);
807
+ @include border-radius($default-border-radius);
808
+ }
809
+
810
+ .leaflet-edit-move {
811
+ cursor: move;
812
+ }
813
+
814
+ .leaflet-edit-resize {
815
+ cursor: pointer;
816
+ }
817
+
818
+ /* ================================================================== */
819
+ /* Old IE styles
820
+ /* ================================================================== */
821
+
822
+ .leaflet-oldie {
823
+ .leaflet-draw-toolbar {
824
+ border: 3px solid #999;
825
+ a {
826
+ background-color: #eee;
827
+ &:hover {
828
+ background-color: #fff;
829
+ }
830
+ }
831
+ }
832
+ .leaflet-draw-actions {
833
+ left: 32px;
834
+ margin-top: 3px;
835
+ li {
836
+ display: inline;
837
+ zoom: 1;
838
+ }
839
+ }
840
+ .leaflet-edit-marker-selected {
841
+ border: 4px dashed #fe93c2;
842
+ }
843
+ .leaflet-draw-actions a {
844
+ background-color: #999;
845
+ &:hover {
846
+ background-color: #a5a5a5;
847
+ }
848
+ }
849
+ .leaflet-draw-actions-top a {
850
+ margin-top: 1px;
851
+ }
852
+ .leaflet-draw-actions-bottom a {
853
+ height: 28px;
854
+ line-height: 28px;
855
+ }
856
+ .leaflet-draw-actions-top.leaflet-draw-actions-bottom a {
857
+ height: 27px;
858
+ line-height: 27px;
859
+ }
860
+ }
861
+
862
+
863
+ /* ================================================================== */
864
+ /* Legends
865
+ /* ================================================================== */
866
+
867
+ .leaflet-legend-control {
868
+ $cell-height: $fs-small;
869
+ @include menu-box;
870
+ min-width: 220px;
871
+
872
+ &.empty {
873
+ display: none;
874
+ }
875
+
876
+ .leaflet-legend-item {
877
+ padding: $default-gap;
878
+ border-top: $menu-border;
879
+ display: block;
880
+ min-width: 15 * $lh-normal;
881
+ max-width: 18 * $lh-normal;
882
+ &.first,
883
+ &:first-child {
884
+ border-top: none;
885
+ }
886
+ h3 {
887
+ color: $text-color;
888
+ font-size: $fs-normal;
889
+ line-height: $lh-normal;
890
+ font-weight: bold;
891
+ }
892
+ .leaflet-legend-body {
893
+ .min-value, .max-value {
894
+ color: $neutral-color;
895
+ font-size: $fs-small;
896
+ line-height: $lh-small;
897
+ font-weight: bold;
898
+ }
899
+ }
900
+
901
+ &.minified {
902
+ height: 0;
903
+ padding: 0;
904
+ overflow: hidden;
905
+ transition: 1s ease;
906
+ }
907
+ }
908
+
909
+ .leaflet-bubbles-scale {
910
+ text-align: center;
911
+ .min-value {
912
+ @include margin-right($default-gap);
913
+ }
914
+ .max-value {
915
+ @include margin-left($default-gap);
916
+ }
917
+ .leaflet-bubbles-grades {
918
+ .leaflet-bubbles-grade {
919
+ @include inline-block;
920
+ @include border-radius(50%);
921
+ margin: 0 round(0.6*$default-gap);
922
+ border-style: solid;
923
+ }
924
+ }
925
+ }
926
+
927
+ .leaflet-categories-scale {
928
+ .leaflet-categories-items {
929
+ .leaflet-categories-item {
930
+ display: block;
931
+
932
+ margin-top: round($default-gap * 0.3);
933
+ &:first-child {
934
+ margin-top: 0;
935
+ }
936
+ .leaflet-categories-sample {
937
+ @include inline-block;
938
+ height: $cell-height;
939
+ width: $cell-height;
940
+ @include border-radius(50%);
941
+ border: 1px solid #333;
942
+ position: absolute;
943
+ margin-top: 3px;
944
+ }
945
+ .leaflet-categories-item_label {
946
+ display: inherit;
947
+ margin-left: 20px;
948
+ color: $neutral-color;
949
+ font-size: $fs-small;
950
+ line-height: $lh-small;
951
+ font-weight: bold;
952
+ text-transform: uppercase;
953
+ }
954
+ }
955
+ }
956
+ }
957
+
958
+ .leaflet-choropleth-scale {
959
+ .min-value {
960
+ @include float(left);
961
+ }
962
+ .max-value {
963
+ @include float(right);
964
+ }
965
+ .leaflet-choropleth-grades {
966
+ display: block;
967
+ clear: both;
968
+ $border: 1px solid #333;
969
+ // margin: $default-gap 0 0 0;
970
+ // width: 15 * $lh-normal;
971
+ height: $cell-height;
972
+ border: $border;
973
+ .leaflet-choropleth-grade {
974
+ @include inline-block;
975
+ vertical-align: top;
976
+ height: $cell-height;
977
+ }
978
+ }
979
+ }
980
+ .leaflet-legend-circle {
981
+ width: 20px;
982
+ height: 20px;
983
+ border: 1px solid #000000;
984
+ @include inline-block;
985
+ border-radius: 50%;
986
+ margin-top: 8px;
987
+ }
988
+
989
+ }
990
+
991
+
992
+
993
+ i.leaflet-importer-ctrl, button.leaflet-importer-ctrl {
994
+ @include is-icon;
995
+ @include use-icon(download);
996
+ color: $active-link-color;
997
+ width: $map-button-size;
998
+ height: $map-button-size;
999
+ line-height: $map-button-size;
1000
+ }
1001
+
1002
+ span.leaflet-importer-geojson, span.leaflet-importer-gml {
1003
+ font-size: $default-gap;
1004
+ }
1005
+
1006
+ .leaflet-multilevel-legend {
1007
+ i {
1008
+ display: inline-block;
1009
+ width: 18px !important;
1010
+ height: 18px !important;
1011
+
1012
+ &.active {
1013
+ @include is-icon(10px);
1014
+ @include use-icon(check);
1015
+ color: white;
1016
+ text-align: center;
1017
+ }
1018
+ }
1019
+ span {
1020
+ display: inline-block;
1021
+ margin-left: 10px;
1022
+ }
1023
+ }
1024
+
1025
+ .leaflet-reference-label {
1026
+ //background-color: #fff;
1027
+ }
1028
+
1029
+ .leaflet-ghost-label {
1030
+ &:before, &:after {
1031
+ box-shadow: none;
1032
+ border: none;
1033
+ background: transparent;
1034
+ }
1035
+ .leaflet-ghost-label-collapsed {
1036
+ color: $active-color;
1037
+ background: white;
1038
+ font-weight: bold;
1039
+ /* text-shadow: none; */
1040
+ display: block;
1041
+ min-width: $lh-normal;
1042
+ /* height: 20px; */
1043
+ border-radius: 50%;
1044
+ border: $menu-border;
1045
+ /* background-color: white; */
1046
+ text-align: center;
1047
+ }
1048
+ }
1049
+
1050
+
1051
+ .leaflet-popup-warning {
1052
+ @include is-icon;
1053
+ @include use-icon(warning);
1054
+ &.hide {
1055
+ display: none;
1056
+ }
1057
+ &.right {
1058
+ @include float(right);
1059
+ }
1060
+ }
1061
+
1062
+ .choice-padding {
1063
+ @include inline-block;
1064
+ margin-right: 15px;
1065
+
1066
+ input[type=radio] {
1067
+ margin-right: 3px;
1068
+ }
1069
+ }
1070
+
1071
+ .modal-header {
1072
+ .leaflet-importer-ctrl {
1073
+ color: black;
1074
+ }
1075
+ span {
1076
+ margin-left: 10px;
1077
+ font-size: 18px;
1078
+ }
1079
+ }
1080
+
1081
+ .leaflet-control-measure-toggle{
1082
+ visibility: hidden;
1083
+ &:before {
1084
+ visibility: visible;
1085
+ font-size: 26px;
1086
+ line-height: 44px;
1087
+ text-align: center;
1088
+ vertical-align: middle;
1089
+ width: 44px;
1090
+ display: block;
1091
+ height: 44px;
1092
+ }
1093
+ }