diff --git a/R/divicon.R b/R/divicon.R
index 0f1daa3..d785ef6 100644
--- a/R/divicon.R
+++ b/R/divicon.R
@@ -17,13 +17,11 @@ diviconDependency <- function() {
#' for latitude and longitude coordinates. It allows for the application of custom HTML
#' content and CSS classes to each marker, providing high flexibility in marker design.
#'
-#' @param map The Leaflet map object to which the DivIcon markers will be added.
#' @inheritParams leaflet::addAwesomeMarkers
-#' @param className A single CSS class or a vector of CSS classes to apply to the DivIcon markers.
-#' @param html A single HTML string or a vector of HTML strings to display within the DivIcon markers.
+#' @param className A single CSS class or a vector of CSS classes.
+#' @param html A single HTML string or a vector of HTML strings.
#' @param divOptions A list of extra options for Leaflet DivIcon.
-#' @param options A list of extra options for the markers.
-#' See \code{\link[leaflet]{markerOptions}} for more details.
+#'
#' @family DivIcon Functions
#' @return The modified Leaflet map object.
#' @export
diff --git a/R/layergroupcollision.R b/R/layergroupcollision.R
index 152a57c..37a33cd 100644
--- a/R/layergroupcollision.R
+++ b/R/layergroupcollision.R
@@ -12,30 +12,60 @@ layergroupCollisionDependency <- function() {
)
}
-#' Add LayerroupCollision Plugin
-#' Needs data to be ordered, as frst elements will have priority.
-#' @return A leaflet map object
+#' Add LayerGroup Collision Plugin to Leaflet Map
+#'
+#' @description Integrates the LayerGroup Collision plugin into a Leaflet map,
+#' which hides overlapping markers and only displays the first added marker in a
+#' collision group. Markers must be static; dynamic changes, dragging, and
+#' deletions are not supported.
+
+#' The function transforms spatial data into GeoJSON format and uses `L.DivIcon`,
+#' allowing you to pass HTML content and CSS classes to style the markers.
+#'
+#' @param group the name of the group. It needs to be single string.
+#' @return A leaflet map object with the LayerGroup Collision plugin added.
#' @export
#'
-#' @inheritParams leaflet::addAwesomeMarkers
-#' @references \url{https://github.com/Geovation/labelgun}
+#' @inheritParams addDivicon
+#' @references \url{https://github.com/MazeMap/Leaflet.LayerGroup.Collision}
#'
#' @name LayerroupCollision
+#' @examples
+#' library(leaflet)
+#' library(sf)
+#' library(leaflet.extras2)
+#'
+#' df <- sf::st_as_sf(atlStorms2005)
+#' df <- suppressWarnings(st_cast(df, "POINT"))
+#' df <- df[sample(1:nrow(df), 150, replace = F),]
+#' df$classes = sample(x = 1:5, nrow(df), replace = TRUE)
+#'
+#' leaflet() %>%
+#' addProviderTiles("CartoDB.Positron") %>%
+#' leaflet::addLayersControl(overlayGroups = c("Labels")) %>%
+#' addLayerGroupCollision(data = df
+#' , html = ~paste0(
+#' '',
+#' '
', Name, '
',
+#' '
MaxWind: ', MaxWind, '
',
+#' '
',
- '
', Name, '
',
- '
MaxWind: ', MaxWind, '
',
+ '
', Name, '
',
+ '
MaxWind: ', MaxWind, '
',
'
",
- "Name: ", Name, "
",
- "MaxWind:", MaxWind, "
",
- "MinPress:", MinPress)
- , options = markerOptions(draggable = TRUE)
+ , className = ~paste0("my-label my-label-", classes)
+ , group = "Labels"
)
})
diff --git a/inst/htmlwidgets/lfx-layergroupcollision/layergroup-binding.js b/inst/htmlwidgets/lfx-layergroupcollision/layergroup-binding.js
index 072c13c..34dddb1 100644
--- a/inst/htmlwidgets/lfx-layergroupcollision/layergroup-binding.js
+++ b/inst/htmlwidgets/lfx-layergroupcollision/layergroup-binding.js
@@ -1,139 +1,28 @@
/* global LeafletWidget, $, L, Shiny, HTMLWidgets */
LeafletWidget.methods.addLayerGroupCollision = function(
- data, layerId, group, options,
- className, html, popup, popupOptions,
- label, labelOptions, margin) {
-
+ data, group, margin) {
var collisionLayer = L.LayerGroup.collision({margin: margin});
- console.log("collisionLayer"); console.log(collisionLayer)
- // Manually parse the GeoJSON and create the L.Markers one by one
- // Note that 'cities' is defined in the natural earth data files.
- console.log("data"); console.log(data)
for (var i=0; i < data.features.length; i++) {
-
var feat = data.features[i];
- var labelClass = 'city-label city-label-' + feat.properties.strklasse_numeric;
-// Note that the markers are not interactive because MSIE on a WinPhone will take *ages*
-// to run addEventListener() on them.
- var marker = L.marker(L.GeoJSON.coordsToLatLng(feat.geometry.coordinates), {
- icon: L.divIcon({
- html:
- "" +
- feat.properties.strnummer +
- ""
- })
- ,interactive: false // Post-0.7.3
- ,clickable: false // 0.7.3
- });
+ // Note that the markers are not interactive because MSIE on a WinPhone will take *ages*
+ // to run addEventListener() on them.
+ var marker = new L.marker(
+ L.GeoJSON.coordsToLatLng(feat.geometry.coordinates), {
+ icon: L.divIcon({
+ html:
+ "" +
+ feat.properties["html__"] +
+ ""
+ })
+ , interactive: false // Post-0.7.3
+ , clickable: false // 0.7.3
+ });
+
collisionLayer.addLayer(marker);
}
- collisionLayer.addTo(this);
+ this.layerManager.addLayer(collisionLayer, "collison", null, group);
};
-/*
-(function() {
- var collisionLayer = L.LayerGroup.collision({margin:5});
-
- // Make a Dataframe
- let df = new LeafletWidget.DataFrame()
- .col("lat", lat)
- .col("lng", lng)
- .col("layerId", layerId)
- .col("group", group)
- .col("popup", popup)
- .col("popupOptions", popupOptions)
- .col("label", label)
- .col("labelOptions", labelOptions)
- .col("className", className)
- .col("html", html)
- .cbind(options)
- .cbind(crosstalkOptions || {});
-
- // Add Cluster
- let clusterGroup = this.layerManager.getLayer("cluster", clusterId),
- cluster = clusterOptions !== null;
- if (cluster && !clusterGroup) {
- clusterGroup = L.markerClusterGroup.layerSupport(clusterOptions);
- if(clusterOptions.freezeAtZoom) {
- let freezeAtZoom = clusterOptions.freezeAtZoom;
- delete clusterOptions.freezeAtZoom;
- clusterGroup.freezeAtZoom(freezeAtZoom);
- }
- clusterGroup.clusterLayerStore = new LeafletWidget.ClusterLayerStore(clusterGroup);
- }
- let extraInfo = cluster ? { clusterId: clusterId } : {};
-
- for (let i = 0; i < df.nrow(); i++) {
- if($.isNumeric(df.get(i, "lat")) && $.isNumeric(df.get(i, "lng"))) {
- (function() {
-
- let thisId = df.get(i, "layerId");
- let thisGroup = cluster ? null : df.get(i, "group");
-
- // Create a new marker with DivIcon
- var divIconOptions = Object.assign({}, divOptions, {
- className: df.get(i, "className"),
- html: df.get(i, "html")
- });
- var divmarker = new L.Marker(
- [df.get(i, "lat"), df.get(i, "lng")],
- Object.assign({}, options, {
- icon: new L.DivIcon(divIconOptions)
- }));
-
- collisionLayer.addLayer(divmarker);
-
- if (cluster) {
- clusterGroup.clusterLayerStore.add(divmarker, thisId);
- } else {
- this.layerManager.addLayer(divmarker, "marker", thisId, thisGroup, df.get(i, "ctGroup", true), df.get(i, "ctKey", true));
- }
-
- // Bind popup to the marker if popup content is provided
- let popup = df.get(i, "popup");
- let popupOptions = df.get(i, "popupOptions");
- if (popup !== null) {
- if (popupOptions !== null){
- divmarker.bindPopup(popup, popupOptions);
- } else {
- divmarker.bindPopup(popup);
- }
- }
-
- // Assign label (tooltip) to marker if label content is provided
- let label = df.get(i, "label");
- let labelOptions = df.get(i, "labelOptions");
- if (label !== null) {
- if (labelOptions !== null) {
- if(labelOptions.permanent) {
- divmarker.bindTooltip(label, labelOptions).openTooltip();
- } else {
- divmarker.bindTooltip(label, labelOptions);
- }
- } else {
- divmarker.bindTooltip(label);
- }
- }
-
- // Add the marker to the map's layer manager
- this.layerManager.addLayer(divmarker, "marker", thisId, thisGroup);
-
- // Add Listener
- divmarker.on("click", LeafletWidget.methods.mouseHandler(this.id, thisId, thisGroup, "marker_click", extraInfo), this);
- divmarker.on("mouseover", LeafletWidget.methods.mouseHandler(this.id, thisId, thisGroup, "marker_mouseover", extraInfo), this);
- divmarker.on("mouseout", LeafletWidget.methods.mouseHandler(this.id, thisId, thisGroup, "marker_mouseout", extraInfo), this);
- divmarker.on("dragend", LeafletWidget.methods.mouseHandler(this.id, thisId, thisGroup, "marker_dragend", extraInfo), this);
-
- }).call(this);
- }
- }
- if (cluster) {
- this.layerManager.addLayer(clusterGroup, "cluster", clusterId, group);
- }
- collisionLayer.addTo(this);
- }).call(this);
-
-*/
diff --git a/man/LayerroupCollision.Rd b/man/LayerroupCollision.Rd
index 7e462c6..cf3e34e 100644
--- a/man/LayerroupCollision.Rd
+++ b/man/LayerroupCollision.Rd
@@ -3,22 +3,13 @@
\name{LayerroupCollision}
\alias{LayerroupCollision}
\alias{addLayerGroupCollision}
-\title{Add LayerroupCollision Plugin
-Needs data to be ordered, as frst elements will have priority.}
+\title{Add LayerGroup Collision Plugin to Leaflet Map}
\usage{
addLayerGroupCollision(
map,
- layerId = NULL,
group = NULL,
- popup = NULL,
- popupOptions = NULL,
- label = NULL,
- labelOptions = NULL,
className = NULL,
html = NULL,
- options = markerOptions(),
- clusterOptions = NULL,
- clusterId = NULL,
margin = 5,
data = getMapData(map)
)
@@ -26,46 +17,51 @@ addLayerGroupCollision(
\arguments{
\item{map}{the map to add awesome Markers to.}
-\item{layerId}{the layer id}
+\item{group}{the name of the group. It needs to be single string.}
-\item{group}{the name of the group the newly created layers should belong to
-(for \code{\link[leaflet]{clearGroup}} and \code{\link[leaflet]{addLayersControl}} purposes).
-Human-friendly group names are permitted--they need not be short,
-identifier-style names. Any number of layers and even different types of
-layers (e.g. markers and polygons) can share the same group name.}
+\item{className}{A single CSS class or a vector of CSS classes.}
-\item{popup}{a character vector of the HTML content for the popups (you are
-recommended to escape the text using \code{\link[htmltools]{htmlEscape}()}
-for security reasons)}
-
-\item{popupOptions}{A Vector of \code{\link[leaflet]{popupOptions}} to provide popups}
-
-\item{label}{a character vector of the HTML content for the labels}
-
-\item{labelOptions}{A Vector of \code{\link[leaflet]{labelOptions}} to provide label
-options for each label. Default \code{NULL}}
-
-\item{options}{a list of extra options for tile layers, popups, paths
-(circles, rectangles, polygons, ...), or other map elements}
-
-\item{clusterOptions}{if not \code{NULL}, markers will be clustered using
-\href{https://github.com/Leaflet/Leaflet.markercluster}{Leaflet.markercluster};
- you can use \code{\link[leaflet]{markerClusterOptions}()} to specify marker cluster
-options}
-
-\item{clusterId}{the id for the marker cluster layer}
+\item{html}{A single HTML string or a vector of HTML strings.}
\item{data}{the data object from which the argument values are derived; by
default, it is the \code{data} object provided to \code{leaflet()}
initially, but can be overridden}
}
\value{
-A leaflet map object
+A leaflet map object with the LayerGroup Collision plugin added.
}
\description{
-Add LayerroupCollision Plugin
-Needs data to be ordered, as frst elements will have priority.
+Integrates the LayerGroup Collision plugin into a Leaflet map,
+which hides overlapping markers and only displays the first added marker in a
+collision group. Markers must be static; dynamic changes, dragging, and
+deletions are not supported.
+The function transforms spatial data into GeoJSON format and uses `L.DivIcon`,
+allowing you to pass HTML content and CSS classes to style the markers.
+}
+\examples{
+library(leaflet)
+library(sf)
+library(leaflet.extras2)
+
+df <- sf::st_as_sf(atlStorms2005)
+df <- suppressWarnings(st_cast(df, "POINT"))
+df <- df[sample(1:nrow(df), 150, replace = F),]
+df$classes = sample(x = 1:5, nrow(df), replace = TRUE)
+
+leaflet() \%>\%
+ addProviderTiles("CartoDB.Positron") \%>\%
+ leaflet::addLayersControl(overlayGroups = c("Labels")) \%>\%
+ addLayerGroupCollision(data = df
+ , html = ~paste0(
+ '',
+ '
', Name, '
',
+ '
MaxWind: ', MaxWind, '
',
+ '
", ID, "
")
+ )
+
+ expect_is(map, "leaflet")
+ expect_true(any(sapply(map$dependencies,
+ function(dep) dep$name == "lfx-layergroupcollision")))
+ expect_length(map$dependencies[[length(map$dependencies)]]$script, 3)
+ expect_identical(map$x$calls[[2]]$method, "addLayerGroupCollision")
+ expect_is(map$x$calls[[2]]$args[[1]], "geojson")
+ expect_identical(map$x$calls[[2]]$args[[2]], "Myclass")
+ expect_identical(map$x$calls[[2]]$args[[3]], 5) # Default margin
+})
+
+# Test 2: Handling of custom margin
+test_that("addLayerGroupCollision handles custom margin", {
+ map <- generate_test_map() %>%
+ addLayerGroupCollision(
+ data = df,
+ margin = 10
+ )
+
+ expect_is(map, "leaflet")
+ expect_identical(map$x$calls[[2]]$method, "addLayerGroupCollision")
+ expect_identical(map$x$calls[[2]]$args[[3]], 10) # Custom margin
+})
+
+# Test 3: Adding HTML and className with custom values
+test_that("addLayerGroupCollision assigns HTML and className correctly", {
+ map <- generate_test_map() %>%
+ addLayerGroupCollision(
+ data = df,
+ className = ~ paste("myclass", classes),
+ html = ~ paste0("", ID, "
")
+ )
+
+ expect_is(map, "leaflet")
+ expect_identical(map$x$calls[[2]]$method, "addLayerGroupCollision")
+ expect_null(map$x$calls[[2]]$args[[2]])
+ expect_identical(map$x$calls[[2]]$args[[3]], 5)
+})
+
+# Test 4: Verifying map data transformation to GeoJSON
+test_that("addLayerGroupCollision transforms spatial data to GeoJSON", {
+ map <- generate_test_map() %>%
+ addLayerGroupCollision(
+ data = df
+ )
+
+ geojson <- map$x$calls[[2]]$args[[1]]
+ expect_true(inherits(geojson, "geojson"))
+})
+
+# Test 5: Error handling for invalid data
+test_that("addLayerGroupCollision handles invalid data gracefully", {
+ expect_error({
+ map <- generate_test_map() %>%
+ addLayerGroupCollision(
+ data = NULL
+ )
+ })
+
+ expect_error({
+ map <- generate_test_map() %>%
+ addLayerGroupCollision(
+ data = data.frame()
+ )
+ })
+})