Skip to content

Commit 45f7407

Browse files
Indigo744Indigo744
committed
Expand zoom buttons functionality
1 parent e74e530 commit 45f7407

11 files changed

+217
-79
lines changed

‎examples/advanced/dataviz_example.html

+24-12
Original file line numberDiff line numberDiff line change
@@ -73,32 +73,44 @@
7373
border-radius: 5px;
7474
}
7575

76-
.mapael .zoomIn,
77-
.mapael .zoomOut {
78-
background-color: #dbdbdb;
79-
border: 1px solid #cfcfcf;
80-
color: #161616;
81-
width: 16px;
82-
height: 18px;
83-
line-height: 18px;
76+
/* For all zoom buttons */
77+
.mapael .zoomButton {
78+
background-color: #fff;
79+
border: 1px solid #ccc;
80+
color: #000;
81+
width: 15px;
82+
height: 15px;
83+
line-height: 15px;
8484
text-align: center;
8585
border-radius: 3px;
8686
cursor: pointer;
8787
position: absolute;
88-
top: 10px;
88+
top: 0;
8989
font-weight: bold;
9090
left: 10px;
9191

9292
-webkit-user-select: none;
93-
-khtml-user-select : none;
93+
-khtml-user-select : none;
9494
-moz-user-select: none;
95-
-o-user-select : none;
95+
-o-user-select : none;
9696
user-select: none;
9797
}
9898

99+
/* Reset Zoom button first */
100+
.mapael .zoomReset {
101+
top: 10px;
102+
}
103+
104+
/* Then Zoom In button */
105+
.mapael .zoomIn {
106+
top: 30px;
107+
}
108+
109+
/* Then Zoom Out button */
99110
.mapael .zoomOut {
100-
top: 35px;
111+
top: 50px;
101112
}
113+
102114
</style>
103115

104116
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" charset="utf-8"></script>

‎examples/advanced/eventHandlers_option_and_update_event_refresh_onclick.html

+18-6
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@
3939
color: #343434;
4040
}
4141

42-
.mapael .zoomIn,
43-
.mapael .zoomOut {
42+
/* For all zoom buttons */
43+
.mapael .zoomButton {
4444
background-color: #fff;
4545
border: 1px solid #ccc;
4646
color: #000;
@@ -51,20 +51,32 @@
5151
border-radius: 3px;
5252
cursor: pointer;
5353
position: absolute;
54-
top: 10px;
54+
top: 0;
5555
font-weight: bold;
5656
left: 10px;
57+
5758
-webkit-user-select: none;
58-
-khtml-user-select: none;
59+
-khtml-user-select : none;
5960
-moz-user-select: none;
60-
-o-user-select: none;
61+
-o-user-select : none;
6162
user-select: none;
6263
}
6364

64-
.mapael .zoomOut {
65+
/* Reset Zoom button first */
66+
.mapael .zoomReset {
67+
top: 10px;
68+
}
69+
70+
/* Then Zoom In button */
71+
.mapael .zoomIn {
6572
top: 30px;
6673
}
6774

75+
/* Then Zoom Out button */
76+
.mapael .zoomOut {
77+
top: 50px;
78+
}
79+
6880
.mapael .map {
6981
position: relative;
7082
}

‎examples/advanced/initial_zoom_level_on_a_specific_position.html

+17-6
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@
4242
color: #343434;
4343
}
4444

45-
.mapael .zoomIn,
46-
.mapael .zoomOut {
45+
/* For all zoom buttons */
46+
.mapael .zoomButton {
4747
background-color: #fff;
4848
border: 1px solid #ccc;
4949
color: #000;
@@ -54,21 +54,32 @@
5454
border-radius: 3px;
5555
cursor: pointer;
5656
position: absolute;
57-
top: 10px;
57+
top: 0;
5858
font-weight: bold;
5959
left: 10px;
6060

6161
-webkit-user-select: none;
62-
-khtml-user-select: none;
62+
-khtml-user-select : none;
6363
-moz-user-select: none;
64-
-o-user-select: none;
64+
-o-user-select : none;
6565
user-select: none;
6666
}
6767

68-
.mapael .zoomOut {
68+
/* Reset Zoom button first */
69+
.mapael .zoomReset {
70+
top: 10px;
71+
}
72+
73+
/* Then Zoom In button */
74+
.mapael .zoomIn {
6975
top: 30px;
7076
}
7177

78+
/* Then Zoom Out button */
79+
.mapael .zoomOut {
80+
top: 50px;
81+
}
82+
7283
.mapael .map {
7384
position: relative;
7485
background-color: #cddee0;

‎examples/advanced/multiple_instances.html

+17-6
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@
4949
color: #343434;
5050
}
5151

52-
.mapael .zoomIn,
53-
.mapael .zoomOut {
52+
/* For all zoom buttons */
53+
.mapael .zoomButton {
5454
background-color: #fff;
5555
border: 1px solid #ccc;
5656
color: #000;
@@ -61,21 +61,32 @@
6161
border-radius: 3px;
6262
cursor: pointer;
6363
position: absolute;
64-
top: 10px;
64+
top: 0;
6565
font-weight: bold;
6666
left: 10px;
6767

6868
-webkit-user-select: none;
69-
-khtml-user-select: none;
69+
-khtml-user-select : none;
7070
-moz-user-select: none;
71-
-o-user-select: none;
71+
-o-user-select : none;
7272
user-select: none;
7373
}
7474

75-
.mapael .zoomOut {
75+
/* Reset Zoom button first */
76+
.mapael .zoomReset {
77+
top: 10px;
78+
}
79+
80+
/* Then Zoom In button */
81+
.mapael .zoomIn {
7682
top: 30px;
7783
}
7884

85+
/* Then Zoom Out button */
86+
.mapael .zoomOut {
87+
top: 50px;
88+
}
89+
7990
.mapael .map {
8091
background-color: #cddee0;
8192
margin: 10px;

‎examples/advanced/update_event_for_refreshing_elements.html

+17-6
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@
3838
color: #343434;
3939
}
4040

41-
.mapael .zoomIn,
42-
.mapael .zoomOut {
41+
/* For all zoom buttons */
42+
.mapael .zoomButton {
4343
background-color: #fff;
4444
border: 1px solid #ccc;
4545
color: #000;
@@ -50,21 +50,32 @@
5050
border-radius: 3px;
5151
cursor: pointer;
5252
position: absolute;
53-
top: 10px;
53+
top: 0;
5454
font-weight: bold;
5555
left: 10px;
5656

5757
-webkit-user-select: none;
58-
-khtml-user-select: none;
58+
-khtml-user-select : none;
5959
-moz-user-select: none;
60-
-o-user-select: none;
60+
-o-user-select : none;
6161
user-select: none;
6262
}
6363

64-
.mapael .zoomOut {
64+
/* Reset Zoom button first */
65+
.mapael .zoomReset {
66+
top: 10px;
67+
}
68+
69+
/* Then Zoom In button */
70+
.mapael .zoomIn {
6571
top: 30px;
6672
}
6773

74+
/* Then Zoom Out button */
75+
.mapael .zoomOut {
76+
top: 50px;
77+
}
78+
6879
.mapael .map {
6980
background-color: #cddee0;
7081
margin: 10px;

‎examples/advanced/updates_on_links_performed.html

+17-6
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@
4242
color: #343434;
4343
}
4444

45-
.mapael .zoomIn,
46-
.mapael .zoomOut {
45+
/* For all zoom buttons */
46+
.mapael .zoomButton {
4747
background-color: #fff;
4848
border: 1px solid #ccc;
4949
color: #000;
@@ -54,20 +54,31 @@
5454
border-radius: 3px;
5555
cursor: pointer;
5656
position: absolute;
57-
top: 10px;
57+
top: 0;
5858
font-weight: bold;
5959
left: 10px;
6060

6161
-webkit-user-select: none;
62-
-khtml-user-select: none;
62+
-khtml-user-select : none;
6363
-moz-user-select: none;
64-
-o-user-select: none;
64+
-o-user-select : none;
6565
user-select: none;
6666
}
6767

68-
.mapael .zoomOut {
68+
/* Reset Zoom button first */
69+
.mapael .zoomReset {
70+
top: 10px;
71+
}
72+
73+
/* Then Zoom In button */
74+
.mapael .zoomIn {
6975
top: 30px;
7076
}
77+
78+
/* Then Zoom Out button */
79+
.mapael .zoomOut {
80+
top: 50px;
81+
}
7182
</style>
7283

7384
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" charset="utf-8"></script>

‎examples/advanced/zoom_event_on_specific_area.html

+17-6
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@
3838
color: #343434;
3939
}
4040

41-
.mapael .zoomIn,
42-
.mapael .zoomOut {
41+
/* For all zoom buttons */
42+
.mapael .zoomButton {
4343
background-color: #fff;
4444
border: 1px solid #ccc;
4545
color: #000;
@@ -50,21 +50,32 @@
5050
border-radius: 3px;
5151
cursor: pointer;
5252
position: absolute;
53-
top: 10px;
53+
top: 0;
5454
font-weight: bold;
5555
left: 10px;
5656

5757
-webkit-user-select: none;
58-
-khtml-user-select: none;
58+
-khtml-user-select : none;
5959
-moz-user-select: none;
60-
-o-user-select: none;
60+
-o-user-select : none;
6161
user-select: none;
6262
}
6363

64-
.mapael .zoomOut {
64+
/* Reset Zoom button first */
65+
.mapael .zoomReset {
66+
top: 10px;
67+
}
68+
69+
/* Then Zoom In button */
70+
.mapael .zoomIn {
6571
top: 30px;
6672
}
6773

74+
/* Then Zoom Out button */
75+
.mapael .zoomOut {
76+
top: 50px;
77+
}
78+
6879
.mapael .map {
6980
position: relative;
7081
}

‎examples/basic/href_areas_plotted_cities.html

+17-6
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@
2828
position: relative;
2929
}
3030

31-
.mapael .zoomIn,
32-
.mapael .zoomOut {
31+
/* For all zoom buttons */
32+
.mapael .zoomButton {
3333
background-color: #fff;
3434
border: 1px solid #ccc;
3535
color: #000;
@@ -40,21 +40,32 @@
4040
border-radius: 3px;
4141
cursor: pointer;
4242
position: absolute;
43-
top: 10px;
43+
top: 0;
4444
font-weight: bold;
4545
left: 10px;
4646

4747
-webkit-user-select: none;
48-
-khtml-user-select: none;
48+
-khtml-user-select : none;
4949
-moz-user-select: none;
50-
-o-user-select: none;
50+
-o-user-select : none;
5151
user-select: none;
5252
}
5353

54-
.mapael .zoomOut {
54+
/* Reset Zoom button first */
55+
.mapael .zoomReset {
56+
top: 10px;
57+
}
58+
59+
/* Then Zoom In button */
60+
.mapael .zoomIn {
5561
top: 30px;
5662
}
5763

64+
/* Then Zoom Out button */
65+
.mapael .zoomOut {
66+
top: 50px;
67+
}
68+
5869
.mapael .mapTooltip {
5970
position: absolute;
6071
background-color: #474c4b;

0 commit comments

Comments
 (0)