From a1f826b49f8b44047dc03d985206e54f9ff506f3 Mon Sep 17 00:00:00 2001 From: SymbolixAU Date: Tue, 31 Jul 2018 12:28:27 +1000 Subject: [PATCH] colour_range for grid, but errors for screengrid --- R/map_layer_grid.R | 9 ++++++--- R/map_layer_screengrid.R | 2 +- inst/htmlwidgets/lib/grid/grid.js | 6 ++---- inst/htmlwidgets/lib/screengrid/screengrid.js | 4 +--- inst/htmlwidgets/mapdeck.js | 15 +++++++++++++++ man/add_grid.Rd | 12 +++++++----- 6 files changed, 32 insertions(+), 16 deletions(-) diff --git a/R/map_layer_grid.R b/R/map_layer_grid.R index 84337501..0cdf58ad 100644 --- a/R/map_layer_grid.R +++ b/R/map_layer_grid.R @@ -19,6 +19,7 @@ mapdeckGridDependency <- function() { #' @inheritParams add_arc #' @param lon column containing longitude values #' @param lat column containing latitude values +#' @param colour_range vector of hex colours #' @param cell_size size of each cell in meters #' @param extruded logical indicating if cells are elevated or not #' @param elevation_scale cell elevation multiplier @@ -27,6 +28,8 @@ mapdeckGridDependency <- function() { #' \dontrun{ #' df <- read.csv('https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv') #' +#' key <- read.dcf("~/Documents/.googleAPI", fields = "MAPBOX") +#' #' mapdeck( token = key, style = 'mapbox://styles/mapbox/dark-v9', pitch = 45 ) %>% #' add_grid( #' data = df @@ -45,12 +48,12 @@ add_grid <- function( lon = NULL, lat = NULL, polyline = NULL, + colour_range = viridisLite::viridis(5), cell_size = 1000, extruded = TRUE, elevation_scale = 1, layer_id, - digits = 6, - palette = viridisLite::viridis + digits = 6 ) { objArgs <- match.call(expand.dots = F) @@ -107,7 +110,7 @@ add_grid <- function( shape <- jsonlite::toJSON(shape, digits = digits) map <- addDependency(map, mapdeckGridDependency()) - invoke_method(map, "add_grid", shape, layer_id, cell_size, jsonlite::toJSON(extruded, auto_unbox = T), elevation_scale) + invoke_method(map, "add_grid", shape, layer_id, cell_size, jsonlite::toJSON(extruded, auto_unbox = T), elevation_scale, colour_range) } diff --git a/R/map_layer_screengrid.R b/R/map_layer_screengrid.R index c8b592d5..281223a4 100644 --- a/R/map_layer_screengrid.R +++ b/R/map_layer_screengrid.R @@ -85,7 +85,7 @@ add_screengrid <- function( shape <- jsonlite::toJSON(shape, digits = digits) map <- addDependency(map, mapdeckScreengridDependency()) - invoke_method(map, "add_screengrid", shape, layer_id ) + invoke_method(map, "add_screengrid", shape, layer_id, colour_range ) } diff --git a/inst/htmlwidgets/lib/grid/grid.js b/inst/htmlwidgets/lib/grid/grid.js index 29b45bdb..6630d493 100644 --- a/inst/htmlwidgets/lib/grid/grid.js +++ b/inst/htmlwidgets/lib/grid/grid.js @@ -1,7 +1,5 @@ -function add_grid( map_id, grid_data, layer_id, cell_size, extruded, elevation_scale ) { - - //console.log( grid_data ); +function add_grid( map_id, grid_data, layer_id, cell_size, extruded, elevation_scale, colour_range ) { const gridLayer = new deck.GridLayer({ id: 'grid-'+layer_id, // TODO @@ -9,10 +7,10 @@ function add_grid( map_id, grid_data, layer_id, cell_size, extruded, elevation_s pickable: true, extruded: extruded, cellSize: cell_size, + colorRange: to_rgba( colour_range ), elevationScale: elevation_scale, getPosition: d => decode_polyline( d.polyline )[0], onClick: info => layer_click( map_id, "grid", info ) }); - update_layer( map_id, 'arc-'+layer_id, gridLayer ); } diff --git a/inst/htmlwidgets/lib/screengrid/screengrid.js b/inst/htmlwidgets/lib/screengrid/screengrid.js index bee584ca..689a7d37 100644 --- a/inst/htmlwidgets/lib/screengrid/screengrid.js +++ b/inst/htmlwidgets/lib/screengrid/screengrid.js @@ -1,12 +1,10 @@ function add_screengrid( map_id, screengrid_data, layer_id ) { - - console.log( screengrid_data ); - const screengridLayer = new deck.ScreenGridLayer({ id: 'screengrid-'+layer_id, // TODO data: screengrid_data, cellSizePixels: 50, + //colorRange: to_rgba( colour_range ), getPosition: d => [d.lon, d.lat], getWeight: d => d.weight, onClick: info => layer_click( map_id, "screengrid", info ) diff --git a/inst/htmlwidgets/mapdeck.js b/inst/htmlwidgets/mapdeck.js index 46e3467a..f79c435f 100644 --- a/inst/htmlwidgets/mapdeck.js +++ b/inst/htmlwidgets/mapdeck.js @@ -156,6 +156,21 @@ const hexToRgb = hex => .substring(1).match(/.{2}/g) .map(x => parseInt(x, 16)); +/** + * Converts a 'vector' of hex colours (with alpha) into an array + */ +function to_rgba( colour_range ) { + var arr = [], + i, + n = colour_range.length; + + for (i = 0; i < n; i++) { + arr.push( hexToRgb(colour_range[i]) ); + } + console.log( arr ); + return arr; +} + function layer_click( map_id, layer, info ) { if ( !HTMLWidgets.shinyMode ) { diff --git a/man/add_grid.Rd b/man/add_grid.Rd index c374038e..5fd7d755 100644 --- a/man/add_grid.Rd +++ b/man/add_grid.Rd @@ -5,9 +5,9 @@ \title{Add Grid} \usage{ add_grid(map, data = get_map_data(map), lon = NULL, lat = NULL, - polyline = NULL, cell_size = 1000, extruded = TRUE, - elevation_scale = 1, layer_id, digits = 6, - palette = viridisLite::viridis) + polyline = NULL, colour_range = viridisLite::viridis(5), + cell_size = 1000, extruded = TRUE, elevation_scale = 1, layer_id, + digits = 6) } \arguments{ \item{map}{a mapdeck map object} @@ -18,6 +18,8 @@ add_grid(map, data = get_map_data(map), lon = NULL, lat = NULL, \item{lat}{column containing latitude values} +\item{colour_range}{vector of hex colours} + \item{cell_size}{size of each cell in meters} \item{extruded}{logical indicating if cells are elevated or not} @@ -29,8 +31,6 @@ distinguish between shape layers of the same type} \item{digits}{integer. Use this parameter to specify how many digits (decimal places) should be used for the latitude / longitude coordinates.} - -\item{palette}{a function, or list of functions which generates hex colours} } \description{ The Grid Layer renders a grid heatmap based on an array of points. @@ -41,6 +41,8 @@ The color and height of the cell is scaled by number of points it contains. \dontrun{ df <- read.csv('https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv') +key <- read.dcf("~/Documents/.googleAPI", fields = "MAPBOX") + mapdeck( token = key, style = 'mapbox://styles/mapbox/dark-v9', pitch = 45 ) \%>\% add_grid( data = df