Introduction to Leaflet and Icon Customization in R

Leaflet is a popular JavaScript library used for creating interactive maps. In this article, we will explore how to modify the icon size of markers on a map using the iconCreateFunction option in Leaflet.

Prerequisites: Setting Up Leaflet in R

Before diving into customizing icons, make sure you have installed the Leaflet package in your R environment. You can install it using the following command:

install.packages("leaflet")

Once installed, you need to load the library in your R script or interactive environment. In this example, we will use RStudio.

Understanding Icon Create Function

The iconCreateFunction option is used to customize the appearance of icons on a map. It takes a function as an argument that returns the HTML code for the icon.

Syntax and Structure

The syntax of the iconCreateFunction option typically follows this structure:

iconCreateFunction: function(cluster) {
    var c = ' marker-cluster-small';
    var html = '<div style=\"background-color:rgba(","#FF00DB",")\"><span>' + cluster.getChildCount() + '</div><span>'
    return new L.DivIcon({html: html, className: 'marker-cluster' + c,iconSize: new L.Point(40, 40) });
}

In this example:

• function(cluster) defines the function to be executed.
• var c = ' marker-cluster-small'; sets the CSS class for the icon.
• var html = '<div style=\"background-color:rgba(","#FF00DB",")\"><span>' + cluster.getChildCount() + '</div><span>' generates the HTML code for the icon, including the cluster count and background color.
• return new L.DivIcon({html: html, className: 'marker-cluster' + c,iconSize: new L.Point(40, 40) }) creates a new DivIcon object with the specified HTML and CSS classes.

Customizing Icon Size

To modify the icon size, you need to adjust the iconSize property in the DivIcon constructor. This can be done by changing the values of new L.Point(40, 40).

For example:

iconCreateFunction: function(cluster) {
    var c = ' marker-cluster-small';
    var html = '<div style=\"background-color:rgba(","#FF00DB",")\"><span>' + cluster.getChildCount() + '</div><span>'
    return new L.DivIcon({html: html, className: 'marker-cluster' + c,iconSize: new L.Point(20, 20) });
}

In this modified example, the icon size is reduced to new L.Point(20, 20).

Using Leaflet in R with Custom Icons

Let’s demonstrate how to use Leaflet in R with custom icons:

Sample Data and Map Creation

First, we load the required libraries and create a sample dataset of quakes:

library(leaflet)
data(quakes)

# Remove the first 10 rows of data
quakes <- head(quakes, n = nrow(quakes) - 10)

# Convert stations column to factor
quakes$stations <- as.factor(quakes$stations)

Next, we create a Leaflet map:

map <- leaflet() %>%
    addTiles(group = "OSM (default)") %>%
    addMarkers(quakes$lon, quakes$lat, group = quakes$stations,
               clusterOptions = markerClusterOptions(maxClusterRadius = 5,transparent=TRUE,singleMarkerMode=TRUE,zoomToBoundsOnClick=FALSE,
                                                    iconCreateFunction=JS(paste0("function(cluster) {
                                                        var c = ' marker-cluster-small';
                                                        var html = '&lt;div style=\"background-color:rgba(","#FF00DB",")\"&gt;&lt;span&gt;' + cluster.getChildCount() + '&lt;/div&gt;&lt;span&gt;'
                                                        return new L.DivIcon({html: html, className: 'marker-cluster' + c,iconSize: new L.Point(20, 20) });
                                                    }")))

Running the Map

Finally, we display the map:

map

This will render an interactive Leaflet map with custom icons.

Conclusion

Customizing icon size in Leaflet is achieved by modifying the iconCreateFunction option. This allows you to control the appearance of icons on your map without changing any other aspect of the marker’s behavior.

By following this guide, you can create your own custom icons for Leaflet maps using R and customize their appearance as needed.

Last modified on 2024-02-16