{"__v":51,"_id":"54f9ba2167e8f20d0096da6f","api":{"auth":"required","params":[],"results":{"codes":[]},"settings":"","url":""},"body":"In this **goGeo Hello World**, let's build a first app that renders all countries in the word.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"See Sample code in CSSDeck\",\n  \"body\": \"<a href=\\\"http://cssdeck.com/labs/qlcyikza\\\" target=\\\"_blank\\\">http://cssdeck.com/labs/qlcyikza</a>\"\n}\n[/block]\n#**Understanding the sample code**\n\nLet's take a look at all steps needed to show all countries on the map.\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]\nOn those lines we import leaflet's css stylesheet and javascript library. After that, we have a simple stylesheet to adjust the map div height and background color.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<style type=\\\"text/css\\\">\\n  #map_div { \\n    height: 100%;\\n    background-color: white;\\n  }\\n</style>\",\n      \"language\": \"css\"\n    }\n  ]\n}\n[/block]\n#App *body* tag:\n\nInside the body tag we just declare a map div followed by a javascript section where we will declare ours fisrt map. The *options* object defines initial parameters for the map constructor: leaflet L.map function, that creates the map inside the div and sets it's initial view at the provided coordinates and zoom level.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var options = {\\n  attributionControl: false,\\n  scrollWheelZoom: true,\\n  minZoom: 2,\\n  maxZoom: 15\\n};\\n\\nvar map = L.map('map_div', options).setView([0,0], 1);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThe next code section shows how to add a map layer. In this case, pointing to a goGeo's collection URL previously loaded with shapes of world countries.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var database = 'tutorial';\\nvar collection = 'countries';\\nvar mapKey = '123';\\n\\nvar 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\\nmap.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 built and the geo service is called. Then the resulting layer is added to the map.\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]","category":"54e49219e4365521006fd9ee","createdAt":"2015-03-06T14:30:57.725Z","excerpt":"Build your first map in 5 minutes.","githubsync":"","hidden":false,"isReference":false,"link_external":false,"link_url":"","next":{"description":"","pages":[]},"order":0,"parentDoc":null,"project":"54d0fd1d095c470d00d1646d","slug":"draft","sync_unique":"","title":"Quick start","type":"basic","updates":["561f9dec4d67490d00804b00"],"user":"54db5301eb78f13900cf108b","version":"54d0fd1e095c470d00d16470","childrenPages":[]}

Quick start

Build your first map in 5 minutes.

In this **goGeo Hello World**, let's build a first app that renders all countries in the word. [block:callout] { "type": "info", "title": "See Sample code in CSSDeck", "body": "<a href=\"http://cssdeck.com/labs/qlcyikza\" target=\"_blank\">http://cssdeck.com/labs/qlcyikza</a>" } [/block] #**Understanding the sample code** Let's take a look at all steps needed to show all countries on the map. #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] On those lines we import leaflet's css stylesheet and javascript library. After that, we have a simple stylesheet to adjust the map div height and background color. [block:code] { "codes": [ { "code": "<style type=\"text/css\">\n #map_div { \n height: 100%;\n background-color: white;\n }\n</style>", "language": "css" } ] } [/block] #App *body* tag: Inside the body tag we just declare a map div followed by a javascript section where we will declare ours fisrt map. The *options* object defines initial parameters for the map constructor: leaflet L.map function, that creates the map inside the div and sets it's initial view at the provided coordinates and zoom level. [block:code] { "codes": [ { "code": "var options = {\n attributionControl: false,\n scrollWheelZoom: true,\n minZoom: 2,\n maxZoom: 15\n};\n\nvar map = L.map('map_div', options).setView([0,0], 1);", "language": "javascript" } ] } [/block] The next code section shows how to add a map layer. In this case, pointing to a goGeo's collection URL previously loaded with shapes of world countries. [block:code] { "codes": [ { "code": "var database = 'tutorial';\nvar collection = 'countries';\nvar mapKey = '123';\n\nvar 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\nmap.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 built and the geo service is called. Then the resulting layer is added to the map. --- [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]