{"id":8026,"date":"2019-03-18T07:30:11","date_gmt":"2019-03-18T10:30:11","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=8026"},"modified":"2020-08-04T18:53:19","modified_gmt":"2020-08-04T21:53:19","slug":"introducao-ao-leaflet-basemaps-e-overlayers-parte-4","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2019\/03\/18\/introducao-ao-leaflet-basemaps-e-overlayers-parte-4\/","title":{"rendered":"Introdu\u00e7\u00e3o ao Leaflet &#8211; Basemaps e Overlays"},"content":{"rendered":"<p>Hoje vamos adicionar alguns mapas base e alguns controles ao nosso mapa. At\u00e9 agora temos usado o OpenStreetMap como o nosso basemap. Iremos adicionar 2 novas camadas base e tamb\u00e9m adicionaremos uma atribui\u00e7\u00e3o ao mapa para que possamos dar cr\u00e9dito, al\u00e9m de uma barra de escala. <\/p>\n<p><strong>1. Adicionando Basemaps<\/strong><\/p>\n<p>Os mapas base e seus URLs que queremos adicionar s\u00e3o:<\/p>\n<p>Mapa Nacional Topo: https:\/\/basemap.nationalmap.gov\/arcgis\/rest\/services\/USGSTopo\/MapServer\/WMTS\/tile\/1.0.0\/USGSTopo\/default\/default028mm\/{z}\/{y}\/{x}.png<\/p>\n<p>Open Topo Map: https:\/\/tile.opentopomap.org\/{z}\/{x}\/{y}.png<\/p>\n<p>Primeiro criamos as duas camadas de base:<\/p>\n<pre>\r\nvar basetopo = L.tileLayer('https:\/\/basemap.nationalmap.gov\/arcgis\/rest\/services\/USGSTopo\/MapServer\/WMTS\/tile\/1.0.0\/USGSTopo\/default\/default028mm\/{z}\/{y}\/{x}.png', {});\r\nvar baserelief = L.tileLayer('https:\/\/tile.opentopomap.org\/{z}\/{x}\/{y}.png', {});\r\n<\/pre>\n<p>Poder\u00edamos adicion\u00e1-los ao mapa como est\u00e3o, mas queremos controlar a visibilidade de cada um, permitindo que o usu\u00e1rio escolha qual deles \u00e9 exibido. Para fazer isso, crie um objeto para manter a descri\u00e7\u00e3o e a camada:<\/p>\n<pre>\r\nvar baselayers = {\r\n    'Shaded Relief': baserelief,\r\n    'National Map topo': basetopo\r\n};\r\n<\/pre>\n<p><strong>2. Adicionando Controle de Camada<\/strong><\/p>\n<p>O controle de camada nos permite escolher o que \u00e9 exibido no mapa. Para cri\u00e1-lo, passamos o mapa base e as camadas de sobreposi\u00e7\u00e3o. Isso exige que criemos um objeto para manter a(s) sobreposi\u00e7\u00f5es e, em seguida, podemos criar o controle:<\/p>\n<pre>\r\nvar overlays = {\r\n    'The Trail': thetrail\r\n};\r\nL.control.layers(baselayers, overlays).addTo(map);\r\n<\/pre>\n<p>Adicionamos apenas um dos mapas base ao mapa antes de criar o controle. O mapa agora tem um controle de camada com um mapa base ativo e outro dispon\u00edvel no controle:<\/p>\n<p><center><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/03\/leaflet_map_d4_i1.png\" alt=\"\" width=\"566\" height=\"566\" class=\"aligncenter size-full wp-image-8033\" srcset=\"https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/03\/leaflet_map_d4_i1.png 566w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/03\/leaflet_map_d4_i1-150x150.png 150w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/03\/leaflet_map_d4_i1-300x300.png 300w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/03\/leaflet_map_d4_i1-144x144.png 144w\" sizes=\"auto, (max-width: 566px) 100vw, 566px\" \/><\/center><\/p>\n<p>N\u00f3s vamos adicionar sobreposi\u00e7\u00f5es adicionais em posts futuros.<\/p>\n<p><strong>3. O Scalebar<\/strong><\/p>\n<p>Adicionar uma barra de escala \u00e9 f\u00e1cil:<\/p>\n<pre>\r\n  var scale = L.control.scale()\r\n  scale.addTo(map)\r\n<\/pre>\n<p><strong>4. Adicionando Atribui\u00e7\u00e3o<\/strong><\/p>\n<p>Para dar cr\u00e9dito \u00e0s fontes de dados, adicione a atribui\u00e7\u00e3o:<\/p>\n<pre>\r\nmap.attributionControl.addAttribution('National Map Topo');\r\nmap.attributionControl.addAttribution('OpenTopoMap');\r\n<\/pre>\n<p>Isso acrescenta atribui\u00e7\u00e3o a qualquer existente, que no in\u00edcio \u00e9 apenas &#8220;Leaflet&#8221;.<\/p>\n<p>Isso completa nosso mapa para hoje. Podemos alternar entre camadas base usando o controle e ter a atribui\u00e7\u00e3o adequada e uma barra de escala.<\/p>\n<p><center><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/03\/leaflet_map_d4_i2.png\" alt=\"\" width=\"566\" height=\"566\" class=\"aligncenter size-full wp-image-8034\" srcset=\"https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/03\/leaflet_map_d4_i2.png 566w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/03\/leaflet_map_d4_i2-150x150.png 150w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/03\/leaflet_map_d4_i2-300x300.png 300w, https:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/03\/leaflet_map_d4_i2-144x144.png 144w\" sizes=\"auto, (max-width: 566px) 100vw, 566px\" \/><\/center><\/p>\n<p><strong>5. C\u00f3digo Javascript<\/strong><\/p>\n<pre>\r\nvar map = L.map(document.getElementById('mapDIV'), {\r\n    center: [62.7, -144.0],\r\n    zoom: 6\r\n});\r\n\r\n\/\/ Base maps\r\nvar basetopo = L.tileLayer('https:\/\/basemap.nationalmap.gov\/arcgis\/rest\/services\/USGSTopo\/MapServer\/WMTS\/tile\/1.0.0\/USGSTopo\/default\/default028mm\/{z}\/{y}\/{x}.png', {});\r\nvar baserelief = L.tileLayer('https:\/\/tile.opentopomap.org\/{z}\/{x}\/{y}.png', {});\r\n\r\nbasetopo.addTo(map);\r\n\r\n\/\/ The trail\r\nvar thetrail = L.geoJSON(trail, {\r\n    color: '#800000',\r\n    weight: 3,\r\n    dashArray: '12 8 12',\r\n});\r\n\r\nthetrail.bindTooltip('The Valdez-Eagle Trail')\r\nthetrail.addTo(map);\r\n\r\nvar baselayers = {\r\n    'Shaded Relief': baserelief,\r\n    'National Map topo': basetopo\r\n};\r\nvar overlays = {\r\n    'The Trail': thetrail\r\n};\r\nL.control.layers(baselayers, overlays).addTo(map);\r\n\r\n\/\/ Add scalebar\r\n\r\nvar scale = L.control.scale()\r\nscale.addTo(map)\r\n\r\n\/\/ Add attribution\r\nmap.attributionControl.addAttribution('National Map Topo');\r\nmap.attributionControl.addAttribution('OpenTopoMap');\r\n<\/pre>\n<p><strong>6. YouTube <\/strong><\/p>\n<p>Se voc\u00ea quiser, pode ver o processo detalhado acima no YouTube:<\/p>\n<p><center><br \/>\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/nWG45QWU5M0\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><br \/>\n<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hoje vamos adicionar alguns mapas base e alguns controles ao nosso mapa. At\u00e9 agora temos usado o OpenStreetMap como o nosso basemap. Iremos adicionar 2 novas camadas base e tamb\u00e9m adicionaremos uma atribui\u00e7\u00e3o ao mapa para que possamos dar cr\u00e9dito,&#8230; <a class=\"more-link\" href=\"https:\/\/www.fernandoquadro.com.br\/html\/2019\/03\/18\/introducao-ao-leaflet-basemaps-e-overlayers-parte-4\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":275,"featured_media":8032,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[140,293],"class_list":["post-8026","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gis","tag-javascript","tag-leaflet"],"_links":{"self":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8026","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/users\/275"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/comments?post=8026"}],"version-history":[{"count":8,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8026\/revisions"}],"predecessor-version":[{"id":8918,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/8026\/revisions\/8918"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/8032"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=8026"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=8026"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=8026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}