{"__v":40,"_id":"54fdff85f7b1202100a25e09","category":{"__v":12,"_id":"54fdff31f7b1202100a25e06","pages":["54fdff6bf7b1202100a25e07","54fdff85f7b1202100a25e09","54fdffa1f7b1202100a25e0b","54fdffc25de33c2d0031127a","54fdffe5f7b1202100a25e0e","550199dc0459bd3700770d87","5501d14df2ef1e0d003116ba","5501d1e70459bd3700770e1c","5501d1f4f2ef1e0d003116bd","5501d20f0459bd3700770e1e","5501d2220459bd3700770e20","5501ecbaf2ef1e0d0031171d"],"project":"54d0fd1d095c470d00d1646d","version":"54d0fd1e095c470d00d16470","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-03-09T20:14:41.719Z","from_sync":false,"order":1,"slug":"tutorials","title":"Tutorials"},"project":"54d0fd1d095c470d00d1646d","user":"54db5301eb78f13900cf108b","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-03-09T20:16:05.394Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":6,"body":"The **goGeo** platform uses XML file with some rules to define the style of the maps. This XML file is similar in syntax to CSS and [**CartoCSS**](https://www.mapbox.com/carto) tools. \n\nAt the following topics you will find: a sample application showing the power of style over the map visualization, this app apply different styles to the same collection changing the map visual. Here you'll find to: how to publish a style and how to list styles by collection. \n\n1. [Applying style exchange application](/v1.0/docs/map-styling#applying-style-exchange-application);\n2. [Publishing a style](/v1.0/docs/map-styling#publishing-a-style);\n2. [Listing existing styles](/v1.0/docs/map-styling#listing-existing-styles).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Applying style exchange application\"\n}\n[/block]\nThe feature of map styling allows customization of your data on the map. For example, in a collection of points you can determine which icon is used to represent the displayed marker. Or you can use the style to add spetial behaviors on your app, for example, you can use styles to simulate filters (see [Simulate a Filter with Style](/v1.0/docs/visualizing-maps#simulate-a-filter-with-style)) or to define the markers density or define interesting features as heat maps.\n\nThe live sample application below, use different styles to change the visual of the map. The first one is the \"gogeo_default\" style, the app initialize whit this one. There is buttons on the app to change between default and two other styles available in the **goGeo** platform, are then \"gogeo_overlap\" and \"gogeo_heatmap\" styles. \n[block:html]\n{\n  \"html\": \"<div class=\\\"panel panel-default\\\">\\n  <div class=\\\"panel-body\\\">\\n    <iframe width=\\\"100%\\\" height=\\\"500px\\\" frameBorder=\\\"0\\\" seamless=\\\"seamless\\\" scrolling=\\\"no\\\" src=\\\"http://demos.gogeo.io/tutorials/applyingStyles/\\\">\\n\\t\\t</iframe>\\n  </div>\\n</div>\"\n}\n[/block]\nAccess the link below, and find out how simple is to customize your map using customized styles, those available in **goGeo** platform or your own.\n[block:html]\n{\n  \"html\": \"<a href=\\\"http://cssdeck.com/labs/3spz09iu\\\" target=\\\"_blank\\\">LET'S EXPLORE AND UNDERSTAND THE CODE? CLICK HERE!</a>\"\n}\n[/block]\n#*Observation*\n\nFor details of what can be done with style, see the CartoCSS, this framework is responsible for creating the style file used by mapnik. The Carto has a very similar syntax with CSS, making the process of creating styles very easy and intuitive, especially for those who are familiar with web development.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Publishing a style\"\n}\n[/block]\nIn order to publish your own style, you will need your MAP-KEY. This is necessary because styles are required for rendering maps. You also need some knowledge about [CartoCSS](https://github.com/mapbox/carto) to create a custom style.\n\nIn the following example we are going to use cURL tool to call **goGeo** [Styles Management](doc:styles-management)  API.\n\nThe style we are going to use is the one below.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"#my_style {\\n  marker-width: 10;\\n  marker-fill: green;\\n  marker-line-width: 1;\\n  marker-line-color: #000;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\nThis style will create a green filled circle with a black border. Next step is creating a POST request to publish the style. To accomplish this, you need to set your style in the body JSON field *carto_css*. You also need to give a name to your style and put it in the *name* field. Database and collection names are set in the request *URL*.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"curl -k -H \\\"Content-Type: application/json\\\" -XPOST \\\\\\n\\\"https://api.gogeo.io/1.0/styles/demos/sample_simplegeo_50k?mapkey=dc837a69-c74f-4641-a79d-2bf6e900a135\\\" \\\\\\n-d '\\n{\\n    \\\"carto_css\\\": \\\"#my_style[\\\\\\\"mapnik::geometry_type\\\\\\\"=point]{marker-width: 10; marker-fill: green; marker-line-width: 1; marker-line-color: #000; }\\\",\\n    \\\"name\\\": \\\"test_style\\\"\\n}'\",\n      \"language\": \"curl\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"It is not possible to create two styles with the same name. Change the *name* parameter by one you like.\",\n  \"title\": \"NOTE\"\n}\n[/block]\nAfter that, if everything went right, you should receive a request like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n    \\\"carto_css\\\": \\\"#my_style[\\\\\\\"mapnik::geometry_type\\\\\\\"=point]{marker-width: 10; marker-fill: green; marker-line-width: 1; marker-line-color: #000; }\\\",\\n    \\\"collection_name\\\": \\\"sample_simplegeo_50k\\\",\\n    \\\"created_at\\\": \\\"2015-03-11T18:15:52.758+00:00\\\",\\n    \\\"database_name\\\": \\\"demos\\\",\\n    \\\"id\\\": \\\"55008658773031388c000000\\\",\\n    \\\"name\\\": \\\"test_style\\\",\\n    \\\"style\\\": \\\"<?xml version=\\\\\\\"1.0\\\\\\\" encoding=\\\\\\\"UTF-8\\\\\\\" standalone=\\\\\\\"yes\\\\\\\"?>\\\\n\\\\n<Map srs=\\\\\\\"+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=:::at:::null +wktext +no_defs +over\\\\\\\" maximum-extent=\\\\\\\"-20037508.34,-20037508.34,20037508.34,20037508.34\\\\\\\">\\\\n\\\\n  <Style name=\\\\\\\"my_style\\\\\\\" filter-mode=\\\\\\\"first\\\\\\\">\\\\n\\\\n    <Rule>\\\\n\\\\n      <Filter>([mapnik::geometry_type] = point)</Filter>\\\\n\\\\n      <MarkersSymbolizer width=\\\\\\\"10\\\\\\\" fill=\\\\\\\"#008000\\\\\\\" stroke-width=\\\\\\\"1\\\\\\\" stroke=\\\\\\\"#000000\\\\\\\"/>\\\\n\\\\n    </Rule>\\\\n\\\\n  </Style>\\\\n\\\\n</Map>\\\",\\n    \\\"style_names\\\": [\\n        \\\"test_style\\\"\\n    ],\\n    \\\"thematic_id\\\": null,\\n    \\\"updated_at\\\": \\\"2015-03-11T18:15:52.758+00:00\\\",\\n    \\\"username\\\": \\\"support_gogeo_io\\\"\\n}\\n\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\nNow you have a new style which may be used within your application.\n\nYou may also use custom images, labels and other interesting features from CartoCSS to make your maps look prettier.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Listing existing styles\"\n}\n[/block]\nAfter inserting some styles you may desire to retrieve information about existing styles. You can list them from a specific collection, optionally applying a filter by style name or id.\n\nTo list styles you can use [Styles Management](doc:styles-management) API. Through cURL tool, you can create a GET request like below.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"curl -X GET \\\"http://api.gogeo.io/1.0/styles/my_database/my_collection?mapkey=YOUR_MAP_KEY\\\"\",\n      \"language\": \"curl\"\n    }\n  ]\n}\n[/block]\nThis will return a JSON array with IDs representing each style associated with the collection described in the *URL*. These IDs can be used to get more detailed information about a specific style. A style may be queried using either its ID or its name, which is given when the style is created. \n\nTo query for a style the request will look like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"curl -X GET \\\"http://api.gogeo.io/1.0/styles/demos/sample_simplegeo_50k/test_style?mapkey=dc837a69-c74f-4641-a79d-2bf6e900a135\\\"\",\n      \"language\": \"curl\"\n    }\n  ]\n}\n[/block]\nThe request result will be a JSON containing information about the style requested as in the following example.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n    \\\"carto_css\\\": \\\"#my_style[\\\\\\\"mapnik::geometry_type\\\\\\\"=point]{marker-width: 10; marker-fill: green; marker-line-width: 1; marker-line-color: #000; }\\\",\\n    \\\"collection_name\\\": \\\"sample_simplegeo_50k\\\",\\n    \\\"created_at\\\": \\\"2015-03-11T18:15:52.758+00:00\\\",\\n    \\\"database_name\\\": \\\"demos\\\",\\n    \\\"id\\\": \\\"55008658773031388c000000\\\",\\n    \\\"name\\\": \\\"test_style\\\",\\n    \\\"style\\\": \\\"<?xml version=\\\\\\\"1.0\\\\\\\" encoding=\\\\\\\"UTF-8\\\\\\\" standalone=\\\\\\\"yes\\\\\\\"?>\\\\n\\\\n<Map srs=\\\\\\\"+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs +over\\\\\\\" maximum-extent=\\\\\\\"-20037508.34,-20037508.34,20037508.34,20037508.34\\\\\\\">\\\\n\\\\n  <Style name=\\\\\\\"my_style\\\\\\\" filter-mode=\\\\\\\"first\\\\\\\">\\\\n\\\\n    <Rule>\\\\n\\\\n      <Filter>([mapnik::geometry_type] = point)</Filter>\\\\n\\\\n      <MarkersSymbolizer width=\\\\\\\"10\\\\\\\" fill=\\\\\\\"#008000\\\\\\\" stroke-width=\\\\\\\"1\\\\\\\" stroke=\\\\\\\"#000000\\\\\\\"/>\\\\n\\\\n    </Rule>\\\\n\\\\n  </Style>\\\\n\\\\n</Map>\\\",\\n    \\\"style_names\\\": [\\n        \\\"my_style\\\"\\n    ],\\n    \\\"thematic_id\\\": null,\\n    \\\"updated_at\\\": \\\"2015-03-11T18:15:52.758+00:00\\\",\\n    \\\"username\\\": \\\"support_gogeo_io\\\"\\n}\\n\",\n      \"language\": \"json\"\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<div class='div-back'> \\n  <a href='/v1.0/docs/clustering-service'>\\n    &laquo; Back \\n  </a>\\n</div>\\n\\n<div class='div-forward'> \\n  <a href='/v1.0/docs/visualizing-maps'>\\n    Next &raquo; </div>\\n  </a>\\n</div>\\n\\n<style>\\n\\t.div-back {\\n  \\tpadding-left: 15px;\\n\\t\\tmargin-top: -20px;\\n  }\\n  \\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":"Styling your map.","slug":"map-styling","type":"basic","title":"Map styling"}

Map styling

Styling your map.

The **goGeo** platform uses XML file with some rules to define the style of the maps. This XML file is similar in syntax to CSS and [**CartoCSS**](https://www.mapbox.com/carto) tools. At the following topics you will find: a sample application showing the power of style over the map visualization, this app apply different styles to the same collection changing the map visual. Here you'll find to: how to publish a style and how to list styles by collection. 1. [Applying style exchange application](/v1.0/docs/map-styling#applying-style-exchange-application); 2. [Publishing a style](/v1.0/docs/map-styling#publishing-a-style); 2. [Listing existing styles](/v1.0/docs/map-styling#listing-existing-styles). [block:api-header] { "type": "basic", "title": "Applying style exchange application" } [/block] The feature of map styling allows customization of your data on the map. For example, in a collection of points you can determine which icon is used to represent the displayed marker. Or you can use the style to add spetial behaviors on your app, for example, you can use styles to simulate filters (see [Simulate a Filter with Style](/v1.0/docs/visualizing-maps#simulate-a-filter-with-style)) or to define the markers density or define interesting features as heat maps. The live sample application below, use different styles to change the visual of the map. The first one is the "gogeo_default" style, the app initialize whit this one. There is buttons on the app to change between default and two other styles available in the **goGeo** platform, are then "gogeo_overlap" and "gogeo_heatmap" styles. [block:html] { "html": "<div class=\"panel panel-default\">\n <div class=\"panel-body\">\n <iframe width=\"100%\" height=\"500px\" frameBorder=\"0\" seamless=\"seamless\" scrolling=\"no\" src=\"http://demos.gogeo.io/tutorials/applyingStyles/\">\n\t\t</iframe>\n </div>\n</div>" } [/block] Access the link below, and find out how simple is to customize your map using customized styles, those available in **goGeo** platform or your own. [block:html] { "html": "<a href=\"http://cssdeck.com/labs/3spz09iu\" target=\"_blank\">LET'S EXPLORE AND UNDERSTAND THE CODE? CLICK HERE!</a>" } [/block] #*Observation* For details of what can be done with style, see the CartoCSS, this framework is responsible for creating the style file used by mapnik. The Carto has a very similar syntax with CSS, making the process of creating styles very easy and intuitive, especially for those who are familiar with web development. [block:api-header] { "type": "basic", "title": "Publishing a style" } [/block] In order to publish your own style, you will need your MAP-KEY. This is necessary because styles are required for rendering maps. You also need some knowledge about [CartoCSS](https://github.com/mapbox/carto) to create a custom style. In the following example we are going to use cURL tool to call **goGeo** [Styles Management](doc:styles-management) API. The style we are going to use is the one below. [block:code] { "codes": [ { "code": "#my_style {\n marker-width: 10;\n marker-fill: green;\n marker-line-width: 1;\n marker-line-color: #000;\n}", "language": "css" } ] } [/block] This style will create a green filled circle with a black border. Next step is creating a POST request to publish the style. To accomplish this, you need to set your style in the body JSON field *carto_css*. You also need to give a name to your style and put it in the *name* field. Database and collection names are set in the request *URL*. [block:code] { "codes": [ { "code": "curl -k -H \"Content-Type: application/json\" -XPOST \\\n\"https://api.gogeo.io/1.0/styles/demos/sample_simplegeo_50k?mapkey=dc837a69-c74f-4641-a79d-2bf6e900a135\" \\\n-d '\n{\n \"carto_css\": \"#my_style[\\\"mapnik::geometry_type\\\"=point]{marker-width: 10; marker-fill: green; marker-line-width: 1; marker-line-color: #000; }\",\n \"name\": \"test_style\"\n}'", "language": "curl" } ] } [/block] [block:callout] { "type": "warning", "body": "It is not possible to create two styles with the same name. Change the *name* parameter by one you like.", "title": "NOTE" } [/block] After that, if everything went right, you should receive a request like this: [block:code] { "codes": [ { "code": "{\n \"carto_css\": \"#my_style[\\\"mapnik::geometry_type\\\"=point]{marker-width: 10; marker-fill: green; marker-line-width: 1; marker-line-color: #000; }\",\n \"collection_name\": \"sample_simplegeo_50k\",\n \"created_at\": \"2015-03-11T18:15:52.758+00:00\",\n \"database_name\": \"demos\",\n \"id\": \"55008658773031388c000000\",\n \"name\": \"test_style\",\n \"style\": \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\" standalone=\\\"yes\\\"?>\\n\\n<Map srs=\\\"+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs +over\\\" maximum-extent=\\\"-20037508.34,-20037508.34,20037508.34,20037508.34\\\">\\n\\n <Style name=\\\"my_style\\\" filter-mode=\\\"first\\\">\\n\\n <Rule>\\n\\n <Filter>([mapnik::geometry_type] = point)</Filter>\\n\\n <MarkersSymbolizer width=\\\"10\\\" fill=\\\"#008000\\\" stroke-width=\\\"1\\\" stroke=\\\"#000000\\\"/>\\n\\n </Rule>\\n\\n </Style>\\n\\n</Map>\",\n \"style_names\": [\n \"test_style\"\n ],\n \"thematic_id\": null,\n \"updated_at\": \"2015-03-11T18:15:52.758+00:00\",\n \"username\": \"support_gogeo_io\"\n}\n", "language": "json" } ] } [/block] Now you have a new style which may be used within your application. You may also use custom images, labels and other interesting features from CartoCSS to make your maps look prettier. [block:api-header] { "type": "basic", "title": "Listing existing styles" } [/block] After inserting some styles you may desire to retrieve information about existing styles. You can list them from a specific collection, optionally applying a filter by style name or id. To list styles you can use [Styles Management](doc:styles-management) API. Through cURL tool, you can create a GET request like below. [block:code] { "codes": [ { "code": "curl -X GET \"http://api.gogeo.io/1.0/styles/my_database/my_collection?mapkey=YOUR_MAP_KEY\"", "language": "curl" } ] } [/block] This will return a JSON array with IDs representing each style associated with the collection described in the *URL*. These IDs can be used to get more detailed information about a specific style. A style may be queried using either its ID or its name, which is given when the style is created. To query for a style the request will look like this: [block:code] { "codes": [ { "code": "curl -X GET \"http://api.gogeo.io/1.0/styles/demos/sample_simplegeo_50k/test_style?mapkey=dc837a69-c74f-4641-a79d-2bf6e900a135\"", "language": "curl" } ] } [/block] The request result will be a JSON containing information about the style requested as in the following example. [block:code] { "codes": [ { "code": "{\n \"carto_css\": \"#my_style[\\\"mapnik::geometry_type\\\"=point]{marker-width: 10; marker-fill: green; marker-line-width: 1; marker-line-color: #000; }\",\n \"collection_name\": \"sample_simplegeo_50k\",\n \"created_at\": \"2015-03-11T18:15:52.758+00:00\",\n \"database_name\": \"demos\",\n \"id\": \"55008658773031388c000000\",\n \"name\": \"test_style\",\n \"style\": \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\" standalone=\\\"yes\\\"?>\\n\\n<Map srs=\\\"+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs +over\\\" maximum-extent=\\\"-20037508.34,-20037508.34,20037508.34,20037508.34\\\">\\n\\n <Style name=\\\"my_style\\\" filter-mode=\\\"first\\\">\\n\\n <Rule>\\n\\n <Filter>([mapnik::geometry_type] = point)</Filter>\\n\\n <MarkersSymbolizer width=\\\"10\\\" fill=\\\"#008000\\\" stroke-width=\\\"1\\\" stroke=\\\"#000000\\\"/>\\n\\n </Rule>\\n\\n </Style>\\n\\n</Map>\",\n \"style_names\": [\n \"my_style\"\n ],\n \"thematic_id\": null,\n \"updated_at\": \"2015-03-11T18:15:52.758+00:00\",\n \"username\": \"support_gogeo_io\"\n}\n", "language": "json" } ] } [/block] --- [block:html] { "html": "<div class='div-middle'> \n <a href='#'>\n Top page &spades; </div>\n </a>\n</div>\n\n<div class='div-back'> \n <a href='/v1.0/docs/clustering-service'>\n &laquo; Back \n </a>\n</div>\n\n<div class='div-forward'> \n <a href='/v1.0/docs/visualizing-maps'>\n Next &raquo; </div>\n </a>\n</div>\n\n<style>\n\t.div-back {\n \tpadding-left: 15px;\n\t\tmargin-top: -20px;\n }\n \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]