{"__v":8,"_id":"54ddeda545aa9e170051e66d","category":{"__v":7,"_id":"54fdad6e660db63700c23b82","pages":["55fbef82af72eb0d0007df93","55fbf623e013770d008fcba8","5617bd3a26e3db230054fba4","5617c4a6f8c9632100ac74f5","561ed6fd0a04340d00d8a0b0","562156adf4e0352100cbf268","562a5c846049f20d0032520b"],"project":"54d0fd1d095c470d00d1646d","version":"54d0fd1e095c470d00d16470","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-03-09T14:25:50.133Z","from_sync":false,"order":2,"slug":"api-reference","title":"API Reference"},"project":"54d0fd1d095c470d00d1646d","user":"54db525474dfff3700f161e9","version":{"__v":20,"_id":"54d0fd1e095c470d00d16470","project":"54d0fd1d095c470d00d1646d","createdAt":"2015-02-03T16:53:50.090Z","releaseDate":"2015-02-03T16:53:50.090Z","categories":["54d0fd1e095c470d00d16471","54d8b5e68934140d00496544","54db6361c6a4d40d0034b8f7","54db638208ea010d00ab1fdd","54db639008ea010d00ab1fde","54db6547c6a4d40d0034b8fd","54db83482092743700ea6ee1","54db84afc6a4d40d0034b93c","54db8805c6a4d40d0034b93f","54db8de9c6a4d40d0034b961","54db931ac6a4d40d0034b96d","54e49219e4365521006fd9ee","54e74fcc652d7c1900cbe737","54e74ffd3c1e111700d05762","54e77e0a523b1b2f00e6f313","54e784affdabe62500fcddcf","54e784fa523b1b2f00e6f319","54e785de8ae8911900cd42c5","54fdad6e660db63700c23b82","54fdff31f7b1202100a25e06"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-02-13T12:27:17.277Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":25,"body":"To be able to see the map you need to use a style. The platform provides a default style. However, you can also create custom styles to render the maps.\n\nThe **goGeo** platform uses [Mapnik](http://mapnik.org) for rendering maps, which in turn uses an XML file with some rules to define the style of the maps. [**CartoCSS**](https://www.mapbox.com/carto) tool allows us to easily build XML files compatible with Mapnik. Below is an example of the *css* style setting: \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"#collection_name['mapnik::geometry_type'=polygon] {\\n  polygon-opacity: 0.3;\\n  polygon-fill: #008500;\\n  line-color: #000000;\\n  line-width: 1;\\n  line-opacity: 0.3;\\n}\\n\\n#collection_name['mapnik::geometry_type'=linestring] {\\n  line-color: #00FF00;\\n  line-width: 3;\\n  line-opacity: 0.5;\\n}\\n\\n#collection_name['mapnik::geometry_type'=point] {\\n  point-file: url('http://i.imgur.com/06RgPTD.png');\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\nThe style above is the default standard used on the [Console](http://console.gogeo.io). The style is updated with the name of the collection that is being viewed. The restriction/filter in front of the name of the collection defines which type of geometry is rendered with the given style. On the first restriction <b>(['Mapnik :: geometry_type' = polygon])</b>, for example, all polygons from the collection will receive the style defined within this element.\n\nAfter creating a style you can pass the name of the newly created style as a parameter in the **goGeo** service API *URL*. Below, an example of a map-rendering URL is shown:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\\"http://api.gogeo.io/1.0/map/my_database/my_collection/:z/:x/:y/tile.png?mapkey=YOUR_MAP_KEY&\\nstylename=my_style_name\\\"\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\n---\n[block:html]\n{\n  \"html\": \"<div class='div-middle'> \\n  <a href='#'>\\n    Top page &spades; </div>\\n  </a>\\n</div>\\n\\n\\n<div class='div-forward'> \\n  <a href='/v1.0/docs/styles'>\\n    Next &raquo; </div>\\n  </a>\\n</div>\\n\\n<style>\\n  .div-middle {\\n  \\ttext-align: center;\\n\\t\\tmargin-top: -15px;\\n  }\\n  \\n  .div-forward {\\n  \\tfloat: right;\\n    padding-right: 15px;\\n\\t\\tmargin-top: -20px;\\n  }\\n</style>\"\n}\n[/block]","excerpt":"","slug":"styles-management","type":"basic","title":"Styles Management"}
To be able to see the map you need to use a style. The platform provides a default style. However, you can also create custom styles to render the maps. The **goGeo** platform uses [Mapnik](http://mapnik.org) for rendering maps, which in turn uses an XML file with some rules to define the style of the maps. [**CartoCSS**](https://www.mapbox.com/carto) tool allows us to easily build XML files compatible with Mapnik. Below is an example of the *css* style setting: [block:code] { "codes": [ { "code": "#collection_name['mapnik::geometry_type'=polygon] {\n polygon-opacity: 0.3;\n polygon-fill: #008500;\n line-color: #000000;\n line-width: 1;\n line-opacity: 0.3;\n}\n\n#collection_name['mapnik::geometry_type'=linestring] {\n line-color: #00FF00;\n line-width: 3;\n line-opacity: 0.5;\n}\n\n#collection_name['mapnik::geometry_type'=point] {\n point-file: url('http://i.imgur.com/06RgPTD.png');\n}", "language": "css" } ] } [/block] The style above is the default standard used on the [Console](http://console.gogeo.io). The style is updated with the name of the collection that is being viewed. The restriction/filter in front of the name of the collection defines which type of geometry is rendered with the given style. On the first restriction <b>(['Mapnik :: geometry_type' = polygon])</b>, for example, all polygons from the collection will receive the style defined within this element. After creating a style you can pass the name of the newly created style as a parameter in the **goGeo** service API *URL*. Below, an example of a map-rendering URL is shown: [block:code] { "codes": [ { "code": "\"http://api.gogeo.io/1.0/map/my_database/my_collection/:z/:x/:y/tile.png?mapkey=YOUR_MAP_KEY&\nstylename=my_style_name\"", "language": "shell" } ] } [/block] --- [block:html] { "html": "<div class='div-middle'> \n <a href='#'>\n Top page &spades; </div>\n </a>\n</div>\n\n\n<div class='div-forward'> \n <a href='/v1.0/docs/styles'>\n Next &raquo; </div>\n </a>\n</div>\n\n<style>\n .div-middle {\n \ttext-align: center;\n\t\tmargin-top: -15px;\n }\n \n .div-forward {\n \tfloat: right;\n padding-right: 15px;\n\t\tmargin-top: -20px;\n }\n</style>" } [/block]