{"__v":50,"_id":"54f9ba2167e8f20d0096da6f","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":"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":["561f9dec4d67490d00804b00"],"next":{"pages":[],"description":""},"createdAt":"2015-03-06T14:30:57.725Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"In this **goGeo's Hello World**, let's build a first app with four million of Companies through USA.\n[block:html]\n{\n  \"html\": \"<div id=\\\"div_btn\\\">\\n  <a href=\\\"http://cssdeck.com/labs/lpvpix62\\\" target=\\\"_blank\\\" class=\\\"tryitbtn\\\"><b>Click here: Sample App with Four Million Companies Geo Data.</b></a>\\n</div>\\n\\n<style>\\n  #div_btn {\\n    text-align: center;\\n    padding-top: 15px;\\n    padding-bottom: 15px;\\n  }\\n  a.tryitbtn, a.tryitbtn:link, a.tryitbtn:visited {\\n      font-family:Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;\\n      display:inline-block;\\n      color:#FFFFFF;\\n      background-color:#0898bb;\\n      \\n      font-size:18px;\\n      text-align:center;\\n      padding:0.7% 2.0%;\\n      text-decoration:none;\\n      margin-left:0;\\n      margin-top:0px;\\n      margin-bottom:5px;\\n      border:1px solid gray;\\n      border-radius:5px;\\n      white-space:nowrap;\\n  }\\n  a.tryitbtn:hover,a.tryitbtn: {\\n      background-color:#ffffff;\\n      color:#0898bb;\\n  }\\n</style>\"\n}\n[/block]\n#**Understanding the sample code**\n\nLet's take a look at all steps involved on plotting companies geo data on maps.\n\n#App *head* tag:\n\nFirst of all, we need to import Leaflet .css and .js scripts. They'll be used to create maps and control layers in your app. This is done by the imports shown in the excerpt of code below:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<link rel=\\\"stylesheet\\\" href=\\\"http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css\\\" />\\n<script src=\\\"http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nThese commands import leaflet css stylesheet, the leaflet javascript library and the Google javascript libraries in order to use Google Maps as a base layer map. After that, it is declared a \"style\" css exactly as the one shown below. It will be necessary to set two properties on it:  \"leaflet-map-pane\" and \"leaflet-google-layer\". This will ensure that the base layer does not overlays the data layer (only necessary when using Google Maps as base layer):\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"    <style type=\\\"text/css\\\">\\n      #map { height: 100%; }\\n      .leaflet-map-pane {\\n          z-index: 2 !important;\\n      }\\n      .leaflet-google-layer {\\n          z-index: 1 !important;\\n      }\\n    </style>\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n#App *body* tag:\n\nThe body tag declares a map div which will contain the map. On this body, a javascript tag creates the *options* structure as follows (on the next code excerpt). It sets the center of the map and other properties such as minimum and maximum zoom levels. In the next step, the leaflet L.map function creates the map.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"      // set some zoom properties for the map\\n      var options = {\\n        attributionControl: false,\\n        minZoom: 2,\\n        maxZoom: 15\\n      };\\n      // create a map in the \\\"map\\\" div, set the view to a given place and zoom\\n      var map = L.map('map_div', options).setView([40.891649, -88.032887], 7); \",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThe base layer is loaded and added to the map as shown on the follow excerpt:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\\n  attribution: 'Map data &copy; <a href=\\\"http://openstreetmap.org\\\">OpenStreetMap</a> contributors, <a href=\\\"http://creativecommons.org/licenses/by-sa/2.0/\\\">CC-BY-SA</a>',\\n  maxZoom: 18,\\n}).addTo(map);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThe next excerpt shows how the layer with the data collection is created (by a call to **goGeo** API endpoint), loaded and added to the map.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"      // goGeo clustering input variables\\n      var database = 'demos';\\n      var collection = 'sample_simplegeo_4m';\\n      var mapKey = 'dc837a69-c74f-4641-a79d-2bf6e900a135';\\n\\n      // make the goGeo tile.png request\\n      var rendered = L.tileLayer('https://{s}.gogeo.io/1.0/map/' + database + '/' + collection + '/{z}/{x}/{y}/tile.png?mapkey=' + mapKey + '&buffer=8',\\n            {subdomains: ['m1','m2','m3','m4']});\\n\\n      // add the rendered tile layer to the map\\n      map.addLayer(rendered);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThe input variables on excerpt above determine the database name, collection name and the MAP-KEY (see [Basic Authentication](doc:api-basics#basic-authentication) for more information about MAP-KEY). The *URL* to request a tile.png endpoint is constructed and the geo service is called. Then the resulting layer is added to the map.\n\n#**Try it yourself**\n\nIt's time to try it by yourself! Access [**goGeo** Console](https://console.gogeo.io/) and create a free account. Further, use the link on the top of this page to access the full code and make changes like: move the map center to other region (by changing the coordinates), load another data collections (changing the database and collection variables) and use one of the available goGeo public collections. For each change you may do, a map beside the code display the resulting output in real time.\n\nIf you want or need to learn more about the **goGeo** platform, it's suggested to read our guides, starting [here](doc:quick-start)!\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\\n<div class='div-forward'> \\n  <a href='/v1.0/docs/quick-start'>\\n    Next &raquo; </div>\\n  </a>\\n</div>\\n\\n<style>\\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":"Build your first app in 5 minutes.","slug":"draft","type":"basic","title":"Quick start"}

Quick start

Build your first app in 5 minutes.

In this **goGeo's Hello World**, let's build a first app with four million of Companies through USA. [block:html] { "html": "<div id=\"div_btn\">\n <a href=\"http://cssdeck.com/labs/lpvpix62\" target=\"_blank\" class=\"tryitbtn\"><b>Click here: Sample App with Four Million Companies Geo Data.</b></a>\n</div>\n\n<style>\n #div_btn {\n text-align: center;\n padding-top: 15px;\n padding-bottom: 15px;\n }\n a.tryitbtn, a.tryitbtn:link, a.tryitbtn:visited {\n font-family:Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;\n display:inline-block;\n color:#FFFFFF;\n background-color:#0898bb;\n \n font-size:18px;\n text-align:center;\n padding:0.7% 2.0%;\n text-decoration:none;\n margin-left:0;\n margin-top:0px;\n margin-bottom:5px;\n border:1px solid gray;\n border-radius:5px;\n white-space:nowrap;\n }\n a.tryitbtn:hover,a.tryitbtn: {\n background-color:#ffffff;\n color:#0898bb;\n }\n</style>" } [/block] #**Understanding the sample code** Let's take a look at all steps involved on plotting companies geo data on maps. #App *head* tag: First of all, we need to import Leaflet .css and .js scripts. They'll be used to create maps and control layers in your app. This is done by the imports shown in the excerpt of code below: [block:code] { "codes": [ { "code": "<link rel=\"stylesheet\" href=\"http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css\" />\n<script src=\"http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js\"></script>", "language": "html" } ] } [/block] These commands import leaflet css stylesheet, the leaflet javascript library and the Google javascript libraries in order to use Google Maps as a base layer map. After that, it is declared a "style" css exactly as the one shown below. It will be necessary to set two properties on it: "leaflet-map-pane" and "leaflet-google-layer". This will ensure that the base layer does not overlays the data layer (only necessary when using Google Maps as base layer): [block:code] { "codes": [ { "code": " <style type=\"text/css\">\n #map { height: 100%; }\n .leaflet-map-pane {\n z-index: 2 !important;\n }\n .leaflet-google-layer {\n z-index: 1 !important;\n }\n </style>", "language": "css" } ] } [/block] #App *body* tag: The body tag declares a map div which will contain the map. On this body, a javascript tag creates the *options* structure as follows (on the next code excerpt). It sets the center of the map and other properties such as minimum and maximum zoom levels. In the next step, the leaflet L.map function creates the map. [block:code] { "codes": [ { "code": " // set some zoom properties for the map\n var options = {\n attributionControl: false,\n minZoom: 2,\n maxZoom: 15\n };\n // create a map in the \"map\" div, set the view to a given place and zoom\n var map = L.map('map_div', options).setView([40.891649, -88.032887], 7); ", "language": "javascript" } ] } [/block] The base layer is loaded and added to the map as shown on the follow excerpt: [block:code] { "codes": [ { "code": "L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n attribution: 'Map data &copy; <a href=\"http://openstreetmap.org\">OpenStreetMap</a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>',\n maxZoom: 18,\n}).addTo(map);", "language": "javascript" } ] } [/block] The next excerpt shows how the layer with the data collection is created (by a call to **goGeo** API endpoint), loaded and added to the map. [block:code] { "codes": [ { "code": " // goGeo clustering input variables\n var database = 'demos';\n var collection = 'sample_simplegeo_4m';\n var mapKey = 'dc837a69-c74f-4641-a79d-2bf6e900a135';\n\n // make the goGeo tile.png request\n var rendered = L.tileLayer('https://{s}.gogeo.io/1.0/map/' + database + '/' + collection + '/{z}/{x}/{y}/tile.png?mapkey=' + mapKey + '&buffer=8',\n {subdomains: ['m1','m2','m3','m4']});\n\n // add the rendered tile layer to the map\n map.addLayer(rendered);", "language": "javascript" } ] } [/block] The input variables on excerpt above determine the database name, collection name and the MAP-KEY (see [Basic Authentication](doc:api-basics#basic-authentication) for more information about MAP-KEY). The *URL* to request a tile.png endpoint is constructed and the geo service is called. Then the resulting layer is added to the map. #**Try it yourself** It's time to try it by yourself! Access [**goGeo** Console](https://console.gogeo.io/) and create a free account. Further, use the link on the top of this page to access the full code and make changes like: move the map center to other region (by changing the coordinates), load another data collections (changing the database and collection variables) and use one of the available goGeo public collections. For each change you may do, a map beside the code display the resulting output in real time. If you want or need to learn more about the **goGeo** platform, it's suggested to read our guides, starting [here](doc:quick-start)! --- [block:html] { "html": "<div class='div-middle'> \n <a href='#'>\n Top page &spades; </div>\n </a>\n</div>\n\n\n<div class='div-forward'> \n <a href='/v1.0/docs/quick-start'>\n Next &raquo; </div>\n </a>\n</div>\n\n<style>\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]