diff --git a/R/glify-points.R b/R/glify-points.R index bb926ce..06d2b45 100644 --- a/R/glify-points.R +++ b/R/glify-points.R @@ -22,7 +22,13 @@ #' @param layerId the layer id #' @param weight line width/thicknes in pixels for \code{addGlPolylines}. #' @param src whether to pass data to the widget via file attachments. -#' @param ... Passed to \code{\link[jsonify]{to_json}} for the data coordinates. +#' @param ... Used to pass additional named arguments to \code{\link[jsonify]{to_json}} +#' & to pass additional arguments to the underlying JavaScript functions. Typical +#' use-cases include setting 'digits' to round the point coordinates or to pass +#' a different 'fragmentShaderSource' to control the shape of the points. Use +#' 'point' (default) to render circles with a thin black outline, +#' 'simpleCircle' for circles without outline or +#' 'sqaure' for squares (without outline). #' #' @describeIn addGlPoints add points to a leaflet map using Leaflet.glify #' @examples @@ -58,6 +64,8 @@ addGlPoints = function(map, src = FALSE, ...) { + dotopts = list(...) + if (isTRUE(src)) { m = addGlPointsSrc( map = map @@ -148,6 +156,7 @@ addGlPoints = function(map, , radius , group , layerId + , dotopts ) leaflet::expandLimits( diff --git a/inst/htmlwidgets/Leaflet.glify/addGlifyPoints.js b/inst/htmlwidgets/Leaflet.glify/addGlifyPoints.js index 8852560..7004fc4 100644 --- a/inst/htmlwidgets/Leaflet.glify/addGlifyPoints.js +++ b/inst/htmlwidgets/Leaflet.glify/addGlifyPoints.js @@ -1,4 +1,4 @@ -LeafletWidget.methods.addGlifyPoints = function(data, cols, popup, opacity, radius, group, layerId) { +LeafletWidget.methods.addGlifyPoints = function(data, cols, popup, opacity, radius, group, layerId, dotOptions) { const map = this; @@ -18,49 +18,8 @@ LeafletWidget.methods.addGlifyPoints = function(data, cols, popup, opacity, radi rad = function(index, point) { return radius[index]; }; } -/* - var pop; - if (popup) { - if (popup === true) { - pop = function (e, feature) { - var popUp = '
'+JSON.stringify(feature.properties,null,' ').replace(/[\{\}"]/g,'')+'
'; - if (map.hasLayer(pointslayer.glLayer)) { - L.popup({ maxWidth: 2000 }) - .setLatLng(e.latlng) - .setContent(popUp) - .openOn(map); - } - }; - } else { - pop = function (e, feature) { - if (map.hasLayer(pointslayer.glLayer)) { - L.popup({ maxWidth: 2000 }) - .setLatLng(e.latlng) - .setContent(feature.properties[[popup]].toString()) - .openOn(map); - } - }; - } - } else { - pop = null; - } - - var pointslayer = L.glify.points({ - map: map, - click: pop, - data: data, - color: clrs, - opacity: opacity, - size: size, - className: group - }); - - map.layerManager.addLayer(pointslayer.glLayer, null, null, group); -*/ - - var pointslayer = L.glify.points({ - map: map, - click: (e, point, xy) => { + // click function + let clickFun = (e, point, xy) => { var idx = data.findIndex(k => k==point); //set up a standalone popup (use a popup as a layer) if (map.hasLayer(pointslayer.glLayer)) { @@ -81,14 +40,34 @@ LeafletWidget.methods.addGlifyPoints = function(data, cols, popup, opacity, radi .openOn(map); } } - }, + }; + + // arguments for gl layer + var pointsArgs = { + map: map, + click: clickFun, data: data, color: clrs, opacity: opacity, size: rad, className: group - }); + }; + + // extract correct fragmentShaderSource if provided via dotOptions + if (dotOptions.fragmentShaderSource !== undefined && dotOptions.fragmentShaderSource !== null) { + let fragmentShader = dotOptions.fragmentShaderSource; + dotOptions.fragmentShaderSource = () => { + return L.glify.shader.fragment[fragmentShader]; + }; + } + + // append dotOptions to layer arguments + Object.entries(dotOptions).forEach(([key,value]) => { pointsArgs[key] = value }); + + // initialze layer + var pointslayer = L.glify.points(pointsArgs); + // add layer to map using RStudio leaflet's layerManager map.layerManager.addLayer(pointslayer.glLayer, "glify", layerId, group); };