The aim of this document is to show how various tilegram objects can be plotted using the leaflet package.

Common Code

install.packages('leaflet')
install.packages('leaflet.extras') # for setMapStyles
install.packages('tilegramsR')

suppressPackageStartupMessages(library(tilegramsR))
suppressPackageStartupMessages(library(leaflet))
suppressPackageStartupMessages(library(leaflet.extras))

# tilegrams are not geo-rerefenced so we need to use
# L.CRS.Simple projecion.
getLeafletOptions <- function(minZoom, maxZoom, ...) {
  leafletOptions(
    crs = leafletCRS("L.CRS.Simple"),
    minZoom = minZoom, maxZoom = maxZoom,
    dragging = FALSE, zoomControl = FALSE,
    tap = FALSE,
    attributionControl = FALSE , ...)
}

# helper function to get colors based on a factor variable
getFactorPal <- function(f) {
  colorFactor(colormap::colormap(
    colormap = colormap::colormaps$hsv,
    nshades = length(f)), f)
}

NPR

leaflet(
  sf_NPR1to1,
  options= getLeafletOptions(-1.5, -1.5)) %>%
  addPolygons(
    weight=2,color='#000000', group = 'states',
    fillOpacity = 0.6, opacity = 1, fillColor= ~getFactorPal(state)(state),
    highlightOptions = highlightOptions(weight = 4)) %>%
  addLabelOnlyMarkers(
    data=sf_NPR1to1.centers,
    label = ~as.character(state),
    labelOptions = labelOptions(
    noHide = 'T', textOnly = T,
    offset=c(-4,-10), textsize = '12px')) %>%
  setMapWidgetStyle()

Pitch Interactive

leaflet(
  options= getLeafletOptions(-1.5, -1.5)) %>%
  addPolygons(
    data=sf_Pitch_US_Population_2016_v1,
    weight=1,color='#000000', fillOpacity = 0.5, opacity=0.2,
    fillColor= ~getFactorPal(state)(state)) %>%
  addPolygons(
    data=sf_Pitch_US_Population_2016_v1.states, group = 'states',
    weight=2,color='#000000',
    fill = T, opacity = 1, fillOpacity = 0,
    highlightOptions = highlightOptions(weight = 4)) %>%
  addLabelOnlyMarkers(
    data=sf_Pitch_US_Population_2016_v1.centers,
    label = ~as.character(state),
    labelOptions = labelOptions(
    noHide = 'T', textOnly = T,
    offset=c(-4,-10), textsize = '15px')) %>%
  setMapWidgetStyle()

538.com

leaflet(
  options= getLeafletOptions(-1.5, -1.5)) %>%
  addPolygons(
    data=sf_FiveThirtyEightElectoralCollege,
    weight=1,color='#000000', fillOpacity = 0.5, opacity=0.2,
    fillColor= ~getFactorPal(state)(state)) %>%
  addPolygons(
    data=sf_FiveThirtyEightElectoralCollege.states, group = 'states',
    weight=2,color='#000000',
    fill = T, opacity = 1, fillOpacity = 0,
    highlightOptions = highlightOptions(weight = 4)) %>%
  addLabelOnlyMarkers(
    data=sf_FiveThirtyEightElectoralCollege.centers,
    label = ~as.character(state),
    labelOptions = labelOptions(
      noHide = 'T', textOnly = T,
      offset=c(-8,-20), textsize = '15px')) %>%
  setMapWidgetStyle()

DKOS DualHex

leaflet(
  options= getLeafletOptions(7, 7)) %>%
  addPolygons(
    data=sf_DKOS_50_State_OuterHex_Tilemap_v1, group='states',
    weight=2,color='#000000', opacity = 1,
    fillColor= ~getFactorPal(State)(State),
    highlightOptions = highlightOptions(weight = 4))  %>%
  addPolygons(
    data=sf_DKOS_50_State_InnerHex_Tilemap_v1,
    weight=1,color='#000000', opacity=1, fillOpacity = 1,
    fillColor= ~getFactorPal(State)(State),
    options = pathOptions(clickable = FALSE, pointerEvents = 'none')) %>%
  addLabelOnlyMarkers(
    data=sf_DKOS_50_State_Hex_Tilemap_v1.centers,
    label = ~as.character(State),
    labelOptions = labelOptions(
      noHide = 'T', textOnly = T,
      offset=c(-4,-10), textsize = '12px',
      style=list('color'='#000000'))) %>%
  setMapWidgetStyle()

DKOS CD

leaflet(
  options= getLeafletOptions(4.0, 4.0)) %>%
  addPolygons(
    data=sf_DKOS_CD_Hexmap_v1.1,
    weight=1,color='#000000', fillOpacity = 0.5, opacity=0.2,
    fillColor= ~getFactorPal(STATEAB)(STATEAB)) %>%
  addPolygons(
    data=sf_DKOS_CD_Hexmap_v1.1.states, group = 'states',
    weight=2,color='#000000', fill = T,
    opacity = 1, fillOpacity = 0,
    highlightOptions = highlightOptions(weight = 4)) %>%
  addLabelOnlyMarkers(
    data=sf_DKOS_CD_Hexmap_v1.1.centers,
    label = ~as.character(STATEAB),
    labelOptions = labelOptions(
      noHide = 'T', textOnly = T, offset=c(-12,-15), textsize = '15px',
      direction="auto")) %>%
  setMapWidgetStyle()

DKOS Electoral

leaflet(
  options= getLeafletOptions(4, 4)) %>%
  addPolygons(
    data=sf_DKOS_Electoral_College_Map_v1,
    weight=1,color='#000000', fillOpacity = 0.5, opacity=0.2,
    fillColor= ~getFactorPal(State.abb)(State.abb)) %>%
  addPolygons(
    data=sf_DKOS_Electoral_College_Map_v1.states, group = 'states',
    weight=2,color='#000000', fill = T,
    opacity = 1, fillOpacity = 0,
    highlightOptions = highlightOptions(weight = 4)) %>%
  addLabelOnlyMarkers(
    data=sf_DKOS_Electoral_College_Map_v1.centers,
    label = ~as.character(State.abb),
    labelOptions = labelOptions(
      noHide = 'T', textOnly = T, offset=c(-12,-15), textsize = '15px',
      direction="auto")) %>%
  setMapWidgetStyle()

DKOS Distorted

leaflet(
  options= getLeafletOptions(-12.5, -12.5)) %>%
  addPolygons(
    data=sf_DKOS_Distorted_Electoral_College_Map_v1, group = 'states',
    weight=1,color='#000000', fillOpacity = 0.5, opacity=0.7,
    fillColor= ~getFactorPal(STUSPS)(STUSPS),
    highlightOptions = highlightOptions(weight = 3)) %>%
  addLabelOnlyMarkers(
    data=sf_DKOS_Distorted_Electoral_College_Map_v1.centers,
    label = ~as.character(STUSPS),
    labelOptions = labelOptions(
      noHide = 'T', textOnly = T, offset=c(-20,-15), textsize = '15px',
      direction="auto")) %>%
  setMapWidgetStyle()

NPR Demers

leaflet(
  options= getLeafletOptions(0.1, 0.1)) %>%
  addPolygons(
    data=sf_NPR.DemersCartogram, group = 'states',
    weight=1,color='#000000', fillOpacity = 0.5, opacity=0.7,
    fillColor= ~getFactorPal(id)(id),
    highlightOptions = highlightOptions(weight = 3)) %>%
  addLabelOnlyMarkers(
    data=sf_NPR.DemersCartogram.centers,
    label = ~as.character(id),
    labelOptions = labelOptions(
      noHide = 'T', textOnly = T, offset=c(-12,-15), textsize = '15px',
      direction="auto")) %>%
  setMapWidgetStyle()

Washington Post

leaflet(
  options= getLeafletOptions(0.1, 0.1)) %>%
  addPolygons(
    data=sf_WP, group = 'states',
    weight=1,color='#000000', fillOpacity = 0.5, opacity=0.7,
    fillColor= ~getFactorPal(id)(id),
    highlightOptions = highlightOptions(weight = 3)) %>%
  addLabelOnlyMarkers(
    data=sf_WP.centers,
    label = ~as.character(id),
    labelOptions = labelOptions(
      noHide = 'T', textOnly = T, offset=c(-10,-8), textsize = '15px',
      direction="auto")) %>%
  setMapWidgetStyle()

Wall Street Journal

leaflet(
  options= getLeafletOptions(0.1, 0.1)) %>%
  addPolygons(
    data=sf_WSJ,
    weight=1,color='#000000', fillOpacity = 0.5, opacity=0.7,
    fillColor= ~getFactorPal(id)(id),
    highlightOptions = highlightOptions(weight = 3)) %>%
  addLabelOnlyMarkers(
    data=sf_WSJ.centers,
    label = ~as.character(id),
    labelOptions = labelOptions(
      noHide = 'T', textOnly = T,
      offset=c(0, -8), textsize = '15px')) %>%
  setMapWidgetStyle()

Datamap.io

leaflet(
  options= getLeafletOptions(-1, -1)) %>%
  addPolygons(
    data=sf_Datamap.io.tilegram, group = 'states',
    weight=1,color='#000000', fillOpacity = 0.5, opacity=0.7,
    fillColor= ~getFactorPal(USPS)(USPS),
    highlightOptions = highlightOptions(weight = 3)) %>%
  addLabelOnlyMarkers(
    data=sf_Datamap.io.tilegram.centers,
    label = ~as.character(USPS),
    labelOptions = labelOptions(
      noHide = 'T', textOnly = T, offset=c(-15,-8), textsize = '15px',
      direction="auto")) %>%
  setMapWidgetStyle()

French Regions

leaflet(
  options= getLeafletOptions(-0.75, -0.75)) %>%
  addPolygons(
    data=sf_france_regions_population,
    weight=1,color='#000000', fillOpacity = 0.5, opacity=0.2,
    fillColor= ~getFactorPal(id)(id)) %>%
  addPolygons(
    data=sf_france_regions_population.regions, group = 'regions',
    weight=2,color='#000000',
    fill = T, opacity = 1, fillOpacity = 0,
    highlightOptions = highlightOptions(weight = 4)) %>%
  addLabelOnlyMarkers(
    data=sf_france_regions_population.centers,
    label = ~as.character(name),
    labelOptions = labelOptions(
    noHide = 'T', textOnly = T,
    offset=c(-50,0), textsize = '8px')) %>%
  setMapWidgetStyle()

All French Regions

leaflet(
  options= getLeafletOptions(-0.8, -0.8)) %>%
  addPolygons(
    data=sf_france_all_regions_population,
    weight=1,color='#000000', fillOpacity = 0.5, opacity=0.2,
    fillColor= ~getFactorPal(id)(id)) %>%
  addPolygons(
    data=sf_france_all_regions_population.regions, group = 'regions',
    weight=2,color='#000000',
    label = ~as.character(name),
    labelOptions = labelOptions(direction = 'auto'),
    fill = T, opacity = 1, fillOpacity = 0,
    highlightOptions = highlightOptions(weight = 4)) %>%
  addLabelOnlyMarkers(
    data=sf_france_all_regions_population.centers,
    label = ~as.character(name),
    labelOptions = labelOptions(
    noHide = 'T', textOnly = T, direction = 'auto',
    offset=c(-30,0), textsize = '8px')) %>%
  setMapWidgetStyle()

Germany

leaflet(
  options= getLeafletOptions(-0.9, -0.9)) %>%
  addPolygons(
    data=sf_germany_constituencies,
    weight=1,color='#000000', fillOpacity = 0.5, opacity=0.7,
    fillColor= ~getFactorPal(id)(id),
    label = ~name,
    highlightOptions = highlightOptions(weight = 3)) %>%
  addLabelOnlyMarkers(
    data=sf_germany_constituencies.centers,
    label = ~as.character(id),
    labelOptions = labelOptions(
      noHide = 'T', textOnly = T, offset=c(0,-10),
      textsize = '8px' )) %>%
  setMapWidgetStyle()