{"__v":55,"_id":"54e50932d71c112d005440e6","category":{"__v":16,"_id":"54e49219e4365521006fd9ee","pages":["54e4934e610dfd0d00b2a863","54e49857610dfd0d00b2a869","54e4d1b418155617007884de","54e4eaff1815561700788522","54e50932d71c112d005440e6","54e50982d71c112d005440e8","54e612b3cf61ff0d00cf95b6","54e62e81a6972f0d002556d6","54ec82cb5033a62b005b257a","54edebbe3749bf0d00c764f8","54ededd28dafa7250027e64d","54ee3be3ae79c92d000f41b4","54ee4c11df57670d00871c8e","54f9ba2167e8f20d0096da6f","54fdf1e47ed77417002c5384","55106b1a23eca20d0038d0dc"],"project":"54d0fd1d095c470d00d1646d","version":"54d0fd1e095c470d00d16470","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-02-18T13:22:33.459Z","from_sync":false,"order":0,"slug":"guides","title":"Guides"},"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-18T21:50:42.283Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":6,"body":"The map styling feature 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. Below **Figure 1** shows a map with custom icons:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/eTzgorXeS4uzO5mEDWCF_custom-styles.png\",\n        \"custom-styles.png\",\n        \"818\",\n        \"449\",\n        \"\",\n        \"\"\n      ],\n      \"caption\": \"Figure 1: Custom style.\"\n    }\n  ]\n}\n[/block]\n###**Styles**\n\nA style is always related with a collection and each collection has at least one style default (this one **can not** be changed or deleted).\n\n**Figure 2** shows an example of a polygon collection plotted with the default polygon style. The collection name is *\"tiger_state\"* and consist of USA states. Further, this collection contains information about state population number. On next section, we'll see how to use these information to aggregate more semantic to this map using **goGeo** thematic map feature.\n[block:image]\n{\n  \"images\": [\n    {\n      \"caption\": \"Figure 2: Tiger State collection with default polygon style.\",\n      \"image\": [\n        \"https://files.readme.io/Z6JJcgJAQTWHhEXK54K8_tigerStateDefault.png\",\n        \"tigerStateDefault.png\",\n        \"798\",\n        \"482\",\n        \"#333ced\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nIn collections of polygons and lines you can: change the width and color of the border,\nfill color, add a filter to stylize the given dataset according the data collection and many other features. \n\nFor details of what can be done with style, see the [CartoCSS](http://github.com/mapbox/carto). This framework is responsible for creating the style file used by [mapnik](http://www.mapnik.org). \n\nThe 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\nThe following style creates circular markers with 5 pixels of radius, filled by green color and with 1 pixel of black border.\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]\nIf your style file has more than one rule, the platform will apply all them (generating an overlay in draw). You can get the same effect of previous style using the following other.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"#marker_style {\\n  marker-width: 10;\\n  marker-fill: green;\\n}\\n\\n#marker_line_style {\\n  marker-line-width: 1;\\n  marker-line-color: #000;\\n}\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\nCase you want to use just one rule of file, it is required to inform which rule you want to use. The following snippet shows how to do this in *URL*.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"https://api.gogeo.io/v1/database/collection/{z}/{x}/{y}/tile.png?mapkey=MAPKEY&stylename=#marker_style\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n###**Thematic Maps**\n\nThematic maps[¹](http://en.wikipedia.org/wiki/Thematic_map) are a type of map especially designed to show a particular theme connected with a specific geographic area. In the goGeo plataform the theme is choiced among one of the fields of the document related to the collection. Thereby, we can contrast a given field occurrence in different map areas.\n\nIn order to get a thematic map, the goGeo platform user must select a collection field as a theme and determine the number of intervals for this field in order to create a legend (default is 6). Then an algorithm is used to establish the limits values for each interval in the legend. After that, the goGeo platform will classify all documments, showing each one on map with the apropriated value interval color. The field chosen must be of type **numeric**.\n\nIn adition, it is possible to use legend to bind each color to the respective value interval. Basically, the thematic map service return is composed by the thematic maps style name and the correspondent legend.\n\nThe **Figure 3** shows the result of applying thematic maps over the tiger_state collection with different colors (styles) for polygons according to total population range for state. Additionally, a legend is shown bind each color to a range.\n[block:image]\n{\n  \"images\": [\n    {\n      \"caption\": \"Figure 3: Population range thematic map over Tiger State collection.\",\n      \"image\": [\n        \"https://files.readme.io/qNvgs5gRLyuNKt3lMvLq_tigerStateThematic.png\",\n        \"tigerStateThematic.png\",\n        \"800\",\n        \"484\",\n        \"#33475c\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**goGeo** thematic map feature automatically creates conditional styles, one for each thematic range, so based on value of thematic attribute (those informed at thematic map creation time) each polygon assume the correspondent style rule.\n\nFor more information see Thematic Map tutorials and endpoint specifications.\n\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/data-insertion'>\\n    &laquo; Back \\n  </a>\\n</div>\\n\\n<div class='div-forward'> \\n  <a href='/v1.0/docs/not-a-programmer'>\\n    Next &raquo; </div>\\n  </a>\\n</div>\\n\\n<style>\\n  .div-back {\\n    padding-left: 15px;\\n    margin-top: -20px;\\n  }\\n  \\n  .div-middle {\\n    text-align: center;\\n    margin-top: -15px;\\n  }\\n  \\n  .div-forward {\\n    float: right;\\n    padding-right: 15px;\\n    margin-top: -20px;\\n  }\\n</style>\"\n}\n[/block]","excerpt":"","slug":"styles-1","type":"basic","title":"Styles and Thematic Maps"}

Styles and Thematic Maps


The map styling feature 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. Below **Figure 1** shows a map with custom icons: [block:image] { "images": [ { "image": [ "https://files.readme.io/eTzgorXeS4uzO5mEDWCF_custom-styles.png", "custom-styles.png", "818", "449", "", "" ], "caption": "Figure 1: Custom style." } ] } [/block] ###**Styles** A style is always related with a collection and each collection has at least one style default (this one **can not** be changed or deleted). **Figure 2** shows an example of a polygon collection plotted with the default polygon style. The collection name is *"tiger_state"* and consist of USA states. Further, this collection contains information about state population number. On next section, we'll see how to use these information to aggregate more semantic to this map using **goGeo** thematic map feature. [block:image] { "images": [ { "caption": "Figure 2: Tiger State collection with default polygon style.", "image": [ "https://files.readme.io/Z6JJcgJAQTWHhEXK54K8_tigerStateDefault.png", "tigerStateDefault.png", "798", "482", "#333ced", "" ] } ] } [/block] In collections of polygons and lines you can: change the width and color of the border, fill color, add a filter to stylize the given dataset according the data collection and many other features. For details of what can be done with style, see the [CartoCSS](http://github.com/mapbox/carto). This framework is responsible for creating the style file used by [mapnik](http://www.mapnik.org). 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. The following style creates circular markers with 5 pixels of radius, filled by green color and with 1 pixel of black border. [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] If your style file has more than one rule, the platform will apply all them (generating an overlay in draw). You can get the same effect of previous style using the following other. [block:code] { "codes": [ { "code": "#marker_style {\n marker-width: 10;\n marker-fill: green;\n}\n\n#marker_line_style {\n marker-line-width: 1;\n marker-line-color: #000;\n}", "language": "css" } ] } [/block] Case you want to use just one rule of file, it is required to inform which rule you want to use. The following snippet shows how to do this in *URL*. [block:code] { "codes": [ { "code": "https://api.gogeo.io/v1/database/collection/{z}/{x}/{y}/tile.png?mapkey=MAPKEY&stylename=#marker_style", "language": "html" } ] } [/block] ###**Thematic Maps** Thematic maps[¹](http://en.wikipedia.org/wiki/Thematic_map) are a type of map especially designed to show a particular theme connected with a specific geographic area. In the goGeo plataform the theme is choiced among one of the fields of the document related to the collection. Thereby, we can contrast a given field occurrence in different map areas. In order to get a thematic map, the goGeo platform user must select a collection field as a theme and determine the number of intervals for this field in order to create a legend (default is 6). Then an algorithm is used to establish the limits values for each interval in the legend. After that, the goGeo platform will classify all documments, showing each one on map with the apropriated value interval color. The field chosen must be of type **numeric**. In adition, it is possible to use legend to bind each color to the respective value interval. Basically, the thematic map service return is composed by the thematic maps style name and the correspondent legend. The **Figure 3** shows the result of applying thematic maps over the tiger_state collection with different colors (styles) for polygons according to total population range for state. Additionally, a legend is shown bind each color to a range. [block:image] { "images": [ { "caption": "Figure 3: Population range thematic map over Tiger State collection.", "image": [ "https://files.readme.io/qNvgs5gRLyuNKt3lMvLq_tigerStateThematic.png", "tigerStateThematic.png", "800", "484", "#33475c", "" ] } ] } [/block] **goGeo** thematic map feature automatically creates conditional styles, one for each thematic range, so based on value of thematic attribute (those informed at thematic map creation time) each polygon assume the correspondent style rule. For more information see Thematic Map tutorials and endpoint specifications. --- [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/data-insertion'>\n &laquo; Back \n </a>\n</div>\n\n<div class='div-forward'> \n <a href='/v1.0/docs/not-a-programmer'>\n Next &raquo; </div>\n </a>\n</div>\n\n<style>\n .div-back {\n padding-left: 15px;\n margin-top: -20px;\n }\n \n .div-middle {\n text-align: center;\n margin-top: -15px;\n }\n \n .div-forward {\n float: right;\n padding-right: 15px;\n margin-top: -20px;\n }\n</style>" } [/block]