Parte 1 – Configurando um Mapa Simples<\/strong><\/p>\n Para come\u00e7ar, vamos criar um modelo, copiado diretamente dos documentos do Leaflet:<\/p>\n Tamb\u00e9m criamos um div<\/em> para manter o id do mapa (mapDIV<\/em>) na se\u00e7\u00e3o head, e adicionamos um estilo para definir o tamanho do mapa quando exibido no navegador. Este HTML ir\u00e1 “carregar” o Leaflet, mas voc\u00ea n\u00e3o ver\u00e1 nada. Precisamos adicionar um script que crie o mapa.<\/p>\n Este pequeno script, colocado depois da mapDiv<\/em>, faz o seguinte:<\/p>\n Se n\u00f3s carregarmos o arquivo em nosso navegador, n\u00f3s veremos isto:<\/p>\n Este mapa \u00e9 centrado na localiza\u00e7\u00e3o do desastre de Brumadinho que ocorreu no dia 25 de janeiro de 2019. Vamos mov\u00ea-lo em um post posterior.<\/p>\n Esse \u00e9 o nosso primeiro post. A atribui\u00e7\u00e3o \u00e9 importante e vamos adicion\u00e1-la ao mapa, junto com outras novidades no pr\u00f3ximo post.<\/p>\n Aqui est\u00e1 o arquivo HTML completo:<\/p>\n Prezados leitores, Os pr\u00f3ximos 13 posts, ser\u00e3o dedicados a uma introdu\u00e7\u00e3o ao framework Leaflet. Estarei come\u00e7ando do zero e cada postagem no blog ser\u00e1 adicionado um pouco mais ao projeto. As postagens provavelmente n\u00e3o ser\u00e3o publicadas todos os dias. Parte… Continue Reading →<\/a><\/p>\n","protected":false},"author":275,"featured_media":7997,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[140,293],"class_list":["post-7990","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\/7990","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=7990"}],"version-history":[{"count":8,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/7990\/revisions"}],"predecessor-version":[{"id":8864,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/posts\/7990\/revisions\/8864"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media\/7997"}],"wp:attachment":[{"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/media?parent=7990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/categories?post=7990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fernandoquadro.com.br\/html\/wp-json\/wp\/v2\/tags?post=7990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\r\n<!DOCTYPE html>\r\n<head>\r\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.6.0\/dist\/leaflet.css\"\r\n crossorigin=\"\"\/> \r\n <script src=\"https:\/\/unpkg.com\/leaflet@1.6.0\/dist\/leaflet.js\"\r\n crossorigin=\"\"><\/script>\r\n <style>\r\n #mapDIV{\r\n height: 700px;\r\n width: 700px;\r\n border: solid 1px black;\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <div id='mapDIV'>i<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n\r\n<script>\r\n var map = L.map(document.getElementById('mapDIV'), {\r\n center: [-20.1438, -44.1301],\r\n zoom: 15\r\n });\r\n var basemap = L.tileLayer('http:\/\/{s}.tile.osm.org\/{z}\/{x}\/{y}.png', {\r\n });\r\n basemap.addTo(map);\r\n<\/script>\r\n<\/pre>\n\n
![\"\"](\"http:\/\/www.fernandoquadro.com.br\/html\/wp-content\/uploads\/2019\/02\/leaflet01.png\")
<\/p>\n\r\n<!DOCTYPE html>\r\n<head>\r\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.6.0\/dist\/leaflet.css\"\r\n crossorigin=\"\"\/> \r\n <script src=\"https:\/\/unpkg.com\/leaflet@1.6.0\/dist\/leaflet.js\"\r\n crossorigin=\"\"><\/script>\r\n <style>\r\n #mapDIV{\r\n height: 700px;\r\n width: 700px;\r\n border: solid 1px black;\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n <div id='mapDIV'>i<\/div>\r\n<script>\r\n var map = L.map(document.getElementById('mapDIV'), {\r\n center: [-20.1438, -44.1301],\r\n zoom: 15\r\n });\r\n var basemap = L.tileLayer('http:\/\/{s}.tile.osm.org\/{z}\/{x}\/{y}.png', {\r\n });\r\n basemap.addTo(map);\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"