How can I add a compass control to my map? There used to be a function called addControlCompass in leaflet.extras I believe but is not there anymore. Does anyone know how to add a compass or an arrow indicating north up?

library(leaflet)
library(leaflet.extras)

# Create a basic Leaflet map
map <- leaflet() %>%
  addTiles() %>%
  setView(lng = -121.2722, lat = 38.1341, zoom = 10)  

# Add a scale bar and compass to the map
map <- map %>%
  addScaleBar(position = "bottomleft", options = scaleBarOptions(maxWidth = 100, metric = TRUE, imperial = FALSE)) %>%
  addControlCompass(position = "topright", options = compassOptions())
  map

How can I add a compass control to my map? There used to be a function called addControlCompass in leaflet.extras I believe but is not there anymore. Does anyone know how to add a compass or an arrow indicating north up?

library(leaflet)
library(leaflet.extras)

# Create a basic Leaflet map
map <- leaflet() %>%
  addTiles() %>%
  setView(lng = -121.2722, lat = 38.1341, zoom = 10)  

# Add a scale bar and compass to the map
map <- map %>%
  addScaleBar(position = "bottomleft", options = scaleBarOptions(maxWidth = 100, metric = TRUE, imperial = FALSE)) %>%
  addControlCompass(position = "topright", options = compassOptions())
  map

• r
• leaflet
• mapview

• Like described here from this post - it's a plugin I thought, which could be included using source. But it might be easier to add an arrow to the leaflet element manually :) – Tim G Commented 8 hours ago
• But I thought all leaflet maps can't be rotated and always have the north on top, so why would you want to add a compass? Unless you have a leaflet rotation plugin like this – Tim G Commented 8 hours ago
• How? With JavaScript (JS). Leaflet is a JS library. – Friede Commented 8 hours ago
• 1 I will be printing the map and want to show a compass showing north. An arrow pointing north also will work. I just want to show the users which way north is. – Salvador Commented 8 hours ago

1 Answer 1

If you just need an arrow pointing north, you can use some HTML + CSS and add it to the map using htmltools. You can take any arrow design and paste it inside the div.

library(leaflet)
library(htmltools) 

north_arrow <- HTML('
<div style="
    width: 20px;
    height: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 22px;
">
    <div>⮙</div> <!-- add arrow UTF8 symbol here -->
    <div>N</div>
</div>')

leaflet() %>%
  addTiles() %>%
  setView(lng = -121.2722, lat = 38.1341, zoom = 10) %>%
  addScaleBar(position = "bottomleft", options = scaleBarOptions(maxWidth = 100, metric = TRUE, imperial = FALSE)) %>%
  addControl(north_arrow, position = "topright")

Or a bit more fancy

library(leaflet)
library(htmltools) 


map <- leaflet() %>%
  addTiles() %>%
  setView(lng = -121.2722, lat = 38.1341, zoom = 10) %>%
  addScaleBar(position = "bottomleft", options = scaleBarOptions(maxWidth = 100, metric = TRUE, imperial = FALSE)) %>%
  addControl(HTML('
<div style="width: 90px;height: 90px;">
    <img src="https://clipart-library/images/rTnRjnAGc.png" style="width: 100%; width: 100%; opacity: 0.7;">
</div>'), position = "topright", className = "leaflet-control-nobg")

map <- htmlwidgets::prependContent(map, 
                                   tags$style(".leaflet-control-nobg { background: none !important; box-shadow: none !important; border: none !important; }")
)

map