{"__v":6,"_id":"5501d1f4f2ef1e0d003116bd","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:44.716Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":11,"body":"The goGeo [**Geo Search**](/v1.0/docs/geosearch-query) feature can be used for more than a simple search over your data. Interactive maps can be created using Geo Search. In order to do that, we are going to combine Geo Search with [Map Rendering](doc:map-rendering).\n\n### Interactive maps in Action\n\nIn the following sample application, we have Map Rendering applied to a 2 million points dataset of companies from Brazil. The interactive behavior consists on the presentation of the company's data when the marker (or area near of the marker) is clicked.\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/interactive\\\">\\n    </iframe>\\n  </div>\\n</div>\"\n}\n[/block]\nA Geo Search request can return a list of relational data about spatial objects that intersects with the point, line or geometry passed as parameter. But to implement the interactive behavior we will restrict Geo Search request to return only one result when clicking on a region. \n[block:html]\n{\n  \"html\": \"<a href=\\\"http://cssdeck.com/labs/lqyj4gpi\\\" target=\\\"_blank\\\">LET'S EXPLORE AND UNDERSTAND THE CODE? CLICK HERE!</a>\"\n}\n[/block]\n### Observations\n\nAs more then one document may stay at the same point, when clicking at a marker twice or more your can get different information from the same marker. **It is not a bug**. It is the expected behavior.\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/using-geoservices'>\\n    &laquo; Back \\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</style>\"\n}\n[/block]","excerpt":"Creating a Interactive Map with Geosearch.","slug":"interactive-maps","type":"basic","title":"Interactive maps"}

Interactive maps

Creating a Interactive Map with Geosearch.

The goGeo [**Geo Search**](/v1.0/docs/geosearch-query) feature can be used for more than a simple search over your data. Interactive maps can be created using Geo Search. In order to do that, we are going to combine Geo Search with [Map Rendering](doc:map-rendering). ### Interactive maps in Action In the following sample application, we have Map Rendering applied to a 2 million points dataset of companies from Brazil. The interactive behavior consists on the presentation of the company's data when the marker (or area near of the marker) is clicked. [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/interactive\">\n </iframe>\n </div>\n</div>" } [/block] A Geo Search request can return a list of relational data about spatial objects that intersects with the point, line or geometry passed as parameter. But to implement the interactive behavior we will restrict Geo Search request to return only one result when clicking on a region. [block:html] { "html": "<a href=\"http://cssdeck.com/labs/lqyj4gpi\" target=\"_blank\">LET'S EXPLORE AND UNDERSTAND THE CODE? CLICK HERE!</a>" } [/block] ### Observations As more then one document may stay at the same point, when clicking at a marker twice or more your can get different information from the same marker. **It is not a bug**. It is the expected behavior. --- [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/using-geoservices'>\n &laquo; Back \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</style>" } [/block]