39

As far as I can see there is nothing in the GeoJSON standard to store styling information, i.e. line colours, thicknesses etc.

Am I missing something or is this just something that GeoJSON doesn't deal with?

Improve this question

4 Answers 4

Reset to default
32

For GeoJSON - CSS styles are used to modify your points, line, polygons with thickness & color 

{ 
    "type": "Feature",
    "geometry": {
    "type": "Polygon",
    "coordinates": [[
        [-180.0, 10.0], [20.0, 90.0], [180.0, -5.0], [-30.0, -90.0]
        ]]
    },
    "style": {
        "__comment": "all SVG styles allowed",
        "fill":"red",
        "stroke-width":"3",
        "fill-opacity":0.6
    },
    "className": {
        "baseVal":"A class name"
    }
}

http://wiki.openstreetmap.org/wiki/Geojson_CSS

Improve this answer
9
  • 1
    This doesn't appear to be part of the GeoJSON spec. Is this a common implementation?
    – Mr_Chimp
    Commented Mar 29, 2012 at 13:45
  • 1
    yes common common implementation, that works - GeoJOSN is a 'geospatial data interchange format'
    – Mapperz ♦
    Commented Mar 29, 2012 at 14:17
  • a bit of topic, but is this geoson_css related to carto mapbox.com/carto
    – Francisco Puga
    Commented Mar 29, 2012 at 15:11
  • 9
    That isn't a standard thing and each implementation is going to do this differently.
    – Calvin
    Commented May 17, 2013 at 10:11
  • 3
    QGis (which uses GDAL under the hood) and geojsonlint.com, to name 2 examples, throw errors when using the "style" attribute.
    – Marian
    Commented Oct 17, 2013 at 14:11
20

These days there is Mapbox's SimpleStyle.

"properties": {
        // OPTIONAL: default ""
        // A title to show when this item is clicked or
        // hovered over
        "title": "A title",

        // OPTIONAL: default ""
        // A description to show when this item is clicked or
        // hovered over
        "description": "A description",

        // OPTIONAL: default "medium"
        // specify the size of the marker. sizes
        // can be different pixel sizes in different
        // implementations
        // Value must be one of
        // "small"
        // "medium"
        // "large"
        "marker-size": "medium",

        // OPTIONAL: default ""
        // a symbol to position in the center of this icon
        // if not provided or "", no symbol is overlaid
        // and only the marker is shown
        // Allowed values include
        // - Icon ID from the Maki project at http://mapbox.com/maki/
        // - An integer 0 through 9
        // - A lowercase character "a" through "z"
        "marker-symbol": "bus",

        // OPTIONAL: default "7e7e7e"
        // the marker's color
        //
        // value must follow COLOR RULES
        "marker-color": "#fff",

        // OPTIONAL: default "555555"
        // the color of a line as part of a polygon, polyline, or
        // multigeometry
        //
        // value must follow COLOR RULES
        "stroke": "#555555",

        // OPTIONAL: default 1.0
        // the opacity of the line component of a polygon, polyline, or
        // multigeometry
        //
        // value must be a floating point number greater than or equal to
        // zero and less or equal to than one
        "stroke-opacity": 1.0,

        // OPTIONAL: default 2
        // the width of the line component of a polygon, polyline, or
        // multigeometry
        //
        // value must be a floating point number greater than or equal to 0
        "stroke-width": 2,

        // OPTIONAL: default "555555"
        // the color of the interior of a polygon
        //
        // value must follow COLOR RULES
        "fill": "#555555",

        // OPTIONAL: default 0.6
        // the opacity of the interior of a polygon. implementations
        // may choose to set this to 0 for line features.
        //
        // value must be a floating point number greater than or equal to
        // zero and less or equal to than one
        "fill-opacity": 0.5
    }
Improve this answer
2
  • The styling attributes in the spec are also properties, so should always work wherever geoJSON is expected.
    – Abbafei
    Commented Oct 7, 2016 at 3:23
  • This styling is also used by Github's geojson rendering (which is built on leaflet): help.github.com/en/articles/…
    – Ariel Allon
    Commented Jun 13, 2019 at 15:35
6

GeoJSON doesn't deal with this. Any style information is going to depend on what the renderer is, Geojson CSS seams to target SVG but you also have Carto which targets mapnik, do remember that you can add extra fields to GeoJSON and it will still validate so none of these are invalid GeoJSON.

Improve this answer
1

i think it is all about types of spelling and you can add more definition if you want. i dont think it is so important for not taking part in json spec...there is no limit for json object, only important thing is your json have to be valid for correct usage...

and i have checked Mapperz♦ geojson, it had some parse error in it.. and valid geojson:

{
    "type": "Feature",
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [-180, 10],[20, 90],[180, -5],[-30, -90]
            ]
        ]
    },
    "style": {
        "stroke-width": "3",
        "fill-opacity": 0.6
    },
    "className": {
        "baseVal": "highway_primary"
    }
}

and the last thing to say is that you can check your geojson file whether valid or not from JSONLint which is a JSON Validator...

i hope it helps you

Improve this answer
2
  • 2
    I know it is possible to do it this way I just wondering whether other people implement it this way so as to maximise compatibility.
    – Mr_Chimp
    Commented Mar 29, 2012 at 14:21
  • source is here - wiki.openstreetmap.org/wiki/Geojson_CSS
    – Mapperz ♦
    Commented Mar 29, 2012 at 15:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.