Presentation-EducaSER.qmd

---
title: "Apresentação Leaflet EducaSER"
author: "Marcus Antonio Cardoso Ramalho"
format: revealjs
logo: "https://raw.githubusercontent.com/nextmarte/TalkProposal/main/img/logoSER_transparente.png"
footer: "Marcus Ramalho - PPGAd-UFF"
editor: visual
---

```{r}
#| echo: false
#| include: false
#| message: false

library(tidyverse)
library(leaflet)
library(leaflet.extras2)
library(RgoogleMaps)
library(readxl)

```

# Marcus Ramalho

-   10 anos pra aprender a programar 🤦‍♂️

-   Matlab/Fortran/Pascal/VBA/AutoLISP(LISP)/PHP/HTML/\
    M(power query)/TypeScript/Python/R❤️e SQL

-   Historia

-   Mapas

# Nossos objetivos hoje {style="font-size:25px"}

-   Aprender ou reaprender um pouco sobre história criando mapas

-   Aprender as principais funções e métodos do pacotes leaflet

-   Criar um projeto Quarto

-   Criar um mapa interativo mostrando um pedaço da história do Brasil

-   Publicar o projeto com a ajuda do github pages

# Um pouco de história {style="font-size:25px"}

::: columns
::: {.column width="40%"}
-   Antes de 1500

-   Pindorama para os Tupis ou terra das palmeiras
:::

::: {.column width="60%"}
```{r}

coorde <- rio::import("dados/coordenadas_costa_Brasil_escala.csv")

leaflet::leaflet() %>%
  addTiles() %>%
  addProviderTiles("Stamen.Watercolor") %>%
  setView(lng = -50.598879,
          lat = -13.550627,
          zoom = 3) %>%
  addMarkers(
    data = coorde,
    group = "palmeiras",
    lng = ~ lon,
    lat = ~ lat,
    icon = leaflet::makeIcon(
      iconUrl = "https://cdn.kibrispdr.org/data/765/palm-tree-gif-6.gif",
      iconWidth = 25,
      iconHeight = 41
    )
  ) %>%
  addLayersControl(overlayGroups = "palmeiras") %>%
  hideGroup("palmeiras")
  
```
:::
:::

# ...1500

```{r}


# Coordenadas de Portugal
portugal <- data.frame(
  cidade = "Portugal",
  lat = 39.3999,
  lon = -8.2245
)

# Coordenadas das cidades mencionadas
destinos <- data.frame(
  cidade = c(
    "Malaca",
    "Calicut",
    "Alexandria",
    "Cairo",
    "Zanzibar",
    "Mogadíscio",
    "Goa",
    "Ormuz",
    "Sofala",
    "Aden"
  ),
  lat = c(
    2.1896,
    11.2588,
    31.2156,
    30.0444,
    -6.1659,
    2.0411,
    15.2993,
    26.5944,
    -19.1386,
    12.7967
  ),
  lon = c(
    102.2501,
    75.7804,
    29.9553,
    31.2357,
    39.2026,
    45.3438,
    74.1240,
    56.3630,
    34.8292,
    45.0365
  )
)

# Criar o mapa
maparotas <- leaflet() %>%
  addTiles(group = "OpenStreetMap") %>% 
  addProviderTiles("Stamen.Watercolor", group = "Mapa Velho")%>%
  addMarkers(
    data = portugal,
    lat = ~ lat,
    lng = ~ lon,
    label = ~ cidade,
    labelOptions = labelOptions(noHide = TRUE),
    icon = leaflet::makeIcon(
      iconUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Flag_of_Portugal_sea_%281500%29.svg/800px-Flag_of_Portugal_sea_%281500%29.svg.png",
      iconWidth = 40,
      iconHeight = 40
    )
  ) %>%
  addMarkers(
    data = destinos,
    group = "cidades",
    lat = ~ lat,
    lng = ~ lon,
    label = ~ cidade,
    labelOptions = labelOptions(noHide = TRUE),
    icon = leaflet::makeIcon(
      iconUrl = "https://static.vecteezy.com/system/resources/previews/009/665/828/original/colorful-cute-cartoon-vegetable-garlic-free-png.png",
      iconWidth = 25,
      iconHeight = 41
    )
  ) %>% 
  addPolylines(data=rio::import("dados/rota_vasco.csv"),
               lat = ~ lat,
               lng = ~ lon, group = "rota do vasco")


# Exibir o mapa com opções de exibição
maparotas %>% 
  addLayersControl(
    baseGroups = c("Mapa Velho","Novo Mundo"),
    overlayGroups = c("rota do vasco","cidades"),
    options = layersControlOptions(collapsed = TRUE, autoZIndex = TRUE)) %>% 
  hideGroup(c("rota do vasco","cidades"))#controla os grupos que irão aparecer
  

```

# Isso não tava nos planos... {style="font-size:25px"}

```{r}
source("scripts/script_timeline.r")

mapa_move

```

# Terra a vista!! {style="font-size:25px"}

```{r}
source("scripts/scripts.r")
mapa
```

# Paro Paro Paro {style="font-size:25px"}

![](https://media.tenor.com/WD1FFAiQE1oAAAAC/jo%25C3%25A3o-kleber-stop.gif){width="100%"}

# Vamos falar de : {style="font-size:25px"}

![](https://i.pinimg.com/originals/70/c5/19/70c519a4476f442f4ec67f39e9f4b6e1.png)

# Introdução ao leaflet {style="font-size:25px"}

-   O Leaflet é uma biblioteca JavaScript de código aberto para criação de mapas interativos em páginas da web.

-   É leve, flexível e fácil de usar.

-   Suporta vários provedores de mapas, incluindo OpenStreetMap, Mapbox e Google Maps.

# Recursos do Leaflet {style="font-size:25px"}

-   Exibe mapas interativos em páginas da web.

-   Adiciona camadas de informações, como marcadores, polígonos e linhas.

-   Permite interações com os mapas, como zoom e movimento.

-   Oferece suporte a eventos de interação, como clique em marcadores.

-   Suporta personalização da aparência dos mapas e camadas.

# leaflet no R {style="font-size:25px"}

O CRAM possui alguns pacotes que permitem usar os recursos do leaflet:

-   Pacote **leaflet** - Cria os mapas com dados geoespaciais (latitude e longitude)

-   Pacote **htmlwidgets** - viabiliza a renderização do leaflet no R

-   **leaflet.extras** e **leaflet.extras2**

-   **leafpop** para adicionar imagens, tabelas e gráficos aos mapas

-   Outros...

# Instalação {style="font-size:25px"}

Vamos usar os pacotes disponíveis no CRAN

No RStudio: Digite no console **install.packages("leaflet")**

ou

![](img/Anima%C3%A7%C3%A3o_install.gif){fig-align="center"}

# Carregamento

::: panel-tabset
## Library

![](img/Anima%C3%A7%C3%A3o_library.gif)

## Menu do RStudio

![](img/Anima%C3%A7%C3%A3o_library_menu.gif)
:::

# Nosso primeiro mapa {style="font-size:20px"}

No leaflet, assim como no ggplot2 trabalhamos em camadas, vamos criar a primeira e atribuir a um **objeto** chamado **mapa**

::: panel-tabset
## Codigo

```{r}
#| echo: true
#| include: true


mapa <- leaflet() %>% 
addTiles()  


class(mapa)

```

## ...mapa

```{r}
#| fig-height: 2
#| fig-width: 12

mapa
```
:::

# Marcadores {style="font-size:25px"}

Podemos adicionar marcadores e legendas ao nosso mapa, com a função setView podemos centralizar nossa visualização.

```{r}
#| echo: true
#| include: true
#| fig-height: 2
#| fig-width: 12

  mapa %>% 
  addMarkers(lng = 0,lat = 0, label = "Nosso primeiro mapa")
   
  
```

# Criando ícones {style="font-size:25px"}

```{r}
#| echo: true
#| include: true
#| fig-height: 2
#| fig-width: 12
gif <- "https://media.tenor.com/n6w94xzL0DYAAAAM/don-ramon-el-chavo-del8.gif"

#criando o objeto do tipo leaflet icon
madruga <- makeIcon(iconUrl = gif,
           iconWidth = 125,
           iconHeight = 100)

class(madruga)

#coordenadas de acapulco
acapulco <- c(16.823475, -99.855119)

mapa %>%
  addMarkers(lat = acapulco[1], lng = acapulco[2],
             icon = madruga) %>% #agora basta chamar a variável icone dentro de addMarkers
  setView(lat = acapulco[1], lng = acapulco[2], zoom = 15) 

```

# Criando Pop Ups {style="font-size:25px"}

::: callout-note
A função o Marker recebe os elementos interativos
:::

```{r}
#| echo: true
#| include: true
#| fig-height: 3
#| fig-width: 12
Monuriki <- c(-17.610176, 177.033988)

gif_2 <- "https://media.tenor.com/XnwgbA0jDYsAAAAC/fire-flame.gif"


mapa_2 <- mapa %>% 
  addMarkers(lat = Monuriki[1], lng = Monuriki[2],
             label = "Cadê o wilson?!", 
             popup=leafpop::popupImage(gif_2,src="remote")) %>% 
  setView(lat = Monuriki[1], lng = Monuriki[2], zoom = 15) 
  
  mapa_2
  
  
```

# Unindo pontos {style="font-size:25px"}

Usando a função `addPolylines()` podemos unir dois ou mais pontos

```{r}
#| echo: true
#| include: true
#| fig-height: 2
#| fig-width: 12

gif_3 <- "https://media.tenor.com/Zujt8vI4epgAAAAi/nelson-thatsportsspice.gif"

wilson <- makeIcon(iconUrl = gif_3, 
           iconWidth = 30,
           iconHeight = 40)

lat <- c(-17.610176,-17.610476)
lon <- c(177.033988, 177.023988)

linha <- data.frame(lat,lon) #cria um data frame com duas coordenadas

mapa_2 %>% 
  addPolylines(lat=linha$lat,lng=linha$lon) %>% #passa as coordenadas do df para a função
  addMovingMarker(lat=linha$lat, #adiciona umanimação ao segundo marcador
                  lng=linha$lon,
                  icon = wilson,
                  movingOptions = movingMarkerOptions(autostart = TRUE),
                                                      duration = 10000)
  
```

# Fechando os pontos

Com a função addPolygons() conseguimos criar poligonos fechados

```{r}

#| echo: true
#| include: true
#| fig-height: 3
#| fig-width: 12

lat <- c(0,25,37,0,0)
lng <- c(0,0,22,12,0)

leaflet::leaflet() %>% 
  addTiles() %>% 
  addPolygons(lat = lat,lng = lng, 
              fillColor = "red")
```

# Outros providers {style="font-size:25px"}

*https://leaflet-extras.github.io/leaflet-providers/preview/*

<div>

<iframe src="https://leaflet-extras.github.io/leaflet-providers/preview/" width="1900" height="550">

</iframe>

</div>

# Aplicando outros providers... {style="font-size:25px"}

```{r}
#| echo: true
#| include: true
#| fig-height: 5
#| fig-width: 12

leaflet() %>% 
addProviderTiles("Stamen.TerrainBackground")


```

# Camadas e grupos {style="font-size:25px"}

Podemos adicionar ainda mais camadas usando a função *`addLayersControl()`* e controlar criando grupos

```{r}
#| echo: true
#| include: true
#| fig-height: 3
#| fig-width: 12
leaflet() %>%
  addProviderTiles("Stamen.TerrainBackground", group = "Terreno") %>%
  addProviderTiles("Stamen.TerrainLabels", group = "Legenda") %>%
  addCircleMarkers(lng = 0, lat = 0, group = "Marcador") %>%
  addLayersControl(
    baseGroups = c("Terreno"),#grupo primário
    overlayGroups = c("Marcador", "Legenda")
  ) %>% #grupos secundarios. Pode marcar mais de 1.
  setView(lat = 0, lng = 0, zoom = 2) %>%
  hideGroup("Legenda") #esconde um ou mais grupos da visualização


```

# Tá, mas e na prática? {style="font-size:25px"}

Um exemplo com dados do inicio da pandemia:

\tiny

```{r}
#| echo: true
#| include: true
#| cache: true

disresp <-as.data.frame(read.csv("https://raw.githubusercontent.com/nextmarte/baserespiradoresmbauff/main/disresp.csv"))

#criando uma tabela com os estados, a quantidade de respiradores enviados e as coordenadas geograficas

estados<-disresp %>%#tabela base
  select(DESTINO,VALOR) %>%
  #transforma a coluna valor em numérica
  mutate(VALOR = parse_number(str_remove_all(VALOR, "[R$,]"))) %>% 
  group_by(DESTINO) %>% 
  #quantidade total de respiradores por estado
  dplyr::summarize(Valor_total=sum(VALOR))   
  

geoestados<-unique(estados$DESTINO) %>% 
  #gerando as coordenadas geograficas para cada estado gerando um df
  plyr::ldply( function(x) RgoogleMaps::getGeoCode(x)) %>% 
  #data frame com as coordendas, destinos e quantidades
data.frame(estados)


map_resp <- leaflet(geoestados) %>%
  addTiles(group = "base") %>% 
  addProviderTiles("Esri.DeLorme", group = "Terreno") %>% 
addMarkers(clusterOptions = 
             markerClusterOptions(removeOutsideVisibleBounds = TRUE),
  popup = ~ as.character(Valor_total),
  group = "cluster") %>%
  addCircleMarkers( 
#aqui o reescale ajusta os valores da variável para não extrapolar a visualização    
    radius = ~ scales::rescale(Valor_total, c(1, 25)),
    group = "circulos",
    label = ~ as.character(DESTINO)) %>% 
    addLayersControl(
    baseGroups = c("OSM", "Terreno"),
    overlayGroups = c("cluster", "circulos")) %>% 
  hideGroup("OSM")
```

\normalisize

# Ta pronto... {style="font-size:25px"}

```{r}
map_resp

```

# Voltando ao Brasil com as capitanias hereditárias {style="font-size:20px"}

Acho que todo mundo já viu um desses

![](img/capitaniasmec.png)

# Bartolomeu Velho {style="font-size:20px"}

Mapa mais antigo disponível mostrando as capitanias hereditarias

![](img/bartolomeumap.png)

# Adolfo de Varnhagen {style="font-size:20px"}

::: columns
::: {.column width="40%"}
![Francisco Adolfo de Varnhagen, visconde de Porto Seguro foi um militar, diplomata e historiador brasileiro](https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Francisco_Adolfo_de_Varnhagen.jpg/200px-Francisco_Adolfo_de_Varnhagen.jpg){width="80%"}
:::

::: {.column width="60%"}
![](img/capitanias.jpg){width="70%"}
:::
:::

# Jorge Pimentel Cintra {style="font-size:20px"}

::: columns
::: {.column width="40%"}
Reconstruindo o mapa das Capitanias Hereditárias

![](https://sites.usp.br/ptr-ltg/wp-content/uploads/sites/685/2021/10/JPCintra-298x300.png)
:::

::: {.column width="60%"}
Vamos tentar reproduzir alguns pontos deste mapa com leaflet.

![Proposta para o mapa das capitanias - Jorge Cintra](img/capitaniascintra.png){width="50%"}
:::
:::

# Bibliografia {style="font-size:25px"}

*Brazil \| History, Map, Culture, Population, & Facts \| Britannica*. (2023, maio 25). <https://www.britannica.com/biography/Pedro-Alvares-Cabral>

Cintra, J. P. (2013). Reconstruindo o mapa das capitanias hereditárias. *Anais do Museu Paulista: História e Cultura Material*, *21*(2), 11--45. <https://doi.org/10.1590/S0101-47142013000200002>

*Leaflet Provider Demo*. (\[s.d.\]). Recuperado 26 de maio de 2023, de <https://leaflet-extras.github.io/leaflet-providers/preview/>

*Leaflet---An open-source JavaScript library for interactive maps*. (\[s.d.\]). Recuperado 26 de maio de 2023, de <https://leafletjs.com/>

*leaflet-extras/leaflet-providers: An extension to Leaflet that contains configurations for various free tile providers.* (\[s.d.\]). Recuperado 26 de maio de 2023, de <https://github.com/leaflet-extras/leaflet-providers>

Loecher, M. (2020). *RgoogleMaps: Overlays on Static Maps* (1.4.5.3). <https://cran.r-project.org/web/packages/RgoogleMaps/index.html>

Sebastian, G., Basa, R. R., & Hanson, J. O. (2023). *leaflet.extras2: Extra Functionality for "leaflet" Package* (1.2.1). <https://cran.r-project.org/web/packages/leaflet.extras2/index.html>

*Vasco da Gama \| Biography, Achievements, Route, Map, Significance, & Facts \| Britannica*. (2023, maio 16). <https://www.britannica.com/biography/Vasco-da-Gama>

Wickham, H., & RStudio. (2023). *tidyverse: Easily Install and Load the "Tidyverse"* (2.0.0). <https://cran.r-project.org/web/packages/tidyverse/index.html>

# Obrigado!!

marcusantonio\@id.uff.br![](https://cdn-icons-png.flaticon.com/512/6711/6711567.png){width="5%"}

nextmarcus [![](https://cdn-icons-png.flaticon.com/512/124/124021.png){width="5%"}](https://twitter.com/nextmarcus)

nextmarte [![](https://cdn3.iconfinder.com/data/icons/sociocons/256/github-sociocon.png){width="6%"}](https://github.com/nextmarte)