Which style options are available for polylines in Leaflet?How to copy the color styling to a color column in...
Multiple null checks in Java 8
Is there any way to play D&D without a DM?
What is an explicit bijection in combinatorics?
Isn't a semicolon (';') needed after a function declaration in C++?
Why does this quiz question say that protons and electrons do not combine to form neutrons?
How can I handle players killing my NPC outside of combat?
What sort of grammatical construct is ‘Quod per sortem sternit fortem’?
Python to write multiple dataframes and highlight rows inside an excel file
What could cause an entire planet of humans to become aphasic?
Can you say "leftside right"?
Buying a "Used" Router
Disk space full during insert, what happens?
Is there a configuration of the 8-puzzle where locking a tile makes it harder?
What is an efficient way to digitize a family photo collection?
Why does a single AND gate need 60 transistors?
C++ range based loop with special case for first item?
Why don't you get burned by the wood benches in a sauna?
Converting numbers to words - Python
bash aliases do not expand even with shopt expand_aliases
Integer but not Laurent sequences
What is the Buddhist view in Socratic questioning?
Missing a connection and don't have money to book next flight
Resorting data from a multidimensional list
What is formjacking?
Which style options are available for polylines in Leaflet?
How to copy the color styling to a color column in a layer's attribute table?Which are the Geojson css style properties for mapbox.js?Guidance when to style your features in Tilemill vs. Leaflet?leaflet layer control checkbox options min/maxleaflet-omnivore style functionAdd multiple strokes to Leaflet geojson feature pathDifferent Leaflet fillcolors for different layersHow to get overlapping polylines displayed correctly in Leaflet?Leflet js style geojson layer according to zoom levelStyling individual features in a GeoJSON layer
I added a polyline layer as GeoJSON within Leaflet and want to style it.
The following options to set the style I could find (and which work) are:
- color
- weight
- opacity
What are other available options, is it possible to add a border around the line?
javascript leaflet geojson style line
asked Jun 25 '17 at 11:27
the_chimpthe_chimp
355315
add a comment |
I added a polyline layer as GeoJSON within Leaflet and want to style it.
The following options to set the style I could find (and which work) are:
- color
- weight
- opacity
What are other available options, is it possible to add a border around the line?
javascript leaflet geojson style line
asked Jun 25 '17 at 11:27
the_chimpthe_chimp
355315
add a comment |
I added a polyline layer as GeoJSON within Leaflet and want to style it.
The following options to set the style I could find (and which work) are:
- color
- weight
- opacity
What are other available options, is it possible to add a border around the line?
javascript leaflet geojson style line
asked Jun 25 '17 at 11:27
the_chimpthe_chimp
355315
I added a polyline layer as GeoJSON within Leaflet and want to style it.
The following options to set the style I could find (and which work) are:
- color
- weight
- opacity
What are other available options, is it possible to add a border around the line?
javascript leaflet geojson style line
javascript leaflet geojson style line
asked Jun 25 '17 at 11:27
the_chimpthe_chimp
355315
asked Jun 25 '17 at 11:27
the_chimpthe_chimp
355315
asked Jun 25 '17 at 11:27
the_chimpthe_chimp
355315
asked Jun 25 '17 at 11:27
the_chimpthe_chimp
355315
asked Jun 25 '17 at 11:27
the_chimpthe_chimp
355315
355315
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
The available options for styling L.Polylines are clearly documented in the Leaflet API reference. Please note that styling options are common with circles, polygons and any other paths, and so appear as "Options inherited from L.Path".
Is it possible to add a border around the line?
No, it's not possible.
Depending on your needs, you might want to either buffer the line, or to display the line twice, displaying the heavier stroke underneath to serve as a "casing" of sorts.
answered Jun 25 '17 at 15:57
IvanSanchezIvanSanchez
5,9731619
thanks! The option with the buffer sounds good - how can it be done? I only found quite complicated methods to apply it, is there an built-in function provided by Leaflet?
– the_chimp
Jun 25 '17 at 17:03
add a comment |
This seems to be a highly ranked result on search engines so I thought I would stop in and update + add to it.
The Leaflet documentation seems to have been updated since the original answer was provided (v1.03 vs v1.40 at the time of this posting), but even then the documentation on polylines hasn't ever identified any style options outside of the 3 used in the example (that the OP mentions). That makes finding the rest of the options somewhat time consuming. Those options are actually inherited from Path and that's where you'll find the documentation on them. I've attached an image of the options available and tested as many of them as I could to see if they work (2nd column), but only in so far as my current project can make use of them.
NOTE the last item, 'className'. This will allow you to set a CSS class name and use CSS (or SASS) to style your Polyline instead of hard coding it. It should also be noted that CSS rules seem to override the Leaflet style options you configure in your code. Unfortunately, that still doesn't get you borders, ie. border: 1px solid red; doesn't work. This is due to the fact that these aren't HTML elements, but rather SVG.
SVG doesn't recognize the concept of a "border" aka a line around an object. A Polyline is already a "line". SVG does recognize the concept of fill and stroke, however, which can be used to achieve a border-like effect. If you draw a polygon around the polyline and set the stroke to your desired border style and the fill color to your desired line color you'll get a "border". You can read more on that approach here: https://stackoverflow.com/questions/36132689/how-to-convert-polyline-with-weight-to-polygon-in-leaflet
And in text those Path options are:
- stroke
- color
- weight
- opacity
- lineCap
- lineJoin
- dashArray
- dashOffset
- fill
- fillColor
- fillOpacity
- fillRule
- bubblingMouseEvents
- renderer
- className
answered 8 mins ago
StrixyStrixy
1011
New contributor
Strixy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "79"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f245287%2fwhich-style-options-are-available-for-polylines-in-leaflet%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The available options for styling L.Polylines are clearly documented in the Leaflet API reference. Please note that styling options are common with circles, polygons and any other paths, and so appear as "Options inherited from L.Path".
Is it possible to add a border around the line?
No, it's not possible.
Depending on your needs, you might want to either buffer the line, or to display the line twice, displaying the heavier stroke underneath to serve as a "casing" of sorts.
answered Jun 25 '17 at 15:57
IvanSanchezIvanSanchez
5,9731619
thanks! The option with the buffer sounds good - how can it be done? I only found quite complicated methods to apply it, is there an built-in function provided by Leaflet?
– the_chimp
Jun 25 '17 at 17:03
add a comment |
The available options for styling L.Polylines are clearly documented in the Leaflet API reference. Please note that styling options are common with circles, polygons and any other paths, and so appear as "Options inherited from L.Path".
Is it possible to add a border around the line?
No, it's not possible.
Depending on your needs, you might want to either buffer the line, or to display the line twice, displaying the heavier stroke underneath to serve as a "casing" of sorts.
answered Jun 25 '17 at 15:57
IvanSanchezIvanSanchez
5,9731619
thanks! The option with the buffer sounds good - how can it be done? I only found quite complicated methods to apply it, is there an built-in function provided by Leaflet?
– the_chimp
Jun 25 '17 at 17:03
add a comment |
The available options for styling L.Polylines are clearly documented in the Leaflet API reference. Please note that styling options are common with circles, polygons and any other paths, and so appear as "Options inherited from L.Path".
Is it possible to add a border around the line?
No, it's not possible.
Depending on your needs, you might want to either buffer the line, or to display the line twice, displaying the heavier stroke underneath to serve as a "casing" of sorts.
answered Jun 25 '17 at 15:57
IvanSanchezIvanSanchez
5,9731619
The available options for styling L.Polylines are clearly documented in the Leaflet API reference. Please note that styling options are common with circles, polygons and any other paths, and so appear as "Options inherited from L.Path".
Is it possible to add a border around the line?
No, it's not possible.
Depending on your needs, you might want to either buffer the line, or to display the line twice, displaying the heavier stroke underneath to serve as a "casing" of sorts.
answered Jun 25 '17 at 15:57
IvanSanchezIvanSanchez
5,9731619
answered Jun 25 '17 at 15:57
IvanSanchezIvanSanchez
5,9731619
answered Jun 25 '17 at 15:57
IvanSanchezIvanSanchez
5,9731619
answered Jun 25 '17 at 15:57
IvanSanchezIvanSanchez
5,9731619
5,9731619
thanks! The option with the buffer sounds good - how can it be done? I only found quite complicated methods to apply it, is there an built-in function provided by Leaflet?
– the_chimp
Jun 25 '17 at 17:03
add a comment |
thanks! The option with the buffer sounds good - how can it be done? I only found quite complicated methods to apply it, is there an built-in function provided by Leaflet?
– the_chimp
Jun 25 '17 at 17:03
thanks! The option with the buffer sounds good - how can it be done? I only found quite complicated methods to apply it, is there an built-in function provided by Leaflet?
– the_chimp
Jun 25 '17 at 17:03
thanks! The option with the buffer sounds good - how can it be done? I only found quite complicated methods to apply it, is there an built-in function provided by Leaflet?
– the_chimp
Jun 25 '17 at 17:03
add a comment |
This seems to be a highly ranked result on search engines so I thought I would stop in and update + add to it.
The Leaflet documentation seems to have been updated since the original answer was provided (v1.03 vs v1.40 at the time of this posting), but even then the documentation on polylines hasn't ever identified any style options outside of the 3 used in the example (that the OP mentions). That makes finding the rest of the options somewhat time consuming. Those options are actually inherited from Path and that's where you'll find the documentation on them. I've attached an image of the options available and tested as many of them as I could to see if they work (2nd column), but only in so far as my current project can make use of them.
NOTE the last item, 'className'. This will allow you to set a CSS class name and use CSS (or SASS) to style your Polyline instead of hard coding it. It should also be noted that CSS rules seem to override the Leaflet style options you configure in your code. Unfortunately, that still doesn't get you borders, ie. border: 1px solid red; doesn't work. This is due to the fact that these aren't HTML elements, but rather SVG.
SVG doesn't recognize the concept of a "border" aka a line around an object. A Polyline is already a "line". SVG does recognize the concept of fill and stroke, however, which can be used to achieve a border-like effect. If you draw a polygon around the polyline and set the stroke to your desired border style and the fill color to your desired line color you'll get a "border". You can read more on that approach here: https://stackoverflow.com/questions/36132689/how-to-convert-polyline-with-weight-to-polygon-in-leaflet
And in text those Path options are:
- stroke
- color
- weight
- opacity
- lineCap
- lineJoin
- dashArray
- dashOffset
- fill
- fillColor
- fillOpacity
- fillRule
- bubblingMouseEvents
- renderer
- className
answered 8 mins ago
StrixyStrixy
1011
New contributor
Strixy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
This seems to be a highly ranked result on search engines so I thought I would stop in and update + add to it.
The Leaflet documentation seems to have been updated since the original answer was provided (v1.03 vs v1.40 at the time of this posting), but even then the documentation on polylines hasn't ever identified any style options outside of the 3 used in the example (that the OP mentions). That makes finding the rest of the options somewhat time consuming. Those options are actually inherited from Path and that's where you'll find the documentation on them. I've attached an image of the options available and tested as many of them as I could to see if they work (2nd column), but only in so far as my current project can make use of them.
NOTE the last item, 'className'. This will allow you to set a CSS class name and use CSS (or SASS) to style your Polyline instead of hard coding it. It should also be noted that CSS rules seem to override the Leaflet style options you configure in your code. Unfortunately, that still doesn't get you borders, ie. border: 1px solid red; doesn't work. This is due to the fact that these aren't HTML elements, but rather SVG.
SVG doesn't recognize the concept of a "border" aka a line around an object. A Polyline is already a "line". SVG does recognize the concept of fill and stroke, however, which can be used to achieve a border-like effect. If you draw a polygon around the polyline and set the stroke to your desired border style and the fill color to your desired line color you'll get a "border". You can read more on that approach here: https://stackoverflow.com/questions/36132689/how-to-convert-polyline-with-weight-to-polygon-in-leaflet
And in text those Path options are:
- stroke
- color
- weight
- opacity
- lineCap
- lineJoin
- dashArray
- dashOffset
- fill
- fillColor
- fillOpacity
- fillRule
- bubblingMouseEvents
- renderer
- className
answered 8 mins ago
StrixyStrixy
1011
New contributor
Strixy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
This seems to be a highly ranked result on search engines so I thought I would stop in and update + add to it.
The Leaflet documentation seems to have been updated since the original answer was provided (v1.03 vs v1.40 at the time of this posting), but even then the documentation on polylines hasn't ever identified any style options outside of the 3 used in the example (that the OP mentions). That makes finding the rest of the options somewhat time consuming. Those options are actually inherited from Path and that's where you'll find the documentation on them. I've attached an image of the options available and tested as many of them as I could to see if they work (2nd column), but only in so far as my current project can make use of them.
NOTE the last item, 'className'. This will allow you to set a CSS class name and use CSS (or SASS) to style your Polyline instead of hard coding it. It should also be noted that CSS rules seem to override the Leaflet style options you configure in your code. Unfortunately, that still doesn't get you borders, ie. border: 1px solid red; doesn't work. This is due to the fact that these aren't HTML elements, but rather SVG.
SVG doesn't recognize the concept of a "border" aka a line around an object. A Polyline is already a "line". SVG does recognize the concept of fill and stroke, however, which can be used to achieve a border-like effect. If you draw a polygon around the polyline and set the stroke to your desired border style and the fill color to your desired line color you'll get a "border". You can read more on that approach here: https://stackoverflow.com/questions/36132689/how-to-convert-polyline-with-weight-to-polygon-in-leaflet
And in text those Path options are:
- stroke
- color
- weight
- opacity
- lineCap
- lineJoin
- dashArray
- dashOffset
- fill
- fillColor
- fillOpacity
- fillRule
- bubblingMouseEvents
- renderer
- className
answered 8 mins ago
StrixyStrixy
1011
New contributor
Strixy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
This seems to be a highly ranked result on search engines so I thought I would stop in and update + add to it.
The Leaflet documentation seems to have been updated since the original answer was provided (v1.03 vs v1.40 at the time of this posting), but even then the documentation on polylines hasn't ever identified any style options outside of the 3 used in the example (that the OP mentions). That makes finding the rest of the options somewhat time consuming. Those options are actually inherited from Path and that's where you'll find the documentation on them. I've attached an image of the options available and tested as many of them as I could to see if they work (2nd column), but only in so far as my current project can make use of them.
NOTE the last item, 'className'. This will allow you to set a CSS class name and use CSS (or SASS) to style your Polyline instead of hard coding it. It should also be noted that CSS rules seem to override the Leaflet style options you configure in your code. Unfortunately, that still doesn't get you borders, ie. border: 1px solid red; doesn't work. This is due to the fact that these aren't HTML elements, but rather SVG.
SVG doesn't recognize the concept of a "border" aka a line around an object. A Polyline is already a "line". SVG does recognize the concept of fill and stroke, however, which can be used to achieve a border-like effect. If you draw a polygon around the polyline and set the stroke to your desired border style and the fill color to your desired line color you'll get a "border". You can read more on that approach here: https://stackoverflow.com/questions/36132689/how-to-convert-polyline-with-weight-to-polygon-in-leaflet
And in text those Path options are:
- stroke
- color
- weight
- opacity
- lineCap
- lineJoin
- dashArray
- dashOffset
- fill
- fillColor
- fillOpacity
- fillRule
- bubblingMouseEvents
- renderer
- className
answered 8 mins ago
StrixyStrixy
1011
New contributor
Strixy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 8 mins ago
StrixyStrixy
1011
New contributor
Strixy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 8 mins ago
StrixyStrixy
1011
answered 8 mins ago
StrixyStrixy
1011
1011
New contributor
Strixy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Strixy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Strixy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
Thanks for contributing an answer to Geographic Information Systems Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f245287%2fwhich-style-options-are-available-for-polylines-in-leaflet%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
