This is a short demo on how to customize the popup on hover in DataMaps
using rMaps
(v > 0.1.1)
Let us start by creating a simple choropleth map of crime rates
library(rMaps)
crime2010 = subset(violent_crime, Year == 2010)
choro = ichoropleth(Crime ~ State, data = crime2010)
You can customize the popup using the popupTemplate
option in DataMaps
. The popupTemplate
accepts a function with two arguments. The geography
argument pertains to the topojon map file, while the data
argument refers to the dataset that has been passed to DataMaps
. This function returns a string. In the example below, I have customized the popupTemplate
to display the state name using geography.properties.name
and the crime rate using data.Crime
.
choro$set(geographyConfig = list(
popupTemplate = "#! function(geography, data){
return '<div class=hoverinfo><strong>' + geography.properties.name +
': ' + data.Crime + '</strong></div>';
} !#"
))
You can also create the popup in R if you are more comfortable doing that.
crime2010 = transform(crime2010,
popup = sprintf("<strong>State:</strong> %s <br/><strong>Crime:</strong> %s",
State, Crime
)
)
You can now pass this on to popupTemplate
.
choro$set(geographyConfig = list(
popupTemplate = "#! function(geography, data){
return '<div class=hoverinfo>' + data.popup + '</div>';
} !#"
))
choro
I plan to make it simpler to handle popups in the next version of rMaps
, so that you will be able to pass a mustache
template and not have to bother with javascript.
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://d3js.org/topojson.v1.min.js to a secure url
Modified http://datamaps.github.io/scripts/datamaps.all.min.js to a secure url
Modified http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://d3js.org/topojson.v1.min.js
https://datamaps.github.io/scripts/datamaps.all.min.js
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js