interactive map with leafletR variable point size - r

Question

I create an interactive map as follows:
library(leafletR)
data(quakes)
# store data in GeoJSON file (just a subset here)
q.dat <- toGeoJSON(data=quakes[1:99,], dest=tempdir(), name="quakes")
# make style based on quake magnitude
q.style <- styleGrad(prop="mag", breaks=seq(4, 6.5, by=0.5), style.val=rev(heat.colors(5)), leg="Richter Magnitude", fill.alpha=0.7, rad=8)
# create map
q.map <- leaflet(data=q.dat, dest=tempdir(), title="Fiji Earthquakes", base.map="osm", style=q.style, popup="mag")
# view map in browser
rstudio::viewer(q.map)
Now, I want to make the size of the circle dependent on another variable. Let's say the variable 'stations'. How can I do this? If it is not possible with this package, I am open to use another package ... as long as I can put a legend, the map is interactive, a pop-up appear when clicked on and the color can depend on the value of a continuous variable.

Answer 1

I read through the documentation for the leafletR package, and it seems to me (and I could be wrong) that the current version doesn't support multiple styles for the same dataset. They give a few examples where they combine 2 styleSingles by listing them (e.g. style=list(sty.1, sty.2)), but that only works in conjunction with listing 2 different datasets (see P.8 in the document for more details). I tried various tricks, but none of them worked for me.
However, I came up with a hacky solution that you might want to try. After the html page is created using the leaflet() function, you can edit the Javascript code that handles the styling to make the radius property dynamic (this could also work for the other styling properties, such as fill, alpha, etc.).
What you need to know:
In the HTML document that leaflet creates, search for the definition of the style1(feature) function. You should find the following segment of code:
function style1(feature) {
return {"color": getValue(feature.properties.mag),
"fillOpacity": 0.7,
"radius": 8};
}
This function basically returns the style for each record in your dataset. As you can see, the function in its current form returns a static value for fillOpacity and radius. However, when it comes to color, it calls another function called getValue and passes it the mag (magnitude) property. If we take a look at the definition of the getValue function, we'll see that it simply defines the magnitude ranges for each color:
function getValue(x) {
return x >= 6.5 ? "#808080" :
x >= 6 ? "#FF0000" :
x >= 5.5 ? "#FF5500" :
x >= 5 ? "#FFAA00" :
x >= 4.5 ? "#FFFF00" :
x >= 4 ? "#FFFF80" :
"#808080";
}
The function definition is really simple. If x (the magnitude in this case) is greater or equal to 6.5, then the color of that data point will be "#808080". If it's between 6 and 6.5, then the color will be #FF0000". And so on and so forth.
What you can do:
Now that we see how the Javascript code handles how the colors are assigned to each data point, we can do something similar for all the other styling properties with very minimal effort. The following code segment, for instance, shows how you can make the radius dynamic based on the count of stations in the area:
/* The getValue function controls the color of the data points */
function getValue(x) {
return x >= 6.5 ? "#808080" :
x >= 6 ? "#FF0000" :
x >= 5.5 ? "#FF5500" :
x >= 5 ? "#FFAA00" :
x >= 4.5 ? "#FFFF00" :
x >= 4 ? "#FFFF80" :
"#808080";
}
/* The getRadValue function controls the radius of the data points */
function getRadValue(x) {
return x >= 100 ? 24 :
x >= 80 ? 20 :
x >= 60 ? 16 :
x >= 40 ? 12 :
8;
}
/* The updated definition of the style1 function */
function style1(feature) {
return {"color": getValue(feature.properties.mag),
"fillOpacity": 0.7,
"radius": getRadValue(feature.properties.stations)
};
}
So, with the new definition of style1(feature), now we can control both the color as well as the radius of the data points. The result of the code modification looks like this:
The good thing about this approach is that it gives you more fine-grained control over the styling properties and the range of values that they can have. The major draw-back is going to be that if you want to add a legend for those properties, then you'll have to do that manually. The logic for adding/editing the legend should be at the very bottom of the HTML document, and if you know Javascript/HTML/CSS, editing that code segment shouldn't be too difficult.
Update:
To add a legend for the new dynamic variable (in our case, the radius), you need to edit the .onAdd handler that's attached to the legend object. As I said before, the definition for this handler is usually at the bottom of the html page, and if we run the bit of code that you provided in your question, then the handler should look like this:
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'legend');
var labels = [];
var grades = [4, 4.5, 5, 5.5, 6, 6.5];
div.innerHTML += 'Richter Magnitude<br>';
for (var i = 0; i < grades.length - 1; i++) {
div.innerHTML += '<i style="background:' + getValue(grades[i]) + '"></i> ' + grades[i] + '–' + grades[i + 1] + '<br>';
}
return div;
};
The above code simply loops through the range of values for the magnitude, and creates a box (with the appropriate color, referencing the getValue function that we looked at before) and a label. If you want to create something similar for the stations variable, let's say, we can use the same logic above. Though in this case instead of varying the color, we'll be varying the size of the circle. The following segment of code shows how to achieve that:
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'legend');
var labels = [];
var grades = [4, 4.5, 5, 5.5, 6, 6.5];
div.innerHTML += 'Richter Magnitude<br>';
for (var i = 0; i < grades.length - 1; i++) {
div.innerHTML += '<i style="background:' + getValue(grades[i]) + '"></i> ' + grades[i] + '–' + grades[i + 1] + '<br>';
}
// Adding the range of possible of values that the variable might take
// This should be in sync with the range of values you considered in
// the getRadValue function.
var rad_grades = [40, 60, 80, 100];
// The title for this section of the legend
div.innerHTML += 'Number of stations<br>'
for (var i = 0; i < rad_grades.length - 1; i++) {
div.innerHTML += '<table style="border: none;"><tr><td class="circle" style="width: ' +
(getRadValue(rad_grades[rad_grades.length - 2]) * 2 + 6) + 'px;"><svg style="width: ' +
(getRadValue(rad_grades[i]) * 2 + 6) + 'px; height: ' + (getRadValue(rad_grades[i]) * 2 + 6) +
'px;" xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="' + (getRadValue(rad_grades[i]) + 3) + '" cy="' +
(getRadValue(rad_grades[i]) + 3) + '" r="' + getRadValue(rad_grades[i]) + '" /></svg></td><td class="value">' +
rad_grades[i] + '–' + rad_grades[i + 1] + '</td></tr></table>';
}
return div;
};
As you can see, the type of styling property we're controlling will determine how we're specifying it in the legend. If you want to add a legend for the alpha property, for instance, then you might want to try some other approach other than using circles and controlling their width and height. The end result of the code modifications above looks like this:
Also, if you want to include the number of stations in the popup, then you'll have to edit the onEachFeature function. It's going to be the same approach we took with all the other modifications, and it's a really simple change.
The onEachFeature function looks like this in the original HTML:
function onEachFeature(feature, layer) {
if (feature.properties && feature.properties.mag) {
layer.bindPopup("mag: " + feature.properties.mag);
}
}
If you want to include the number of stations in the popup too, then you need to include it in the argument to the bindPopup method, as follows:
function onEachFeature(feature, layer) {
if (feature.properties && feature.properties.mag && feature.properties.stations) {
layer.bindPopup("mag: " + feature.properties.mag + "<br> # Stations: " + feature.properties.stations);
}
}
The end result of this change is the following:
Hope this helps.