Geojson CSS
Jump to navigation
Jump to search
This is a styling extention of geojson. It's based on geojson and css.
http://geojson.org/geojson-spec.html
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).