{"__v":31,"_id":"550199dc0459bd3700770d87","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-12T13:51:24.175Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":5,"body":"Clustering Service is useful when you want to provide a better visualization of a large amount of Points on a map. This feature represent with a simple marker groups of points geographically close of each other. The cluster service will also show the amount of points in each group and the spatial region where the points are arranged.\n\nAt the following sections you will find tutorials to create your first clustering app, understand the clustering service through a comparison with the rendering service:\n\n1. [Simple clustering app](/v1.0/docs/clustering-service#simple-clustering-app);\n2. [Rendering VS Clustering](/v1.0/docs/clustering-service#rendering-vs-clustering).\n\nOpen the sample app code and try it in real time.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Simple clustering app\"\n}\n[/block]\nIn this live sample application the **goGeo** clustering service is applied on **simplegeo dataset with 4 million companies in USA** (This is one of the **goGeo** shared collection available to **goGeo users **).\n[block:html]\n{\n  \"html\": \"<div class=\\\"panel panel-default\\\">\\n  <div class=\\\"panel-body\\\">\\n    <iframe width=\\\"100%\\\" height=\\\"450px\\\" frameBorder=\\\"0\\\" seamless=\\\"seamless\\\" scrolling=\\\"no\\\" src=\\\"http://demos.gogeo.io/tutorials/clustering\\\"></iframe>\\n  </div>\\n</div>\"\n}\n[/block]\nAs discussed at introduction section it provide a less polluted view of the information presented on the map. Access the link below to understand how it can be done using **goGeo** clustering service.\n[block:html]\n{\n  \"html\": \"<a href=\\\"http://cssdeck.com/labs/t6i4b1w0\\\" target=\\\"_blank\\\">LET'S EXPLORE AND UNDERSTAND THE CODE? CLICK HERE!</a>\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Rendering VS Clustering\"\n}\n[/block]\nThe app below shows 4 million of companies in the USA in two synchronized maps. The map on the left side is using Map Rendering to plot points/markers. The map on the right side is using **goGeo** clustering service with a style high density style (this effect is smoothed when using a style with the overlap attribute set to false). The synchronized map on the left uses the **goGeo** clustering service.\n[block:html]\n{\n  \"html\": \"<div class=\\\"panel panel-default\\\">\\n  <div class=\\\"panel-body\\\">\\n    <iframe width=\\\"100%\\\" height=\\\"450px\\\" frameBorder=\\\"0\\\" seamless=\\\"seamless\\\" scrolling=\\\"no\\\" src=\\\"http://demos.gogeo.io/tutorials/clusteringVsRendering\\\"></iframe>\\n  </div>\\n</div>\"\n}\n[/block]\nThis sample app shows how better is the visualization of huge amount of data when exploring the map to get useful information. Instead of viewing a high density points map, the user will find groups of points. These groups shows extra information like the number of points in each group and how are the points arranged through the map.\n[block:html]\n{\n  \"html\": \"<a href=\\\"http://cssdeck.com/labs/zeci58vd\\\" target=\\\"_blank\\\">LET'S EXPLORE AND UNDERSTAND THE CODE? CLICK HERE!</a>\"\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/creating-a-simple-map-to-see-your-data'>\\n    &laquo; Back \\n  </a>\\n</div>\\n\\n<div class='div-forward'> \\n  <a href='/v1.0/docs/map-styling'>\\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":"Improve data visualization with clustering feature.","slug":"clustering-service","type":"basic","title":"Clustering service"}

Clustering service

Improve data visualization with clustering feature.

Clustering Service is useful when you want to provide a better visualization of a large amount of Points on a map. This feature represent with a simple marker groups of points geographically close of each other. The cluster service will also show the amount of points in each group and the spatial region where the points are arranged. At the following sections you will find tutorials to create your first clustering app, understand the clustering service through a comparison with the rendering service: 1. [Simple clustering app](/v1.0/docs/clustering-service#simple-clustering-app); 2. [Rendering VS Clustering](/v1.0/docs/clustering-service#rendering-vs-clustering). Open the sample app code and try it in real time. [block:api-header] { "type": "basic", "title": "Simple clustering app" } [/block] In this live sample application the **goGeo** clustering service is applied on **simplegeo dataset with 4 million companies in USA** (This is one of the **goGeo** shared collection available to **goGeo users **). [block:html] { "html": "<div class=\"panel panel-default\">\n <div class=\"panel-body\">\n <iframe width=\"100%\" height=\"450px\" frameBorder=\"0\" seamless=\"seamless\" scrolling=\"no\" src=\"http://demos.gogeo.io/tutorials/clustering\"></iframe>\n </div>\n</div>" } [/block] As discussed at introduction section it provide a less polluted view of the information presented on the map. Access the link below to understand how it can be done using **goGeo** clustering service. [block:html] { "html": "<a href=\"http://cssdeck.com/labs/t6i4b1w0\" target=\"_blank\">LET'S EXPLORE AND UNDERSTAND THE CODE? CLICK HERE!</a>" } [/block] [block:api-header] { "type": "basic", "title": "Rendering VS Clustering" } [/block] The app below shows 4 million of companies in the USA in two synchronized maps. The map on the left side is using Map Rendering to plot points/markers. The map on the right side is using **goGeo** clustering service with a style high density style (this effect is smoothed when using a style with the overlap attribute set to false). The synchronized map on the left uses the **goGeo** clustering service. [block:html] { "html": "<div class=\"panel panel-default\">\n <div class=\"panel-body\">\n <iframe width=\"100%\" height=\"450px\" frameBorder=\"0\" seamless=\"seamless\" scrolling=\"no\" src=\"http://demos.gogeo.io/tutorials/clusteringVsRendering\"></iframe>\n </div>\n</div>" } [/block] This sample app shows how better is the visualization of huge amount of data when exploring the map to get useful information. Instead of viewing a high density points map, the user will find groups of points. These groups shows extra information like the number of points in each group and how are the points arranged through the map. [block:html] { "html": "<a href=\"http://cssdeck.com/labs/zeci58vd\" target=\"_blank\">LET'S EXPLORE AND UNDERSTAND THE CODE? CLICK HERE!</a>" } [/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/creating-a-simple-map-to-see-your-data'>\n &laquo; Back \n </a>\n</div>\n\n<div class='div-forward'> \n <a href='/v1.0/docs/map-styling'>\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]