24

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?

16

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

  • This doesn't appear to be part of the GeoJSON spec. Is this a common implementation? – Mr_Chimp Mar 29 '12 at 13:45
  • yes common common implementation, that works - GeoJOSN is a 'geospatial data interchange format' – Mapperz Mar 29 '12 at 14:17
  • a bit of topic, but is this geoson_css related to carto mapbox.com/carto – Francisco Puga Mar 29 '12 at 15:11
  • 6
    That isn't a standard thing and each implementation is going to do this differently. – Calvin May 17 '13 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 Oct 17 '13 at 14:11
9

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
    }
  • The styling attributes in the spec are also properties, so should always work wherever geoJSON is expected. – Abbafei Oct 7 '16 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 Jun 13 at 15:35
4

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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