I have information on the location of vessels/ships and the course they are steering. I'd like to plot them on a leaflet map with a custom icon which looks like a ship. I found the "tags"
icon from glyphicons
to be most suitable. Here's some data to play with:
dput(head(x))
structure(list(boatName = c("Conti Benguela", "Sunny Bay", "Sunny Horizon",
"FMT URLA", "Qi Xiang 22", "STI Solidarity"), lat = c(37.115365,
38.4772017, 14.632, 56.80515, 51.31172, -2.2783283), lon = c(15.2682183,
-8.7888783, -79.5806667, 7.601885, -143.5678933, 46.6328383),
cog = c("16", "331", "182", "21", "288", "72")), row.names = c(NA,
6L), class = "data.frame")
cog
indicates the course on ground which for the icon translates to the angle of rotation. I am using the following code for currently plotting the location of the vessel and the rotation as per the course the vessel is steering:
shipIcon <- makeAwesomeIcon("tag",iconRotate = x$cog)
leaflet() %>% addTiles() %>%
addAwesomeMarkers(lng=x$lon,lat=x$lat,icon=shipIcon,popup = x$boatName)
However as you can see, makeAwesomeIcon
adds a background marker to the icon that I don't want. I've had a look at this as well as this with the latter being exactly what I want to do. How can I achieve my task of showing a custom ship icon with rotation as per the course it is steering without a marker background?
Overview
To plot icon directions, I followed three steps:
To render HTML icons onto the leaflet map, I swapped
leaflet::makeAwesomeIcon()
forleaflet::makeIcon()
.To enable icon rotation, I stored a local copy of a leaflet.rotatedMarker.js file and registered this plugin as a leaflet object.
Finally, to specify how many degrees the icon should be rotated, I placed the
cog
variable inside of therotationAngle
argument within themarkerOptions()
fromleaflet::addMarkers()
.Note: Steps 2 and 3 were taken from both the answer and a comment on the SO question icon rotation in leaflet package. All credit goes to both @rrs and @Ufos.
Before doing anything, I ran your code and got the following leaflet map:
Using the
boat.icon
, the icons were rotated but much harder to read:Eventually, I decided to use bright orange
leaflet::addCircleMarkers()
and north arrow icons to show both the location and the angle of rotation:Code
Session Info