Skip to content

Commit 513b7db

Browse files
balladanielballadaniel
committed
updates for Examples
1 parent c8516c4 commit 513b7db

File tree

8 files changed

+48
-27
lines changed

8 files changed

+48
-27
lines changed

‎examples/banner.png

680 KB
Loading

‎examples/combined.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -182,19 +182,22 @@
182182
infopanel.onAdd = function (map) {
183183
var div = L.DomUtil.create('div', 'info');
184184
div.innerHTML +=
185-
'<div style="display: flex; flex-direction: column; max-width: 500px; text-align: center;">' +
185+
'<div style="display: flex; flex-direction: column; max-width: 500px; text-align: center; row-gap: 8px">' +
186186
'<div style="font-weight: bold; margin-bottom: 5px;">' +
187187
'Leaflet-dataclassification plugin demo page: "combined"' +
188188
'</div>'+
189-
'<div style="justify-content: center; ">' +
189+
'<div style="text-align: justify">' +
190190
'This is an example page showcasing some of the features of Leaflet plugin <i>leaflet-dataclassification</i> for three layers simultaneously. '+
191191
'Feature tooltips on hover (native feature of Leaflet) were added to provide an easy check of attribute values used. '+
192192
'<br><i>Note: population density for North Dakota has been manually removed to showcase handling of Null data (nodata) in feature attributes.</i>'+
193193
'<br><br>'+
194+
'</div>'+
195+
'<div>'+
194196
'Single-step data classification, symbology and legend creation for GeoJSON data powered thematic maps.'+
195197
'<br><br>'+
196-
'Project page: <a href="https://github.com/balladaniel/leaflet-dataclassification">https://github.com/balladaniel/leaflet-dataclassification</a>'
198+
'Project page: <a href="https://github.com/balladaniel/leaflet-dataclassification">https://github.com/balladaniel/leaflet-dataclassification</a>'+
197199
'</div>'+
200+
'<a href="https://github.com/balladaniel/leaflet-dataclassification" target="_blank"><img src="banner.png" style="max-width: 100%;"></img></a>'+
198201
'</div>';
199202
return div;
200203
}

‎examples/lines_c.html

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -102,18 +102,21 @@
102102
infopanel.onAdd = function (map) {
103103
var div = L.DomUtil.create('div', 'info');
104104
div.innerHTML +=
105-
'<div style="display: flex; flex-direction: column; max-width: 500px; text-align: center;">' +
106-
'<div style="font-weight: bold; margin-bottom: 5px;">' +
105+
'<div style="display: flex; flex-direction: column; max-width: 500px; text-align: center; row-gap: 8px">' +
106+
'<div style="font-weight: bold;">' +
107107
'Leaflet-dataclassification plugin demo page: "lines_color"' +
108108
'</div>'+
109-
'<div style="justify-content: center; ">' +
109+
'<div style="text-align: justify">' +
110110
'This is an example page showcasing some of the features of Leaflet plugin <i>leaflet-dataclassification</i>. '+
111111
'Feature tooltips on hover (native feature of Leaflet) were added to provide an easy check of attribute values used. '+
112112
'<br><br>'+
113+
'</div>'+
114+
'<div>'+
113115
'Single-step data classification, symbology and legend creation for GeoJSON data powered thematic maps.'+
114116
'<br><br>'+
115-
'Project page: <a href="https://github.com/balladaniel/leaflet-dataclassification">https://github.com/balladaniel/leaflet-dataclassification</a>'
117+
'Project page: <a href="https://github.com/balladaniel/leaflet-dataclassification">https://github.com/balladaniel/leaflet-dataclassification</a>'+
116118
'</div>'+
119+
'<a href="https://github.com/balladaniel/leaflet-dataclassification"><img src="banner.png" style="max-width: 100%;"></img></a>'+
117120
'</div>';
118121
return div;
119122
}

‎examples/lines_w.html

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -130,18 +130,21 @@
130130
infopanel.onAdd = function (map) {
131131
var div = L.DomUtil.create('div', 'info');
132132
div.innerHTML +=
133-
'<div style="display: flex; flex-direction: column; max-width: 500px; text-align: center;">' +
134-
'<div style="font-weight: bold; margin-bottom: 5px;">' +
133+
'<div style="display: flex; flex-direction: column; max-width: 500px; text-align: center; row-gap: 8px">' +
134+
'<div style="font-weight: bold">' +
135135
'Leaflet-dataclassification plugin demo page: "lines_width"' +
136136
'</div>'+
137-
'<div style="justify-content: center; ">' +
137+
'<div style="text-align: justify">' +
138138
'This is an example page showcasing some of the features of Leaflet plugin <i>leaflet-dataclassification</i>. '+
139139
'Feature tooltips on hover and feature highlighting (native features of Leaflet) were added to provide an easy check of attribute values used. '+
140140
'<br><br>'+
141+
'</div>'+
142+
'<div>'+
141143
'Single-step data classification, symbology and legend creation for GeoJSON data powered thematic maps.'+
142144
'<br><br>'+
143-
'Project page: <a href="https://github.com/balladaniel/leaflet-dataclassification">https://github.com/balladaniel/leaflet-dataclassification</a>'
145+
'Project page: <a href="https://github.com/balladaniel/leaflet-dataclassification">https://github.com/balladaniel/leaflet-dataclassification</a>'+
144146
'</div>'+
147+
'<a href="https://github.com/balladaniel/leaflet-dataclassification"><img src="banner.png" style="max-width: 100%;"></img></a>'+
145148
'</div>';
146149
return div;
147150
}

‎examples/points_c.html

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -100,18 +100,21 @@
100100
infopanel.onAdd = function (map) {
101101
var div = L.DomUtil.create('div', 'info');
102102
div.innerHTML +=
103-
'<div style="display: flex; flex-direction: column; max-width: 500px; text-align: center;">' +
104-
'<div style="font-weight: bold; margin-bottom: 5px;">' +
103+
'<div style="display: flex; flex-direction: column; max-width: 500px; text-align: center; row-gap: 8px">' +
104+
'<div style="font-weight: bold;">' +
105105
'Leaflet-dataclassification plugin demo page: "points_color"' +
106106
'</div>'+
107-
'<div style="justify-content: center; ">' +
107+
'<div style="text-align: justify">' +
108108
'This is an example page showcasing some of the features of Leaflet plugin <i>leaflet-dataclassification</i>. '+
109109
'Feature tooltips on hover (native feature of Leaflet) were added to provide an easy check of attribute values used. '+
110110
'<br><br>'+
111+
'</div>'+
112+
'<div>'+
111113
'Single-step data classification, symbology and legend creation for GeoJSON data powered thematic maps.'+
112114
'<br><br>'+
113-
'Project page: <a href="https://github.com/balladaniel/leaflet-dataclassification">https://github.com/balladaniel/leaflet-dataclassification</a>'
115+
'Project page: <a href="https://github.com/balladaniel/leaflet-dataclassification">https://github.com/balladaniel/leaflet-dataclassification</a>'+
114116
'</div>'+
117+
'<a href="https://github.com/balladaniel/leaflet-dataclassification"><img src="banner.png" style="max-width: 100%;"></img></a>'+
115118
'</div>';
116119
return div;
117120
}

‎examples/points_s.html

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -104,18 +104,21 @@
104104
infopanel.onAdd = function (map) {
105105
var div = L.DomUtil.create('div', 'info');
106106
div.innerHTML +=
107-
'<div style="display: flex; flex-direction: column; max-width: 500px; text-align: center;">' +
108-
'<div style="font-weight: bold; margin-bottom: 5px;">' +
107+
'<div style="display: flex; flex-direction: column; max-width: 500px; text-align: center; row-gap: 8px;">' +
108+
'<div style="font-weight: bold;">' +
109109
'Leaflet-dataclassification plugin demo page: "points_size"' +
110110
'</div>'+
111-
'<div style="justify-content: center; ">' +
111+
'<div style="text-align: justify">' +
112112
'This is an example page showcasing some of the features of Leaflet plugin <i>leaflet-dataclassification</i>. '+
113113
'Feature tooltips on hover (native feature of Leaflet) were added to provide an easy check of attribute values used. '+
114114
'<br><br>'+
115+
'</div>'+
116+
'<div style="text-align: center">'+
115117
'Single-step data classification, symbology and legend creation for GeoJSON data powered thematic maps.'+
116118
'<br><br>'+
117-
'Project page: <a href="https://github.com/balladaniel/leaflet-dataclassification">https://github.com/balladaniel/leaflet-dataclassification</a>'
119+
'Project page: <a href="https://github.com/balladaniel/leaflet-dataclassification">https://github.com/balladaniel/leaflet-dataclassification</a>'+
118120
'</div>'+
121+
'<a href="https://github.com/balladaniel/leaflet-dataclassification"><img src="banner.png" style="max-width: 100%;"></img></a>'+
119122
'</div>';
120123
return div;
121124
}

‎examples/polygons_c.html

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -111,19 +111,22 @@
111111
infopanel.onAdd = function (map) {
112112
var div = L.DomUtil.create('div', 'info');
113113
div.innerHTML +=
114-
'<div style="display: flex; flex-direction: column; max-width: 500px; text-align: center;">' +
115-
'<div style="font-weight: bold; margin-bottom: 5px;">' +
114+
'<div style="display: flex; flex-direction: column; max-width: 500px; text-align: center; row-gap: 8px"">' +
115+
'<div style="font-weight: bold;">' +
116116
'Leaflet-dataclassification plugin demo page: "polygons_color"' +
117117
'</div>'+
118-
'<div style="justify-content: center; ">' +
118+
'<div style="text-align: justify">' +
119119
'This is an example page showcasing some of the features of Leaflet plugin <i>leaflet-dataclassification</i>. '+
120120
'The attribute values are normalized on-the-go by an other field, based on which the classification is done. '+
121121
'Feature tooltips on hover (native feature of Leaflet) were added to provide an easy check of both source and normalized values. '+
122122
'<br><br>'+
123+
'</div>'+
124+
'<div>'+
123125
'Single-step data classification, symbology and legend creation for GeoJSON data powered thematic maps.'+
124126
'<br><br>'+
125-
'Project page: <a href="https://github.com/balladaniel/leaflet-dataclassification">https://github.com/balladaniel/leaflet-dataclassification</a>'
127+
'Project page: <a href="https://github.com/balladaniel/leaflet-dataclassification">https://github.com/balladaniel/leaflet-dataclassification</a>'+
126128
'</div>'+
129+
'<a href="https://github.com/balladaniel/leaflet-dataclassification"><img src="banner.png" style="max-width: 100%;"></img></a>'+
127130
'</div>';
128131
return div;
129132
}

‎examples/polygons_h.html

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -124,18 +124,21 @@
124124
infopanel.onAdd = function (map) {
125125
var div = L.DomUtil.create('div', 'info');
126126
div.innerHTML +=
127-
'<div style="display: flex; flex-direction: column; max-width: 500px; text-align: center;">' +
128-
'<div style="font-weight: bold; margin-bottom: 5px;">' +
127+
'<div style="display: flex; flex-direction: column; max-width: 500px; text-align: center; row-gap: 8px">' +
128+
'<div style="font-weight: bold;">' +
129129
'Leaflet-dataclassification plugin demo page: "polygons_hatch"' +
130130
'</div>'+
131-
'<div style="justify-content: center; ">' +
131+
'<div style="text-align: justify">' +
132132
'This is an example page showcasing some of the features of Leaflet plugin <i>leaflet-dataclassification</i>. '+
133133
'Feature tooltips on hover (native feature of Leaflet) were added to provide an easy check of attribute values used. '+
134134
'<br><br>'+
135+
'</div>'+
136+
'<div>'+
135137
'Single-step data classification, symbology and legend creation for GeoJSON data powered thematic maps.'+
136138
'<br><br>'+
137-
'Project page: <a href="https://github.com/balladaniel/leaflet-dataclassification">https://github.com/balladaniel/leaflet-dataclassification</a>'
139+
'Project page: <a href="https://github.com/balladaniel/leaflet-dataclassification">https://github.com/balladaniel/leaflet-dataclassification</a>'+
138140
'</div>'+
141+
'<a href="https://github.com/balladaniel/leaflet-dataclassification"><img src="banner.png" style="max-width: 100%;"></img></a>'+
139142
'</div>';
140143
return div;
141144
}

0 commit comments

Comments
 (0)