Skip to content

Commit

Permalink
new css for popup and fixed maps
Browse files Browse the repository at this point in the history
  • Loading branch information
ambarja committed Feb 8, 2023
1 parent 4cb350b commit e3a2ee2
Show file tree
Hide file tree
Showing 9 changed files with 15 additions and 19 deletions.
8 changes: 3 additions & 5 deletions .quarto/_freeze/webmap/execute-results/html.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion .quarto/idx/webmap.qmd.json
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"title":"| column: screen","markdown":{"yaml":{"page-layout":"full","comments":false,"css":"css/map.css"},"headingText":"| column: screen","containsRefs":false,"markdown":"\n\n```{r}\n#| echo: false\n#| message: false\n#| warning: false\n#| out-height: 100vh\n#| out-width: 100%\nlibrary(tidyverse)\nlibrary(leaflet)\nlibrary(leaflet.extras)\nlibrary(viridis)\nlibrary(sf)\n\nvillages <- read_csv(\"data/processed/db_variables.csv\") %>% \n st_as_sf(\n coords = c(\"LNG\",\"LAT\"),\n crs = 4326)\n\ninnovalab <- villages %>% \n filter(GROUP != \"DIRESA\")\n\ndiresa <- villages %>% \n filter(GROUP == \"DIRESA\")\n\nareas <- st_read(\n \"data/qfields_diresa/tracking_area_by_communities.gpkg\",\n quiet = TRUE\n )\nsample_10_dat <- read_csv(\n \"data/processed/sample-10.csv\"\n ) %>% \n st_as_sf(\n coords = c(\"lon\",\"lat\"),\n crs=4326\n )\n\nsample_20_dat <- read_csv(\n \"data/processed/sample-20.csv\"\n) %>% \n st_as_sf(\n coords = c(\"lon\",\"lat\"),\n crs=4326\n )\n\ns10_pal <- colorFactor(\n palette = mako(n = 3),\n domain = sample_10_dat$hc_group_3\n )\n\ns20_pal <- colorFactor(\n palette = viridis(n = 4),\n domain = sample_20_dat$hc_group_4\n)\n\n\nmap_layers <- function() {\n #number of groups\n k <- c(\n \"Sampling villages\",\n \"DIRESA villages\",\n \"10 sampling cluster\",\n \"20 sampling cluster\",\n \"Perimeter qfield\"\n )\n #base map\n map <- leaflet() %>% \n addTiles(group = \"Open.Street.Map\") %>% \n addProviderTiles(provider = providers$CartoDB,group = \"CartoDB\") %>% \n addProviderTiles(provider = providers$CartoDB.DarkMatter,group = \"CartoDB.DarkMatter\") %>% \n addProviderTiles(provider = providers$Esri.WorldImagery,group = \"Esri.WorldImagery\") %>% \n setView(lng = -73.44775,lat = -4.08754,zoom = 11)\n #loop through all groups and add a layer one at a time\n for (i in 1:length(k)) {\n if(\"Sampling villages\" == k[[i]]){\n map <- map %>% \n addPulseMarkers(\n data = innovalab,\n icon = makePulseIcon(heartbeat = 0.5),\n group = k[[i]],\n popup = paste0(\n \"<center><h3> 🏕️\",diresa$NOMCP,\"</h3></center>\",\"<hr>\",\n \"- ⛈️Precipitation: \",round(diresa$pr_mean,4),\"<br>\",\n \"- 💧Runoff: \",round(diresa$ro_mean,4),\"<br>\",\n \"- ♒Soil mousture: \", round(diresa$soil_mean,4),\"<br>\",\n \"- 🌡️Maximum temperature: \",round(diresa$tmax_mean,4),\"<br>\",\n \"- 🧊Minimum temperature: \",round(diresa$tmin_mean,4),\"<br>\",\n \"- 💦Evapotranspiration: \", round(diresa$tmin_mean,4),\"<br>\",\n \"- ☁️Humidity: \", round(diresa$humidity_mean,4),\"<br>\",\n \"- 🌳🪓Deforestation: \", round(diresa$def_mean,4),\"<br>\",\n \"- 🛣️Global Superficie Human: \",round(diresa$gsh_mean,4),\"<br>\",\n \"- ✨Nigth lights: \", round(diresa$ln_mean,4),\"<br>\",\n \"- 🏙Population: \",round(diresa$pop_mean,4) \n ))\n }\n if(\"DIRESA villages\"==k[[i]]){\n map <- map %>% \n addPulseMarkers(\n data = diresa,\n icon = makePulseIcon(heartbeat = 0.5),\n group = k[[i]],\n popup = paste0(\n \"<center><h3> 🏕️\",diresa$NOMCP,\"</h3></center>\",\"<hr>\",\n \"- ⛈️Precipitation: \",round(diresa$pr_mean,4),\"<br>\",\n \"- 💧Runoff: \",round(diresa$ro_mean,4),\"<br>\",\n \"- ♒Soil mousture: \", round(diresa$soil_mean,4),\"<br>\",\n \"- 🌡️Maximum temperature: \",round(diresa$tmax_mean,4),\"<br>\",\n \"- 🧊Minimum temperature: \",round(diresa$tmin_mean,4),\"<br>\",\n \"- 💦Evapotranspiration: \", round(diresa$tmin_mean,4),\"<br>\",\n \"- ☁️Humidity: \", round(diresa$humidity_mean,4),\"<br>\",\n \"- 🌳🪓Deforestation: \", round(diresa$def_mean,4),\"<br>\",\n \"- 🛣️Global Superficie Human: \",round(diresa$gsh_mean,4),\"<br>\",\n \"- ✨Nigth lights: \", round(diresa$ln_mean,4),\"<br>\",\n \"- 🏙Population: \",round(diresa$pop_mean,4) \n ))\n }\n if(\"10 sampling cluster\" == k[[i]]){\n map <- map %>% \n addCircleMarkers(\n data = sample_10_dat,\n fillColor = ~s10_pal(hc_group_3),\n fillOpacity = 0.6,\n stroke = 0,\n group = k[[i]]\n ) \n }\n if (\"20 sampling cluster\" == k[[i]]){\n map <- map %>% \n addCircleMarkers(\n data = sample_20_dat,\n fillColor = ~s20_pal(hc_group_4),\n fillOpacity = 0.6,\n stroke = 0,\n group = k[[i]]\n ) \n }\n if(\"Perimeter qfield\" == k[[i]]){\n map <- map %>% \n addPolygons(\n data = areas ,\n stroke = 0,\n fillOpacity = 0.8,\n fillColor = \"orange\",\n popup = paste0(\n \"<h3>\",\"🏡\",areas$village,\"</h3>\",\"<hr>\",\n \"- Area-Ha: \",round(areas$area_ha,4),\"<br>\",\n \"- Area-km2: \",round(areas$area_km2,4)),\n group = k[[i]]\n )\n }\n \n }\n \n #create layer control\n map = map %>% \n addLayersControl(\n baseGroups = c(\"CartoDB\",\"CartoDB.DarkMatter\",\"Open.Street.Map\",\"Esri.WorldImagery\"),\n overlayGroups = k[c(1:length(k))],\n options = layersControlOptions(collapsed = FALSE)\n ) %>% \n hideGroup(as.character(k[c(0:length(k))])) #hide all groups except the 1st one\n map\n}\n\n#plot the map\nmap_layers()\n```\n"},"formats":{"html":{"execute":{"fig-width":7,"fig-height":5,"fig-format":"retina","fig-dpi":96,"df-print":"default","error":false,"eval":true,"cache":null,"freeze":false,"echo":true,"output":true,"warning":true,"include":true,"keep-md":false,"keep-ipynb":false,"ipynb":null,"enabled":null,"daemon":null,"daemon-restart":false,"debug":false,"ipynb-filters":[],"engine":"knitr"},"render":{"keep-tex":false,"keep-yaml":false,"keep-source":false,"keep-hidden":false,"prefer-html":false,"output-divs":true,"output-ext":"html","fig-align":"default","fig-pos":null,"fig-env":null,"code-fold":"none","code-overflow":"scroll","code-link":false,"code-line-numbers":false,"code-tools":false,"tbl-colwidths":"auto","merge-includes":true,"latex-auto-mk":true,"latex-auto-install":true,"latex-clean":true,"latex-max-runs":10,"latex-makeindex":"makeindex","latex-makeindex-opts":[],"latex-tlmgr-opts":[],"latex-input-paths":[],"latex-output-dir":null,"link-external-icon":false,"link-external-newwindow":false,"self-contained-math":false,"format-resources":[]},"pandoc":{"standalone":true,"wrap":"none","default-image-extension":"png","to":"html","css":["css/style.css","css/map.css"],"toc":true,"output-file":"webmap.html"},"language":{},"metadata":{"lang":"en","fig-responsive":true,"quarto-version":"1.2.122","editor":"visual","theme":"cosmo","page-layout":"full","comments":false},"extensions":{"book":{"multiFile":true}}}}}
{"title":"| column: screen","markdown":{"yaml":{"page-layout":"full","comments":false,"css":"css/map.css"},"headingText":"| column: screen","containsRefs":false,"markdown":"\n\n```{r}\n#| echo: false\n#| message: false\n#| warning: false\n#| out-height: 100vh\n#| out-width: 100%\nlibrary(tidyverse)\nlibrary(leaflet)\nlibrary(leaflet.extras)\nlibrary(viridis)\nlibrary(sf)\n\nvillages <- read_csv(\"data/processed/db_variables.csv\") %>% \n st_as_sf(\n coords = c(\"LNG\",\"LAT\"),\n crs = 4326)\n\ninnovalab <- villages %>% \n filter(GROUP != \"DIRESA\")\n\ndiresa <- villages %>% \n filter(GROUP == \"DIRESA\")\n\nareas <- st_read(\n \"data/qfields_diresa/tracking_area_by_communities.gpkg\",\n quiet = TRUE\n )\nsample_10_dat <- read_csv(\n \"data/processed/sample-10.csv\"\n ) %>% \n st_as_sf(\n coords = c(\"lon\",\"lat\"),\n crs=4326\n )\n\nsample_20_dat <- read_csv(\n \"data/processed/sample-20.csv\"\n) %>% \n st_as_sf(\n coords = c(\"lon\",\"lat\"),\n crs=4326\n )\n\ns10_pal <- colorFactor(\n palette = mako(n = 3),\n domain = sample_10_dat$hc_group_3\n )\n\ns20_pal <- colorFactor(\n palette = viridis(n = 4),\n domain = sample_20_dat$hc_group_4\n)\n\n\nmap_layers <- function() {\n #number of groups\n k <- c(\n \"Sampling villages\",\n \"DIRESA villages\",\n \"10 sampling cluster\",\n \"20 sampling cluster\",\n \"Perimeter qfield\"\n )\n #base map\n map <- leaflet() %>% \n addTiles(group = \"Open.Street.Map\") %>% \n addProviderTiles(provider = providers$CartoDB,group = \"CartoDB\") %>% \n addProviderTiles(provider = providers$CartoDB.DarkMatter,group = \"CartoDB.DarkMatter\") %>% \n addProviderTiles(provider = providers$Esri.WorldImagery,group = \"Esri.WorldImagery\") %>% \n setView(lng = -73.44775,lat = -4.08754,zoom = 11)\n #loop through all groups and add a layer one at a time\n for (i in 1:length(k)) {\n if(\"Sampling villages\" == k[[i]]){\n map <- map %>% \n addPulseMarkers(\n data = innovalab,\n icon = makePulseIcon(heartbeat = 0.5),\n group = k[[i]],\n popup = paste0(\n \"<center><h3> 🏕️\",diresa$NOMCP,\"</h3></center>\",\"<hr>\",\n \"- ⛈️Precipitation: \",round(diresa$pr_mean,4),\"<br>\",\n \"- 💧Runoff: \",round(diresa$ro_mean,4),\"<br>\",\n \"- ♒Soil mousture: \", round(diresa$soil_mean,4),\"<br>\",\n \"- 🌡️Maximum temperature: \",round(diresa$tmax_mean,4),\"<br>\",\n \"- 🧊Minimum temperature: \",round(diresa$tmin_mean,4),\"<br>\",\n \"- 💦Evapotranspiration: \", round(diresa$tmin_mean,4),\"<br>\",\n \"- ☁️Humidity: \", round(diresa$humidity_mean,4),\"<br>\",\n \"- 🌳🪓Deforestation: \", round(diresa$def_mean,4),\"<br>\",\n \"- 🛣️Global Superficie Human: \",round(diresa$gsh_mean,4),\"<br>\",\n \"- ✨Nigth lights: \", round(diresa$ln_mean,4),\"<br>\",\n \"- 🏙Population: \",round(diresa$pop_mean,4) \n ))\n }\n if(\"DIRESA villages\"==k[[i]]){\n map <- map %>% \n addPulseMarkers(\n data = diresa,\n icon = makePulseIcon(heartbeat = 0.5),\n group = k[[i]],\n popup = paste0(\n \"<center><h3> 🏕️\",diresa$NOMCP,\"</h3></center>\",\"<hr>\",\n \"- ⛈️Precipitation: \",round(diresa$pr_mean,4),\"<br>\",\n \"- 💧Runoff: \",round(diresa$ro_mean,4),\"<br>\",\n \"- ♒Soil mousture: \", round(diresa$soil_mean,4),\"<br>\",\n \"- 🌡️Maximum temperature: \",round(diresa$tmax_mean,4),\"<br>\",\n \"- 🧊Minimum temperature: \",round(diresa$tmin_mean,4),\"<br>\",\n \"- 💦Evapotranspiration: \", round(diresa$tmin_mean,4),\"<br>\",\n \"- ☁️Humidity: \", round(diresa$humidity_mean,4),\"<br>\",\n \"- 🌳🪓Deforestation: \", round(diresa$def_mean,4),\"<br>\",\n \"- 🛣️Global Superficie Human: \",round(diresa$gsh_mean,4),\"<br>\",\n \"- ✨Nigth lights: \", round(diresa$ln_mean,4),\"<br>\",\n \"- 🏙Population: \",round(diresa$pop_mean,4) \n ))\n }\n if(\"10 sampling cluster\" == k[[i]]){\n map <- map %>% \n addCircleMarkers(\n data = sample_10_dat,\n fillColor = ~s10_pal(hc_group_3),\n fillOpacity = 0.6,\n stroke = 0,\n group = k[[i]],\n popup = paste0(\n \"<h3>\",\"🏡\",sample_10_dat$population_center,\"</h3>\")\n ) \n }\n if (\"20 sampling cluster\" == k[[i]]){\n map <- map %>% \n addCircleMarkers(\n data = sample_20_dat,\n fillColor = ~s20_pal(hc_group_4),\n fillOpacity = 0.6,\n stroke = 0,\n group = k[[i]],\n popup = paste0(\n \"<h3>\",\"🏡\",sample_10_dat$population_center,\"</h3>\")\n ) \n }\n if(\"Perimeter qfield\" == k[[i]]){\n map <- map %>% \n addPolygons(\n data = areas ,\n stroke = 0,\n fillOpacity = 0.8,\n fillColor = \"orange\",\n popup = paste0(\n \"<h3>\",\"🏡\",areas$village,\"</h3>\",\"<hr>\",\n \"- Area-Ha: \",round(areas$area_ha,4),\"<br>\",\n \"- Area-km2: \",round(areas$area_km2,4)),\n group = k[[i]]\n )\n }\n \n }\n \n #create layer control\n map = map %>% \n addLayersControl(\n baseGroups = c(\"CartoDB\",\"CartoDB.DarkMatter\",\"Open.Street.Map\",\"Esri.WorldImagery\"),\n overlayGroups = k[c(1:length(k))],\n options = layersControlOptions(collapsed = FALSE)\n ) %>% \n hideGroup(as.character(k[c(0:length(k))])) #hide all groups except the 1st one\n map\n}\n\n#plot the map\nmap_layers()\n```\n"},"formats":{"html":{"execute":{"fig-width":7,"fig-height":5,"fig-format":"retina","fig-dpi":96,"df-print":"default","error":false,"eval":true,"cache":null,"freeze":false,"echo":true,"output":true,"warning":true,"include":true,"keep-md":false,"keep-ipynb":false,"ipynb":null,"enabled":null,"daemon":null,"daemon-restart":false,"debug":false,"ipynb-filters":[],"engine":"knitr"},"render":{"keep-tex":false,"keep-yaml":false,"keep-source":false,"keep-hidden":false,"prefer-html":false,"output-divs":true,"output-ext":"html","fig-align":"default","fig-pos":null,"fig-env":null,"code-fold":"none","code-overflow":"scroll","code-link":false,"code-line-numbers":false,"code-tools":false,"tbl-colwidths":"auto","merge-includes":true,"latex-auto-mk":true,"latex-auto-install":true,"latex-clean":true,"latex-max-runs":10,"latex-makeindex":"makeindex","latex-makeindex-opts":[],"latex-tlmgr-opts":[],"latex-input-paths":[],"latex-output-dir":null,"link-external-icon":false,"link-external-newwindow":false,"self-contained-math":false,"format-resources":[]},"pandoc":{"standalone":true,"wrap":"none","default-image-extension":"png","to":"html","css":["css/style.css","css/map.css"],"toc":true,"output-file":"webmap.html"},"language":{},"metadata":{"lang":"en","fig-responsive":true,"quarto-version":"1.2.122","editor":"visual","theme":"cosmo","page-layout":"full","comments":false},"extensions":{"book":{"multiFile":true}}}}}
2 changes: 1 addition & 1 deletion .quarto/xref/4aa896b1
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"headings":[],"entries":[]}
{"entries":[],"headings":[]}
2 changes: 1 addition & 1 deletion .quarto/xref/aa96c33e
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"entries":[],"headings":[]}
{"headings":[],"entries":[]}
2 changes: 1 addition & 1 deletion .quarto/xref/fabadaee
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"headings":["intro","dataset","stratification","agglomerative-hierarchical-clustering-analysis","chosing-the-hierarchical-clustering-structure","determining-the-number-of-clusters","evaluation-of-the-criteria-of-the-optimal-number-of-clusters","clusters-plots","individual-silhouette-widths","hc-groups-on-maps","principal-components-analysis","scree-plot","contribution-plot","coordinate-plane","pca-groups-on-maps","comparing-hc-and-pca","confusion-matrices","sampling"],"entries":[]}
{"entries":[],"headings":["intro","dataset","stratification","agglomerative-hierarchical-clustering-analysis","chosing-the-hierarchical-clustering-structure","determining-the-number-of-clusters","evaluation-of-the-criteria-of-the-optimal-number-of-clusters","clusters-plots","individual-silhouette-widths","hc-groups-on-maps","principal-components-analysis","scree-plot","contribution-plot","coordinate-plane","pca-groups-on-maps","comparing-hc-and-pca","confusion-matrices","sampling"]}
3 changes: 0 additions & 3 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,3 @@
.card {
background-color:#0909096b;
}



3 changes: 0 additions & 3 deletions docs/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,3 @@
.card {
background-color:#0909096b;
}



4 changes: 2 additions & 2 deletions docs/webmap.html

Large diffs are not rendered by default.

8 changes: 6 additions & 2 deletions webmap.qmd
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,9 @@ map_layers <- function() {
fillColor = ~s10_pal(hc_group_3),
fillOpacity = 0.6,
stroke = 0,
group = k[[i]]
group = k[[i]],
popup = paste0(
"<h3>","🏡",sample_10_dat$population_center,"</h3>")
)
}
if ("20 sampling cluster" == k[[i]]){
Expand All @@ -136,7 +138,9 @@ map_layers <- function() {
fillColor = ~s20_pal(hc_group_4),
fillOpacity = 0.6,
stroke = 0,
group = k[[i]]
group = k[[i]],
popup = paste0(
"<h3>","🏡",sample_10_dat$population_center,"</h3>")
)
}
if("Perimeter qfield" == k[[i]]){
Expand Down

0 comments on commit e3a2ee2

Please sign in to comment.