Geojson CSS

This is a styling extention of geojson. It's based on geojson and css.

http://www.w3.org/TR/SVG/styling.html

Use Cases

draw a way in a specific color and line style to the map
draw LineString, LinearRing, MultiLineString,
add layers

Styling

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

Layer Extension

A FeatureCollection is a Feature. For CSS the styles of a FeatureCollection bahave same as the "g" element in SVG.

     {
        "type":"FeatureCollection",
        "style":{
            "stroke":"black"
        },
        "features":[
           {
              "geometry":{"coordinates":[0,51.1],
                 "type":"Point"
              }
           },
           {
              "type":"Feature",
              "geometry":{
                 "coordinates":[
                    [[10,10],[20,20],[10,20],[20,40],[0,20]],
                    [[20,30],[40,60],[50,32],[45,23]]],
                 "type":"MultiLineString"
              },
              "className":{
                 "baseVal":"line"
              }
           },
           {
              "type":"FeatureCollection",
              "features":[
                 {
                    "type":"Feature",
                    "geometry":{
                       "coordinates":[
                          [[40,60],[70,20],[40,20]],
                          [[50,30],[45,32],[48,40]]],
                       "type":"Polygon"
                    },
                    "className":{
                       "baseVal":"line2"
                    }
                 },
                 {
                    "type":"Feature",
                    "geometry":{
                       "coordinates":[[-43,20],[54,23],[45,12]],
                       "type":"LineString"
                    },
                    "className":{
                       "baseVal":"line3"
                    }
                 }]
           },
           {
              "type":"FeatureCollection",
              "features":[
                 {
                    "type":"FeatureCollection",
                    "features":[
                       {
                          "type":"Feature",
                          "geometry":{
                             "coordinates":[[-23,40],[34,-3],[45,-2]],
                             "type":"LinearRing"
                          },
                          "className":{
                             "baseVal":"line4"
                          }
                       },
                       {
                          "type":"Feature",
                          "geometry":{
                             "coordinates":[
                                [
                                   [[110,50],[110,60],[120,60],[120,50]],
                                   112,52],
                                [
                                   [[118,52],[118,58],[112,58],[112,52]],
                                   [[130,50],[130,60],[140,60],[140,50]],
                                   132,52],
                                [
                                   [[138,52],[138,58],[132,58],[132,52]]]],
                             "type":"MultiPolygon"
                          },
                          "className":{
                             "baseVal":"line5"
                          }
                       }]
                 },
                 {
                    "type":"FeatureCollection",
                    "features":[
                       {
                          "type":"Feature",
                          "geometry":{
                             "coordinates":[[0,0],[7,10],[4,10]],
                             "type":"Polygon"
                          },
                          "className":{
                             "baseVal":"line6"
                          }
                       },
                       {
                          "type":"Feature",
                          "geometry":{
                             "coordinates":[[16.4,48.2],[20,30],[70,20]],
                             "type":"Polygon"
                          },
                          "className":{
                             "baseVal":"line7"
                          }
                       }]
                 }]
           }]
     }

CSS Example

<style type="text/css">
.line:hover{
  stroke:red;
}
.line2{
  stroke:black;
  stroke-width:4;
  fill:red;
}
.line3{
  stroke:purple;
  stroke-width:6;
  stroke-dasharray:8,12;
}
.line4{
  stroke:black;
  stroke-width:6;
  stroke-dasharray:8,2;
  fill:yellow;
}
.line5{
  stroke:gold;
  stroke-width:2;
  fill:yellow;
}
</style>

Problem

The css used in this way has not the capabilities of mapcss. It trys to use standard svg css. It is possible to translate to canvas styling. MapCSS is a very different format that ist mush more complicated to implement and learn (if you know css).