{"__v":25,"_id":"54fdffa1f7b1202100a25e0b","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:33.461Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":7,"body":"The **goGeo** platform allows you to filter your data through spatial and relational filters. In this tutorial you will learn how to use these filters in practice. The following subsections shows how to use these filters:\n\n1. [Create a map with spatial restriction](/v1.0/docs/visualizing-maps#create-a-map-with-spatial-restriction);\n2. [Create a map with relational restriction](/v1.0/docs/visualizing-maps#create-a-map-with-relational-restriction);\n3. [Clustering plus dynamic relational search]();\n4. [Simulate a Filter with Style]().\n\nThe first one teach how to apply spatial filter using a [GeoJSON geometry object](http://geojson.org/geojson-spec.html#geometry-objects) as a query window. The second and third applications shows how to relational filtering using the [elasticSearch Term Query](https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-term-query.html). The last one uses selective style to simulate a filter.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Create a map with spatial restriction\"\n}\n[/block]\nIn **goGeo** you also can render your data with spatial restriction. You pass a GeoJSON to Map Rendering Service. Below we'll see a example for it.\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/spatialfilter\\\"></iframe>\\n  </div>\\n</div>\"\n}\n[/block]\nIn this example [AngularJS](https://angularjs.org/) was used. This is *javascript* based. AngularJS is a structural framework for dynamic web apps.\n[block:html]\n{\n  \"html\": \"<a href=\\\"http://cssdeck.com/labs/fdxmp92d\\\" target=\\\"_blank\\\">LET'S EXPLORE AND UNDERSTAND THE CODE? CLICK HERE!</a>\"\n}\n[/block]\nThe spatial filter are constructed in a GeoJson format and passed as an *URL* parameter. [**PNG Rendering API Reference**](/v1.0/docs/get-a-tile) has a section about this feature, access it [**here**](/v1.0/docs/get-a-tile/#restricting-the-data-presentation-with-geojson-geo-json-filter-) for more details.\n\nIn this sample the geom utilized is shown below. You can use [**geoJSON.io**](http://geojson.io) tool for generate others geometries to test the spatial restriction.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$scope.geom = {\\n  \\\"type\\\": \\\"Polygon\\\",\\n  \\\"coordinates\\\": [\\n    [\\n      [\\n        -77.49755859375,\\n        38.77121637244273\\n      ],\\n      [\\n        -77.49755859375,\\n        40.01078714046552\\n      ],\\n      [\\n        -75.025634765625,\\n        40.01078714046552\\n      ],\\n      [\\n        -75.025634765625,\\n        38.77121637244273\\n      ],\\n      [\\n        -77.49755859375,\\n        38.77121637244273\\n      ]\\n    ]\\n  ]\\n};\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Create a map with relational restriction\"\n}\n[/block]\nLet's see how we can easily put some relational filter in our Map Rendering. In this example we'll show only companies in Orlando.\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/relationalfilter\\\"></iframe>\\n  </div>\\n</div>\"\n}\n[/block]\nIn this example [AngularJS](https://angularjs.org/) was used. This is *javascript* based. AngularJS is a structural framework for dynamic web apps.\n[block:html]\n{\n  \"html\": \"<a href=\\\"http://cssdeck.com/labs/hy4yiq5s\\\" target=\\\"_blank\\\">LET'S EXPLORE AND UNDERSTAND THE CODE? CLICK HERE!</a>\"\n}\n[/block]\nThe relational filter is passed to the platform on **q** parameter and it must be writed using the elasticsearch query syntax, like the example below: \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"$scope.query = {\\n  \\\"query\\\": {\\n    \\\"term\\\": {\\n      \\\"city\\\": \\\"Orlando\\\"\\n    }\\n  }\\n};\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIn this query, we are filtering just the documents that have the term *Orlando* in the field *city*.\n\nTake a look [**here**](http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/query-dsl-queries.html#query-dsl-queries) for ElasticSearch query syntax details.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Clustering plus dynamic relational search\"\n}\n[/block]\nthe goGeo platform empowers your application with real time dynamic queries. You do not need anymore to preprocess your data to provide flexible and dynamic clustering services to the end user. \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/clusteringPlusSearch\\\"></iframe>\\n  </div>\\n</div>\"\n}\n[/block]\nThis sample app shows how to make dynamic queries to filter the 4 million companies by it's attributes, and present the resulting data clustered on the map.\n[block:html]\n{\n  \"html\": \"<a href=\\\"http://cssdeck.com/labs/zlgt95cw\\\" 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\": \"Simulate a Filter with Style\"\n}\n[/block]\nStyles in the **goGeo** platform can be used to simulate a relational filter, painting geometries in the map according to the filter match. The **live application** below shows how it works. Initially the map uses the default polygon style. Clicking on the button \"Apply filter style\" causes the dynamic creation of a style that applies a conditional over each geometry being plotted on 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/filterstyle/\\\">\\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 filter style we'll use the collection field \"total\", which contains the total population number of the state. In addition, we'll set that style must be applied only on states with total population number smaller or equal to \"2700000\".\n[block:html]\n{\n  \"html\": \"<a href=\\\"http://cssdeck.com/labs/kt0b8cfu\\\" target=\\\"_blank\\\">LET'S EXPLORE AND UNDERSTAND THE CODE? CLICK HERE!</a>\"\n}\n[/block]\nClicking on **Apply filter style** button will trigger the events listed below:\n\n1. Request the filter style creation;\n2. Replace the default styled layer.\n\n### Notes\n\nIf you try to simulate other filters, it **will require to chage style name**. It occurs because *cache*.\n\nThe function **reloadPage()** shows how to delete the filter style (a DELETE http request), and what to do in success or error cases. Function ends with some other application state adjustments.\n\nIt's important to observe that it's a simulated filter, all geometries was returned to the client, but the style was applied only to geometries related to USA States with population number smaller or equal to **2700000**. In other **goGeo** filter features, such as *geosearch*, only the matching geometries are returned to the client, it is better!\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/map-styling'>\\n    &laquo; Back \\n  </a>\\n</div>\\n\\n<div class='div-forward'> \\n  <a href='/v1.0/docs/thematic-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":"Filtering data in **goGeo** platform.","slug":"visualizing-maps","type":"basic","title":"Applying filters on maps"}

Applying filters on maps

Filtering data in **goGeo** platform.

The **goGeo** platform allows you to filter your data through spatial and relational filters. In this tutorial you will learn how to use these filters in practice. The following subsections shows how to use these filters: 1. [Create a map with spatial restriction](/v1.0/docs/visualizing-maps#create-a-map-with-spatial-restriction); 2. [Create a map with relational restriction](/v1.0/docs/visualizing-maps#create-a-map-with-relational-restriction); 3. [Clustering plus dynamic relational search](); 4. [Simulate a Filter with Style](). The first one teach how to apply spatial filter using a [GeoJSON geometry object](http://geojson.org/geojson-spec.html#geometry-objects) as a query window. The second and third applications shows how to relational filtering using the [elasticSearch Term Query](https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-term-query.html). The last one uses selective style to simulate a filter. [block:api-header] { "type": "basic", "title": "Create a map with spatial restriction" } [/block] In **goGeo** you also can render your data with spatial restriction. You pass a GeoJSON to Map Rendering Service. Below we'll see a example for it. [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/spatialfilter\"></iframe>\n </div>\n</div>" } [/block] In this example [AngularJS](https://angularjs.org/) was used. This is *javascript* based. AngularJS is a structural framework for dynamic web apps. [block:html] { "html": "<a href=\"http://cssdeck.com/labs/fdxmp92d\" target=\"_blank\">LET'S EXPLORE AND UNDERSTAND THE CODE? CLICK HERE!</a>" } [/block] The spatial filter are constructed in a GeoJson format and passed as an *URL* parameter. [**PNG Rendering API Reference**](/v1.0/docs/get-a-tile) has a section about this feature, access it [**here**](/v1.0/docs/get-a-tile/#restricting-the-data-presentation-with-geojson-geo-json-filter-) for more details. In this sample the geom utilized is shown below. You can use [**geoJSON.io**](http://geojson.io) tool for generate others geometries to test the spatial restriction. [block:code] { "codes": [ { "code": "$scope.geom = {\n \"type\": \"Polygon\",\n \"coordinates\": [\n [\n [\n -77.49755859375,\n 38.77121637244273\n ],\n [\n -77.49755859375,\n 40.01078714046552\n ],\n [\n -75.025634765625,\n 40.01078714046552\n ],\n [\n -75.025634765625,\n 38.77121637244273\n ],\n [\n -77.49755859375,\n 38.77121637244273\n ]\n ]\n ]\n};", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Create a map with relational restriction" } [/block] Let's see how we can easily put some relational filter in our Map Rendering. In this example we'll show only companies in Orlando. [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/relationalfilter\"></iframe>\n </div>\n</div>" } [/block] In this example [AngularJS](https://angularjs.org/) was used. This is *javascript* based. AngularJS is a structural framework for dynamic web apps. [block:html] { "html": "<a href=\"http://cssdeck.com/labs/hy4yiq5s\" target=\"_blank\">LET'S EXPLORE AND UNDERSTAND THE CODE? CLICK HERE!</a>" } [/block] The relational filter is passed to the platform on **q** parameter and it must be writed using the elasticsearch query syntax, like the example below: [block:code] { "codes": [ { "code": "$scope.query = {\n \"query\": {\n \"term\": {\n \"city\": \"Orlando\"\n }\n }\n};", "language": "javascript" } ] } [/block] In this query, we are filtering just the documents that have the term *Orlando* in the field *city*. Take a look [**here**](http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/query-dsl-queries.html#query-dsl-queries) for ElasticSearch query syntax details. [block:api-header] { "type": "basic", "title": "Clustering plus dynamic relational search" } [/block] the goGeo platform empowers your application with real time dynamic queries. You do not need anymore to preprocess your data to provide flexible and dynamic clustering services to the end user. [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/clusteringPlusSearch\"></iframe>\n </div>\n</div>" } [/block] This sample app shows how to make dynamic queries to filter the 4 million companies by it's attributes, and present the resulting data clustered on the map. [block:html] { "html": "<a href=\"http://cssdeck.com/labs/zlgt95cw\" target=\"_blank\">LET'S EXPLORE AND UNDERSTAND THE CODE? CLICK HERE!</a>" } [/block] [block:api-header] { "type": "basic", "title": "Simulate a Filter with Style" } [/block] Styles in the **goGeo** platform can be used to simulate a relational filter, painting geometries in the map according to the filter match. The **live application** below shows how it works. Initially the map uses the default polygon style. Clicking on the button "Apply filter style" causes the dynamic creation of a style that applies a conditional over each geometry being plotted on 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/filterstyle/\">\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 filter style we'll use the collection field "total", which contains the total population number of the state. In addition, we'll set that style must be applied only on states with total population number smaller or equal to "2700000". [block:html] { "html": "<a href=\"http://cssdeck.com/labs/kt0b8cfu\" target=\"_blank\">LET'S EXPLORE AND UNDERSTAND THE CODE? CLICK HERE!</a>" } [/block] Clicking on **Apply filter style** button will trigger the events listed below: 1. Request the filter style creation; 2. Replace the default styled layer. ### Notes If you try to simulate other filters, it **will require to chage style name**. It occurs because *cache*. The function **reloadPage()** shows how to delete the filter style (a DELETE http request), and what to do in success or error cases. Function ends with some other application state adjustments. It's important to observe that it's a simulated filter, all geometries was returned to the client, but the style was applied only to geometries related to USA States with population number smaller or equal to **2700000**. In other **goGeo** filter features, such as *geosearch*, only the matching geometries are returned to the client, it is better! --- [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/map-styling'>\n &laquo; Back \n </a>\n</div>\n\n<div class='div-forward'> \n <a href='/v1.0/docs/thematic-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]