<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>leaflet | Faith Benamy</title>
    <link>https://www.faithbenamy.com/tag/leaflet/</link>
      <atom:link href="https://www.faithbenamy.com/tag/leaflet/index.xml" rel="self" type="application/rss+xml" />
    <description>leaflet</description>
    <generator>Wowchemy (https://wowchemy.com)</generator><language>en-us</language><lastBuildDate>Wed, 21 Oct 2020 00:00:00 +0000</lastBuildDate>
    <image>
      <url>https://www.faithbenamy.com/media/icon_hua2ec155b4296a9c9791d015323e16eb5_11927_512x512_fill_lanczos_center_3.png</url>
      <title>leaflet</title>
      <link>https://www.faithbenamy.com/tag/leaflet/</link>
    </image>
    
    <item>
      <title>Tidy Tuesday: Geomapping Beer Awards with Leaflet</title>
      <link>https://www.faithbenamy.com/post/tidy-tuesday-beer-leaflet/</link>
      <pubDate>Wed, 21 Oct 2020 00:00:00 +0000</pubDate>
      <guid>https://www.faithbenamy.com/post/tidy-tuesday-beer-leaflet/</guid>
      <description>
&lt;link href=&#34;index_files/anchor-sections/anchor-sections.css&#34; rel=&#34;stylesheet&#34; /&gt;
&lt;script src=&#34;index_files/anchor-sections/anchor-sections.js&#34;&gt;&lt;/script&gt;


&lt;p&gt;Every week R4DS publishes a dataset on Tuesday for the community to promote learning and knowledge sharing. &lt;a href=&#34;https://github.com/rfordatascience/tidytuesday/blob/master/data/2020/2020-10-20/readme.md&#34;&gt;This week’s dataset&lt;/a&gt; is beers that have earned medals at the Great American Beer Festival from 1987 to 2020.&lt;/p&gt;
&lt;pre class=&#34;r&#34;&gt;&lt;code&gt;library(tidytuesdayR) #get data 
tuesdata &amp;lt;- tidytuesdayR::tt_load(2020, week = 43)
beer_awards &amp;lt;- tuesdata$beer_awards&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;The notes for this file indicate that the data is not complete which doesn’t make it a great candidate for a modeling project.
However, after poking around a little it looks like it’s a good match for making an interactive map. It could be useful to know where to get an award winning beer on a road trip.&lt;/p&gt;
&lt;p&gt;I am going to use Leaflet, a javascript library that renders client-side to get interactivity without the need to host my visualization on a server.&lt;/p&gt;
&lt;p&gt;In order to be able to use Leaflet, we will need to geocode the cities from the data. I’m using ggmap for this task.&lt;/p&gt;
&lt;pre class=&#34;r&#34;&gt;&lt;code&gt;library(tidyverse) #the tidyverse, duh
library(leaflet) #for making an interactive map
library(ggmap) #for geoencoding, requires Google API registration
library(glue) #for creating labels for the location markers
library(crayon) #for bolding elements of labels
library(htmltools) #so label reads as html tag&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Let’s only use the 2020 data to make things a little easier.&lt;/p&gt;
&lt;pre class=&#34;r&#34;&gt;&lt;code&gt;beer_2020 &amp;lt;- beer_awards %&amp;gt;% filter(year == 2020)&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;I want people to be able to see the name of the brewery and which beers won which awards. Leaflet builds marker labels in HTML, for a single point so I am going to have to do some manipulation to get the readout to look correct.&lt;/p&gt;
&lt;p&gt;I am using crayon to bold the name of the brewery and HTML tags to color the name of the beer by the type of medal it received.&lt;/p&gt;
&lt;pre class=&#34;r&#34;&gt;&lt;code&gt;#create html tags for the labels
gold_text &amp;lt;- &amp;#39;&amp;lt;p style=&amp;quot;color:#d4af37;&amp;quot;&amp;gt;&amp;#39;
silver_text &amp;lt;- &amp;#39;&amp;lt;p style=&amp;quot;color:#aaa9ad;&amp;quot;&amp;gt;&amp;#39;
bronze_text &amp;lt;- &amp;#39;&amp;lt;p style=&amp;quot;color:#cd7f32;&amp;quot;&amp;gt;&amp;#39;

labeled_beer_2020 &amp;lt;- 
  beer_2020 %&amp;gt;% 
  mutate(beer_label = case_when(
    medal == &amp;quot;Gold&amp;quot; ~ glue(&amp;quot;{gold_text} {beer_name} ({category})&amp;lt;/p&amp;gt;&amp;quot;),
    medal == &amp;quot;Silver&amp;quot; ~ glue(&amp;quot;{silver_text} {beer_name} ({category})&amp;lt;/p&amp;gt;&amp;quot;),
    medal == &amp;quot;Bronze&amp;quot; ~ glue(&amp;quot;{bronze_text} {beer_name} ({category})&amp;lt;/p&amp;gt;&amp;quot;)
  ), brewery_label = glue(&amp;#39;&amp;lt;b&amp;gt;{brewery}&amp;lt;/b&amp;gt;&amp;#39;)) %&amp;gt;% 
  group_by(brewery) %&amp;gt;% 
  #wrap the label in HTML() so that leaflet knows to read it as HTML
  summarise(label = HTML(first(glue(&amp;quot;{brewery_label}: {glue_collapse(beer_label, sep =&amp;#39;\n&amp;#39;,last = &amp;#39;&amp;#39;)}&amp;quot;))), 
            city = first(city), 
            state = first(state)) %&amp;gt;% 
            distinct(label, .keep_all = TRUE)&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Let’s use geocode to grab the latitude and longitude of the city of each award winning brewery and we are ready to go!&lt;/p&gt;
&lt;pre class=&#34;r&#34;&gt;&lt;code&gt;lat_long &amp;lt;- 
  labeled_beer_2020 %&amp;gt;% 
  #combine city and state for an address google can use
  mutate(geo_city = paste(city, state, sep = &amp;quot;, &amp;quot;)) %&amp;gt;% 
  #grab the lat and long from the api and add to the dataframe
  mutate_geocode(geo_city)&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And with a couple of lines of code, we have an interactive map that shows breweries that won awards at the Great American Beer Festival in 2020!&lt;/p&gt;
&lt;pre class=&#34;r&#34;&gt;&lt;code&gt;beer_map &amp;lt;-
  #intialize leaflet app
  leaflet(lat_long) %&amp;gt;% 
    #add initial map from CartoDB
    addProviderTiles(providers$CartoDB.Positron) %&amp;gt;%
    #add markers that cluster at higher levels
    addMarkers(clusterOptions = markerClusterOptions(), label = ~label) %&amp;gt;%   #set starting view
    setView(-93.65, 42.0285, zoom = 4)&lt;/code&gt;&lt;/pre&gt;
&lt;iframe src=&#34;beerMap.html&#34; width=&#34;100%&#34; height=&#34;540&#34;&gt;
&lt;/iframe&gt;
&lt;p&gt;&lt;strong&gt;Nota Bene:&lt;/strong&gt; This site is rendered in Hugo, so in order to get the leaflet html widget to display, I saved it and embedded it in an iframe.&lt;/p&gt;
</description>
    </item>
    
  </channel>
</rss>
