Skip to content

Features: repeat distance, allowCrop, multi-color labels, orientation 'auto' and 'flip', turnedText, ... #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Features: repeat distance, allowCrop, multi-color labels, orientation 'auto' and 'flip', turnedText, ... #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6774792
repeat: specify distance in pixels
plepe Dec 21, 2018
903c390
Function _getLength() calculates length of text
plepe Dec 21, 2018
825d7a9
Cache lengths of svg texts for performance reasons
plepe Dec 21, 2018
5058035
Parameter 'allowCrop': whether a label may be cropped or not
plepe Dec 21, 2018
1047f3d
Support labels which consist of several tspans
plepe Dec 22, 2018
239b1bd
Prepare next step: separate rendering of single and repeated labels
plepe Dec 23, 2018
d691920
New option orientation=auto: auto-flip labels, even for part of lines
plepe Dec 23, 2018
8e6a171
Use same code as orientation=auto for orientation=flip
plepe Dec 23, 2018
7244e43
Enable option 'offset: 0' (would be replaced by the value of the path…
plepe Dec 24, 2018
7494e3d
Option 'turnedText': alternative text for east-west lines
plepe Dec 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 21 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,16 +38,35 @@ With a GeoJSON containing lines, it becomes:

```

You can also apply attributes only to parts of the text, e.g. to create multi colored labels:

```javascript
layer.setText([
{ fill: 'red', text: 'Red' },
' '
Copy link

@IvanSanchez IvanSanchez Feb 18, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there's a comma missing here

{ style: 'fill: blue', text: 'Blue' }
])
```

### `text` parameter
The `text` parameter of `setText()` can either be:
* A string: use this string as label
* An object: use value of key 'text' as content (which can be either string, object or array), other key/value pairs as attributes for a `tspan` SVG node.
* An array: The label consists of several parts, where each part can either be a string, an object or an array.

### Options

* `repeat` Specifies if the text should be repeated along the polyline (Default: `false`)
* `repeat` Specifies if the text should be repeated along the polyline (Default: `false`). Specify `repeat` as float to set the distance between each repetition in pixels (will be approximated by spaces).
* `center` Centers the text according to the polyline's bounding box (Default: `false`)
* `below` Show text below the path (Default: false)
* `offset` Set an offset to position text relative to the polyline (Default: 0)
* `orientation` Rotate text. (Default: 0)
- {orientation: angle} - rotate to a specified angle (e.g. {orientation: 15})
- {orientation: flip} - filps the text 180deg correction for upside down text placement on west -> east lines
- {orientation: flip} - flips the text 180deg correction for upside down text placement on west -> east lines
- {orientation: perpendicular} - places text at right angles to the line.
- {orientation: auto} - flips the text on (part of) ways running west to east, so that they are readable upside down.
* `allowCrop` If the line is too short to display the whole text, crop the text. If false, don't show the text at all. (Default: true).
* `turnedText` When orientation=auto is used, use this text for east -> west lines.

* `attributes` Object containing the attributes applied to the `text` tag. Check valid attributes [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text#Attributes) (Default: `{}`)

Expand Down
228 changes: 226 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,9 +186,56 @@
]
};

var rainbowGeom = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
-4.04296875,
17.476432197195518
],
[
-2.8125,
21.12549763660628
],
[
0.3515625,
24.287026865376436
],
[
5.09765625,
25.64152637306577
],
[
11.25,
25.64152637306577
],
[
15.908203125,
23.805449612314625
],
[
18.45703125,
21.289374355860424
],
[
19.86328125,
17.644022027872726
]
]
}
}
]
};

L.geoJson(flightsWE, {
onEachFeature: function (feature, layer) {
layer.setText(feature.properties.flight, {offset: -5});
layer.setText(feature.properties.flight, {offset: -5, repeat: 20, center: true});
},
style: {
weight: 3,
Expand All @@ -199,7 +246,7 @@

L.geoJson(flightsEW, {
onEachFeature: function (feature, layer) {
layer.setText(feature.properties.flight, {offset: -5, orientation: 'flip'});
layer.setText(feature.properties.flight, {offset: -5, orientation: 'flip', allowCrop: false});
},
style: {
weight: 3,
Expand All @@ -208,6 +255,183 @@
}
}).addTo(map);

L.geoJson(rainbowGeom, {
onEachFeature: function (feature, layer) {
layer.setText(
[
{ fill: '#ff0000', text: 'R' },
{ fill: '#ff7f00', text: 'a' },
{ fill: '#ffff00', text: 'i' },
{ fill: '#00ff00', text: 'n' },
{ fill: '#008f8f', text: 'b' },
{ fill: '#0000ff', text: 'o' },
{ fill: '#8b00ff', text: 'w' },
],
{
offset: -5,
repeat: 20,
center: true,
attributes: { 'font-size': '16pt', 'font-weight': 'bold', 'stroke-width': 0.5, 'stroke': '#000000' }
}
);
},
style: {
weight: 2,
color: 'black'
}
}).addTo(map);

var road = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
33.3984375,
29.53522956294847
],
[
26.894531249999996,
28.613459424004414
],
[
24.960937499999996,
27.994401411046148
],
[
23.5546875,
25.3241665257384
],
[
23.291015625,
22.836945920943855
],
[
23.642578125,
20.3034175184893
],
[
25.13671875,
18.729501999072138
],
[
28.4765625,
18.145851771694467
],
[
33.75,
17.811456088564483
],
[
40.95703125,
16.636191878397664
],
[
41.748046875,
14.774882506516272
],
[
41.572265625,
11.695272733029402
],
[
36.73828124999999,
10.574222078332806
],
[
31.113281249999996,
9.362352822055605
],
[
24.521484375,
8.494104537551882
],
[
22.67578125,
11.609193407938953
],
[
19.599609375,
13.496472765758952
],
[
15.8203125,
11.26461221250444
],
[
15.908203125,
5.7908968128719565
],
[
18.720703125,
1.7575368113083254
],
[
22.8515625,
-0.5273363048115043
],
[
27.421875,
-0.17578097424708533
],
[
30.05859375,
4.039617826768437
],
[
31.201171875,
6.664607562172573
],
[
36.650390625,
7.536764322084078
],
[
39.7265625,
4.653079918274051
]
]
}
}
]
};

// casing
L.geoJson(road, {
style: {
weight: 13,
color: 'black'
}
}).addTo(map);
// road + label
L.geoJson(road, {
onEachFeature: function (feature, layer) {
layer.setText(
[ 'Road', { text: ' ⯈', fill: 'red' } ],
{
repeat: 20,
center: true,
offset: 0,
orientation: 'auto',
attributes: {
'font-size': '8pt',
'font-weight': 'bold',
'dominant-baseline': 'middle',
},
turnedText: [ { text: '⯇ ', fill: 'blue' }, 'Road' ],
}
);
},
style: {
weight: 10,
color: 'white'
}
}).addTo(map);

var pos1 = [40.418075, -3.704643],
pos2 = [40.413119, -3.702369];
var line = L.polyline([pos1, pos2]);
Expand Down
Loading