refactoring #256

DESCRIPTION

@@ -1,7 +1,7 @@
 Package: googleway
 Type: Package
 Title: Accesses Google Maps APIs to Retrieve Data and Plot Maps
-Version: 2.7.8
+Version: 3.0.0
 Date: 2023-08-22
 Authors@R: c(
     person("David", "Cooley", ,"[email protected]", role = c("aut", "cre")),

NEWS.md

@@ -1,6 +1,12 @@
+## Version 3.0.0
+
+* Uses `async` library loads [issue 256](https://github.com/SymbolixAU/googleway/issues/256)
+* Markers updated to use `AdvancedMarkerElement` [issue 270](https://github.com/SymbolixAU/googleway/issues/270)
+  - `colour` argument has changed to be a hex string
+
 ## Version 2.7.8
 
-* supressed `readLines()` warning
+* surpressed `readLines()` warning
 
 ## Version 2.7.7
 

R/google_map.R

@@ -235,7 +235,7 @@ google_map <- function(data = NULL,
     , '(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({'
     , 'key: "', key, '",'
     , 'v: "weekly",'
-    #, 'libraries: ', paste0(libraries, collapse = ",")
+    # , 'libraries: "', paste0(libraries, collapse = '","'), '"'
     , '});'
     , '</script>'
   )

R/google_map_layer_marker.R

@@ -29,14 +29,17 @@ googleMarkerDependency <- function() {
 #'
 #' @inheritParams add_circles
 #' @param colour string specifying the column containing the 'colour' to use for
-#' the markers. One of 'red', 'blue', 'green' or 'lavender'.
+#' the markers. The colour should be specified as a hex string (e.g. "#FF0000").
+#' @param border_colour string specifying the column containing the 'border colour'
+#' to use for the markers. The colour should be specified as a hex string (e.g. "#FF0000")
+#' @param glyph_colour string specifying the column containing the 'glype colour'
+#' (the center of the marker) to use for the markers.
+#' The colour should be specified as a hex string (e.g. "#FF0000")
 #' @param title string specifying the column of \code{data} containing the 'title'
 #' of the markers. The title is displayed when you hover over a marker. If blank,
 #' no title will be displayed for the markers.
 #' @param draggable string specifying the column of \code{data} defining if the
 #' marker is 'draggable' (either TRUE or FALSE)
-#' @param opacity string specifying the column of \code{data} defining the 'opacity'
-#' of the maker. Values must be between 0 and 1 (inclusive).
 #' @param label string specifying the column of \code{data} defining the character
 #' to appear in the centre of the marker. Values will be coerced to strings, and
 #' only the first character will be used.
@@ -117,6 +120,8 @@ add_markers <- function(map,
                         data = get_map_data(map),
                         id = NULL,
                         colour = NULL,
+                        border_colour = NULL,
+                        glyph_colour = NULL,
                         lat = NULL,
                         lon = NULL,
                         polyline = NULL,
@@ -139,15 +144,21 @@ add_markers <- function(map,
                         ){
 
   #objArgs <- match.call(expand.dots = F)
+  if(!is.null(opacity)) {
+    warning("opacity argument is deprecated in 3.0.0. Specify the opacity using the alpha component of the hex string in the `colour` argument")
+  }
+
   objArgs <- list()
   objArgs[["id"]] <- force( id )
   objArgs[["colour"]] <- force( colour )
+  objArgs[["border_colour"]] <- force( border_colour )
+  objArgs[["glyph_colour"]] <- force( glyph_colour )
   objArgs[["lat"]] <- force( lat )
   objArgs[["lon"]] <- force( lon )
   objArgs[["polyline"]] <- force( polyline )
   objArgs[["title"]] <- force( title )
   objArgs[["draggable"]] <- force( draggable )
-  objArgs[["opacity"]] <- force( opacity )
+  # objArgs[["opacity"]] <- force( opacity )
   objArgs[["label"]] <- force( label )
   objArgs[["info_window"]] <- force( info_window )
   objArgs[["mouse_over"]] <- force( mouse_over )
@@ -222,9 +233,11 @@ add_markers <- function(map,
     shape <- addDefaults(shape, requiredDefaults, "marker")
   }
 
-  if(!is.null(colour)){
-    shape <- merge(shape, df_markerColours(), by.x = "colour", by.y = "colour", all.x = TRUE)
-  }
+  print(shape)
+
+  # if(!is.null(colour)){
+    # shape <- merge(shape, df_markerColours(), by.x = "colour", by.y = "colour", all.x = TRUE)
+  # }
 
   if( usePolyline ) {
     shape <- createPolylineListColumn(shape)

R/google_map_layer_parameters.R

@@ -133,11 +133,11 @@ markerColourIconCheck <- function(data, objArgs, colour, marker_icon){
     objArgs[['marker_icon']] <- NULL
   }
 
-  if(!is.null(colour)){
-    if(!all((tolower(data[, colour])) %in% c("red","blue","green","lavender"))){
-      stop("colours must be either red, blue, green or lavender")
-    }
-  }
+  # if(!is.null(colour)){
+  #   if(!all((tolower(data[, colour])) %in% c("red","blue","green","lavender"))){
+  #     stop("colours must be either red, blue, green or lavender")
+  #   }
+  # }
 
   return(objArgs)
 }

R/google_map_shape_constructors.R

@@ -151,7 +151,7 @@ requiredCircleColumns <- function() {
 }
 
 requiredMarkerColumns <- function() {
-  c("opacity", "colour")
+  c("colour")
 }
 
 requiredHeatmapColumns <- function() {
@@ -164,22 +164,24 @@ requiredHeatmapUpdateColumns <- function() {
 
 ## MARKERS ---------------------------------------------------------------------
 markerColumns <- function() {
-  c('id', 'colour', 'lat', 'lng', 'title', 'draggable', 'opacity', 'label',
+  c('id', 'colour', 'border_colour', 'glyph_colour', 'lat', 'lng', 'title', 'draggable', 'label',
     'info_window', 'mouse_over', 'mouse_over_group', 'url')
 }
 
-df_markerColours <- function() {
-  data.frame(colour = c('red', 'blue', 'green', 'lavender'),
-             url = c("https://mt.googleapis.com/vt/icon/name=icons/spotlight/spotlight-poi.png&scale=1",
-                     "https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-blue.png&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1",
-                     "https://mt.google.com/vt/icon?psize=30&font=fonts/arialuni_t.ttf&color=ff304C13&name=icons/spotlight/spotlight-waypoint-a.png&ax=43&ay=48&text=%E2%80%A2",
-                     "https://mt.google.com/vt/icon/name=icons/spotlight/spotlight-ad.png"))
-}
-
+# df_markerColours <- function() {
+#   data.frame(colour = c('red', 'blue', 'green', 'lavender'),
+#              url = c("https://mt.googleapis.com/vt/icon/name=icons/spotlight/spotlight-poi.png&scale=1",
+#                      "https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-blue.png&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1",
+#                      "https://mt.google.com/vt/icon?psize=30&font=fonts/arialuni_t.ttf&color=ff304C13&name=icons/spotlight/spotlight-waypoint-a.png&ax=43&ay=48&text=%E2%80%A2",
+#                      "https://mt.google.com/vt/icon/name=icons/spotlight/spotlight-ad.png"))
+# }
+#
 markerDefaults <- function(n) {
-  data.frame("opacity" = rep(1, n),
-             "colour" = rep("red", n),
-             stringsAsFactors = F)
+  data.frame(
+    # "opacity" = rep(1, n),
+    "colour" = rep("#FF0000", n),
+    stringsAsFactors = F
+    )
 }
 
 ## polyline ---------------------------------------------------------------------

inst/htmlwidgets/google_map.js

@@ -2,7 +2,10 @@
 async function initMap(el, x) {
 
   const { Map } = await google.maps.importLibrary("maps");
-  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
+  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
+  const { Visualization } = await google.maps.importLibrary("visualization");
+  const { Places } = await google.maps.importLibrary("places");
+  const { Drawing } = await google.maps.importLibrary("drawing");
 
   var map = new Map(document.getElementById(el.id), {
     mapId: el.id,
@@ -137,6 +140,23 @@ async function initMap(el, x) {
         });
     }
 
+    if(x.split_view !== null) {
+
+        var panorama = new google.maps.StreetViewPanorama(
+            document.getElementById(x.split_view), {
+                position: {lat: x.lat, lng: x.lng},
+                pov: {
+                    heading: x.split_view_options.heading,
+                    pitch: x.split_view_options.pitch
+                    //heading: 34,
+                    //pitch: 10
+                  }
+            });
+
+        map.setStreetView( panorama );
+
+        window[ el.id + x.split_view ] = panorama;
+    }
 
     // call initial layers
     if (x.calls !== undefined) {

inst/htmlwidgets/lib/markers/markers.js

@@ -81,8 +81,6 @@ function cluster_markers(map_id, layer_id, cluster_options) {
 
 function set_markers(map_id, infoWindow, aMarker, update_map_view, layer_id, use_polyline, timeout) {
 
-    console.log( aMarker );
-
     window.setTimeout(function () {
 
         var j, lon, lat, path, latlon;
@@ -145,17 +143,24 @@ function draw_chart(marker) {
 
 function set_each_marker(latlon, aMarker, infoWindow, update_map_view, map_id, layer_id) {
 
+    console.log(aMarker);
+
     const map = window[map_id + "map"];
+
     var markerInfo,
         marker = new google.maps.marker.AdvancedMarkerElement({
             map,
             id: aMarker.id,
             //icon: aMarker.url,
             position: latlon,
-            draggable: aMarker.draggable,
-            //opacity: aMarker.opacity,
-            //opacityHolder: aMarker.opacity,
+            gmpDraggable: aMarker.draggable,
             title: aMarker.title,
+            content: new google.maps.marker.PinElement({
+              background: aMarker.colour,
+              borderColor: aMarker.border_colour,
+              glyphColor: aMarker.glyph_colour,
+              glyph: aMarker.title
+            }).element,
             //label: aMarker.label,
             //mouseOver: aMarker.mouse_over,
             //mouseOverGroup: aMarker.mouse_over_group,