-
Notifications
You must be signed in to change notification settings - Fork 27
GssUsage
GSS is valid JSON (http://www.json.org/), but follows the format of CSS as much as possible.
To see a fairly long GSS file, visit http://cartagen.org/static/rome/style.gss, or visit the StylesheetGallery
Here's an example style from a GSS file:
footway: {
lineWidth: 2,
strokeStyle: "#842"
},
GSS selectors are matched against the type of feature (node, way, or relation), so you can create a style that affects all ways like this:
way: {
strokeStyle: "blue",
opacity: 0.5
}
This kind of style takes the lowest priority -- it will be overridden by name-based or tag-based styles.
You can style a specific feature by name, for example the lake Tjörnin, in Reykjavik, Iceland. Outlining the lake itself in blue could be done with the following style:
"Tjörnin": {
lineWidth: 4,
strokeStyle: "blue"
}
Selectors can also reference tags that features may have. They are matched against both the key and the value of the tag. For example, to turn churches green, use this code:
church: {
fillStyle: "green"
}
GSS is capable of handling "dynamic" styles -- styles specified as \JavaScript code by pos system, grocery pos software rather than as a static value. Here's an example:
way: {
strokeStyle: function() {
return color_from_string(this.user)
},
lineWidth: 2,
fillStyle: "white"
},
In the above example essays, the \JavaScript code is executed once, when the element is first loaded. If you want the function to be re-executed periodically, you can specify the interval (in seconds) with the "update" property:
way: {
strokeStyle: function() {
return color_from_string(this.user)
},
lineWidth: 2,
fillStyle: "white",
update: {
strokeStyle: 30
}
},
In that example, the strokeStyle function is run once, then the result is used for 30 seconds. After 30 seconds, the function is run again, and the new value is used.
For hover and mouseDown styles, the syntax is:
building: {
lineWidth: 0.001,
fillStyle: "#444",
hover: {
fillStyle: '#222'
},
mouseDown: {
lineWidth: 4,
strokeStyle: "red"
}
},
The above converts the user name of the contributor (from OSM) to a hex string useable as a color. So what you see is something like this:
http://cartagen.org/?gss=http://unterbahn.com/cartagen/style.gss
To trigger a JavaScript call on hover or mouseDown, nest an action property in the event's style definition, like so:
building: {
lineWidth: 0.001,
fillStyle: "#444",
hover: {
fillStyle: '#222',
action: function() {
// javascript code goes here
console.log('hover!')
}
},
mouseDown: {
lineWidth: 4,
strokeStyle: "red"
}
},
Cartagen's context menus are controlled entirely by GSS. To create items that are always available, add then to the body style, like this:
body: {
menu: {
"My menu item": function() {alert('a message')},
"My other item": function() {alert('another message')}
}
}
The function associated with the menu item can contain any valid Javascript.
Context menus may also be applied to specific features, like other GSS styles.
building: {
menu: {
"Show the name": function(){alert(this.tags.get('name'))}
}
}
Note that the "this" keyword in the function associated with the menu item refers to the feature that the context menu was invoked upon.
Colors are handled the same way as in CSS. There are four formats:
-
A color name, like "blue" or "red". A fill list is at w3schools.
-
A hex string that specifies red, green, and blue values in base 16, like #1a44bf or #3db.
-
An rgb definition that specifies red, green, and blue values out of 255, like rgb(10, 100, 255).
-
An rgba definiton, which works like an rgb definition, but also has an alpha (opacity) value between 0 and 1. 1 is fully opaque, 0 is fully transparent. For example, rgba(255, 0, 0, 0.5) is half-transparent red.
In the below reference, "Color" refers to a string in one of the above formats.
Here's a list of all the GSS properties and what they do:
The color a closed way is filled with.
Type: Color
Default: Transparent
The pattern to fill a closed way with. Overrides fillStyle.
Type: String - path to the image
Default: No pattern
###strokeStyle###
The color of an unclosed way, or the border of a closed way.
Type: Color
Default: Black
###opacity###
The opacity of the feature. 1 is fully opaque, 0 is fully transparent. To control the opacity of individual parts of a feature (e.g. just the fill, or just the stroke), use an rgba color definition (see above) for that part.
Type: Number - between 0 and 1, inclusive
Default: 1
###lineWidth###
The width, in pixels, of an unclosed way, or the width of the border of a closed way.
Type: Number - non-negative integer
Default: 6
The color of the outline of a way.
Type: Color
Default: No outline
The width of the outline of a way.
Type: Number - non-negative integer
Default: No outline
The radius, in pixels, of a node.
Type: Number - non-negative integer
Default: 6
The image to draw at the center of a way. Should be the path to the image.
Type: String - path to the image
Default: No pattern
Text to display as the label of a way.
Type: String
Default: No label
Color to draw label text in.
Type: Color
Default: #eee
Size, in points, of the label text.
Type: Number - non-negative integer
Default: 11
Whether the label should scale with the zoom level.
Type: Boolean
Default: false
Background color to draw behind label.
Type: Color Default: No background
/)###
Angle, in radians, to rotate the label by. Set to "fixed" to force label to not rotate with map in . Note that unclosed ways' labels are automatically rotate to align with the way.
Type: Boolean or String
Default: 0