Get (multiple) custom icons in leaflet from rCharts

Question

I am looking to create a map using rCharts/Leaflet but I cannot figure out how to create custom icons and use them.

Here is a solution, but I do not get it to work: https://github.com/ramnathv/rCharts/issues/301

L1$geoJson(toGeoJSON(data_), 
  pointToLayer =  "#! function(feature, latlng){
    return L.marker(latlng, {icon: L.Icon.extend({
      options: {
        shadowUrl: 'leaf-shadow.png',
        iconSize:     [38, 95],
        shadowSize:   [50, 64],
        iconAnchor:   [22, 94],
        shadowAnchor: [4, 62],
        popupAnchor:  [-3, -76]
      }})
    })
  } !#"
)

But I do not get it to work. And the iconUrl is not defined here so it is not even changed right? So I would be glad to have a reproducable example.

PS: Best case would be multiple icons. Has anybody a clue on that?

/edit:

OK i figured it out. I had to place the *.png files in the same folder as the index.html file was located, not the project folder. Is there a way to include them so that I can use the rStudio Viewer for that?

Answer 1

You can create new icons like

var myNewIcon = L.icon({
    iconUrl: 'my-icon.png',
    iconRetinaUrl: 'my-icon@2x.png',
    iconSize: [38, 95],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76],
    shadowUrl: 'my-icon-shadow.png',
    shadowRetinaUrl: 'my-icon-shadow@2x.png',
    shadowSize: [68, 95],
    shadowAnchor: [22, 94]
});

then reference it like return L.marker(latlng, {icon: myNewIcon}).I don't see you making a new instance of an icon in your posted code example, you're just extending the base class. I don't think you mean to extend the class in this case.