CODEWITHSUNDEEP
rleaflet
M.Qasim
M.Qasim

Reputation: 1878

Change color of leaflet marker

Is there anyway to change the color of leaflet marker base on the value of some variable. In the following map, for example, I wish to assign marker color based on mag variable:

library(leaflet)

data(quakes)

# Show first 20 rows from the `quakes` dataset
leaflet(data = quakes[1:20,]) %>% addTiles() %>%
  addMarkers(~long, ~lat, popup = ~as.character(mag))

Upvotes: 23

Views: 61134

Answers (5)

M.Qasim
M.Qasim

Reputation: 1878

This one worked for me:

Source: https://github.com/bhaskarvk/leaflet/blob/master/inst/examples/awesomeMarkers.R

library(leaflet)

icon.glyphicon <- makeAwesomeIcon(icon= 'flag', markerColor = 'blue', iconColor = 'black')
icon.fa <- makeAwesomeIcon(icon = 'flag', markerColor = 'red', library='fa', iconColor = 'black')
icon.ion <- makeAwesomeIcon(icon = 'home', markerColor = 'green', library='ion')

# Marker + Label
leaflet() %>% addTiles() %>%
  addAwesomeMarkers(
    lng=-118.456554, lat=34.078039,
    label='This is a label',
    icon = icon.glyphicon)

leaflet() %>% addTiles() %>%
  addAwesomeMarkers(
    lng=-118.456554, lat=34.078039,
    label='This is a label',
    icon = icon.fa)

leaflet() %>% addTiles() %>%
  addAwesomeMarkers(
    lng=-118.456554, lat=34.078039,
    label='This is a label',
    icon = icon.ion)

# Marker + Static Label using custom label options
leaflet() %>% addTiles() %>%
  addAwesomeMarkers(
    lng=-118.456554, lat=34.078039,
    label='This is a static label',
    labelOptions = labelOptions(noHide = T),
    icon = icon.fa)

Upvotes: 15

Bryan Butler
Bryan Butler

Reputation: 1850

I often use the circle markers because you can change both the size and color based on other variables. For example, I have created a binned variable from a continuous using the following code:

# first cut the continuous variable into bins
# these bins are now factors
last$BeatHomeLvl <- cut(last$BeatHome, 
                        c(0,.5,1,2,3,5,100), include.lowest = T,
                        labels = c('<.5x', '.5-1x', '1-2x', '2-3x', '3-5x','5x+'))

# then assign a palette to this using colorFactor
# in this case it goes from red for the smaller values to yellow and green
# standard stoplight for bad, good, and best
beatCol <- colorFactor(palette = 'RdYlGn', last$BeatHomeLvl)

When you plot it, I use the code for circle markers. The radius/area of the circle is based on the actual value of the factor and then color is assigned according to the bins.

m1 <- leaflet() %>%
  addTiles() %>%
  addProviderTiles(providers$OpenStreetMap, group = 'Open SM')  %>%
  addProviderTiles(providers$Stamen.Toner, group = 'Toner')  %>%
  addProviderTiles(providers$Esri.NatGeoWorldMap, group = 'NG World') %>%
  setView(lng = -72, lat = 41, zoom = 8) %>%

      addCircleMarkers(data = Jun, lat = ~Lat, lng = ~Lon,
                       color = ~beatCol(BeatHomeLvl), popup = Jun$Popup,
                       radius = ~sqrt(BeatHome*50), group = 'Home - Jun') %>%

At the end of your code add a legend. I added some formatting.

  addLegend('bottomright', pal = beatCol, values = last$BeatHomeLvl,
            title = 'Compare Home<br>Quote Count to<br>3Mos State Avg',
            opacity = 1)

This gives you color-coded and sized circles based on a variable and a nice legend.

enter image description here

Upvotes: 29

snkashis
snkashis

Reputation: 2991

Why not use vector markers based on svg (here is one example implementation - https://github.com/hiasinho/Leaflet.vector-markers) that you can apply any fill color you want to? Instead of having to create a large amount of static image files. Some code involved, yes, but a lot more flexible.

Upvotes: 5

jazzurro
jazzurro

Reputation: 23574

As far as I know, you need to assign an image file to one level of icon. For instance, if you have three levels in magnitude in the earthquake data, you need to create an icon list with three image paths. Then, you can have three different colors in markers. At least, the following example is getting closer to what you want. I edited a png file and created three png files. You need to specify the paths of the file when you make an icon list.

library(dplyr)
library(leaflet)

mutate(quakes, group = cut(mag, breaks = c(0, 5, 6, Inf), labels = c("blue", "green", "orange"))) -> mydf

### I edit this png file and created my own marker.
### https://raw.githubusercontent.com/lvoogdt/Leaflet.awesome-markers/master/dist/images/markers-soft.png
quakeIcons <- iconList(blue = makeIcon("/Users/jazzurro/Documents/Stack Overflow/blue.png", iconWidth = 24, iconHeight =32),
                       green = makeIcon("/Users/jazzurro/Documents/Stack Overflow/green.png", iconWidth = 24, iconHeight =32),
                       orange = makeIcon("/Users/jazzurro/Documents/Stack Overflow/orange.png", iconWidth = 24, iconHeight =32))


leaflet(data = mydf[1:100,]) %>% 
addTiles() %>%
addMarkers(icon = ~quakeIcons[group])

enter image description here

Upvotes: 22

iH8
iH8

Reputation: 28628

L.Marker uses images (one for the marker, one for the shadow) so that's not possible. You can however use your own images, there's a good write up on the topic among the tutorials on the Leaflet site:

http://leafletjs.com/examples/custom-icons.html

Upvotes: 2

Related Questions