{"__v":4,"_id":"5501d1e70459bd3700770e1c","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-12T17:50:31.122Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":8,"body":"Thematic map in the **goGeo** platform are used to stylize data according to a collection attribute, painting geometries in the map according to the matched range value. The **live application** below shows how it works. Initially the map use the default polygon style. Clicking on the button \"Apply thematic\" causes the dynamic creation of a thematic style called \"thematic_population\", which will be used to restyling the map.\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/thematicmap/\\\">\\n\\t\\t</iframe>\\n  </div>\\n</div>\"\n}\n[/block]\nThe collection used in this application is called \"tiger_state\" and contains USA Census data, like the population density by state. To create the thematic map we'll select the column \"age_female\" from this collection, that contains the total female population of the state, and we'll determine the generation of six different intervals.\n[block:html]\n{\n  \"html\": \"<a href=\\\"http://cssdeck.com/labs/yt0vmlao\\\" target=\\\"_blank\\\">LET'S EXPLORE AND UNDERSTAND THE CODE? CLICK HERE!</a>\"\n}\n[/block]\nClicking on **Apply thematic** button will trigger the events listed below:\n\n1. Check if the thematic map already exist, if don't, then create;\n2. Load and show thematic map legend information;\n3. Remove the default styled tiger_state layer;\n4. Reload the tiger_state layer applying the thematic map style.\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/visualizing-maps'>\\n    &laquo; Back \\n  </a>\\n</div>\\n\\n<div class='div-forward'> \\n  <a href='/v1.0/docs/using-geoaggregation'>\\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":"Create and use thematic maps.","slug":"thematic-maps","type":"basic","title":"Thematic maps"}

Thematic maps

Create and use thematic maps.

Thematic map in the **goGeo** platform are used to stylize data according to a collection attribute, painting geometries in the map according to the matched range value. The **live application** below shows how it works. Initially the map use the default polygon style. Clicking on the button "Apply thematic" causes the dynamic creation of a thematic style called "thematic_population", which will be used to restyling the map. [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/thematicmap/\">\n\t\t</iframe>\n </div>\n</div>" } [/block] The collection used in this application is called "tiger_state" and contains USA Census data, like the population density by state. To create the thematic map we'll select the column "age_female" from this collection, that contains the total female population of the state, and we'll determine the generation of six different intervals. [block:html] { "html": "<a href=\"http://cssdeck.com/labs/yt0vmlao\" target=\"_blank\">LET'S EXPLORE AND UNDERSTAND THE CODE? CLICK HERE!</a>" } [/block] Clicking on **Apply thematic** button will trigger the events listed below: 1. Check if the thematic map already exist, if don't, then create; 2. Load and show thematic map legend information; 3. Remove the default styled tiger_state layer; 4. Reload the tiger_state layer applying the thematic map style. --- [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/visualizing-maps'>\n &laquo; Back \n </a>\n</div>\n\n<div class='div-forward'> \n <a href='/v1.0/docs/using-geoaggregation'>\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]