Skip to content

Commit 57608b8

Browse files
mantheymanthey
authored
Merge pull request #662 from OpenGeoscience/blog-lines
Blog lines examples
2 parents d7b72e9 + 697e23f commit 57608b8

File tree

8 files changed

+1041
-3
lines changed

8 files changed

+1041
-3
lines changed

‎examples/blog-lines/example.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"path": "blog-lines",
3+
"title": "Blog entry on line drawing",
4+
"hideNavbar": true,
5+
"exampleCss": ["main.css"],
6+
"exampleJs": ["main.js"],
7+
"about": {
8+
"text": "This is used to show comparisons for the blog post on lines."
9+
},
10+
"disabled": true
11+
}

‎examples/blog-lines/index.jade‎

Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
extends ../common/templates/index.jade
2+
3+
block append mainContent
4+
div#lines_table
5+
table(antialiasing=2)
6+
tr
7+
th(rowspan=2) Feature
8+
th(colspan=3) GeoJS - Current
9+
th(colspan=2) Leaflet
10+
th(rowspan=2) Mapbox GL
11+
th(colspan=2) GeoJS 0.10.5
12+
th GeoJS - Current
13+
tr
14+
th WebGL
15+
th Canvas 2D
16+
th SVG
17+
th Canvas 2D
18+
th SVG
19+
th WebGL
20+
th SVG
21+
th Debug WebGL
22+
tr.option(option='basic')
23+
th Basic Lines
24+
td.geojs(rowspan=2, renderer='vgl')
25+
td.geojs(rowspan=2, renderer='canvas')
26+
td.geojs(rowspan=2, renderer='d3')
27+
td.leaflet(rowspan=2, library='leaflet', renderer='canvas')
28+
td.leaflet(rowspan=2, library='leaflet')
29+
td.mapboxgl(rowspan=2, library='mapboxgl')
30+
td.geojs(rowspan=2, renderer='vgl', version='0.10.5')
31+
td.geojs(rowspan=2, renderer='d3', version='0.10.5')
32+
td.geojs(rowspan=2, renderer='vgl', debug='true')
33+
tr.option(option='basic')
34+
td
35+
p Lines with default options for each rendering method.
36+
tr.option(option='color', strokeColor='yellow,black,red', strokeOpacity=1)
37+
th Varying Color
38+
td.geojs(rowspan=2, renderer='vgl')
39+
td.unsupported(rowspan=2)
40+
td.unsupported(rowspan=2)
41+
td.unsupported(rowspan=2)
42+
td.unsupported(rowspan=2)
43+
td.unsupported(rowspan=2)
44+
td.geojs(rowspan=2, renderer='vgl', version='0.10.5')
45+
td.unsupported(rowspan=2)
46+
td.geojs(rowspan=2, renderer='vgl', debug='true')
47+
tr.option(option='color')
48+
td
49+
p Lines that vary by color from vertex to vertex, cycling through yellow, black, and red.
50+
p On corners, the vertex color is at the far end of the miter. There will probably always be a clear color step along the miter line.
51+
tr.option(option='stroke', strokeOpacity='0.5,1')
52+
th Varying Opacity
53+
td.geojs(rowspan=2, renderer='vgl')
54+
td.unsupported(rowspan=2)
55+
td.unsupported(rowspan=2)
56+
td.unsupported(rowspan=2)
57+
td.unsupported(rowspan=2)
58+
td.unsupported(rowspan=2)
59+
td.geojs(rowspan=2, renderer='vgl', version='0.10.5')
60+
td.unsupported(rowspan=2)
61+
td.geojs(rowspan=2, renderer='vgl', debug='true')
62+
tr.option(option='stroke')
63+
td
64+
p Lines that vary by opacity from vertex to vertex, cycling between 0.5 and 1.
65+
tr.option(option='width', strokeWidth='9,12', link_strokeWidth='36,48')
66+
th Varying Width
67+
td.geojs(rowspan=2, renderer='vgl')
68+
td.unsupported(rowspan=2)
69+
td.unsupported(rowspan=2)
70+
td.unsupported(rowspan=2)
71+
td.unsupported(rowspan=2)
72+
td.unsupported(rowspan=2)
73+
td.geojs(rowspan=2, renderer='vgl', version='0.10.5')
74+
td.unsupported(rowspan=2)
75+
td.geojs(rowspan=2, renderer='vgl', debug='true')
76+
tr.option(option='width')
77+
td
78+
p Lines that vary by width from vertex to vertex, alternating between 6 and 12 pixels.
79+
p On corners, the width is virtually at the far end of the miter.
80+
tr.option(option='offset', strokeOffset=-1)
81+
th Stroke Offset
82+
td.geojs(rowspan=2, renderer='vgl')
83+
td.unsupported(rowspan=2)
84+
td.unsupported(rowspan=2)
85+
td.unsupported(rowspan=2)
86+
td.unsupported(rowspan=2)
87+
td.mapboxgl(rowspan=2, library='mapboxgl')
88+
td.unsupported(rowspan=2)
89+
td.unsupported(rowspan=2)
90+
td.geojs(rowspan=2, renderer='vgl', debug='true')
91+
tr.option(option='offset')
92+
td
93+
p Lines can be offset to one side or the other of center. This can very from vertex to vertex, but is only shown offset all the way to the left here.
94+
p Offset ranges from -1 (left) to +1 (right) along the direction of the stroke. 0 (default) is centered.
95+
tr.option(option='linecap-round', lineCap='round')
96+
th Round Line Cap
97+
td.geojs(rowspan=2, renderer='vgl')
98+
td.geojs(rowspan=2, renderer='canvas')
99+
td.geojs(rowspan=2, renderer='d3')
100+
td.leaflet(rowspan=2, library='leaflet', renderer='canvas')
101+
td.leaflet(rowspan=2, library='leaflet')
102+
td.mapboxgl(rowspan=2, library='mapboxgl')
103+
td.unsupported(rowspan=2)
104+
td.unsupported(rowspan=2)
105+
td.geojs(rowspan=2, renderer='vgl', debug='true')
106+
tr.option(option='linecap-round')
107+
td
108+
p End caps can be 'butt' (default), 'round', or 'square'.
109+
p In GeoJS's WebGL renderer, the end caps can vary by vertex (not shown).
110+
tr.option(option='linecap-square', lineCap='square')
111+
th Square Line Cap
112+
td.geojs(rowspan=2, renderer='vgl')
113+
td.geojs(rowspan=2, renderer='canvas')
114+
td.geojs(rowspan=2, renderer='d3')
115+
td.leaflet(rowspan=2, library='leaflet', renderer='canvas')
116+
td.leaflet(rowspan=2, library='leaflet')
117+
td.mapboxgl(rowspan=2, library='mapboxgl')
118+
td.unsupported(rowspan=2)
119+
td.unsupported(rowspan=2)
120+
td.geojs(rowspan=2, renderer='vgl', debug='true')
121+
tr.option(option='linecap-square')
122+
td
123+
p End caps can be 'butt' (default), 'round', or 'square'.
124+
tr.option(option='linejoin-bevel', lineJoin='bevel')
125+
th Bevel Line Join
126+
td.geojs(rowspan=2, renderer='vgl')
127+
td.geojs(rowspan=2, renderer='canvas')
128+
td.geojs(rowspan=2, renderer='d3')
129+
td.leaflet(rowspan=2, library='leaflet', renderer='canvas')
130+
td.leaflet(rowspan=2, library='leaflet')
131+
td.mapboxgl(rowspan=2, library='mapboxgl')
132+
td.unsupported(rowspan=2)
133+
td.unsupported(rowspan=2)
134+
td.geojs(rowspan=2, renderer='vgl', debug='true')
135+
tr.option(option='linejoin-bevel')
136+
td
137+
p Line joins can be 'miter' (default), 'bevel', 'round', or 'miter-clip'.
138+
p In GeoJS's WebGL renderer, the joins can vary by vertex (not shown).
139+
tr.option(option='linejoin-round', lineJoin='round')
140+
th Round Line Join
141+
td.geojs(rowspan=2, renderer='vgl')
142+
td.geojs(rowspan=2, renderer='canvas')
143+
td.geojs(rowspan=2, renderer='d3')
144+
td.leaflet(rowspan=2, library='leaflet', renderer='canvas')
145+
td.leaflet(rowspan=2, library='leaflet')
146+
td.mapboxgl(rowspan=2, library='mapboxgl')
147+
td.unsupported(rowspan=2)
148+
td.unsupported(rowspan=2)
149+
td.geojs(rowspan=2, renderer='vgl', debug='true')
150+
tr.option(option='linejoin-round')
151+
td
152+
p Line joins can be 'miter' (default), 'bevel', 'round', or 'miter-clip'.
153+
tr.option(option='linejoin-miterclip', lineJoin='miter-clip', miterLimit=4)
154+
th Miter-clip Line Join
155+
td.geojs(rowspan=2, renderer='vgl')
156+
td.unsupported(rowspan=2)
157+
td.unsupported(rowspan=2)
158+
td.unsupported(rowspan=2)
159+
td.unsupported(rowspan=2)
160+
td.unsupported(rowspan=2)
161+
td.unsupported(rowspan=2)
162+
td.unsupported(rowspan=2)
163+
td.geojs(rowspan=2, renderer='vgl', debug='true')
164+
tr.option(option='linejoin-miterclip')
165+
td
166+
p Line joins can be 'miter' (default), 'bevel', 'round', or 'miter-clip'.
167+
p The miter-clip line join is part of a proposed path standard. If the join exceeds the miter limit, it is beveled at that distance rather than right at the join.
168+
tr.option(option='miterlimit', miterLimit=4)
169+
th Miter Limit
170+
td.geojs(rowspan=2, renderer='vgl')
171+
td.geojs(rowspan=2, renderer='canvas')
172+
td.geojs(rowspan=2, renderer='d3')
173+
td.unsupported(rowspan=2)
174+
td.leaflet(rowspan=2, library='leaflet')
175+
td.mapboxgl(rowspan=2, library='mapboxgl')
176+
td.unsupported(rowspan=2)
177+
td.unsupported(rowspan=2)
178+
td.geojs(rowspan=2, renderer='vgl', debug='true')
179+
tr.option(option='miterlimit')
180+
td
181+
p Use a miter limit of 4. Other examples use a miter limit of 10 (except the miter-clip line join).
182+
p Leaflet doesn't expose miter limit directly, but if SVG is used, the paths can be modified to change the miter limit.
183+
tr.option(option='antialiasing0', antialiasing=0)
184+
th Antialiasing of 0
185+
td.geojs(rowspan=2, renderer='vgl')
186+
td.unsupported(rowspan=2)
187+
td.unsupported(rowspan=2)
188+
td.unsupported(rowspan=2)
189+
td.unsupported(rowspan=2)
190+
td.mapboxgl(rowspan=2, library='mapboxgl')
191+
td.unsupported(rowspan=2)
192+
td.unsupported(rowspan=2)
193+
td.geojs(rowspan=2, renderer='vgl', debug='true')
194+
tr.option(option='antialiasing0')
195+
td
196+
p Antialiasing affects how the edges of lines are smoothed. A value of 1 or 2 produces smooth results, 0 hard results, and large values generate a blurred outline.
197+
tr.option(option='antialiasing1-4', antialiasing=6, link_antialiasing=24)
198+
th Antialiasing of 1/2 the line width
199+
td.geojs(rowspan=2, renderer='vgl')
200+
td.unsupported(rowspan=2)
201+
td.unsupported(rowspan=2)
202+
td.unsupported(rowspan=2)
203+
td.unsupported(rowspan=2)
204+
td.mapboxgl(rowspan=2, library='mapboxgl')
205+
td.unsupported(rowspan=2)
206+
td.unsupported(rowspan=2)
207+
td.geojs(rowspan=2, renderer='vgl', debug='true')
208+
tr.option(option='antialiasing1-4')
209+
td
210+
p Antialiasing affects how the edges of lines are smoothed. A value of 1 or 2 produces smooth results, 0 hard results, and large values generate a blurred outline.
211+
tr.option(option='thin-lines', strokeWidth=0.25, referenceLines='false')
212+
th Thin Lines
213+
td.geojs(rowspan=2, renderer='vgl')
214+
td.geojs(rowspan=2, renderer='canvas')
215+
td.geojs(rowspan=2, renderer='d3')
216+
td.leaflet(rowspan=2, library='leaflet', renderer='canvas')
217+
td.leaflet(rowspan=2, library='leaflet')
218+
td.mapboxgl(rowspan=2, library='mapboxgl')
219+
td.geojs(rowspan=2, renderer='vgl', version='0.10.5')
220+
td.geojs(rowspan=2, renderer='d3', version='0.10.5')
221+
td.geojs(rowspan=2, renderer='vgl', debug='true')
222+
tr.option(option='thin-lines')
223+
td
224+
p Comparison of a line width of 0.25 pixels. The reference lines are hidden.
225+
tr.option(option='roads', data='roads', lines=10000, referenceLines='false', strokeWidth=2, strokeOpacity=1, x=-73.7593015, y=42.8496799, zoom=13)
226+
th 10,000 Line Segments
227+
td.geojs(rowspan=2, renderer='vgl')
228+
td.geojs(rowspan=2, renderer='canvas')
229+
td.geojs(rowspan=2, renderer='d3')
230+
td.leaflet(rowspan=2, library='leaflet', renderer='canvas')
231+
td.leaflet(rowspan=2, library='leaflet')
232+
td.mapboxgl(rowspan=2, library='mapboxgl')
233+
td.geojs(rowspan=2, renderer='vgl', version='0.10.5')
234+
td.geojs(rowspan=2, renderer='d3', version='0.10.5')
235+
td.geojs(rowspan=2, renderer='vgl', debug='true')
236+
tr.option(option='roads')
237+
td
238+
p A modest number of line segments from a real-world sample.
239+
div#lines_list
240+
b Compare line drawing between libraries, versions, and rendering methods
241+
div
242+
label(for='feature') Feature
243+
select#feature
244+
div#info
245+
div#main_list
246+
span
247+
div.title GeoJS - Current - WebGL
248+
div.entry
249+
span
250+
div.title GeoJS - Current - Canvas
251+
div.entry
252+
span
253+
div.title GeoJS - Current - SVG
254+
div.entry
255+
span
256+
div.title Leaflet - 1.0.2 - Canvas
257+
div.entry
258+
span
259+
div.title Leaflet - 1.0.2 - SVG
260+
div.entry
261+
span
262+
div.title Mapbox GL - 0.28.0 - WebGL
263+
div.entry
264+
span
265+
div.title GeoJS - 0.10.5 - WebGL
266+
div.entry
267+
span
268+
div.title GeoJS - 0.10.5 - SVG
269+
div.entry
270+
span
271+
div.title GeoJS - Current - Debug WebGL
272+
div.entry
273+

‎examples/blog-lines/main.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
#map {
2+
display: none;
3+
width: 100%;
4+
height: 100%;
5+
}
6+
table {
7+
border-collapse: collapse;
8+
border: 1px solid black;
9+
color: black;
10+
}
11+
table td, table th {
12+
border: 1px solid black !important;
13+
}
14+
table tr th {
15+
min-width: 240px;
16+
text-align: center;
17+
}
18+
.unsupported:after {
19+
content: 'Unsupported';
20+
}
21+
.unsupported {
22+
text-align: center;
23+
}
24+
.leaflet div,.mapbox div {
25+
overflow: hidden;
26+
}
27+
table tr>td:first-child {
28+
padding: 10px;
29+
}
30+
#lines_list {
31+
display: none;
32+
}
33+
#lines_list #info {
34+
min-height: 3.6em;
35+
}
36+
#main_list span {
37+
display: inline-block;
38+
width: 322px;
39+
height: 266px;
40+
overflow: hidden;
41+
}
42+
#main_list span .entry {
43+
border: 1px solid black;
44+
width: 322px;
45+
height: 242px;
46+
}
47+
#main_list span .entry.unsupported {
48+
line-height: 240px;
49+
}
50+
#main_list span .title {
51+
font-weight: bold;
52+
width: 322px;
53+
height: 24px;
54+
}

0 commit comments

Comments
 (0)