Skip to content

Commit 4e423f7

Browse files
luyuliuluyuliu
committed
custom layer tutorial
1 parent 05caa5a commit 4e423f7

File tree

5 files changed

+100
-36
lines changed

5 files changed

+100
-36
lines changed

‎css/chardinjs.css

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
.chardinjs-overlay {
2+
position: absolute;
3+
z-index: 999999;
4+
background-color: #000;
5+
opacity: 0;
6+
-webkit-transition: all 0.3s ease-out;
7+
-moz-transition: all 0.3s ease-out;
8+
-ms-transition: all 0.3s ease-out;
9+
-o-transition: all 0.3s ease-out;
10+
transition: all 0.3s ease-out; }
11+
12+
.chardinjs-helper-layer {
13+
position: absolute;
14+
z-index: 9999998;
15+
color: white;
16+
-webkit-transition: all 0.3s ease-out;
17+
-moz-transition: all 0.3s ease-out;
18+
-ms-transition: all 0.3s ease-out;
19+
-o-transition: all 0.3s ease-out;
20+
transition: all 0.3s ease-out; }
21+
.chardinjs-helper-layer.chardinjs-left {
22+
border-left: solid white 1px;
23+
padding-left: 10px; }
24+
.chardinjs-helper-layer.chardinjs-right {
25+
border-right: solid white 1px;
26+
padding-right: 10px; }
27+
.chardinjs-helper-layer.chardinjs-bottom {
28+
border-bottom: solid white 1px;
29+
padding-bottom: 10px; }
30+
.chardinjs-helper-layer.chardinjs-top {
31+
border-top: solid white 1px;
32+
padding-top: 10px; }
33+
34+
.chardinjs-tooltip {
35+
position: absolute;
36+
-webkit-transition: opacity 0.1s ease-out;
37+
-moz-transition: opacity 0.1s ease-out;
38+
-ms-transition: opacity 0.1s ease-out;
39+
-o-transition: opacity 0.1s ease-out;
40+
transition: opacity 0.1s ease-out;
41+
max-width: 200px; }
42+
.chardinjs-tooltip.chardinjs-left {
43+
margin-left: -135px;
44+
padding-right: 10px; }
45+
.chardinjs-tooltip.chardinjs-right {
46+
margin-right: -135px;
47+
padding-left: 10px; }
48+
.chardinjs-tooltip.chardinjs-bottom {
49+
margin-bottom: -50px;
50+
padding-top: 10px; }
51+
.chardinjs-tooltip.chardinjs-top {
52+
margin-top: -50px;
53+
padding-bottom: 10px; }
54+
.chardinjs-tooltip.chardinjs-right:before, .chardinjs-tooltip.chardinjs-left:after, .chardinjs-tooltip.chardinjs-bottom:before, .chardinjs-tooltip.chardinjs-top:after {
55+
content: ".";
56+
display: inline-block;
57+
background-color: white;
58+
height: 1px;
59+
overflow: hidden;
60+
position: absolute; }
61+
.chardinjs-tooltip.chardinjs-right:before, .chardinjs-tooltip.chardinjs-left:after {
62+
width: 100px;
63+
top: 50%; }
64+
.chardinjs-tooltip.chardinjs-bottom:before, .chardinjs-tooltip.chardinjs-top:after {
65+
width: 1px;
66+
height: 50px;
67+
left: 50%; }
68+
.chardinjs-tooltip.chardinjs-bottom:before {
69+
top: -50px; }
70+
.chardinjs-tooltip.chardinjs-top:after {
71+
bottom: -50px; }
72+
.chardinjs-tooltip.chardinjs-right:before {
73+
left: -100px; }
74+
.chardinjs-tooltip.chardinjs-left:after {
75+
right: -100px; }
76+
77+
.chardinjs-show-element {
78+
z-index: 9999999;
79+
opacity: 0.8; }
80+
81+
.chardinjs-relative-position {
82+
position: relative; }

‎index.html

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,12 @@
5252
<!-- geosearch -->
5353
<script src="./js/esri-leaflet-geocoder.js"></script>
5454

55+
<!-- chardin.js -->
56+
<script src="./js/chardinjs.min.js"></script>
5557

5658
<!-- Load css-->
5759
<link rel="stylesheet" href="./css/bootstrap-toggle.min.css" />
60+
<link rel="stylesheet" href="./css/chardinjs.css" />
5861
<link rel="stylesheet" href="./css/esri-leaflet-geocoder.css" />
5962
<link rel="stylesheet" href="./css/leaflet.css" />
6063
<link rel="stylesheet" href="./css/simplebar.css">
@@ -178,12 +181,12 @@
178181

179182
<li id="group-button" class="list-group-item">
180183

181-
<input type="checkbox" id="pin-checkbox" unchecked data-toggle="toggle" data-width="139" data-height="10" data-on="Auto Group off"
184+
<input type="checkbox" id="pin-checkbox" unchecked data-toggle="toggle" data-width="139" data-height="10" data-on="Auto Group ON"
182185
data-off="Auto Group off">
183186
</li>
184187
<li id="showclosest-button" class="list-group-item">
185-
<input type="checkbox" title="Turn on the switch to keep" id="leveled-checkbox" unchecked data-toggle="toggle" data-width="139" data-height="10" data-on="Always show POI"
186-
data-off="Show at closest">
188+
<input type="checkbox" id="leveled-checkbox" unchecked data-toggle="toggle" data-width="139" data-height="10" data-on="Show more POI"
189+
data-off="Show less POI">
187190
</li>
188191
</ul>
189192
</div>
@@ -440,25 +443,25 @@ <h4 class="modal-title">
440443
<h4 class="modal-title">
441444
Add new JSON layers
442445
</h4>(
443-
<a id="addnew-tutorial-btn" href="#">Have trouble? Click me</a>)
446+
<a data-position="left" chardin-intro="This is the custom layer adding panel. Make sure your Geojson is valid and enjoy! The system will present the Geojson on the map and the property information in popups." id="addnew-tutorial-btn" href="#">Have trouble? Click me</a>)
444447
</div>
445448
<div class="modal-body">
446449
<ul id="input-collection">
447450
<li>
448451
Layer name:
449-
<input class="form-control" id="name-input" type="text">
452+
<input data-position="right" chardin-intro="Please make sure every layer has a unique name." class="form-control" id="name-input" type="text">
450453
</li>
451454
<li>
452455
Layer type:
453-
<select class="form-control" id="layertype-input">
456+
<select data-position="left" chardin-intro="The category this layer belongs to." class="form-control" id="layertype-input">
454457
<option>Transportation</option>
455458
<option>Environment</option>
456459
<option>SocioEconomic</option>
457460
</select>
458461
</li>
459462
<li>
460463
Data type :
461-
<select class="form-control" id="datatype-input">
464+
<select data-position="right" chardin-intro="The geometry type of this layer." class="form-control" id="datatype-input">
462465
<option>Points</option>
463466
<option>Polylines</option>
464467
<option>Polygons</option>
@@ -467,11 +470,11 @@ <h4 class="modal-title">
467470
<li>
468471
Symbology for points (
469472
<a target="_blank" href="https://fontawesome.com/v4.7.0/icons/" title="Please type in the a single word for the icon. e.g. anchor">Icon dictionary</a>):
470-
<input class="form-control" id="symbol-input" type="text">
473+
<input data-position="left" chardin-intro="This option only applys to points layers. The custom layer supports Awesome fonts icons." class="form-control" id="symbol-input" type="text">
471474
</li>
472475
<li>
473476
Color:
474-
<select class="form-control" id="color-palette">
477+
<select data-position="right" chardin-intro="Select color for the layer." class="form-control" id="color-palette">
475478
<option>red</option>
476479
<option>darkred</option>
477480
<option>orange</option>
@@ -484,12 +487,12 @@ <h4 class="modal-title">
484487
</select>
485488
</li>
486489
</ul>
487-
<div id="drop_zone">Drop files here</div>
490+
<div data-position="bottom" chardin-intro="Drag the geojson file to the rectangle area." id="drop_zone">Drop files here</div>
488491
<output id="fileInfoList"></output>
489492
</div>
490493
<div class="modal-footer">
491494
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
492-
<button type="button" id="confirm-btn" class="btn btn-primary">Add layer</button>
495+
<button data-position="right" chardin-intro="Add this layer to the Layer Control list and enjoy!" type="button" id="confirm-btn" class="btn btn-primary">Add layer</button>
493496
</div>
494497
</div>
495498
<!-- /.modal-content -->

0 commit comments

Comments
 (0)