Desenvol vendo WebMaps Com a biblioteca Leaflet JavaScript Um livro para aprender a desenvolver mapas digitais interativos para a internet de modo fácil, rápido e eficiente Marcos Eichemberger Ummus ISB !"#$#%$!&!#'($($) *odos os +ireitos eservados - '(&% (((& enhum enh uma a pa part rte e de dest ste e li livr vro o po pode de se serr re repr prod odu. u.id ida, a, ar arma ma.e .end nda a em reposit/rios digitais ou transmitida de forma nenhuma e por nenhum meio sem a pr0vi pr 0via a aut autori ori.a1 .a12o 2o esc escrit rita a do au autor tor,, e3c e3ceto eto nos cas casos os de pro produ du12o 12o aca acad4 d4mic mica a 5teses, disserta16es e artigos78 &(& Este livro foi escrito com o intuito de disseminar, para os pa9ses de l9ngua portugues portu guesa, a, a utili utili.a12 .a12o o da bibl bibliotec ioteca a Leafl LeafletJS, etJS, tomando$se tomando$se todos os cuid cuidados ados nece ne cess ssár ário ioss pa para ra ga gara rant ntir ir a fi fide dedi dign gnid idad ade e da dass inf infor orma ma16 16es es e ap apre rese sent ntar ar o cont co nte: e:do do de ma mane neir ira a cl clar ara a e pr prec ecis isa, a, ai aind nda a as assi sim, m, es este te li livr vro o 0 ve vend ndid ido o se sem m garantias de ordem nenhuma e sem ;uais;uer assun16es por eventuais enganos cometidos8
l0m disso, parte das vendas será investida na tradu12o da documenta12o da biblioteca o ;ue te a?uda7 e na gera12o de atlas municipais, entregues para escolas p:blicas ?unto com oficinas para os professores 5o ;ue a?uda um monte de gente legal@78 >ssim, n2o piratear significa uma manifesta12o de apre1o pelos esfor1os envidados nesta constru12o e tamb0m um voto de confian1a para as pr/3imas edi16es e novas obras ;ue dese?amos reali.ar, sempre com o intuito de disseminar conhecimento8
%(& htarop 8h '
Sobre este livro Este Este livr livro o não não é escr escrit ito o par para espe especi cial alis ista tas. s. É clar claro o que que os espe especi cial alis ista tass em geoprocessamento, por exemplo, poderão fazer um bom uso dele, mas a ideia que nos move é ajudar qualquer pessoa a partir de zero (0! con"ecimento em internet e webmaps c"egar ao status de desenvolvedor de aplica#$es de mapas na web.
Sobre a organização do livro Existe Existe uma estrutu estrutura ra que orden ordenaa o livro livro,, que o aprox aproxima ima do modus operandis de aprendizado de um autodidata% primeiro, fazemos, depois, pensamos sobre o que fizemos e então aprendemos com isso. &ssim, &ssi m, exite xitem m tr's tr's se#$ se#$es es que se repe repete tem m ao long longo o do livr livro% o% )re )repar parand ando o um ambiente de desenvolvimento, ...*ão na *assa e ...+issecando o -digo. &lém disso, existem os anexos e outros textos que serão escritos, auxiliares a este livro, que tocarão em assuntos mais bsicos (o que é a internet, como montar um servidor de internet! e assuntos mais avan#ados (desenvolver aplica#$es espec/ficas, trabal"ar com serviços de mapas!. Este livro apresenta um camin"o um pouco longo, mas sem muitas pedras para quebrar.
Sobre o Autor *arcos Eic"emberger mmus é ge-grafo, formado pela niversidade de 1ão )aulo (1)!, entusiasta das geotecnologias livres e atuante na rea de geoprocessamento e anlises espaciais desde o século passado (!, tendo atuado em diferentes esferas do poder p2blico e privado, desenvolvendo projetos em diferentes estados brasileiros e outros pa/ses latino3americanos.
%(& htarop 8h A
Sumá már i o
%(& htarop 8h )
Pr ef ác i o artografia é comunica#ão. E esse tipo de comunica#ão j utilizou, como meios para se realizar, a areia das praias, a terra sob nossos pés, diferentes tipos de roc"as e o papel. )ortanto, a linguagem cartogrfica é adaptvel a diferentes m/dias, mas, em nossa era, o in/cio do século 445, nos comunicamos (em grande parte e cada vez mais! por meio de uma tela de ( algum tipo de! computador. Então, j " cerca de duas décadas, a cartografia vem utilizando as m/dias digitais como meio de comunica#ão. &té " pouco tempo atrs, a comunica#ão cartogrfica pela internet demandava uma série de softwares, hardwares robustos e um grande con"ecimento de, pelo menos, meia d2zia de tecnologias diferentes. 6elizmente, a tecnologia resolveu camin"ar no sentido de aproximar3se da linguagem do "omem e, para desenvolver webmaps interessantes voc' não precisa, "oje em dia, de um conjunto muito grande de técnicas, métodos e tecnologias. É justamente disto que este livro trata% desenvolver mapas para a web, sem muito esfor#o, incrementando a agilidade e o alcance das produ#$es cartogrficas que realizamos em nosso dia a dia. )or isso, o que voc' encontra aqui é uma espécie de guia para desenvolver webmaps, utilizando a biblioteca 7ava1cript 8eaflet71, pensado para ser absolutamente acess/vel e tentando ser o menos aborrecido o poss/vel. &ssim, este livro é espec/fico% os princ/pios da cartografia, do geoprocessamento, do sensoreamento remoto e outras tecnologias da informa#ão geogrfica não são cobertos, pelo menos não em profundidade. &pesar disso, o livro est organizado para que o leitor não precise buscar con"ecimentos bsicos em fontes externas ( embora a curiosidade seja sempre desejável !. 9 que esperamos: ontribuir sensivelmente para o aprimoramento pessoal e profissional do leitor. E, em um sentido mais amplo, entendemos que disseminar o con"ecimento sobre as geotecnologias para a comunidade do mundo dos mapas nativa dos %(& htarop 8h %
pa/ses de l/ngua portuguesa é parte da nossa missão. &creditamos que com o aumento da quantidade de utilizadores de determinadas técnicas e tecnologias, existir uma mudan#a qualitativa significativa com rela#ão a estas técnicas e tecnologias. ;ão poderia deixar de agradecer, profundamente, ao mundo dos webmaps +ivirta3se Marcos Eichemberger Ummus
%(& htarop 8h
Um Si mpl esWebMap
...Preparando um Ambiente de Desenvolvimento
Navegador eb !eb"rowser#$ Editor de %e&tos$ Uma pasta para arma'enar seus projetos$ "iblioteca LeafletJS$ e (one&)o com a internet*
)onto a ponto, seguem algumas boas dicas para cumprir sua checklist com sucesso. Navegador esWeb
omo parece bastante -bvio, mapas na web são visualizados em uma tela de computador (! por meio de um ;avegador eb (eb"rowser !. & ?iblioteca Leaflet JS funciona na maioria deles%@ ➔
➔
Navegadores DeskTop: ➔ Chrome ➔ Firefox ➔ Safari 5+ ➔ Opera 11.11+ ➔ IE 7–11 Navegadores Mobile: ➔ Safari para iOS 3/4/5/6+ ➔ Android bro!er "."+# 3.1+# 4+ ➔ Chrome para Android 4+ and iOS ➔ Firefox para Android ➔ O$%ro! &web'i%(ba!ed bro!er!& )webOS# *a,'berr- 7+# e%,. ➔ IE1 para &0in(ba!ed de2i,e!&
?om, voc' vai precisar de ao menos um navegador web 1
A i!%a ,ompe%a e !empre a%$aiada de na2eadore! 2o, en,on%ra em http://leafletjs.com/
instalado em seu computador, para visualizar as aplica#$es de mapas na web que iremos desenvolver. *as, lembre3se que uma boa prtica a ser SEM+,E seguida é testar o funcionamento da sua aplica#ão de mapas na web em todos os navegadores dispon/veis ou, pelo menos, nos navegadores mais utilizados por quem vai acessar seus mapas (a lista acima é uma boa refer'ncia!. Edi t or esdeText o
Editores de Aexto são pequenos programas de computador utilizados para, acreditem, editar textos (!. Esses programas serão utilizados por n-s para escrever os c-digos das nossas aplica#$es de mapas na web. Existem dezenas de op#$es dispon/veis e, entre elas, destacamos tr's boas alternativas% ➔
Notepad++ !indows# http://notepad-plusplus.org/download/v6.5.3.html
➔
Komodo Edit ( Mac# http://www.activestate.com/komodo-edit
➔
im !Linu&# http://www.vim.org/
9utras alternativas são% Sci%E , -NU Emacs e .ptana. Em certo sentido, escol"er um editor de textos é uma escol"a pessoal, ou seja, depende de como voc' se adapta B utiliza#ão de determinado editor. Então, verifique entre as op#$es acima qual delas faz com que voc' se sinta mais a vontade para escrever seus c-digos. 8embre3se ainda que alguns destes editores de textos são multi3 plataforma% funcionam bem em diferentes sistemas operacionais. l et J S Bi bl i ot ec aLeaf
6a#a o doCnload da biblioteca LeafletJS/ versão @.0.D (a versão mais atual no momento em que este livro foi escrito!. %(& htarop 8h !
9s arquivos para doCnload estão dispon/veis no endere#o http://lea!let"s.com/download.html, a pgina oficial da biblioteca 8eaflet71. Conexãocom aI nt er net
Arabal"ar de modo organizado é fundamental. )ara se acostumar a manter a sa2de de suas aplica#$es de mapas na web crie uma estrutura de pastas que permita encontrar com facilidade os seus c-digos e a correspond'ncia entre eles e cada cap/tulo deste livro. &ssim, crie uma pasta em seu computador, em um local de fcil acesso e d'3l"e o nome de Cebmaps.
"
ai! !obre tiles, você encontra no artigo En%endendo Tiles# di!pon82e em http://geotecnologias.org/ desenvolvendowebmaps/leituras-recomendadas/ %(& htarop 8h &(
#$%&'( )*. E,'&,&'( E (,(
#
É isso &cabamos de estruturar um ambiente de trabal"o m/nimo para come#armos a desenvolver nossos mapas na web
%(& htarop 8h &&
...Mão na Massa! 1em delongas. &bra o seu Editor de Aextos, copie e cole o seguinte c-digo para ele% @+DC*
V78add*o5map7N KscriptF
KbodF KhtmlF
& tela a seguir dever abrir em seu navegador%
%(& htarop 8h &'
#$%&'( ). VOILÀ0
?om, seu mapa ainda não est na web, mas avan#amos em dire#ão a isto, cumprindo algumas etapas importantesK. )or "ora, nosso pr-ximo passo é entender o c-digo com o qual trabal"amos.
3
9e!%e i2ro# iremo! en%ender ,omo f$n,iona a *ibio%e,a :eafe% ;S e ,omo de!en2o2er o! mapa! a par%ir dea. Se 2o, < m$i%o impa,ien%e# 2i!i%e o! anexo! do i2ro e 2erifi=$e ,omo ,oo,ar !e$! mapa! na in%erne%# no %ex%o "Subindo os mapas para web!" . %(& htarop 8h &A
...Dissecando o código! ?om, n-s sab/amos que a "ora dura ia c"egar, certo: ;ossa grande sorte é que a "iblioteca LeafletJS é realmente muito simples e fcil de entender.
'.
<%tml&
(.
<%ead&
).
.
<script src+,lea0let/lea0let.2s,&
3.
6.
7.
8.
15. 11. 1'.
<script t-pe+,tet/2avascript,& var map + =.map>[email protected]ie;>BC(.1(5)58C35.5'()'3E1'@: =.tile=a-er>?%ttp9//a.tile.openc-clemap.org/c-cle/FzG/FG/F-G.png?
Fattribution9 ?Mapas Hcop-: pen-cleMap Dados do Mapa Hcop-: contribuidores do [email protected]"o>map@: 1(.
=$I$JDA9 K"M=9 K-per "et Mar*up =anguage SS9 ascade St-le S%eeting LS 9 LavaScript
m mapa na web elaborado com a "iblioteca LeafletJS depende (a princ/pio! de tr's linguagens diferentes ( 2%ML/ (SS e JavaScript !. 1ão essas 0K linguagens que observamos acima. &gora, que tal identificar cada uma destas linguagens e %(& htarop 8h &)
descobrir o que elas fazem no momento em que visualizamos nosso primeiro mapa na web3
@+DC*
& primeira lin"a é uma declara#ão, informando aos visitantes do nosso c-digo que o documento que ele est acessando é uma pgina web codificada em LA*8. É uma simples conven#ão e pode ser mais ou menos espec/ficaM. )ara este livro, utilizaremos apenas a declara#ão acima. & se#ão N"eadO da nossa pgina LA*8 apresenta dois lin1s% )8
linG relHstlesheet tpeHte3tKcss hrefHleafletKleaflet8css KF
Este é um lin= para o arquivo de fol"as de estilo (11! localizado em nossa pasta leaflet (CebmapFCm0@FleafletFleaflet.css!. & fun#ão deste lin1 é trazer os estilos do arquivo 11 para que sejam aplicados ao nosso mapa na webP. %8
script srcHleafletKleaflet8?sFKscriptF
Este é nosso outro lin=. +esta vez, ele faz a liga#ão com o arquivo 7ava1cript localizado em nossa pasta leaflet (CebmapsFCm0@FleafletFleaflet.js!. 9 arquivo lin=ado (leaflet.js! é a GmquinaH do nosso mapa. 8
titleFebMap (&KtitleF
ma tag LA*8 para informar ao navegador o nome da nossa pgina. Este t/tulo ser exibido na aba do seu navegador. 7 na se#ão NbodQO vamos encontrar% !8 div idHmapa stleHposition absoluteN top (N left (N Oidth &((PN height &((PNFKdivF 4 http://www.w3.org/QA/2002/04/valid-dtd-list.html 5 >$e %a !er ,$rio!o e abrir o ar=$i2o &eafe%.,!!& em !e$ edi%or de %ex%o!? Cer%ifi=$e(!e apena! de n@o a%er(o# !e n@o !o$ber o =$e e!% faendo# < ,aro... %(& htarop 8h &%
?om, relembrando, a tag NdivO tem a fun#ão de criar Gblocos de elementosH em nossa pgina, indicando ao navegador web onde e como GplotarH estes blocos na pgina. & cada elemento NdivO atribu/mos um identificador id 2nico (um caractere alfanumérico que não se repete em nosso c-digo!. ;esse caso, nosso id é mapa. +entro de stQleR encontramos especifica#$es de posi#ão e taman"o da NdivO onde est inserido nosso mapa na web, escritas em linguagem 11. &gora, a se#ão NscriptO% &(8 script tpeHte3tK?avascriptF var map H L8map5QmapaQ78setRieO5$A8&A()(!,$(8('A)'T, &'7N L8tileLaer5QhttpKKa8tile8opencclemap8orgKccleK.VK3VKV8pngQ, attribution Q*odos os Mapas WcopN DpenCcleMap, dados do mapa WcopN contribuidores do DpenStreetMapQ
V78add*o5map7N KscriptF
& primeira lin"a deste bloco de c-digo simplesmente informa ao navegador% o que vem a seguir é um script , escrito em linguagem JavaScript . Em seguida, temos nosso primeiro trec"o de JavaScript % &&8
var map H L8map5QmapaQ78setRieO5$A8&&!!)",$(8('()')T, &'7N
var, em 7ava1cript, é uma palavra reservada para declarar uma varivel. & fun#ão da GvarivelH é armazenar um valor ou uma fun#ão na mem-ria, permitindo que acessemos essa varivel posteriormente. ;a senten#a acima, declaramos uma varivel com o nome map. Essa declara#ão é feita a partir de uma GclasseH, c"amada 8.map, que é responsvel por efetivamente criar nosso mapa S c"amaremos essas classes de GconstrutoresH. %(& htarop 8h &
+epois, vinculamos nosso mapa B Ndiv idR GmapaHO que "av/amos criado, incluindo o id da nossa NdivO entre os par'nteses do nosso construtor 8.*ap(mapa!. 9u seja, com o nosso c-digo, dissemos o seguinte% Go mapa dever ficar dentro da NdivO c"amada mapa.H Em seguida, utilizamos o método 4set5iew4 para definir as duas op#$es que caracterizam nosso mapa. &s op#$es do 4set5iew4 são% coordenadas do centro do mapa ao iniciar a aplica#ão (latitude e longitude! T3K.@K0M0U,3V0.0DKMDVW e o zoom inicial do nosso mapa, identificado apenas com o n/vel de zoom que é apresentado ao iniciarmos o mapaV. &gora, temos o seguinte trec"o% →
&'8 L8tileLaer5QhttpKKa8tile8opencclemap8orgKccleK.VK3VKV8pngQ, attribution Q*odos os Mapas WcopN DpenCcleMap, dados do mapa WcopN contribuidores do DpenStreetMapQ
V78add*o5map7N
8.tile8aQer(X! é outra classe (construtor! da biblioteca 8eaflet71, utilizada para Gcarregar tiles6 em nosso mapa. 9s tiles são adicionados ao nosso mapa, utilizando o método S addAo(...!. %iles nada mais são que recortes georreferenciados da imagem de um mapa. 9s tiles ficam armazenados em um servidor web e são acessados por meio de um lin= Y8 (um endere#o web!. ;o nosso caso, estamos utlizando os tiles do 7pen(8cleMapZ. 9 seguinte trec"o... attribution Q*odos os Mapas WcopN DpenCcleMap, dados do mapa WcopN contribuidores do DpenStreetMapQ
...informa a fonte dos tiles que utilizamos, gerados pelo 7pen(8cleMap. É isso Esse é o c-digo bsico para todas as aplica#$es de mapas na web que voc' vai desenvolver com a ?iblioteca 8eaflet71. 6 7
9o!!o mapa $%iia %ie! do OS – OpenStreetMap – e a! opBe! de oom 2ariam de a 1D. www.opencyclemap.org/docs e www.openstreetmaps.org %(& htarop 8h &"
oisas para tentar! &ntes de seguir até o pr-ximo cap/tulo, gostar/amos de convid3 lo para tentar algumas coisas a partir do c-digo com o qual trabal"amos anteriormente. Tamanhoepos i çãodomapa
& tag LA*8 NdivO usa a linguagem 11 para especificar o taman"o e a posi#ão de um bloco da pgina. Em 11, definimos a altura e a largura (heigth e width!, deste bloco, utilizando porcentagem ([! ou pixels (px!. &bra o seu c-digo no editor de textos e modifique a altura e a largura como mostrado abaixo% div idHmapa stleHposition absoluteN top (N left (N margin (N Oidth %(PN height %(PNFKdivF
&p-s alterar os valores de "eigt"% e Cidt"% para 5)1, salve seu arquivo na mesma pasta como index0@."tml e abra3o em um navegador web.
&gora, vamos fazer mais uma altera#ão% div idHmapa stleHposition absoluteN top '%PN left '%PN margin (N Oidth %(PN height%(PNFKdivF
<ere os valores de top% e left% para 51, salve as altera#$es na mesma pasta como index0D."tml e abra seu arquivo em um navegador web.
#$%&'( ). (222.....
Experimente aumentar e diminuir a janela do seu navegador. 6a#a também algumas altera#$es utilizando pixels ao invés de valores de porcentagem, utilizando os valores GZ00pxH para altura e P00pxH para largura. É isso Modi f i candoozoom i ni ci al
&bra nosso arquivo original no seu editor de textos e experimente substituir o valor do zoom inicial (@D! por @\ e, e seguida por M. var map H L8map5QmapaQ78setRieO5$A8&A()(!,$(8('A)'T, &'7N
1alve na mesma pasta, respectivamente como index0K."tml e indexM."tml. &bra os arquivos em seu navegador web e observe as altera#$es.
%(& htarop 8h &!
Modi f i candoomapabase
&bra seu arquivo de c-digo original em seu editor de textos e experimente substituir o endere#o web do lin= para os tiles do 7pen(8cleMap, encontrado na lin"a... L8tileLaer5QhttpKKa8tile8opencclemap8orgKccleK.VK3VKV8pngQ7
...por cada em dos seguintes endere#os, um de cada vez% OpenStreetMap.
'http://{s}.www.toolserver.org/tiles/bw-apnik/{!}/{"}/{#}.png'
BlackAndWhite
OpenMapS$r%er. 'http://{s}.tile.openstreetap.%r/hot/{!}/{"}/{#}.png'
&oads (h$nder%orest.
'http://{s}.tile.th$nder%orest.co/landscape/{!}/{"}/{#}.png'
)andscape
1alve cada nova altera#ão como um index diferente% index0P."tml, index0V."tml e index0Z."tml e abra em seu navegador. #$%&'( )5. 4$0 $$ 7 ( 8$94
+iferentes provedores de tiles R diferentes mapas3base\.
ea $ma i!%a de pro2edore! de tiles clicando aqui! %(& htarop 8h '(
%(& htarop 8h '&
Um Mapamai s I nt er es s ant e dicionar marcadores ao seu mapa >dicionar dicionar m:ltiplos marcadores ao seu mapa
...Preparando um Ambiente de Desenvolvimento ;o cap/tulo anterior n-s preparamos nosso ambiente de desenvolvimento local. Audo o que faremos daqui por diante para desenvolver novos mapas na web é reutiliz3lo. &penas relembrando% temos nosso(s! navegador(es! web, nosso editor de textos favorito, a "iblioteca LeafletJS , uma conexão com a 5nternet e nosso conjunto de diret-rios e pastas j organizado, além, é claro, do nosso c-digo bsico para aplica#$es de mapas na web. &gora, criaremos uma c-pia da nossa pasta Cm0@, salvando essa c-pia dentro da pasta Cebmaps e renomeando3a para Cm0D. +entro dela, deixaremos apenas a pasta leaflet e o arquivo index."tml original.
1- isso
...Mão na Massa! &bra o arquivo index."tml, salvo na pasta Cm0D, em seu editor de textos. 5nsira o trec"o de c-digo destacado (abaixo! ap-s o construtor 8.tile8aQer(...!], como mostrado a seguir%
script tpeHte3tK?avascriptF var map H L8map5QmapQ78setRieO5$A8&A()(!,$(8('A)'T, &7N L8tileLaer5QhttpKKa8tile8opencclemap8orgKccleK.VK3VKV8pngQ, attribution Q*odos os Mapas WcopN DpenCcleMap, dados do mapa WcopN contribuidores do DpenStreetMapQ
V78add*o5map7N
=.mar*er>BC(.1(5)58C35.5'()'[email protected]"o>map@ .bindPopup>?@: KscriptF
#$%&'( ). VOILÀ! III; 4 'E,4'N4
%(& htarop 8h ')
...Dissecando o código! *uito bem, vamos discutir como funciona a inser#ão de um marcador em seu mapa desenvolvido com a ?iblioteca 8eaflet 71. ;-s inserimos o seguinte trec"o de c-digo% L8marGer5$A8&A()(!,$(8('A)'T78add*o5map7 8bindma.onas brF inaugurado em &#!8KcenterFQ78open
)erceba que utilizamos um novo construtor (9actor8 , como aparece na documenta#ão original do 8eaflet71! c"amado 8.mar=er, cuja responsabilidade é inserir marcadores em nosso mapa ( mar1er R marcador!. ^uando utilizamos este construtor, nosso c-digo acessa as refer'ncias do c-digo 7ava1cript que este construtor utiliza, no arquivo leaflet.js que "av/amos inclu/do como um lin= em nossa se#ão N"eadO] lembra: Em seguida, indicamos ao nosso objeto 8.mar=er(...! 7N:E est localizado o nosso marcador, informando a ele um par de coordenadas geogrficas (8at, 8ong S 8atitude e 8ongitude!. Então, o resultado é adicionado ao mapa por meio do método add.Ao(map!, que j "av/amos discutido no cap/tulo anterior. Em seguida, por meio do método *bind4 (que cria um GadendoH ao nosso marcador!, acrescentamos uma +opup .bind)opup(...!. )or fim, utilizamos a linguagem LA*8 e suas tags para incluir o conte2do da nossa )opup% →
5QcenterF*eatro >ma.onas brF inaugurado em &#!8KcenterFQ7
&lém da utiliza#ão das tags LA*8, nossa +opup pode ser customizada por meio da utiliza#ão da linguagem 11. %r;s simple<
%(& htarop 8h '%
Adi ci onandoMúl t i pl osMar cador es
*apas com um 2nico marcador são muito 2teis para apresentar a localiza#ão de um prédio, um equipamento p2blico, um evento, etc, mas, algumas vezes precisamos apresentar m2ltiplas localiza#$es em um mesmo mapa (por exemplo% pontos de c"ecagem de uma corrida de aventura ou todos os postos de sa2de de uma cidade! e, para isso, precisaremos inserir m2ltiplos marcadores em um 2nico mapa. E como fazemos isso: olocando a...
...Mão na Massa!
V78add*o5map7N L8marGer5$A8&A()(!,$(8('A)'T78add*o5map78bind
>ma.onas, brF inaugurado em &#!8KcenterFQ78opendolpho Lisboa, brF inaugurado em &##A8KcenterFQ7N L8marGer5$A8&A)!"#, $(8(&#AT78add*o5map78bind
1alve o arquivo index0@."tml, v até a pasta Cm0D, clique com o botão direito do mouse sobre o arquivo index0@."tml e abra3o em seu navegador web.
#$%&'( )<. ...'VOILÀ! III, 4 'E,4'N4 ( 8$94'
8egal, agora temos tr's marcadores em nosso 4webmap4 S note que os tr's apontam a localiza#ão de diferentes edif/cios "ist-ricos de *anaus. lique sobre os tr's diferentes marcadores apresentados em nosso mapa e c"eque as popups. Audo 9_: Lummmm....quer dizer que voc' não sabe por que ao invés do caractere GH apareceu o caractere G`H: E agora: omo vamos resolver essa questão:
...Dissecando o ódigo! alma &ntes de dissecarmos o c-digo, mais um pouco de mão na massa &bra seu arquivo index0@."tml em seu editor de textos e insira o trec"o de c-digo destacado abaixo, de acordo com a estrutura apresentada% headF linG relHstlesheet tpeHte3tKcss hrefHleafletKleaflet8cssKF
<meta c%arset+,"NC7,& script srcHleafletKleaflet8?sFKscriptF titleFebMapKtitleF KheadF
%(& htarop 8h '"
Yepita o procedimento (nosso con"ecido procedimento...! e abra o seu arquivo index0@."tml em seu navegador web. lique novamente sobre o marcador referente B localiza#ão do )alcio Yio ;egro e confira a popup. LeQ &gora sim G3 &vante, compa=eros, vamos dissecar o c-digoH 9 trec"o Nmeta c"arsetR GA63\HO é responsvel por apresentar, em nosso navegador web, os caracteres especiais (#, , é, /, -, 2, etc! e, como nossa l/ngua mãe (querida mãe! é rica nesses caracteres, a partir de agora vamos sempre incluir esse trec"o em nossos c-digos, o=: &diante 9utra altera#ão em nosso c-digo, que podemos observar, é com rela#ão ao ponto central do mapa e ao 'oom inicial que aplicamos, no seguinte trec"o% var map H L8map5QmapaQ78setRieO5$A8&A)A%, $(8('("()T, &%7N
9 centro do nosso mapa agora possui as coordenadas >?*@?AB?C/ >BD*D0DDA e o 'oom inicial que aplicamos é @C. Estes ajustes foram realizados para obtermos uma visualiza#ão mel"or ajustada dos tr's marcadores na tela do computador e foram realizados editando o c-digo, como vimos nos cap/tulos anteriores. 9 mapa base continua definido da mesma maneira (o trec"o de c-digo que se inicia com 8tile8aQer! . &gora, finalmente, vamos aos marcadores% L8marGer5$A8&A()(!,$(8('A)'T78add*o5map78bindma.onas, brF inaugurado em &#!8KcenterFQ78open
L8marGer5$A8&A!!"A,
$(8('A"T78add*o5map78binddolpho Lisboa, brF inaugurado em &##A8KcenterFQ7N L8marGer5$A8&A)!"#, $(8(&#AT78add*o5map78bind
%(& htarop 8h '#
;-s mantivemos o marcador preexistente, com a localiza#ão do Aeatro &mazonas e acrescentamos dois novos marcadores. 5nserimos estes novos marcadores apenas reproduzindo o formato de c-digoU que utilizamos para o primeiro marcador. ;ote que, ao final de cada marcador utilizamos G]H, fec"ando as senten#as. &s altera#$es ficaram restritas, então, B localiza#ão de cada marcador, Bs suas coordenadas e ao texto que apresentamos nas popups. ;ote que em nossos novos marcadores, retiramos o trec"o de c-digo Gopen)opup(!H, assim, a popup a ser aberta quando iniciamos o mapa no navegador web é a que se refere ao Aeatro &mazonas. (note esta outra nota% a biblioteca 8eaflet71 não abre, por padrão, m2ltiplas popups. 9u seja, caso todos os tr's marcadores possu/ssem o c-digo Gopen)opup(!H, apenas o 2ltimo abriria uma popup!. *uito legal, né: ,espire/ dF uma caminhada e volte para o nosso prG&imo capHtulo<
D
E!!a < $ma pr%i,a m$i%o ,om$m# o reapro2ei%amen%o de $m %re,ho de ,Gdio. A,o!%$me(!e e $%iie e!!a %<,ni,aH %(& htarop 8h '!
Tudooquevocês empr equi ssabersobr e
Mar cador esePopups masnãot i nhacor agem deper gunt ar . . . dicionar marcadores customi.ados ao seu mapa >dicionar m:ltiplos marcadores customi.ados ao seu mapa >dicionar Popups customi.adas aos seus marcadores >grupar marcadores em camadas
Um mar cadorcust omi zado
...Preparando um Ambiente de Desenvolvimento ?om, voc' j deve ter se acostumado com o procedimento de prepara#ão de um ambiente de desenvolvimento, mas, ainda assim, vamos l 9 que temos a fazer é criar uma c-pia da pasta Cm0D e renome3la como Cm0K, apagando o arquivo index0@."tml, entendido: &penas isso &gora, arregace as mangas e...
...Mão na Massa! 6a#a o doCnload das imagens que utilizaremos para o nosso marcador customizado através do endere#o eletrnico http://geotecnologias.org/desenvolvendo-we=ma ps/. &p-s o doCnload, salve todas as imagens na pasta CebmapsFCm0KFleafletFimages. 9_ &gora, abra o arquivo index."tml (na pasta Cm0K! e apague o trec"o do c-digo referente ao marcador@0 (este trec"o se inicia em 8.mar=er(...! e termina em .open)opup(!]!. ;o lugar do c-digo que apagamos, copie e cole o trec"o a seguir% var teatro H L8icon5 iconUrl QleafletKimagesKteatro8pngQ, shadoOUrl QleafletKimagesKteatro$sombra8pngQ, iconSi.e
#(, #(T,
shadoOSi.e #(, )T, icon>nchor )(, )(T, shadoO>nchor (, (T, popup>nchor (, $A%T V7N L8marGer5$A8&A()(!,$(8('A)'T, icon teatroV78add*o5map78bindma.onas brF inaugurado em &#!8KcenterFQ78open
1 imo! =$a < o %re,ho a =$e no! referimo! no ,ap8%$o an%erior# embra?
*uito bom &gora salve seu arquivo, v até a pasta Cm0K e abra o arquivo index."tml em seu navegador. 8ogo adiante n-s discutiremos este trec"o de c-digo acima, detal"adamente. . ...'VOILÀ!' $ 7 N&N?( 8($ 'VOILÀ!'
8egal 5sso funciona, "un: erto, agora, sigamos...
...Dissecando o código! &ntes de irmos por partes, vamos por partes... 9 marcador GpadrãoH da ?iblioteca 8eaflet71 (o /cone azul! é composto, na verdade, por dois arquivos de imagem em formato .png@@ e ambos ficam armazenados na pasta leafletFimages% #$%&'( *). 8('?(4' ('94
)ara compor o Gmarcador padrãoH (que visualizamos em nossas aplica#$es!, as duas imagens (mar=er.png e s"adoC.png! são combinadas em um resultado final S j, j entenderemos como isso é feito. )ara o nosso Gmarcador customizadoH (o novo marcador!, utilizamos dois outros arquivos de imagens, em formato .png, também 11 Portable Network Grapics# 2ea a! refern,ia! em http://pt.wikipedia.org/wiki/P %(& htarop 8h A'
combinados% #$%&'( **. 8('?(4' ?&,48$@(4
Uma dicaI vocF pode encontrar inmeros websites para download de icons !Hcones# ou utili'ar um software de desenho gráfico/ como o Kn1scape !opensource# por e&emplo/ para produ'ir seu marcador *png personali'ado*
Então, inserir um marcador customizado é uma tarefa realizada em duas partes. ( primeira parte corresponde ao ato de definir AiB QUEM é o seu marcador e definir AiiB COMO ele aparecer em seu mapa. AiB QUEM é o seu marcador: var teatro H L8icon5 iconUrl QleafletKimagesKteatro8pngQ, shadoOUrl QleafletKimagesKteatro$sombra8pngQ, 58887
9 trec"o de c-digo acima nos d essa resposta, dizendo quem é o nosso marcador. 9u seja, nosso marcador se c"ama GteatroH e é constru/do a partir de duas imagens% teatro.png e a sua sombra (s"adoC! teatro3sombra.png. ?om, isso é feito a partir da utiliza#ão de um construtor 8.icon(...!, que define quem é nosso marcador e define as imagens que vamos utilizar. Ele liga nosso /cone principal iconrl% leafletFimagesFteatro.png e a sua sombra s"adoCrl% leafletFimagesFteatro3sombra.png , indicando a Y8 de cada um dos arquivos de imagem.
%(& htarop 8h AA
9_ &cabamos de ver como funciona a defini#ão de uem é o nosso marcador. *as como ele aparece em nosso mapa: ?em, AiiB COMO é definido a partir de um conjunto de op#$es% icon1ize% T\0, \0W, FF que define valores para o taman"o do /cone (largura, altura! s"adoC1ize% T\0, MVW, FF que define valores para o taman"o da sombra (idem! icon&nc"or% TM0, M0W, FF define a ancoragem do centro do /cone em rela#ão Bs coordenadas do local do marcador s"adoC&nc"or% TV0, 0W, FF ponto da sombra que corresponde ao seu local no mapa popup&nc"or% T0, 3KPW FF ponto da apresenta#ão da ncora da popup, com rela#ão ao icon&nc"or Aodos estes pares de valores acima, referem3se B ancoragem das figuras do marcador e correspondem ao ato de definir os taman"os e as posi#$es das imagens que utilizamos, além de definir as rela#$es entre elas. ( segunda parte da cria#ão de um marcador customizado corresponde ao ato de inseri3lo em nosso webmap. 5sto é feito utilizando3se o mesmo procedimento utilizado para inserir um marcador padrão, com um 2nico detal"e diferente% o detal"e de GinformarmosH que utilizaremos o nosso marcador customizado% Iicon% teatroJ, observe% L8marGer5$A8&A()(!,$(8('A)'T, Ficon9teatroG78add*o5map78bindma.onas brF inaugurado em &#!8KcenterFQ78open
1imples assim. ?om, refrescando a mem-ria, logo abaixo retomamos nossa GreceitaH para criar marcadores customizados% rie o /cone (e sua sombra! em formato .png] • 5nsira as imagens na pasta leafletjsFimages] • • rie um marcador customizado por meio da declara#ão de uma %(& htarop 8h A)
•
varivel, a partir do construtor 8.icon] 5nsira o marcador no mapa, indicando o /cone a ser utilizado (o nome da varivel do marcador customizado!. E é isso ?em legal, né:
"om/ para alguns de nGs/ essa parte foi um pouco mais dura de apreender* Ent)o/ recomendo ue vocF faça uma peuena pausa/ respire/ tome um caf e pense sobre o assunto* Se a ficha cair/ Gtimo* (aso a ficha n)o caia de primeira/ releia/ faça testes/ seja criativo para aprender< Uma segunda leitura/ com novos olhos sobre o problema/ sempre mais auspiciosa*
Múl t i pl osmar cador escust omi zados
...Mão na Massa! 9_ 6a#a uma c-pia do arquivo index."tml e renomeie3o para index0@."tml. &bra3o em seu editor de textos e substitua o c-digo pré3existente (entre as tags NscriptO! pelo seguinte% var map H L8map5QmapaQ78setRieO5$A8&A)A%, $(8('("()T, &%7N L8tileLaer5QhttpKKa8tile8opencclemap8orgKccleK.VK3VKV8pngQ, attribution QMapas WcopN DpenCcleMap, +ados do Mapa WcopN contribuidores do DpenStreetMapQ
V78add*o5map7N
var teatro H L8icon5 iconUrl QleafletKimagesKteatro8pngQ, shadoOUrl QleafletKimagesKteatro$sombra8pngQ, iconSi.e
#(, #(T,
shadoOSi.e #(, )T, icon>nchor )(, )(T, shadoO>nchor (, (T, popup>nchor (, $A%T V7N var mercado H L8icon5 iconUrl QleafletKimagesKmercado8pngQ,
%(& htarop 8h A%
shadoOUrl QleafletKimagesKteatro$sombra8pngQ, iconSi.e
#(, #(T,
shadoOSi.e #(, )T, icon>nchor )(, )(T, shadoO>nchor (, (T, popup>nchor (, $A%T V7N var palacio H L8icon5 iconUrl QleafletKimagesKpalacio8pngQ, shadoOUrl QleafletKimagesKteatro$sombra8pngQ, iconSi.e
#(, #(T,
shadoOSi.e #(, )T, icon>nchor )(, )(T, shadoO>nchor (, (T, popup>nchor (, $A%T V7N L8marGer5$A8&A()(!,$(8('A)'T, icon teatroV78add*o5map78bindma.onas brF inaugurado em &#!8KcenterFQ78opendolpho Lisboa, brF inaugurado em &##A8KcenterFQ7N L8marGer5$A8&A)!"#, $(8(&#AT, icon palacioV78add*o5map78bind
&p-s salvar seu arquivo com as altera#$es, abra3o em seu navegador, repetindo nossa opera#ão padrão.
%(& htarop 8h A
#$%&'( *. ...N&N?( 8($ 'VOILÀ!' ( 8($ &8( E@B
...Dissecando o código! ?ons e vel"os dissecadores de c-digo, vamos l Audo bem, n-s mantivemos o mesmo mapa3base, declarado pela varivel var map (mesmo procedimento que acabamos de realizar, logo ali, acima...!, com altera#$es da posi#ão inicial do mapa. E, no fim das contas, o que fizemos foi reproduzir a estrutura que utilizamos para incluir um 2nico marcador customizado (nossa primeira conversa neste cap/tulo, lembra3se:!, ou seja, informamos como o nosso marcador e a sua sombra devem ser apresentados para, em seguida, utilizarmos essa informa#ão em nosso marcador no mapa. 9 interessante é que podemos GmimetizarH esse tipo de estrutura de c-digos utilizando novos marcadores, indefinidamente% é exatamente o que fizemos aqui. &s variveis teatro, mercado e palacio remetem aos diferentes arquivos .png (nossos /cones! que serão apresentados no mapa. &ssim, podemos perceber como é fcil manipular os marcadores% o destaque fica para os cuidados a se tomar no momento de Gdesen"arH nosso mapa e incluir os /cones espec/ficos relacionados %(& htarop 8h A"
aos marcadores corretos. )or fim, utilizamos os mesmos procedimentos para incluir nossos marcadores ao mapa, por meio do construtor 8.mar=er. Ei, voc' conseguiu entender o que eu disse, sem que eu precisasse ilustrar com trec"os de c-digo. 5sso é fantstico omo sempre, adiante Agr upandoMar cador esem Camadas
...Mão na Massa! +entro da pasta Cm0K, fa#a uma c-pia do arquivo index."tml e, ap-s isso, abra o arquivo index0D."tml em seu editor de textos. &gora, vamos l ;ossa meta aqui é criar um webmap que apresente algumas localiza#$es no mapa, para que um turista que pretenda ir a *anaus possa con"ecer alguns prédios "ist-ricos e verificar a localiza#ão de poss/veis "otéis, restaurantes, postos de sa2de e delegacias de pol/cia. Então, vamos repetir o con"ecido procedimento, substituindo o c-digo entre as tags html NscriptO do seu arquivo index0D."tml, aberto em seu editor de textos, pelo c-digo apresentado a seguir% var map H L8map5QmapaQ78setRieO5$A8&A)""', $(8('('T, &)7N L8tileLaer5QhttpKKa8tile8opencclemap8orgKccleK.VK3VKV8pngQ, attribution QMapas WcopN DpenCcleMap, +ados do Mapa WcopN contribuidores do DpenStreetMapQ
V78add*o5map7N
var predioshistoricos H L8laerZroup5 L8marGer5$A8&A()(!,$(8('A)'T78bindma.onas brF inaugurado em &#!8KcenterFQ7, L8marGer5$A8&A!!"A, $(8('A"T78binddolpho Lisboa, brF inaugurado em &##A8KcenterFQ7,
%(& htarop 8h A#
L8marGer5$A8&A)!"#, $(8(&#AT78bindimenta12oQ alimentacao, QSa:deQ saude V78add*o5map7N
%(& htarop 8h A!
#$%&'( *3. ...DIMI EE "#EM, $!'
;ote que ali, no canto direito3superior, existe um pequeno /cone% coloque seu mouse sobre ele e ligue e desligue as camadas. 5nteressante, né:
...Dissecando o ódigo! *uito bom & primeira coisa a se dizer é que declaramos coordenadas diferentes para o in/cio do mapa, com o intuito de ajustar mel"or nosso mapa aos marcadores que são apresentados. 9 segundo ponto a ser discutido é Gomo agrupamos marcadores em camadas:H. 6azemos isso declarando uma varivel e utilizando o construtor 8.laQerroup, utilizando a seguinte estrutura% var nomedavariavel = L.layerGroup ([ marcadores ]).addTo(map)
;ote que, para cada grupo de camadas, n-s reaproveitamos a mesma estrutura de c-digo] investigue o c-digo para entender )or 2ltimo, acrescentamos o construtor 8.control.laQers e dizemos quais grupos de camadas queremos apresentar em nosso mapa, no trec"o% %(& htarop 8h )(
L8control8laers 5V, Qimenta12oQ alimentacao, QSa:deQ saude V78add*o5map7N
?eeeem interessante. 1- uma dica% experimente incluir o trec"o destacado a seguir no seu c-digo% L8control8laers 5V, Qimenta12oQ alimentacao, QSa:deQ saude VFcollapsed90alseG78add*o5map7N
1"oC Cust omi zandoPopups
Encerrando esse cap/tulo, vamos rapidamente dar uma ol"ada em como customizar as popups de nossos mapas na web, o que pode ser bem 2til no momento de definir um desen"o ( 4design4 ! interessante para os nossos mapas.
%(& htarop 8h )&
Mão na Massa! a.Mudandoacordef undo
+entro do seu diret-rio Cebmaps, fa#a uma c-pia da pasta Cm0D (aten#ão! e renomeie3a para Cm0M. +entro desta 2ltima pasta, apague o arquivo index0@."tml e, logo depois, acesse a pasta Cm0MFleafletF e abra o arquivo leaflet.css (aten#ão! em seu editor de textos. 9= Encontre, na lin"a MD\ (ou pr-ximo a essa lin"a!, o seguinte trec"o de c-digo% 8leaflet$popup$content$Orapper, 8leaflet$popup$tip bacGground ;%iteN bo3$shadoO ( Ap3 &)p3 rgba5(,(,(,(8)7N V
Este trec"o de c-digo define a cor de fundo ( bac1ground ! da sua popup. 1ubstitua a palavra white6 pela palavra blac16* 1alve o arquivo leaflet.css e abra o arquivo index."tml em seu navegador web] voc' dever ver o seguinte% #$%&'( *. ...%I", QUI"#&O!'
*uito bom... om essa simples altera#ão, voc' poder encontrar in2meras possibilidades de cores para as suas popups. %(& htarop 8h )'
*as, temos um Y&;+E problema ( fui irOnico/ sabe3< !% essa altera#ão fez com que o bac1ground e a cor do texto ficassem iguais, impedindo que l'ssemos o conte2do da nossa popup. E agora: b.MudandoaCordosCar act er es
?om, essa é uma tarefa muuuiiitttooo complicada ( fui irOnico/ de novo/ n)o teve graça/ mas fui*** !. Audo o que temos a fazer aqui é o seguinte% no trec"o de c-digo que acabamos de utilizar, mostrado acima, apenas inclua a senten#a GcolorI white$H na lin"a abaixo de Gbac1groundI blac1$H , como apresentamos a seguir% 8leaflet$popup$content$Orapper, 8leaflet$popup$tip bacGground blacGN color OhiteN $ $ $ trecho a ser inclu9do bo3$shadoO ( Ap3 &)p3 rgba5(,(,(,(8)7N V
Yepita nosso bom e vel"o procedimento, auele, salvando o arquivo e clicando com o botão direito sobre index."tml, abrindo o arquivo em seu navegador web.
9= %(& htarop 8h )A
c.Mudandoasbor das
ma 2ltima altera#ão em nossas popups antes de seguirmos adiante. +entro do mesmo arquivo leaflet*css4 , na lin"a KUV, faremos mais uma altera#ão, no seguinte trec"o de c-digo% 8leaflet$popup$content$Orapper padding &p3N te3t$align leftN border$radius &'p3N ! vo"# vai substituir este valor$ V
Em l/ngua inglesa, GborderH significa GbordaH e GradiusH significa GraioH, logo Gborder3radiusH permite que...alteremos a curvatura do raio da borda (KncrHvel< !@D. 1ubstitua o valor de @Dpx por 0px. &bra o arquivo em seu navegador e voc' dever visualizar% #$%&'( *6. ?48EC4 ( 8E EN,$' 4E'44...
;ote que, no c-digo 11, " dezenas de outras op#$es pass/veis de altera#ão. Experimente om cuidado, reservando uma pasta para os testes, mas experimente É isso a/, j c"egamos longe, mas ainda vamos adiante 1" Fi e!!a brin,adeira# ma!# pen!ando bem# !e 2o, der $ma aribadaJ no !e$ in!# peo meno! %en%ando %rad$ir eemen%o!(,ha2e da *ibio%e,a :eafe%;S# 2o, ,on!e$ir en,on%rar ,om mai! fa,iidade o! %re,ho! de ,Gdio =$e pre,i!a a%erar. icaadica %(& htarop 8h ))
Desenhandosobr emapascom
Li nhas,Cí r cul ose Pol í gonos dicionar Camadas Retoriais $ Linhas, C9rculos e et[ngulos >plicar Estilos 5espessura, cor, transpar4ncia7 aos vetores Entender o funcionamento de servi1os ar;uivos ZeoJson
DesenhandoLi nhassobr eomapa
&té aqui, conversamos sobre como representar locais ou eventos pontuais em nossos mapas, explorando algumas das possibilidades que a biblioteca 8eaflet7s nos oferece. E isso foi legal *as, e se quisermos representar lin"as em nossos mapas interativos: Arajetos, ruas, fal"as geol-gicas: ?om, precisaremos de lin"as desen"adas sobre os nossos mapas. E como fazer isso: 1eguindo adiante e...
...Preparando um Ambiente de Desenvolvimento 9_ 6a#a uma c-pia da pasta Cm0D (0D, certo:! e renomeie3a para Cm0P. +entro da pasta Cm0P, apague o arquivo index0@."tml e abra o arquivo em index."tml em seu editor de textos. &gora...
...Mão na Massa! Yemova todo o c-digo entre as tags Nscript tQpeRtextFjavascriptONFscriptO. )erfeito &gora, copie e cole, com cuidado, o seguinte trec"o de c-digo entre as referidas tags% var map H L8map5QmapaQ78setRieO5$A8&A"##, $(8('()#%T, &7N L8tileLaer5QhttpKKa8tile8opencclemap8orgKccleK.VK3VKV8pngQ, attribution QMapas WcopN DpenCcleMap, +ados do Mapa WcopN contribuidores do DpenStreetMapQV78add*o5map7N var linha(& H tpe LineString, coordinates $(8('A'%!'''%(")#,$A8&A!#A()#!)#"A#T, $(8('&%"")"")%%&A,$A8&)(%&A)'%#(')'(AT, $(8(&!("''!)'A%'A,$A8&A)")"'#%"AAT, $(8(&A"(%A!#%,$A8&A)"'(%()'(((""T TV TN var estilodalinha(& H color \!A&A&e, Oeight A,
opacit & VN L8geoJson5linha(&,, stle estilodalinha(&V78ad L8geoJson5linha(& estilodalinha(&V78add*o5map78bind< d*o5map78bindcred opup5Q>credite, ite, eu sou uma linha em um mapa@Q78open
timo &gora salve seu arquivo, v até a pasta Cm0P Cm0P e e abra o arquivo index."tml em seu navegador web.
> Ei/ sem preguiça< 5amos entender o cGdigo<
...Dissecando o código! ?ora l & primeira parte do nosso c-digo, como j vimos anteriormente, é responsvel por trazer o mapa base para o nosso mapa. 6izemos algumas algumas altera#$ altera#$es es com rela#ão rela#ão ao 'oom inicial e ao centro do mapa, um procedimento que voc' j con"ece% var map H L8map5QmapaQ78setRieO L8map5QmapaQ78setRieO5 5C(.1(6737 C(.1(6737 C35.5'5)7E 13 7N L8tileLaer5QhttpKKa8tile8opencclema L8tileLaer5Qhttp KKa8tile8opencclemap8orgKccleK.V p8orgKccleK.VK3VKV8pngQ, K3VKV8pngQ, attribution QMapas WcopN DpenCcleMap DpenCcleMap,, +ados do Mapa WcopN contribuidores do DpenStreetMapQV78ad DpenStreetMapQV78add*o5map7N d*o5map7N
&gora, vamos ao trec"o do c-digo responsvel pela geometria %(& htarop 8h )"
da lin"a apresentada no mapa. var linha(& H tpe LineString, coordinates $(8('A'%!'''%(")#,$A8&A!#A()#!)#"A#T, $(8('&%"")"")%%&A,$A8&)(%&A)'%#(')'(AT, $(8(&!("''!)'A%'A,$A8&A)")"'#%"AAT, $(8(&A"(%A!#%,$A8&A)"'(%()'(((""T TV TN
9_ ;ossa lin"a é constru/da mediante a declara#ão de uma varivel (var (var lin"a0@! lin"a0@! e de seu 4tipo4 (o (o tipo de varivel!, ou seja, Ga que se refere essa varivelH (8ine1tring (8ine1tring!.!. Então, o nosso tipo de varivel se refere ao formato de arquivo eo7son@? / con"ecido como LineString (lin"a!. 8ogo 8ogo em segui guida, da, a part partir ir do trec"o coor coordinate dinates% s% TT,, o que fazemos é declarar uma série de pares de coordenadas geogrficas, referentes referentes aos vértices da nossa lin"a] observe a figura a seguir%
eoJson 13 GeoJson
é um formato de arquiv arquivo o para 'codifica 'codificar' r' uma variedade variedade de estrutur estruturas as de dados dados geográficos geográficos – pontos, linhas, polígonos, polígonos, círculos, entre outros). outros). Não se preocupe preocupe com isso agora !as se preocupe depois... ") %(& htarop 8h )#
#$%&'( *<. D'E?$( EEN2('0' EEN2('0 '
)igura aci*a aprese+ta c* clare-a uais s pares de crde+adas resp+s/0eis pr gerar uais 01rtices. I+teressa+te I+teressa+te esse *d de c+struir li+has, +23 +23
5sso significa que para desen"armos uma lin"a em nosso mapa, utilizamos os pares de coordenadas de seus vértices. ?em fcil, não: 9 trec"o seguinte do nosso c-digo... var estilodalinha(& H color \!A&A&e, Oeight A, opacit & VN
Xfaz refer'ncia a Gcomo nossa lin"a dever aparecer no mapaH, ou seja, qual o estilo que vamos aplicar a essa lin"a. &qui, color é a cor (em c-digo c-digo "exad "exadeci ecimal mal!,!, Ce Ceig"t ig"t é o peso, a largura da lin"a e opacitQ é opacitQ é a opacidade, que pode ser entendida como a transpar'ncia a ser aplicada (varia de 0 3 totalmente transparente 3 a @ S totalmente %(& htarop 8h )!
opaco!. &proveite para fazer algumas altera#$es nesses valores e ver o que acontece )or fim, nosso 2ltimo trec"o de c-digo% L8geoJson>lin%a51 L8geoJson >lin%a51 Fst-le9 estilodalin%a51G@8add*o5map78bindcredite, estilodalin%a51G@8add*o5map78bindcredite, eu sou uma linha em um mapa@Q78open
*uito simples
%(& htarop 8h %(
Des enhandoCí r cul ossobr eomapa
/rculos em um mapa são geralmente utilizados para representar a rea de influ'ncia radial de um determinado evento. ^uer dizer, tra#ar um c/rculo em nosso mapa nos ajuda a dar respostas para perguntas como Gaté quantos metros uma rvore aumenta a umidade relativa do ar:H, Gqual o impacto sonoro de um alto3falante instalado na pra#a central da cidade:H.
...Mão na Massa! 6a#a uma c-pia do arquivo index."tml, dentro da pasta Cm0P. Yenomeie3o para index0@."tml. &bra3o em seu editor de textos. &gora, apague o c-digo entre as tags Nscript tQpeRtextFjavascriptONscriptO, e cole o c-digo abaixo em seu lugar% var map H L8map5QmapaQ78setRieO5$A8&A()(!,$(8('A)'T, &7N L8tileLaer5QhttpKKa8tile8opencclemap8orgKccleK.VK3VKV8pngQ, attribution QMapas WcopN DpenCcleMap, +ados do Mapa WcopN contribuidores do DpenStreetMapQ
V78add*o5map7N
L8circle5$A8&A()(!,$(8('A)'T, &%(78add*o5map7N
1alve o arquivo index0@."tml e abra3o em seu navegador.
%(& htarop 8h %&
#$%&'( *>. F' 4&,4'; E,4& EN4 ?G'?&4 E8 8((...'
*uito bem, temos um c/rculo em nosso mapa ;este caso, ele est demarcando um raio de @P0 metros a partir da localiza#ão do Aeatro &mazonas. *ais uma vez, para o alto e...
...Dissecando o ódigo! 9_ ;ovamente, alteramos a localiza#ão do ponto central do mapa e do 'oom inicial que aplicamos em nosso mapa base (d' uma boa ol"ada em nosso c-digo, a partir de var map R 8.map, e também nos cap/tulos anteriores, caso ten"a d2vidas...!. &gora, vamos até a parte (realmente simples! do c-digo, que nos apresenta como inserir um c/rculo em nosso mapa% L8circle5C(.1(5)58C35.5'()'3 T, 1578add*o5map7N
É, voc' entendeu bem 9 centro do nosso c/rculo é dado pelo par de coordenadas T3 K.@K0M0U,3V0.0DKMDVW e o raio do nosso c/rculo é dado pelo valor, em metros, , @P0. É s- isso *uito simples porque é muito legal, muito legal por que é muito simples
%(& htarop 8h %'
Des enhandoPol í gonossobr eomapa
...Mão na Massa! 9_ 6a#a uma c-pia do arquivo index0@."tml e renomeie3o para index0D."tml. &bra3o em seu editor de textos e substitua o c-digo preexistente, entre as tags NscriptO pelo seguinte% var map H L8map5QmapaQ78setRieO5$A8&A!!!"%)!%A)&#',$ (8('&&))&"'#)T, &"7N L8tileLaer5QhttpKKa8tile8opencclemap8orgKccleK.VK3VKV8pngQ, attribution QMapas WcopN DpenCcleMap, +ados do Mapa WcopN contribuidores do DpenStreetMapQ
V78add*o5map7N L8polgon5 $A8&)(#'""'!&&!'#),$(8(''!(')##"(#)!T, $A8&A#!!)#!&"(!)),$(8(''!(')##"(#)!T, $A8&A#!!)#!&"(!)), $(8(&!)&%&!#!&AT, $A8&)(#'""'!&&!'#), $(8(&!)&%&!#!&AT T78add*o5map7N
&p-s salvar seu arquivo com as altera#$es que acabamos de realizar, abra3o em seu navegador web.
%(& htarop 8h %A
Em frente Enfrente e vamos seguir...
...Dissecando o código! ;-s fizemos a Galtera#ão clssicaH com rela#ão ao mapa3base, ou seja, alteramos a posi#ão inicial do mapa e o 'oom inicial. erto. &gora, a parte do c-digo responsvel por desen"ar o pol/gono no mapa% L8polgon5 $A8&)(#'""'!&&!'#),$(8(''!(')##"(#)!T, $A8&A#!!)#!&"(!)),$(8(''!(')##"(#)!T, $A8&A#!!)#!&"(!)), $(8(&!)&%&!#!&AT, $A8&)(#'""'!&&!'#), $(8(&!)&%&!#!&AT T78add*o5map7N
Epa ;-s j não vimos isso antes: ^uase... &qui, vemos a utiliza#ão de um novo construtor, 8.polQgon, que funciona a partir da declara#ão de um arra8 , ou seja, um conjunto de valores (em 7ava1cript!. ;o nosso caso, este arra8 possui valores de coordenadas geogrficas (pares!. Esses pares de coordenadas geogrficas correspondem aos valores dos vértices do nosso pol/gono, B semel"an#a do que vimos anteriormente com rela#ão Bs lin"as. ;ote que as coordenadas apresentam valores que correspondem, especificamente, a um retngulo *as, com o construtor 8.polQgon voc' pode criar outros tipos de pol/gonos, como tringulos, "exaedros, dodecaedros etc.
%(& htarop 8h %)
Apr es ent andoa
Car t ogr af i aTemát i ca em um navegadorweb dicionar Camadas temáticas ao seu mapa >plicar Estilos 5espessura, cor, transpar4ncia7 aos vetores Criar elementos do mapa escala, legenda +esenvolver eventos para os dados do mapa
9_
...Preparando um Ambiente de Desenvolvimento *uito bem 6a#a uma c-pia da pasta Cm0P e renomeie3a para Cm0V. ma vez dentro da pasta Cm0V, apague todos os arquivos com nome index..., menos o arquivo index."tml. erto...&gora, fa#a o doCnload do arquivo brasil.js na se#ão doCnloads, na pgina digital do livro@M. 1alve esse arquivo dentro da pasta Cm0VFleaflet. É isso
"E&45O! 7 tipo de aplicaç)o de mapas ue estamos prestes a desenvolver/ uma tarefa um pouco complicada para nGs/ ue estamos iniciando o desenvolvimento de mapas com a "iblioteca LeafletJS* Ent)o/ vamos alterar um pouco nosso procedimento de aprendi'ado pra facilitar as coisas< +ara o nosso mapa deste capHtulo/ vamos adotar um conjunto concatenado de D? seçPes M)o na Massa<6 Q :issecando o cGdigo6/ o13 5amos lá< 14 h%%pK//eo%e,nooia!.or/de!en2o2endo(ebmap!/
...Mão na Massa 51! < até a pasta Cm0V e abra o arquivo index."tml em seu editor de textos, como voc' j sabe fazer. timo &gora, no c-digo aberto, identifique a tag NbodQO e, na lin"a posterior, cole o c-digo abaixo, como destacado a seguir% bodF <script t-pe+,tet/2avascript, src+,lea0let/brasil.2s,&
)erfeito, vamos adiante Yemova todo o c-digo entre as tags Nscript tQpeRtextFjavascriptONFscriptO. opie e cole o trec"o de c-digo a seguir, entre as tags NscriptO% var map H L8map5QmapaQ78setRieO5$&)8)A")"A, $%"8)%#&&T, )7N L8tileLaer5QhttpKKsV8tiles8Omflabs8orgKbO$mapniGK.VK3VKV8pngQ, attribution QMapas WcopN DpenCcleMap, +ados do Mapa WcopN contribuidores do DpenStreetMapQ
V78add*o5map7N
function getColor5d7 return d F &((( ] Q\#((('Q d F %(( ] Q\B+(('Q d F '(( ] Q\EA&>&CQ d F &(( ] Q\^C)E'>Q d F %( ] Q\^+#+ACQ d F '( ] Q\^EB')CQ d F &( ] Q\^E+!"Q
Q\^^E+>(QNVN
function stle5feature7 return Oeight &8%, opacit &, color QOhiteQ, dash>rra Q'Q,
%(& htarop 8h %"
fillDpacit (8, fillColor getColor5feature8properties8+ensidade7 VN VN L8geoJson5dadosestados, stle stleV78add*o5map7N
1eja cuidadoso e certifique3se de que est tudo o= 1alve seu arquivo e abra3o em seu navegador web.
*uito legal, né: (omeço a sentir ue vocF começa a sentir novas possibilidades logo adiante...*as, para estas possibilidades se concretizarem, vamos seguir...
...Dissecando o código 51! *uito bom & primeira parte a ser destacada é o seguinte trec"o de c-digo% script tpeHte3tK?avascript srcHleafletKbrasil8?sFKscriptF
9 que esse trec"o de c-digo faz: ?om, assim como acontece com a pr-pria biblioteca 8eaflet 71, trazida para o nosso c-digo por meio de um lin=, esse trec"o de %(& htarop 8h %#
c-digo acima também é um lin=. Esse novo lin= traz, para o nosso c-digo, o arquivo brasil.js, tornando3o dispon/vel para que seja utilizado em nossa pgina web. )or sua vez, o arquivo brasil.js é um arquivo do tipo eo7son, Gtransformado em um arquivo do tipo 7ava1criptH por meio da declara#ão de uma varivel. 1e voc' for curioso e abrir o arquivo brasil.js em seu editor de textos, ver, antes do in/cio do arquivo eo7son, o seguinte% var dadosestados + F ,t-pe,9 ,Neatureollection, ,crs,9 F ,t-pe,9 ,name, ,properties,9 >...@
;este trec"o de c-digo acima, o que est destacado em laranja é o arquivo eo7son GpuroH. Então, podemos observar que, antes do in/cio do arquivo eo7son puro, inserimos a declara#ão de uma varivel, c"amada GdadosestadosH. )ode parecer um pouco complicado de in/cio, mas analise com cuidado o que est acontecendo e logo voc' se familiariza com esse procedimento. &gora, vamos adiante, observando o pr-ximo trec"o do c-digo% var map H L8map5QmapaQ78setRieO5$&)8)A")"A, $%"8)%#&&T, )7N L8tileLaer5QhttpKKsV8tiles8Omflabs8orgKbO$mapniGK.VK3VKV8pngQ, attribution QMapas WcopN DpenCcleMap, +ados do Mapa WcopN contribuidores do DpenStreetMapQ
V78add*o5map7N
Esse trec"o, j bastante con"ecido nosso, é responsvel por informar as caracter/sticas do nosso mapa3base. ;ote que, para tornar nossa camada temtica mais destacada, escol"emos um mapa3base em tons de cinza. & 2ltima parte desta se#ão%
%(& htarop 8h %!
function pegaCor5d7 return d F &((( ] Q\#((('Q d F %(( ] Q\B+(('Q d F '(( ] Q\EA&>&CQ d F &(( ] Q\^C)E'>Q d F %( ] Q\^+#+ACQ d F '( ] Q\^EB')CQ d F &( ] Q\^E+!"Q
Q\^^E+>(QN
VN function estilo5feature7 return Oeight &8%, opacit &, color QOhiteQ, dash>rra Q'Q, fillDpacit (8, fillColor pegaCor5feature8properties8+ensidade7 VN VN L8geoJson5dadosestados, stle estiloV78add*o5map7N
*uito calmamente, vamos pensar sobre esse trec"o de c-digo. &qui aparecem duas palavras novas para n-s% )u+cti+ e retur+. Essas duas palavras pertencem ao universo da linguagem 7ava1cript. 6u+cti+, em 7ava1cript, designa um bloco de c-digo que tem uma )u+72 espec/fica, ou seja, ele é responsvel por uma 2nica tarefa. Essa fun#ão é acionada por algum outro trec"o do c-digo e retr+a uma tarefa retur+. 8egal, agora vamos falar sobre as tarefas que esses trec"os de c-digo executam. ?om, a primeira fun#ão, c"amada pegaor, é responsvel por distribuir valores de cores que serão utilizados sobre o nosso arquivo →
%(& htarop 8h (
eo7son (brasil.js!. Essa fun#ão trabal"a da seguinte maneira% atribui um valor padrão (d!@P S pega(or! d # S e informa os intervalos de cores que serão utilizados, por exemplo d O @0 : 6E+UZV % . ;ote que os valores menores que dez receberão a mesma cor, tarefa que o simples trec"o de c-digo 66+E&0] é responsvel por realizar. 9= Esse trec"o de c-digo que acabamos de discutir estabelece uma legenda, uma escala de cores, para cada determinado intervalo de valores existente no arquivo brasil.js. & segunda fun#ão, c"amada estilo, é responsvel por definir o estilo (! que ser aplicado sobre as lin"as e sobre os preenc"imentos do arquivo eo7son. 9 estilo do preenc"imento é dado pelo trec"o de c-digo% fillDpacit (8, fillColor pegaCor5feature8properties8+ensidade7
Em l/ngua inglesa fill6 significa preenc"imento. )ortanto, fill7pacit8 define a transpar'ncia do preenc"imento, a opacidade (em valores que variam de 0 a @ S experimente!. 9 preenc"imento das cores é dado pelo trec"o que nos faz entender tudo% fillColor pegaCor5feature8properties8Densidade7
9ill(olor é a cor do preenc"imento.
& cor do preenc"imento é estabelecida pela primeira fun#ão que n-s criamos (pegaor!. Então, nossa segunda fun#ão utiliza a primeira fun#ão. 8egal &gora, perceba que os intervalos definidos por (d! são orientados a acessar o arquivo eo7son e procurar nas propriedades do arquivo a coluna ensidade (feature.properties.ensidade!. &ssim, a cor apresentada no mapa, retorna um valor correspondente aos intervalos definidos pelos intervalos da nossa legenda de cores 15 Ao in2
(pegaor!. om muito cuidado e paci'ncia, observe a figura a seguir e pense um pouco nas liga#$es existentes entre os trec"os do nosso c-digo, isso vai ajud3lo no entendimento sobre como funcionam as diferentes partes deste primeiro trec"o de c-digo, que é importante para as pr-ximas se#$es% #$%&'( . 'E(?$4N(8EN,4 EN,'E #&NCHE
)or fim, um trec"o de c-digo que também j nos é familiar% L8geoJson5dadosestados, stle estiloV78add*o5map7N
& novidade est no trec"o destacado, posto que a busca pelo arquivo eo7son acontece dentro de outro arquivo (brasil.js!, lin=ado %(& htarop 8h '
em nosso mapa por meio do trec"o% script tpeHte3tK?avascript srcHleafletKbrasil8?sFKscriptF
8embra3se do nome da varivel dentro do arquivo brasil.js: )ois é, ela est sendo utilizada aqui ]!
...Mão na Massa 5'! fa *uitas novidades, não: ?om, se voc' não conseguiu apreender tudo, não entre em pnico +' uma respirada e d' tempo ao tempo (esfor#ando3se para o tempo ser seu amigo, claro!. &gora, vamos seguir adiante 6a#a uma c-pia do arquivo index."tml (pasta Cm0V! e renomeie3o para index0@."tml, abrindo3o em seu editor de textos logo em seguida. &pague o c-digo existente entre as tags NscriptO e copie e cole o c-digo abaixo em seu lugar% var map H L8map5QmapaQ78setRieO5$&)8)A")"A, $%"8)%#&&T, )7N L8tileLaer5QhttpKKsV8tiles8Omflabs8orgKbO$mapniGK.VK3VKV8pngQ, attribution QMapas WcopN DpenCcleMap, +ados do Mapa WcopN contribuidores do DpenStreetMapQV78add*o5map7N function pegaCor5d7 return d F &(( ] Q\#((('Q d F %( ] Q\B+(('Q d F )( ] Q\EA&>&CQ d F A( ] Q\^C)E'>Q d F '( ] Q\^+#+ACQ d F &( ] Q\^EB')CQ d F % ] Q\^E+!"Q
Q\^^E+>(QN
VN function estilo5feature7 return Oeight &8%, opacit &,
%(& htarop 8h A
color QOhiteQ, dash>rra Q'Q, fillDpacit (8", fillColor pegaCor5feature8properties8+ensidade7 VN VN function highlight^eature5e7 var laer H e8targetN
laer8setStle5 Oeight A, color Q\"""Q, dash>rra QQ, fillDpacit (8" V7N
if 5@L8BroOser8ie WW @L8BroOser8opera7 laer8bring*o^ront57N V VN var geo?sonN function resetXighlight5e7 geo?son8resetStle5e8target7N info8update57N VN function .oom*o^eature5e7 map8fitBounds5e8target8getBounds577N VN function onEach^eature5feature, laer7 laer8on5 mouseover highlight^eature, mouseout resetXighlight, clicG .oom*o^eature V7N VN geo?son H L8geoJson5dadosestados, stle estilo, onEach^eature %(& htarop 8h )
onEach^eatureV78add*o5map7N
9_ &bra o arquivo em seu navegador web, voc' dever ver a seguinte tela% #$%&'( 3. '...O##, MEU...'
&ponte seu mouse sobre o estado de *ato rosso e clique sobre ele] alguma coisa aconteceu, certo: lique sobre os outros estados e perceba que a mesma coisa acontece *uito legal &gora, avante 1igamos...
...Dissecando o ódigo 5'! )or partes ?om, d' uma boa ol"ada no c-digo e perceba que existem novas fun#$es sendo utilizadas, além das fun#$es pegaor e estilo. omo n-s j inserimos fun#$es em nosso c-digo anteriormente, vimos o que essas fun#$es fazem. )ois bem, agora, vamos dar uma ol"ada nas novas fun#$es que trouxemos e vamos entender como elas atuam em nosso mapa. )rimeiro, vamos falar sobre o seguinte trec"o de c-digo e as fun#$es que nele aparecem% function highlight^eature5e7 %(& htarop 8h %
var laer H e8targetN laer8setStle5 Oeight A, color Q\"""Q, dash>rra QQ, fillDpacit (8" V7N if 5@L8BroOser8ie WW @L8BroOser8opera7 laer8bring*o^ront57N V VN function resetXighlight5e7 geo?son8resetStle5e8target7N VN function .oom*o^eature5e7 map8fitBounds5e8target8getBounds577N VN function emcadaEstado5feature, laer7 laer8on5 mouseover highlight^eature, mouseout resetXighlight, clicG .oom*o^eature V7N VN var geo?sonN geo?son H L8geoJson5dadosestados, stle estilo, onEach^eature emcadaEstadoV78add*o5map7N
8egal
GiluminarH o limite de cada estado da federa#ão @V todas as vezes que posicionarmos nosso mouse sobre seus limites. Ela faz isso por meio da cria#ão de uma varivel (var laQer R e.target]!, que cria, temporariamente, uma nova camada no mapa, trazendo3a para frente (feito no trec"o laQer.bringAo6ront(!]!@Z. & fun#ão resetLig"lig"t(e!, por sua vez, se responsabiliza por GapagarH o que a fun#ão anterior GiluminouH, todas as vezes em que retiramos nosso mouse Gde cimaH dos limites de cada estado da federa#ão. )or fim, a fun#ão zoomAo6eature(e! é quem Gd o zoomH quando clicamos sobre um estado da federa#ão, ajustando seus limites (os limites do estado! aos limites da tela do navegador% 9_ .nalise com cuidado como as funçPes s)o construHdas e observe ue elas obedecem um determinado padr)o/ falam uma lHngua* Essa lHngua / na verdade/ a linguagem JavaScript*
?om, voltemos a nossa quarta fun#ão. 9 que ela faz mesmo: ?om, B semel"an#a do que acontece com a fun#ão pegaor (visto anteriormente, que é utilizada pela fun#ão estilo!, as tr's fun#$es que acabamos de ver acima são utilizadas em nossa quarta fun#ão emcadaEstado (que é um tipo de fun#ão con"ecido como 4onEach9etature4 !. )ortanto, nossa quarta fun#ão organiza as tr's fun#$es anteriores, definindo o que acontecer qundo realizarmos movimentos com o nosso mouse (mouseover/ mouseout/ clic1 !. 8egal )or fim, nosso 2ltimo trec"o de c-digo traz uma pequena diferen#a. 9bserve% var geo?sonN 16 Cada E!%ado da FederaB@o < en%endido# em no!!o ,Gdio# ,omo $ma #eatureJ. 17 Ob!er2e =$e o! mapa! !@o oraniado! em ,amada! )a-er!. %(& htarop 8h "
geo?son H L8geoJson5dadosestados, stle estilo, onEach^eature emcadaEstadoV78add*o5map7N
& diferen#a que encontramos aqui é a exist'ncia de uma nova varivel, var geojson. ?om, por que ela existe aqui: Ela existe aqui para que os eventos retornem altera#$es vis/veis no mapa, ou seja, os eventos utilizam uma Gcamada temporriaH, que faz uso das geometrias do nosso arquivo eo7son. Essa Gcamada de eventosH atua sobre o nosso arquivo eo7son, utilizando cada uma das 9eatures. Então, precisamos declarar uma varivel que acondicione estes eventos temporrios. É isso que a declara#ão da varivel geojson faz. ;ote que a fun#ão zoomAo6eature(e! não aparece aqui% ela utiliza as geometrias do arquivo eo7son diretamente É isso
...Mão na Massa 5(! 9_ 8 vamos n-s de novo ;a pasta Cm0P, crie uma c-pia do seu arquivo index0@."tml, renomeie3o para index0D."tml. *anten"a o arquivo index0D."tml aberto em seu editor de textos, copie e cole o c-digo a seguir, ap-s o trec"o Nmeta c"arsetRutf3\FO% stleF 8info padding p3 #p3N font &'p3K&)p3 >rial, Xelvetica, sans$serifN bacGground OhiteN bacGground rgba5'%%,'%%,'%%,(8#7N bo3$shadoO ( ( &%p3 rgba5(,(,(,(8'7N border$radius %p3N V 8info h) font '(p3K''p3 >rial, Xelvetica, sans$serifN margin ( ( %p3N color \"""N
%(& htarop 8h #
V 8legend te3t$align leftN line$height &#p3N color \%%%N V 8legend i Oidth &#p3N height &#p3N float leftN margin$right #p3N opacit (8"N V KstleF
1alve o seu arquivo. &gora, antes da tag Nscript tQpeRtextFjavascriptO (e depois do trec"o 4!***#*add%o!map#$4 !, pr-ximo ao final do seu c-digo, copie e cole o trec"o a seguir% var info H L8control57N info8on>dd H function 5map7 this8_div H L8+omUtil8create5QdivQ, QinfoQ7N this8update57N return this8_divN VN info8update H function 5props7 this8_div8innerX*ML H Qh)F+ensidade +emográficaKh)FQ ` 5props ] QbFQ ` props8Estado ` QKbFbr KFQ ` props8+ensidade ` Q habitantes K GmsupF'KsupFQ ` QKbFbr KFQ Q>ponte o mouse para os Estados da ^edera12oQ7N VN info8add*o5map7N var legend H L8control5position QbottomleftQV7N legend8on>dd H function 5map7
%(& htarop 8h !
var div H L8+omUtil8create5QdivQ, Qinfo legendQ7, grades H (, %, &(, '(, A(, )(, %(, &((T, labels H T, from, toN for 5var i H (N i grades8lengthN i``7 from H gradesiTN to H gradesi ` &TN labels8push5 Qi stleHbacGgroundQ ` pegaCor5from ` &7 ` QFKiF Q ` from ` 5to ] QWndashNQ ` to Q`Q77N V div8innerX*ML H labels8?oin5QbrFQ7N return divN VN legend8add*o5map7N
1alve o seu arquivo novamente. < até a pasta Cm0P e abra o arquivo index0D."tml em seu navegador web.
Explore um pouco o seu 2ltimo webmap L muitas coisas legais por aqui, "ein: %(& htarop 8h "(
?om, uma vez mais, é "ora de seguir...
...Dissecando o ódigo 5(! erto 9 primeiro trec"o de c-digo que inserimos corresponde B linguagem 11 e é responsvel por aplicar os estilos da legenda (os trec"os iniciados em legend! e aplicar os estilos do nosso painel de informa#$es (os trec"os iniciados em info!. 9_ 9 trec"o que inserimos no corpo da nossa aplica#ão é o responsvel por trazer para o nosso webmap a legenda e o painel de informa#$es. omo isso é feito: 9 trec"o de c-digo abaixo... var info H L8control57N info8on>dd H function 5map7 this8_div H L8+omUtil8create5QdivQ, QinfoQ7N this8update57N return this8_divN VN info8update H function 5props7 this8_div8innerX*ML H Qh)F+ensidade +emográficaKh)FQ ` 5props ] QbFQ ` props8Estado ` QKbFbr KFQ ` props8+ensidade ` Q habitantes K GmsupF'KsupFQ ` QKbFbr KFQ Q>ponte o mouse para os Estados da ^edera12oQ7N VN info8add*o5map7N
...cria, a partir de uma varivel (var info!, um controle dinmico que apresenta o nome do estado da federa#ão (props.Estado! e a densidade demogrfica correspondente (props.+ensidade!. 9s dados são GbuscadosH em nosso arquivo eojson (brasil.js!. 8embre3se que os estilos aplicados (pelo uso da linguagem 11! foram definidos anteriormente, na se#ão NstQleO, como vimos mais acima. %(& htarop 8h "&
9 pr-ximo trec"o de c-digo% var legend H L8control5position QbottomleftQV7N legend8on>dd H function 5map7 var div H L8+omUtil8create5QdivQ, Qinfo legendQ7, %rades = [&' ' &' *&' +&' ,&' &' &&]' labels H T, from, toN for 5var i H (N i grades8lengthN i``7 from H gradesiTN to H gradesi ` &TN labels8push5 Qi stleHbacGgroundQ ` pegaCor5from ` &7 ` QFKiF Q ` from ` 5to ] QWndashNQ ` to Q`Q77N V div8innerX*ML H labels8?oin5QbrFQ7N return divN VN legend8add*o5map7N
?om, esse trec"o cria outro controle no mapa% a legenda. & cria#ão é anloga B cria#ão do painel, que acabamos de ver. &qui, também se cria, a partir de uma varivel, a legenda, estabelecendo3se os critérios, como destacado em itlico no c-digo apresentado acima. 9bserve que as estruturas são bem similares. É isso
%(& htarop 8h "'
Note ue n)o nos ativemos aos detalhes de criaç)o das funçPes/ uer di'er/ n)o te e&plicamos o cGdigo linha por linha* +or ue fi'emos isso3 "om/ esse capHtulo já um pouco e&tenso e a criaç)o das funçPes objeto da linguagem JavaScript estrita6* Na verdade/ mesmo essa linguagem mais pesada6 n)o assim t)o difHcil de entender* NGs mantivemos o foco na utili'aç)o da biblioteca LeafletJS para evidenciar a sua caracterHstica mais interessanteI ela funciona como um jogo de armar6/ ou seja/ se conhecermos bem as partes e suas funçPes/ somos capa'es de montar nossos mapas/ como um peueno e simples uebra>cabeça*
%(& htarop 8h "A
Expandi ndoas f unci onal i dadesdo nos s oMapa D ;ue s2o e como utili.ar plu%ins Leaflet MaGiMarGers Leaflet MarGerCluster
%(& htarop 8h ")
&té aqui, abordamos os aspectos globais da biblioteca 8eaflet71 e pudemos perceber que ela é realmente muito simples de ser utilizada, apresentando -timos resultados para as fun#$es mais comuns da comunica#ão cartogrfica. E isso foi legal &gora, vamos explorar mais algumas funcionalidades da nossa biblioteca favorita. E vamos fazer isso utilizando plugins
Oue são e como utilizar plugins Oquesãopl ugi ns?
)lugins ( plug>ins! são pequenos componentes de um software, desenvolvidos a posteriori (ou separadamente! para acrescentar novas funcionalidades a um determinado software j existente. ma analogia poss/vel, para entendermos com clareza, é um rdio automotivo% o autom-vel continua sendo um autom-vel, mas acresentamos um plugin com uma funcionalidade espec/fica (tocar m2sica!, ou seja, n-s mantemos a funcionalidade original do autom-vel, mas acrescentamos uma funcionalidade espec/fica. *uito bem É uma ideia simples e muito 2til, j que novas funcionalidades podem ser acrescentadas sem termos que reconstruir um software inteiro. & biblioteca 8eaflet7s possui dezenas de plugins muito interessantes@\, desenvolvidos por pessoas do mundo inteiro. &qui, trabal"aremos com uma pequena lista poss/vel (outras listas também são poss/veis! de plugins bastante 2teis, apresentada mais adiante. Comout i l i zarosPl ugi ns?
Yegra geral, os plugins, na biblioteca 8eaflet71, são incorporados ao nosso c-digo principal por meio de um hiperlin1 , tornando o c-digo 7ava1cript do plugin dispon/vel para ser utilizado em nosso c-digo 8eaflet71. Esse procedimento é parecido com o procedimento através do qual trouxemos o arquivo brasil.js para o nosso c-digo, no cap/tulo anterior, lembra3se:
omo dito anteriormente, a biblioteca 8eaflet71 possui dezenas de plugins dispon/veis para serem utilizados. )or aqui, trabal"aremos com apenas dois plugins diferentes% • •
ea!let.8aki8arkers S incorpora a funcionalidade de acrescentar marcadores customizados com agilidade@U] ea!let.markercluster S incorpora a funcionalidade de agrupar marcadores, mel"orando a legibilidade do mapa.
8egal omo voc' j deve imaginar, é "ora de colocar a...
...Mão na Massa! !5amos adotar uma estrutura um pouco diferente dos capHtulos anteriores por aui#
< até a pgina do livro e, na se#ão +oCnloads, fa#a o doCnload da pasta Cm0Z, descompacte3a dentro da pasta Cebmaps.
9=, abra os arquivos ma=imar=ers."tml e mar=erclusters."tml, em seu navegador web. +' uma boa ol"ada nos mapas que são apresentados.
#$%&'( 6. ?2$8(''94 89 O6 LI6E 0
Le)let.MakiMarkers!
I #$%&'( . : ;#U
Le)let.MarkerCluster!
8egal, né: + para imaginar que, com dezenas de plugins dispon/veis, podemos criar aplica#$es de mapas bem interessantes. &gora, seguiremos...
%(& htarop 8h ""
...Dissecando o ódigo! Leaf l et . Maki Mar ker s
erto, j deu para perceber que o plugin 8eafet.*a=i*ar=ers possui a "abilidade de disponibilizar uma série de marcadores customizados, com maior facilidade. 9 primeiro trec"o do c-digo é a inser#ão do lin1 , observe% headF titleF
*uito bem, é simples assim e esse lin1 traz para o nosso c-digo as funcionalidades do referido plugin. &gora, vamos observar como funciona a inser#ão de um marcador customizado a partir da anlise do seguinte trec"o de c-digo% var gasometro H L8MaGiMarGers8icon5 icon ferr, color \'Ab#(&, si.e s V7N L8marGer5$A(8(A)&)', $%&8')&'(&T, Ficon9 gasometroG78add*o5map7 8bind
9 procedimento é anlogo ao procedimento para criar um marcador customizado, como vimos anteriormente. Aodavia, guarda algumas facilidades. )or meio da defini#ão de uma varivel (var gasometro!, %(& htarop 8h "#
escol"emos o /cone que utilizaremos dentro do marcador (icon%ferrQ!D0, a cor do bac1ground do marcador (color% DKb\0@! e o taman"o ( size%s !D@, para, em seguida, declararmos o tipo de /cone que utilizaremos em nosso marcador, por meio do construtor 8.mar=er 3O Iicon% gasometroJ. 1uper simples 9 que " de mais interessante aqui é a quantidade de marcadores disponibilizados% unindo as possibilidades de cor, taman"o e /cones, temos centenas de combina#$es poss/veis Le af l e t . mar ker c l us t e r
m mapa com dezenas, centenas ou mesmo mil"ares de marcadores é bem dif/cil de ler. Esse plugin nos ajuda a visualizar a distribui#ão dos marcadores, agrupando3os em conjuntos ( clusters! e retornando o valor da quantidade de marcadores que foram agrupados em cada conjunto. & primeira parte do c-digo apresenta a inser#ão dos lin1s% headF titleF
*uitos lin1s, não: E, alguns deles fazem refer'ncias a outros arquivos (por meio de lin1s também!. ;ote que, além dos c-digos do plugin, trouxemos um arquivo eo7son, da mesma maneira como fizemos com o arquivo brasil.js, no cap/tulo anterior. Arata3se do arquivo sampressa.js. 1e voc' for curioso e abrir este arquivo em seu editor de textos, ver uma série de pares de coordenadas, responsveis por indicar a localiza#ão de @0V marcadores diferentes. 9_ =.lat=ng>aB5E aB1E@ F title9 title G@: mar*er.bindPopup>title@: mar*ers.add=a-er>mar*er@: G map8addLaer5marGers7N
&lgumas novidades aqui ?om, note que o mapa3base agora é trazido para o mapa por meio de uma varivel (var tiles!. ?om, não entraremos em muitos detal"es, mas isso é feito dessa maneira para trazer o mapa3base como um la8er (uma camada! e est relacionado com o desen"o do plugin. %(& htarop 8h #(
& segunda novidade est na senten#a for, parte da linguagem 7ava1cript. Essa senten#a é utilizada para que o c-digo diga enquanto uma condi#ão for verdadeira, execute tal e tal coisa. Então ela cria um efeito de repeti#ão, um loop. ;o nosso caso, ela est dizendo que para uma varivel i R 0, sempre que i for menor que a distncia i,DD execute a clusteriza#ão. É um pouco complicado assim, de sopetão, então, não se preocupe com isso agora e estude um pouco de 7ava1cript mais tarde. )or fim, adicionamos nossos marcadores ao nosso mapa (map.add8aQer(mar=er!!, o que é feito ap-s as condi#$es definidas pela senten#a for serem realizadas, sempre dinamicamente. ?om, é isso 8embre3se de visitar o website da biblioteca 8eaflet7s com frequ'ncia e se atualizar com rela#ão a novos plugins e novas vers$es dos antigos plugins. & biblioteca 8eaflet71 é desenvolvida para fazer o bsico, muito bem feito. )ensada para ser gil. 9s plugins fornecem, como dissemos antes, dezenas de novas funcionalidades e sugiro uma profunda investiga#ão sobre eles, suas funcionalidades e seus modos de utiliza#ão.
"" #((# in,remen%a 2aore! !obre #i#. 9o2amen%e# i!!o < par%e da in$aem de proramaB@o =$e a bibio%e,a :eafe%;S $%iiaK ;a2aS,rip%. %(& htarop 8h #&
Pr óxi mosPas s os ?om, c"egamos ao fim desta pequena jornada &credito que, a partir de agora, voc' j domine completamente os elementos essenciais da ?iblioteca 8eaflet71, entendendo como desenvolver mapas interativos para a internet. &credito também que voc' ten"a uma ideia de como estender as funcionalidades dos mapas por meio de plugins. timo, existem alguns pr-ximos passos para darmos% Comocol ocarmeumapanai nt er net ?
)or incr/vel que pare#a, colocar seu mapa na internet não é uma tarefa muito complicada.
Essa é uma boa questão e, quanto maior a familiaridade com os c-digos, mais essa questão deve ser importante. +esde j, é bom ter uma ideia na cabe#a% simplicidade. m mapa é um instrumento para a comunica#ão e, em comunica#ão, quanto mais clara e mais rpida a mensagem é passada, mel"or. L um outro artigo em um dos anexos orientado a desvendar o design de webmaps, c"amado ?oas prticas para o +esign de heb*aps .
olocando a mão na massa 1empre E dissecando os c-digos 1empre %(& htarop 8h #'
&lém disso, existem alguns lugares para visitar e entender mel"or como funciona a biblioteca 8eaflet7s e tirar d2vidas espec/ficas% • • •
http=>>lea)let?s.c*> 3 o website da biblioteca] https://groups.google.com/!orum/J0!orum/lea!let-"s S o f-rum oficial da biblioteca] http://gis.stackechange.com/ 3 um f-rum para quest$es relacionadas Bs tecnologias da informa#ão geogrfica ( gis, webmaps, sensoreametno remoto, etc!
;unca se esque#a que a curiosidade é o mel"or remédio, então, sempre ten"a uma c-pia de seus arquivos para fazer testes, tentar coisas, misturar c-digos. randes ideias, muitas vezes, nascem da escassez% a criatividade é um elemento que tem muito a ver com o exerc/cio de resolver quest$es sem saber como, sem con"ecer as ferramentas corretas. ^uanto mais informa#ão sobre a biblioteca 8eaflet71 e sobre a linguagem 7ava1cript estiver dispon/vel em seu cérebro, mais quest$es voc' ser capaz de resolver. 1e voc' quer viver, trabal"ar e respirar desenvolvendo webmaps, estude a fundo as linguagens de computador envolvidas% LA*8, 11 e 7ava1cript. ?usque desvendar outras tecnologias. 9brigado por ler este livro. Espero que ten"a sido uma jornada enriquecedora. &té a pr-xima
%(& htarop 8h #A
